@charset "UTF-8";
 *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important} :root {
--black: #1A1A1A;
--white: #efefef;
--pureWhite: #fefefe;
--darkGray01: #282828;
--darkGray02: #343434;
--gray01: #4c4c4c;
--gray02: #646464;
--lightGray01: #959595;
--lightGray02: #bcbcbc;
--accent: #DC0032;
--font-size-default: 16px;
}
html {
overflow-y: scroll;
scroll-behavior: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
html::-webkit-scrollbar {
display:none;
}
body {
font: 400 16px/1.75 Inter, Noto Sans JP, system-ui;
color: var(--white);
background: var(--black);
width: 100%;
position: fixed;
inset: 0;
overflow-x: clip;
}
body.isActive {
position: relative;
inset: auto;
}
body.isFixed {
width: 100%;
position: fixed;
inset: 0;
}
a:link,
a:visited {
color: var(--white);
text-decoration: none;
transition: .5s ease;
}
@media (any-hover: hover) {
a:hover,
a:active {
color: var(--white);
text-decoration: none;
}
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
}
@view-transition {
navigation: auto;
} @media (max-width: 1024px) {
}
@media (max-width: 640px) {
body {
font-size: 14px;
}
} #body {
transition: .5s ease;
}
#body.isLightMode {
background: #fefefe;
} #noise {
width: 100%;
height: 100%;
position: fixed;
inset: 0;
overflow: hidden;
opacity: .4;
z-index: -1;
}
#noise::before {
display: block;
content: ''; background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/noise.webp) repeat center center / 750px 750px;
width: 200%;
height: 200%;
position: fixed;
top: -100%;
left: -100%;
animation: noise 8s steps(10) infinite;
}
@keyframes noise {
to {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
} .ttCommonPro { font-family: "tt-commons-pro", Noto Sans JP, system-ui;
font-style: normal;
}
.fw100 { font-weight: 100; }
.fw200 { font-weight: 200; }
.fw300 { font-weight: 300; }
.fw400 { font-weight: 400; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }
.fw800 { font-weight: 800; }
.fw900 { font-weight: 900; } .textBox > * {
width: 100%;
margin-bottom: 1.75em;
}
.textBox > *:first-child {
margin-top: 0;
}
.textBox > *:last-child {
margin-bottom: 0;
}
.ls-200 { letter-spacing: -.2em; }
.ls-175 { letter-spacing: -.175em; }
.ls-150 { letter-spacing: -.15em; }
.ls-125 { letter-spacing: -.125em; }
.ls-100 { letter-spacing: -.1em; }
.ls-75 { letter-spacing: -.075em; }
.ls-50 { letter-spacing: -.05em; }
.ls-25 { letter-spacing: -.025em; }
.ls25 { letter-spacing: .025em; }
.ls50 { letter-spacing: .05em; }
.ls75 { letter-spacing: .075em; }
.ls100 { letter-spacing: .1em; }
.ls125 { letter-spacing: .125em; }
.ls150 { letter-spacing: .15em; }
.ls175 { letter-spacing: .175em; }
.ls200 { letter-spacing: .2em; }
.symbol {
margin: 0 .1em;
}
.punctuation {
margin: 0 0 0 .1em;
}
.bracketOpen {
margin: 0 .15em 0 -.35em;
}
.bracketClose {
margin: 0 -.35em 0 .15em;
}
.etc {
font-size: .75em;
margin-left: .5em;
}  * > .inner {
width: 92%;
margin: 0 auto;
} .flexDirectionColumn {
display: flex;
flex-direction: column;
}  .pic {
display: block;
width: 100%;
padding: 0;
box-sizing: border-box;
position: relative;
}
.pic > .img {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-top: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.thumb {
display: block;
overflow: hidden;
}
.thumb .img {
display: block;
transition: .3s ease;
}
@media (any-hover: hover) {
a:hover .thumb .img {
transform: scale(1.1);
}
} .rollUp a,
.rollUp button {
display: block;
position: relative;
transition: .5s ease;
}
.rollUp a .rollUpText,
.rollUp button .rollUpText {
line-height: 1;
position: relative;
overflow: hidden;
white-space: nowrap;
display: flex;
flex-direction: column;
justify-content: center;
}
.rollUp a .rollUpText > span,
.rollUp button .rollUpText > span {
display: block;
}
.rollUp a .rollUpText > span:nth-of-type(1),
.rollUp button .rollUpText > span:nth-of-type(1) {
position: relative;
transition: 0.5s transform cubic-bezier(.275,0,0,1);
transform: translateY(0);
}
.rollUp a .rollUpText > span:nth-of-type(2),
.rollUp button .rollUpText > span:nth-of-type(2) {
width: 100%;
position: absolute;
top: 100%;
left: 0;
transform: translateY(0%);
transition: 0.5s all cubic-bezier(.275,0,0,1);
}
@media (any-hover: hover) {
.rollUp a:hover .rollUpText > span:nth-of-type(1),
.rollUp button:hover .rollUpText > span:nth-of-type(1) {
transform: translateY(-100%);
}
.rollUp a:hover .rollUpText > span:nth-of-type(2),
.rollUp button:hover .rollUpText > span:nth-of-type(2) {
top: 0;
}
}
.rollUp a .rollUpText > span:nth-of-type(2) > span,
.rollUp button .rollUpText > span:nth-of-type(2) > span {
position: absolute;
top: 1px;
left: 50%;
transform: translate(-50%, 0);
}
@media (max-width: 1280px) {
}
@media (max-width: 960px) {
}
@media (max-width: 640px) {
} .split {
opacity: 0;
will-change: transform;
}
.split * {
will-change: transform;
} .btn a {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 14px;
position: relative;
width: 136px;
height: 64px;
overflow: hidden;
}
.btn a::before {
display: block;
content: '';
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
bottom: 0;
left: 0;
}
.btn a:hover::before {
animation: btnUnderline 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes btnUnderline {
0%, 20% {
transform: translateX(0);
}
50% {
transform: translateX(105%);
}
51%, 70% {
transform: translateX(-105%);
}
100% {
transform: translateX(0);
}
}
.btn a .btnArrow {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
width: 11px;
height: 11px;
overflow: hidden;
}
.btn a .btnArrowBefore,
.btn a .btnArrowAfter {
display: block;
width: 11px;
height: 11px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
.btn a .btnArrowAfter {
transform: translateX(-100%);
}
.btn a:hover .btnArrowBefore {
animation-name: btnArrowFromRightToLeft;
animation-delay: 0s;
}
.btn a:hover .btnArrowAfter {
animation-name: btnArrowFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes btnArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes btnArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
.btn a .btnArrow svg path {
fill: #efefef;
} .btn.isLightMode a {
color: #1a1a1a;
}
.btn.isLightMode a::before {
background: #1a1a1a;
}
.btn.isLightMode a .btnArrow svg path {
fill: #1a1a1a;
} .blurFadeIn {
opacity: 0;
visibility: hidden;
filter: blur(8px);
transform: scale(1.05);
transition: 1s ease;
}
.blurFadeIn.isActive {
opacity: 1;
visibility: visible;
filter: blur(0);
transform: scale(1);
} .loadingLogo {
width: 100%;
height: 100dvh;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
animation: loadingLogo ease 2s forwards;
}
@keyframes loadingLogo {
0% {
opacity: 0;
visibility: hidden;
}
72% {
opacity: 1;
visibility: visible;
}
}
.loadingCatch {
width: 100%;
height: 100dvh;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
opacity: 1;
transition: .5s ease;
} .loadingCatch.isPassive {
opacity: 0;
} #wrapper {
width: 100%;
opacity: 0;
visibility: hidden;
position: relative;
z-index: 2;
}
#wrapper.isActive {
animation: wrapperFadeIn ease 2s forwards;
}
@keyframes wrapperFadeIn {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
} #header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
overflow: hidden;
transition: .5s ease;
}
#header > .inner {
height: 88px;
padding: 24px 0 0;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
#header .logo {
width: 28px;
height: 28px;
flex-shrink: 0;
position: relative;
overflow: hidden;
opacity: 1;
visibility: visible;
transition: .5s ease;
}
#header .logo a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#header.isActive .logo a {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
#header .logo svg path {
fill: #efefef;
transition: .3s ease;
}
#header #globalNav {
position: absolute;
top: auto;
left: 50%;
transform: translate(-50%, 0);
opacity: 1;
visibility: visible;
transition: .5s ease;
}
#header.isPassive #globalNav {
opacity: 0;
visibility: hidden;
}
#globalNav > .inner {
width: 100%;
}
#globalNav .globalNavItems ul {
display: flex;
align-items: center;
column-gap: 48px;
}
#globalNav .globalNavItem {
margin: 0 -8px;
}
#globalNav .globalNavItem01 {
margin: 0 -16px;
}
#globalNav .globalNavItem a {
font-size: 14px;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#header #globalNav .globalNavItem a .globalNavItemSplit {
padding: 0 8px;
line-height: 1;
overflow: hidden;
}
#header #globalNav .globalNavItem01 a .globalNavItemSplit {
padding: 0 16px;
}
#header #globalNav .globalNavItem a .globalNavItemText {
padding: 0 8px;
align-items: center;
position: relative;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#header.isActive #globalNav .globalNavItem a .globalNavItemText {
transform: translate(0, 0);
opacity: 1;
visibility: visible;
}
#header #globalNav .globalNavItem01 a .globalNavItemText {
padding: 0 16px;
}
#globalNav .globalNavItem a .globalNavItemText > span {
display: block;
text-align: center;
}
#globalNav .globalNavItem a .globalNavItemText > span:nth-of-type(1) {
font-size: 14px;
}
#globalNav .globalNavItem a .globalNavItemText > span:nth-of-type(2) {
font-size: 12px;
}
#header .headerContents {
opacity: 0;
visibility: hidden;
}
#header.isActive .headerContents {
opacity: 1;
visibility: visible;
}
@media (max-width: 1024px) {
#header > .inner {
height: 72px;
padding-top: 8px;
}
#header .logo {
top: 8px;
left: 0px;
}
#globalNav {
display: none;
}
}
@media (max-width: 640px) {
#header > .inner {
height: 64px;
padding-top: 0;
}
#header .logo {
top: 8px;
left: 6px;
}
} #header.isLightMode .logo svg path {
fill: #1a1a1a;
}
#header.isLightMode.isPassive .logo svg path {
fill: #efefef;
}
#header.isLightMode #globalNav .globalNavItem a {
color: #1a1a1a;
} #navicon {
display: block;
width: 64px;
height: 64px;
position: relative;
right: -23px;
overflow: hidden;
}
#header #navicon button {
all: unset;
display: block;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
#navicon button::before {
display: block;
content: '';
width: 100%;
height: 100%;
background: none;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .3s ease;
}
#navicon:hover button::before {
background: #2e2e2e;
transform: translate(-50%, -50%) scale(.7);
transition: .3s ease;
}
#navicon .naviconDots {
width: 17px;
height: 17px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
#header #navicon .naviconDots > .inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#header.isActive #navicon .naviconDots > .inner {
transform: translate(0, 0);
opacity: 1;
visibility: visible;
}
#navicon .naviconDots > .inner > span {
display: block;
width: 3px;
height: 3px;
background: #efefef;
border-radius: 50%;
position: absolute;
transition: .3s ease;
}
#navicon .naviconDots > .inner > span:nth-of-type(1) {
top: 0;
left: 0;
}
#navicon .naviconDots > .inner > span:nth-of-type(2) {
top: 0;
left: 7px;
}
#navicon .naviconDots > .inner > span:nth-of-type(3) {
top: 0;
left: 14px;
}
#navicon .naviconDots > .inner > span:nth-of-type(4) {
top: 7px;
left: 0;
}
#navicon .naviconDots > .inner > span:nth-of-type(5) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#navicon .naviconDots > .inner > span:nth-of-type(6) {
top: 7px;
left: 14px;
}
#navicon .naviconDots > .inner > span:nth-of-type(7) {
top: 14px;
left: 0;
}
#navicon .naviconDots > .inner > span:nth-of-type(8) {
top: 14px;
left: 7px;
}
#navicon .naviconDots > .inner > span:nth-of-type(9) {
top: 14px;
left: 14px;
}
#navicon:hover .naviconDots > .inner > span:nth-of-type(1),
#navicon:hover .naviconDots > .inner > span:nth-of-type(2),
#navicon:hover .naviconDots > .inner > span:nth-of-type(3),
#navicon:hover .naviconDots > .inner > span:nth-of-type(4),
#navicon:hover .naviconDots > .inner > span:nth-of-type(6),
#navicon:hover .naviconDots > .inner > span:nth-of-type(7),
#navicon:hover .naviconDots > .inner > span:nth-of-type(8),
#navicon:hover .naviconDots > .inner > span:nth-of-type(9) {
top: 7px;
left: 7px;
}
#navicon:hover .naviconDots > .inner > span:nth-of-type(5) {
width: 9px;
height: 9px;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
#navicon {
right: -16px;
}
} #navicon.isActive button::before,
#navicon.isActive:hover button::before {
background: #efefef;
transform: translate(-50%, -50%) scale(.7);
}
#navicon.isActive .naviconDots > .inner > span,
#navicon.isActive:hover .naviconDots > .inner > span {
background: #1A1A1A;
}
#navicon.isActive .naviconDots > .inner > span:nth-of-type(1) {
top: 0;
left: 0;
}
#navicon.isActive .naviconDots > .inner > span:nth-of-type(3) {
top: 0;
left: 14px;
}
#navicon.isActive .naviconDots > .inner > span:nth-of-type(7) {
top: 14px;
left: 0;
}
#navicon.isActive .naviconDots > .inner > span:nth-of-type(9) {
top: 14px;
left: 14px;
}
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(1),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(2),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(2),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(3),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(4),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(4),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(6),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(6),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(7),
#navicon.isActive .naviconDots > .inner > span:nth-of-type(8),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(8),
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(9) {
top: 7px;
left: 7px;
}
#navicon.isActive:hover .naviconDots > .inner > span:nth-of-type(5) {
width: 9px;
height: 9px;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} #header.isLightMode #navicon:hover button::before {
background: #efefef;
}
#header.isLightMode #navicon .naviconDots > .inner > span {
background: #1a1a1a;
} #hamburgerMenu {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: .3s ease;
}
#hamburgerMenu.isActive {
opacity: 1;
visibility: visible;
}
#hamburgerMenu > .hamburgerMenuBg {
background: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
padding: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
#hamburgerMenu.isActive > .hamburgerMenuBg {
opacity: 1;
visibility: visible;
}
#hamburgerMenu .hamburgerMenuBgCircle {
background: var(--black);
width: 0;
height: 0;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
transition: 2s cubic-bezier(.075,.82,.165,1);
pointer-events: none;
}
#hamburgerMenu.isActive .hamburgerMenuBgCircle {
width: 5120px;
height: 5120px;
transform: translate(50%, -50%);
overflow: hidden;
}
#hamburgerMenu > .inner {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
padding: 0;
opacity: 0;
visibility: hidden;
overflow-y: visible;
overflow-x: hidden;
-ms-overflow-style: none;
display: block;
transition: .5s ease;
}
#hamburgerMenu.isActive > .inner {
opacity: 1;
visibility: visible;
}
#hamburgerMenu > .inner .hamburgerMenuNoise {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
overflow: hidden;
opacity: .4;
z-index: 0;
}
#hamburgerMenu > .inner .hamburgerMenuNoise::before {
display: block;
content: '';
background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/noise.webp);
width: 400%;
height: 400%;
position: absolute;
top: -200%;
left: -200%;
animation: noise 8s steps(10) infinite;
} 
#hamburgerMenuImg {
position: fixed;
top: 0;
left: 0;
width: 33.33%;
height: 100%;
min-height: 844px;
opacity: 0;
visibility: hidden;
transform: translate3d(-4%, 0, 0);
overflow: clip;
z-index: 0;
background: #0f0f0f;
will-change: animation;
backface-visibility: hidden;
overflow: hidden;
}
#hamburgerMenuImg.isActive {
animation: hamburgerMenuImgFadeIn 2s ease .5s forwards;
}
@keyframes hamburgerMenuImgFadeIn {
0% {
opacity: 0;
visibility: hidden;
transform: translate3d(-4%, 0, 0);
}
100% {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
}
#hamburgerMenuImg::before {
display: block;
content: '';
width: 48px;
height: 100%;
background: linear-gradient(270deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 100%);
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
#hamburgerMenuImgParallaxArea {
width: 100%;
height: 100%;
transition: .5s ease;
}
#hamburgerMenuImgParallaxObject {
width: 100%;
height: 100%;
position: absolute;
}
#hamburgerMenuImgParallaxObject .hamburgerMenuImgParallaxObjectTerget {
width: 104%;
height: 104%;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/bamboo_w.webp) no-repeat right center / cover;
opacity: .04;
will-change: transform;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
#hamburgerMenu .hamburgerMenuContent {
position: absolute;
width: 66.66%;
height: 100%;
top: 0;
right: 0;
}
#hamburgerMenu .hamburgerMenuContent > .inner {
width: 100%;
height: 100%;
padding: 64px 80px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#hamburgerMenu .hamburgerMenuNav {
display: flex;
flex-wrap: wrap;
gap: 88px;
}
#hamburgerMenu .hamburgerMenuNavUnits {
display: flex;
gap: 64px;
}
#hamburgerMenu .hamburgerMenuNavUnit ul {
display: flex;
flex-direction: column;
gap: 24px;
}
#hamburgerMenu .hamburgerMenuItem {
overflow: hidden;
}
#hamburgerMenu .hamburgerMenuItem a {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
@keyframes hamburgerMenuItemRollUp {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
#hamburgerMenu a .hamburgerMenuItemTextEnWrapper {
overflow: hidden;
}
#hamburgerMenu a .hamburgerMenuItemTextEn {
display: flex;
align-items: flex-end;
gap: 8px;
font-size: 44px;
line-height: 1;
position: relative;
overflow: hidden;
transform: translate(0, 100%);
}
#hamburgerMenu.isActive a .hamburgerMenuItemTextEn {
animation: hamburgerMenuItemRollUp 1s ease .5s forwards;
}
#hamburgerMenu a .hamburgerMenuItemTextEnArrow {
display: block;
position: relative;
bottom: 6px;
width: 13px;
height: 13px;
overflow: hidden;
}
#hamburgerMenu a .hamburgerMenuItemTextEnArrowBefore,
#hamburgerMenu a .hamburgerMenuItemTextEnArrowAfter {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#hamburgerMenu a .hamburgerMenuItemTextEnArrowAfter {
transform: translateX(-100%);
}
#hamburgerMenu a:hover .hamburgerMenuItemTextEnArrowBefore {
animation-name: hamburgerMenuItemTextEnArrowFromRightToLeft;
animation-delay: 0s;
}
#hamburgerMenu a:hover .hamburgerMenuItemTextEnArrowAfter {
animation-name: hamburgerMenuItemTextEnArrowFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes hamburgerMenuItemTextEnArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes hamburgerMenuItemTextEnArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
#hamburgerMenu a .hamburgerMenuItemTextEnArrow svg path {
fill: #efefef;
}
#hamburgerMenu .hamburgerMenuItemTextJaWrapper {
display: block;
overflow: hidden;
}
#hamburgerMenu .hamburgerMenuItemTextJa {
display: block;
font-size: 14px;
color: #777;
transform: translate(0, 100%);
}
#hamburgerMenu.isActive .hamburgerMenuItemTextJa {
animation: hamburgerMenuItemRollUp 1s ease 1s forwards;
}
#hamburgerMenu .hamburgerMenuNavSubUnits {
padding: 4px 0 0;
}
#hamburgerMenu .hamburgerMenuNavSubUnit ul {
display: flex;
flex-direction: column;
gap: 20px;
}
#hamburgerMenu .hamburgerMenuItemSub {
font-size: 16px;
}
#hamburgerMenu .hamburgerMenuItemSub .hamburgerMenuItemSplit {
overflow: hidden;
}
#hamburgerMenu .hamburgerMenuItemSub .hamburgerMenuItemSubText {
transform: translate(0, 100%);
}
#hamburgerMenu.isActive .hamburgerMenuItemSub .hamburgerMenuItemSubText {
animation: hamburgerMenuItemRollUp 1s ease 1s forwards;
}
#hamburgerMenu .hamburgerMenuFooter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 48px;
margin-top: 88px;
}
#hamburgerMenu .hamburgerMenuSocialItems ul {
display: flex;
align-items: center;
gap: 24px;
}
#hamburgerMenu .hamburgerMenuSocialItem {
overflow: hidden;
}
#hamburgerMenu .hamburgerMenuSocialItemNote {
padding: 4px 0 0;
}
#hamburgerMenu .hamburgerMenuSocialItem a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 24px;
height: 28px;
transform: translate(0, 100%);
}
#hamburgerMenu.isActive .hamburgerMenuSocialItem a {
animation: hamburgerMenuItemRollUp 1.5s ease 1s forwards;
}
#hamburgerMenu .hamburgerMenuSocialItem a .hamburgerMenuItemIcon > span:nth-of-type(1),
#hamburgerMenu .hamburgerMenuSocialItem a .hamburgerMenuItemIcon > span:nth-of-type(2) {
height: 28px;
}
#hamburgerMenu  .hamburgerMenuSocialItem a svg path {
fill: #efefef;
}
@media (max-width: 1024px) {
#hamburgerMenu .hamburgerMenuContent > .inner {
padding: 64px 64px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#hamburgerMenu .hamburgerMenuNav {
flex-direction: column;
gap: 56px;
}
#hamburgerMenu .hamburgerMenuNavUnits {
flex-direction: column;
gap: 16px;
}
#hamburgerMenu .hamburgerMenuNavUnit ul {
gap: 16px;
}
#hamburgerMenu .hamburgerMenuItem a {
gap: 4px;
}
#hamburgerMenu a .hamburgerMenuItemTextEn {
gap: 8px;
font-size: 32px;
}
#hamburgerMenu .hamburgerMenuFooter {
margin-top: 80px;
}
}
@media (max-width: 640px) {
#hamburgerMenuImg {
width: 20%;
}
#hamburgerMenu .hamburgerMenuContent {
width: 80%;
}
#hamburgerMenu .hamburgerMenuContent > .inner {
padding: 64px 40px 40px;
}
#hamburgerMenu .hamburgerMenuNav {
gap: 48px;
}
#hamburgerMenu a .hamburgerMenuItemTextEn {
gap: 6px;
font-size: 28px;
}
#hamburgerMenu a .hamburgerMenuItemTextEnArrow {
bottom: 4px;
width: 12px;
height: 12px;
}
#hamburgerMenu a .hamburgerMenuItemTextEnArrowBefore,
#hamburgerMenu a .hamburgerMenuItemTextEnArrowAfter {
width: 12px;
height: 12px;
}
#hamburgerMenu .hamburgerMenuItemTextJa {
font-size: 12px;
}
#hamburgerMenu .hamburgerMenuNavSubUnit ul {
gap: 16px;
}
#hamburgerMenu .hamburgerMenuItemSub {
font-size: 14px;
}
#hamburgerMenu .hamburgerMenuFooter {
margin-top: 64px;
}
} #getInTouch {
position: fixed;
right: 48px;
bottom: 64px;
z-index: 10000;
transform: scale(0);
opacity: 0;
visibility: hidden;
}
#getInTouch.isActive {
animation: getInTouchFadeIn 1s cubic-bezier(.05,.89,.16,1.59) 1s forwards;
}
@keyframes getInTouchFadeIn {
0% {
transform: translate(0, 100%) rotateZ(0) scale(0);
opacity: 0;
visibility: hidden;
}
100% {
transform: translate(0, 0) rotateZ(360deg) scale(1);
opacity: 1;
visibility: visible;
}
}
#getInTouchLink {
display: block;
width: 168px;
height: 168px;
position: relative;
}
#getInTouchLink .getInTouchTextContainer {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: 0.5s transform cubic-bezier(.275,0,0,1);
}
#getInTouchLink:hover .getInTouchTextContainer {
transform: translate(-50%, -50%) scale(1.25);
}
#getInTouchLink .getInTouchText {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: getInTouchRotate 16s linear infinite;
}
@keyframes getInTouchRotate {
0% {
transform: translate(-50%, -50%) rotateZ(0);
}
100% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
#getInTouchLink .getInTouchText svg {
width: 100%;
}
#getInTouchLink .getInTouchText svg path {
fill: #efefef;
transition: .5s ease;
}
#getInTouchLink .getInTouchPlaneContainer {
display: block;
width: 72px;
height: 72px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#getInTouchLink .getInTouchPlaneContainer::before {
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: #efefef;
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.2);
transition: 0.5s transform cubic-bezier(.275,0,0,1);
}
#getInTouchLink:hover .getInTouchPlaneContainer::before {
transform: translate(-50%, -50%) scale(1);
}
#getInTouchLink .getInTouchPlaneBg {
display: block;
width: 28px;
height: 28px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: 0.5s transform cubic-bezier(.275,0,0,1);
}
#getInTouchLink:hover .getInTouchPlaneBg {
opacity: 1;
visibility: visible;
}
#getInTouchLink #getInTouchPlane {
display: block;
width: 28px;
height: 28px;
position: absolute;
top: calc(50% + 2px);
left: calc(50% - 3px);
transform: translate(-50%, -50%);
overflow: hidden;
transition: .3s ease;
}
#getInTouchLink #getInTouchPlane .getInTouchPlaneBefore,
#getInTouchLink #getInTouchPlane .getInTouchPlaneAfter {
display: block;
width: 28px;
height: 28px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: both;
animation-duration: 0.6s;
}
#getInTouchLink #getInTouchPlane .getInTouchPlaneAfter {
transform: translateX(-100%);
}
#getInTouchLink.isActive #getInTouchPlane .getInTouchPlaneBefore {
animation-name: planeFromLeftToRight;
animation-delay: 0.2s;
}
#getInTouchLink.isActive #getInTouchPlane .getInTouchPlaneAfter {
animation-name: planeFromRightToLeft;
}
#getInTouchLink.isActive:hover #getInTouchPlane .getInTouchPlaneBefore {
animation-name: planeFromRightToLeft;
animation-delay: 0s;
}
#getInTouchLink.isActive:hover #getInTouchPlane .getInTouchPlaneAfter {
animation-name: planeFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes planeFromLeftToRight {
0% {
transform: translate(-100%, 100%);
opacity: 0;
}
100% {
transform: translate(0);
opacity: 1;
}
}
@keyframes planeFromRightToLeft {
0% {
transform: translate(0);
opacity: 1;
}
100% {
transform: translate(100%, -100%);
opacity: 0;
}
}
#getInTouchLink #getInTouchPlane svg path {
fill: #1a1a1a;
transition: .5 ease;
}
@media (max-width: 1024px) {
#getInTouch {
right: 40px;
bottom: 40px;
}
#getInTouchLink {
width: 152px;
height: 152px;
}
#getInTouchLink .getInTouchPlaneContainer {
width: 64px;
height: 64px;
}
}
@media (max-width: 640px) {
#getInTouch {
right: 32px;
bottom: 32px;
}
#getInTouchLink {
width: 128px;
height: 128px;
}
} #getInTouch.isLightMode #getInTouchLink .getInTouchText svg path {
fill: #1a1a1a;
transition: .5s ease;
}
#getInTouch.isLightMode #getInTouchLink .getInTouchPlaneContainer::before {
background: #1a1a1a;
}
#getInTouch.isLightMode #getInTouchLink #getInTouchPlane svg path {
fill: #efefef;
} #footer {
width: 100%;
height: calc(100dvh + 40px);
position: relative;
color: var(--white);
}
#footer.isLightMode {
color: var(--black);
}
#footer > .inner {
height: 100%;
position: relative;
padding: 224px 8% 120px 0;
display: flex;
justify-content: space-between;
gap: 12%;
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#footer.isActive > .inner {
opacity: 1;
visibility: visible;
}
#footer .footerContactWrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 120px 0 0;
}
#footer .footerContactWrapper > .inner {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#footer .footerContactRollUp {
overflow: hidden;
}
#footer .footerContactRollUp > .inner {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
#footer .footerContactBtn {
position: relative;
overflow: hidden;
}
#footer .footerContactRollUp .footerContactBtn a {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 32px;
font-size: 104px;
color: var(--white);
position: relative;
overflow: hidden;
transform: translate(0, 100%);
transition: 1.5s ease;
}
#footer.isLightMode .footerContactRollUp .footerContactBtn a {
color: var(--black);
}
#footer .footerContactRollUp.isActive .footerContactBtn a {
transform: translate(0, 0);
}
#footer .footerContactBtn a::before {
display: block;
content: '';
width: 100%;
height: 2px;
background: var(--white);
position: absolute;
bottom: 0;
left: 0;
}
#footer.isLightMode .footerContactBtn a::before {
background: var(--black);
}
#footer .footerContactBtn a:hover::before {
animation: footerContactBtnUnderline 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes footerContactBtnUnderline {
0%, 20% {
transform: translateX(0);
}
50% {
transform: translateX(105%);
}
51%, 70% {
transform: translateX(-105%);
}
100% {
transform: translateX(0);
}
}
#footer .footerContactBtn a .footerContactBtnArrow {
position: relative;
bottom: 54px;
width: 24px;
height: 24px;
overflow: hidden;
}
#footer .footerContactBtn a .footerContactBtnArrowBefore,
#footer .footerContactBtn a .footerContactBtnArrowAfter {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#footer .footerContactBtn a .footerContactBtnArrowAfter {
transform: translateX(-100%);
}
#footer .footerContactBtn a:hover .footerContactBtnArrowBefore {
animation-name: footerContactBtnArrowFromRightToLeft;
animation-delay: 0s;
}
#footer .footerContactBtn a:hover .footerContactBtnArrowAfter {
animation-name: footerContactBtnArrowFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes footerContactBtnArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes footerContactBtnArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
#footer .footerContactBtn a .footerContactBtnArrow svg path {
fill: var(--white);
transition: .5s ease;
}
#footer.isLightMode .footerContactBtn a .footerContactBtnArrow svg path {
fill: var(--black);
}
#footer .footerContactLead {
overflow: hidden;
}
#footer .footerContactLead a:link,
#footer .footerContactLead a:visited {
color: var(--white);
text-decoration: underline;
}
#footer.isLightMode .footerContactLead a:link,
#footer.isLightMode .footerContactLead a:visited {
color: var(--black);
}
@media (any-hover: hover) {
#footer .footerContactLead a:hover,
#footer .footerContactLead a:active {
text-decoration: none;
color: var(--lightGray01);
}
#footer.isActive .footerContactLead a:hover,
#footer.isActive .footerContactLead a:active {
color: var(--lightGray01);
}
}
#footer .footerContactRollUp .footerContactLeadText {
line-height: 2;
transform: translate(0, 100%);
transition: 1s ease;
}
#footer .footerContactRollUp.isActive .footerContactLeadText {
transform: translate(0, 0);
}
#footer .footerNav {
display: flex;
gap: 40px;
margin-bottom: 48px;
}
#footer .footerNavItems ul {
display: flex;
flex-direction: column;
gap: 24px;
}
#footer .footerNavItem {
overflow: hidden;
}
#footer .footerNavItem a {
font-size: 24px;
color: var(--white);
transform: translate(0, 100%);
transition: transform 1s ease;
}
#footer.isLightMode .footerNavItem a {
color: var(--black);
}
#footer .footerNavItem.isActive a {
transform: translate(0, 0);
}
#footer .footerNavItem a .footerNavItemText > span:nth-of-type(2) > span {
left: 0;
transform: translate(0, 0);
}
#footer .footerSocialItems ul {
display: flex;
align-items: center;
gap: 24px;
}
#footer .footerSocialItem {
overflow: hidden;
}
#footer .footerSocialItemNote {
padding: 4px 0 0;
}
#footer .footerSocialItem a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 24px;
height: 28px;
transform: translate(0, 100%);
transition: transform 1s ease;
}
#footer .footerSocialItem.isActive a {
transform: translate(0, 0);
}
#footer .footerSocialItem a .footerNavItemIcon > span:nth-of-type(1),
#footer .footerSocialItem a .footerNavItemIcon > span:nth-of-type(2) {
height: 28px;
}
#footer .copyright {
width: 78px;
height: 12px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
color: #555;
position: absolute;
top: 224px;
right: -78px;
transform: rotate(90deg);
transform-origin: left top;
}
#footer .copyright > small {
line-height: 1;
}
#footerLogo {
position: absolute;
top: 0;
right: 8%;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: clip;
z-index: -2;
opacity: 0;
visibility: hidden; transition: 1s ease;
}
#footer #footerLogo.isActive {
opacity: .8;
visibility: visible; }
#footer.isLightMode #footerLogo.isActive {
opacity: .08;
}
#footerLogoParallaxArea {
width: 495px;
height: 495px;
transition: .5s ease;
}
#footerLogoParallaxObject {
width: 100%;
height: 100%;
}
.footerLogoParallaxObjectImg {
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer #footerLogo svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
#footer > .inner {
padding: 120px 0 40px;
flex-direction: column;
justify-content: unset;
gap: 56px;
}
#footer .footerContactWrapper {
height: auto;
}
#footer .footerContactRollUp .footerContactBtn a {
gap: 8px;
font-size: 80px;
}
#footer .footerContactBtn a .footerContactBtnArrow {
bottom: 40px;
width: 20px;
height: 20px;
}
#footer .footerContactBtn a .footerContactBtnArrowBefore,
#footer .footerContactBtn a .footerContactBtnArrowAfter {
width: 20px;
height: 20px;
}
#footer .copyright {
inset: auto;
bottom: 40px;
transform: rotate(0);
}
}
@media (max-width: 640px) {
#footer > .inner {
padding: 120px 0 24px;
gap: 48px;
}
#footer .footerContactWrapper {
padding-top: 48px;
}
#footer .footerContactRollUp > .inner {
gap: 32px;
}
#footer .footerContactRollUp .footerContactBtn a {
font-size: 48px;
}
#footer .footerContactBtn a .footerContactBtnArrow {
bottom: 25px;
width: 14px;
height: 14px;
}
#footer .footerContactBtn a .footerContactBtnArrowBefore,
#footer .footerContactBtn a .footerContactBtnArrowAfter {
width: 14px;
height: 14px;
}
#footer .footerContactRollUp .footerContactLeadText {
font-size: 14px;
}
#footer .footerContactRollUp .footerContactLeadText br {
display: none;
}
#footer .footerNav {
gap: 32px;
margin-bottom: 40px;
}
#footer .footerNavItem a {
font-size: 22px;
}
#footer .copyright {
bottom: 24px;
}
#footerLogo {
width: 72%;
}
}