@charset "UTF-8";
@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%;
}
}
 .loadingLogo.isPassive {
opacity: 0 !important;
} #kv {
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
opacity: 0;
visibility: hidden;
overflow: clip;
z-index: -2;
}
#kv.isActive {
animation: kvFadeIn ease 2s forwards;
}
@keyframes kvFadeIn {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: .56;
visibility: visible;
}
}
#kvParallaxArea {
width: 100%;
height: 100%;
transition: .5s ease;
}
#kvParallaxObject {
width: 100%;
height: 100%;
position: absolute;
}
.kvParallaxObjectContainer {
width: 104%;
height: 104%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.kvParallaxObjectImg {
display: block;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/front/bamboo.webp) no-repeat right center / auto 180%;
}
@media (max-width: 1024px) {
.kvParallaxObjectImg {
background-size: auto 100%;
}
}
@media (max-width: 640px) {
.kvParallaxObjectImg {
background-size: auto 100%;
}
} #kv.isLightMode #kvParallaxArea {
opacity: .16;
} #kv.isDarkMode #kvParallaxArea {
opacity: 0;
}   #hero {
width: 100%;
height: 100dvh;
position: fixed;
top: 0;
left: 0;
z-index: 0;
opacity: 1;
transition: .5s ease;
}
#hero > .inner {
height: 100%;
position: relative;
}
#hero .catchContainer {
position: absolute;
top: calc(50% + 32px + 32px); }
#hero .catchSub {
gap: 16px;
opacity: 0;
will-change: transform;
}
#hero .catchSub * {
will-change: transform;
}
#hero .catchSub .catchSubContainerMain { font-size: 36px;
line-height: 1.25;
gap: 4px;
}
#hero .catchSub .catchSubContainerSub {
font-size: 16px;
line-height: 1.5;
}
#hero.isPassive {
opacity: 0;
}
@media (max-width: 1024px) {
#hero .catchContainer {
position: absolute;
top: calc(50% + 25px + 28px); }
#hero .catchSub {
gap: 12px;
}
#hero .catchSub .catchSubContainerMain {
font-size: 28px;
gap: 3px;
}
#hero .catchSub .catchSubContainerSub {
font-size: 15px;
}
}
@media (max-width: 640px) {
#hero .catchContainer {
position: absolute;
top: calc(50% + 20px + 24px); }
#hero .catchSub {
gap: 8px;
}
#hero .catchSub .catchSubContainerMain { font-size: 21px;
gap: 2px;
}
#hero .catchSub .catchSubContainerSub { font-size: 12px;
}
} #frontContentsWrapper {
position: relative;
z-index: 1;
}
#frontContentsWrapper > .inner {
width: 100%;
margin-top: 100dvh;
}
#frontContentsWrapper .frontContentsSection > .inner { width: 74%;
margin: 0 10% 0 16%;
}  #frontContentsHeadingsWrapper {
position: fixed;
top: 0;
left: 4%;
width: 32px;
height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#frontContentsHeadingsWrapper.isActive {
opacity: 1;
visibility: visible;
}
#frontContentsHeadingsWrapper .frontContentsHeadings {
width: 94px;
height: 32px;
transform: rotate(90deg);
transform-origin: left top;
position: relative;
top: -40px;
right: -32px;
}
#frontContentsHeadingsWrapper .frontContentsHeadings::before {
flex-shrink: 0;
display: block;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #DC0032;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
#frontContentsHeadingsWrapper .frontContentsHeading {
display: block;
height: 32px;
line-height: 32px;
position: absolute;
top: 0;
left: 18px;
opacity: 0;
visibility: hidden;
transition: 1s cubic-bezier(.51,.07,.26,1);
}
#frontContentsHeadingsWrapper .frontContentsHeading.isActive {
opacity: 1;
visibility: visible;
}
#frontContentsHeadingsWrapper .frontContentsHeading.isLightMode {
color: #1A1A1A;
}
#frontContentsHeadingsWrapper .frontContentsHeading.isDarkMode {
color: #efefef;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
#frontContentsHeadingsWrapper .frontContentsHeadings {
font-size: 12px;
width: 45px;
top: -23px;
}
} #about {
color: var(--white);
position: relative;
overflow: clip;
transition: .5s ease;
}
#about.isLightMode {
color: var(--black);
}
#about > .inner {
display: flex;
align-items: flex-start;
gap: 5%;  padding: 200px 0 800px;
}
#about .aboutHeader {
width: 40%;
position: sticky;
top: 200px;
}
#about .aboutCatch {
font-size: 36px;
line-height: 1.5;
gap: 4px;
white-space: nowrap;
}
#about .aboutCatch .bracketOpen {
margin-left: -.55em;
}
#about .aboutContent {
width: 55%;
}
#about .aboutContentDesc {
gap: 32px;
} #about .aboutContentDesc br {
display: none;
}
#about .aboutContentDescParagraphLine {
position: relative;
line-height: 2;
width: max-content;
}
#about .aboutContentDescParagraphLinePassive {
color: var(--black);
transition: .5s ease;
}
#about.isLightMode .aboutContentDescParagraphLinePassive {
color: var(--white);
}
#about .aboutContentDescParagraphLineActive {
position: absolute;
inset: 0;
z-index: 1;
color: var(--white);
transition: .5s ease;
}
#about.isLightMode .aboutContentDescParagraphLineActive {
color: var(--black);
}
#about .aboutContentDescParagraphLineActiveText {
display: block;
white-space: nowrap;
width: 0%;
overflow: hidden;
will-change: width;
}
#about .aboutBtn {
margin-top: 80px;
}
#about .aboutBtn a {
color: var(--white);
transition: .5s ease;
}
#about.isLightMode .aboutBtn a {
color: var(--black);
}
#about .aboutBtn a::before {
background: var(--white);
transition: .5s ease;
}
#about.isLightMode .aboutBtn a::before {
background: var(--black);
}
#about .aboutBtn a .btnArrow svg path {
fill: var(--white);
transition: .5s ease;
}
#about.isLightMode .aboutBtn a .btnArrow svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
#about > .inner {
flex-direction: column;
gap: 56px;
padding: 64px 0 160px;
}
#about .aboutHeader {
width: 100%;
position: relative;
top: auto;
}
#about .aboutCatch {
font-size: 28px;
gap: 3px;
}
#about .aboutContent {
width: 100%;
}
#about .aboutBtn {
margin-top: 64px;
}
}
@media (max-width: 640px) {
#about > .inner {
gap: 40px; padding: 40px 0 80px;
}
#about .aboutCatch {
font-size: 24px;
gap: 2px;
}
#about .aboutContentDesc {
gap: 24px;
}
#about .aboutContentDesc br {
display: inline;
}
#about .aboutBtn { margin-top: 40px;
}
} #frontContentsWrapper #project {
position: relative;
}
#projectItemsWrapper {
position: relative;
}
#projectItemsWrapper > .inner {
width: 100%;
height: 100dvh;
margin: 0;
}
#projectItemsWrapper .projectItems { width: 67%;
height: 100%;
display: flex; margin-left: 33%;
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#projectItemsWrapper.isActive .projectItems {
opacity: 1;
visibility: visible;
} 
#projectItemsWrapper .projectItem {
width: 100%;
height: 100%;
flex-shrink: 0;
padding-left: 10%;
box-sizing: content-box; } #projectItemsWrapper .projectItem > .inner {
width: 80%;
height: 100%;
margin: 0 4% 0 16%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
#projectItemsWrapper .projectItemContent {
position: relative;
}
#projectItemsWrapper .projectItemContentInner {
width: 100%;
display: flex;
flex-direction: column;
gap: 48px;
position: absolute;
top: -64px;
left: -140px;
z-index: 2;
color: var(--black);
transition: .5s ease;
}
#projectItemsWrapper.isActive .projectItemContentInner {
color: var(--white);
}
#projectItemsWrapper .projectItemHeading {
font-size: 104px;
line-height: 1;
}
#projectItemsWrapper .projectItemDesc {
margin: 0 0 0 32px;
opacity: 0;
visibility: hidden;
}
#projectItemsWrapper .projectItemDesc.isActive {
animation: projectItemDesc 1s cubic-bezier(.48,.19,.57,.9) .5s forwards;
}
@keyframes projectItemDesc {
0% {
transform: translateY(24px);
opacity: 0;
visibility: hidden;
}
100% {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
#projectItemsWrapper .projectItemDesc.isActive.played {
animation: none;
transform: translateY(0);
opacity: 1;
visibility: visible;
}
#projectItemsWrapper .projectItemText {
font-size: 14px;
line-height: 2;
}
#projectItemsWrapper .projectItemBtn {
margin-top: 40px;
}
#projectItemsWrapper .projectItemBtn a {
color: var(--black);
transition: .5s ease;
}
#projectItemsWrapper.isActive .projectItemBtn a {
color: var(--white);
}
#projectItemsWrapper .projectItemBtn a::before {
background: var(--black);
transition: .5s ease;
}
#projectItemsWrapper.isActive .projectItemBtn a::before {
background: var(--white);
}
#projectItemsWrapper .projectItemBtn a .btnArrow svg path {
fill: var(--black);
transition: .5s ease;
}
#projectItemsWrapper.isActive .projectItemBtn a .btnArrow svg path {
fill: var(--white);
}
#projectItemsWrapper .projectItem .projectItemImgWrapper {
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
#projectItemsWrapper .projectItem .projectItemImgWrapper::before {
display: block;
content: '';
width: calc(100% + 2px);
height: 100%;
background: #ccc;
pointer-events: none;
position: absolute;
inset: 0 -1px;
z-index: 1;
transition: .5s ease;
}
#projectItemsWrapper.isActive .projectItem .projectItemImgWrapper::before {
background: #1f1f1f;
}
#projectItemsWrapper .projectItem.isActive .projectItemImgWrapper::before {
animation: projectItemImgWrapper .7s cubic-bezier(1,-0.08,.27,.97) forwards;
}
@keyframes projectItemImgWrapper {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
#projectItemsWrapper .projectItem.isActive.played .projectItemImgWrapper::before {
animation: none;
transform: translateY(100%);
}
#projectItemsWrapper .projectItem .projectItemImg {
position: relative;
z-index: 0;
overflow: hidden;
opacity: 0;
filter: blur(8px);
transform: scale(1.2);
transition: 1s ease;
}
#projectItemsWrapper .projectItem.isActive  .projectItemImg {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
#projectItemsWrapper .projectItemImg::before {
display: block;
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(136deg,rgba(26,26,26,.64) 8%,rgba(26,26,26,0) 72%,rgba(26,26,26,0));
z-index: 1;
pointer-events: none;
}
#allProjects {
width: 100%;
height: 125dvh;
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#allProjects.isActive {
opacity: 1;
visibility: visible;
}
#allProjects > .inner {
width: 100%;
height: 100dvh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#allProjects .allProjectsBtn {
position: relative;
overflow: hidden;
}
#allProjects .allProjectsBtn a {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 32px;
font-size: 104px;
position: relative;
overflow: hidden;
transform: translate(0, 100%);
transition: 1s transform cubic-bezier(.46,.26,.43,1.19);
}
#allProjects.isActive .allProjectsBtn a {
transform: translate(0, 0);
}
#allProjects .allProjectsBtn a::before {
display: block;
content: '';
width: 100%;
height: 2px;
background: #efefef;
position: absolute;
bottom: 0;
left: 0;
}
#allProjects .allProjectsBtn a:hover::before {
animation: allProjectsBtnUnderline 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes allProjectsBtnUnderline {
0%, 20% {
transform: translateX(0);
}
50% {
transform: translateX(105%);
}
51%, 70% {
transform: translateX(-105%);
}
100% {
transform: translateX(0);
}
}
#allProjects .allProjectsBtn a .allProjectsBtnArrow {
position: relative;
bottom: 54px;
width: 24px;
height: 24px;
overflow: hidden;
}
#allProjects .allProjectsBtn a .allProjectsBtnArrowBefore,
#allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
transform: translateX(-100%);
}
#allProjects .allProjectsBtn a:hover .allProjectsBtnArrowBefore {
animation-name: allProjectsBtnArrowFromRightToLeft;
animation-delay: 0s;
}
#allProjects .allProjectsBtn a:hover .allProjectsBtnArrowAfter {
animation-name: allProjectsBtnArrowFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes allProjectsBtnArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes allProjectsBtnArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
#allProjects .allProjectsBtn a .allProjectsBtnArrow svg path {
fill: #efefef;
transition: .5 ease;
}
@media (max-width: 1024px) {
#projectItemsWrapper > .inner {
height: auto; padding: 0;
}
#projectItemsWrapper .projectItems {
width: 84%;
height: auto;
flex-direction: column;
gap: 104px;
margin-left: 16%;
}
#projectItemsWrapper .projectItem {
padding-left: 0;
box-sizing: border-box;
}
#projectItemsWrapper .projectItem > .inner { width: 100%;
height: auto; margin: 0;
display: block;
}
#projectItemsWrapper .projectItemContent > .inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 32px;
position: absolute;
top: -40px; left: 0;
z-index: 2;
}
#projectItemsWrapper .projectItemHeading {
font-size: 64px;
}
#projectItemsWrapper .projectItemDesc {
margin: 0;
}
#projectItemsWrapper .projectItemDesc.isActive {
animation: projectItemDesc 1s cubic-bezier(.48,.19,.57,.9) 0s forwards;
}
#projectItemsWrapper .projectItemBtn {
margin-top: 16px;
}
#projectItemsWrapper .projectItem .projectItemImg {
width: 96%;
margin: 0 0 0 auto;
}
#projectItemsWrapper .projectItemImg::before {
display: block;
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(136deg,rgba(26,26,26,.64) 8%,rgba(26,26,26,0) 72%,rgba(26,26,26,0));
z-index: 1;
pointer-events: none;
}
#allProjects {
height: auto;
}
#allProjects > .inner {
width: calc(100% - calc(8% + 32px));
height: auto;
margin: 0 0 0 auto;
position: relative;
top: auto;
left: auto; padding: 120px 0;
}
#allProjects .allProjectsBtn a {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 16px;
font-size: 56px;
white-space: nowrap;
position: relative;
overflow: hidden;
transform: translate(0, 100%);
transition: 1s transform cubic-bezier(.46,.26,.43,1.19);
}
#allProjects .allProjectsBtn a .allProjectsBtnArrow {
bottom: 29px;
width: 20px;
height: 20px;
}
#allProjects .allProjectsBtn a .allProjectsBtnArrowBefore,
#allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
width: 20px;
height: 20px;
}
}
@media (max-width: 640px) {
#projectItemsWrapper .projectItemContent {
display: flex;
flex-direction: column-reverse;
}
#projectItemsWrapper .projectItemContent > .inner {
gap: 24px;
position: relative;
top: unset;
left: unset; margin: -96px 0 0 0;
padding: 0 4% 0 0;
}
#projectItemsWrapper .projectItems { gap: 56px;
}
#projectItemsWrapper .projectItemHeading {
font-size: 36px;
}
#projectItemsWrapper .projectItemText {
font-size: 12px;
}
#projectItemsWrapper .projectItemText br {
display: none;
}
#projectItemsWrapper .projectItemBtn {
margin-top: 4px;
}
#projectItemsWrapper .projectItemImg::before {
background: linear-gradient(45deg,rgba(26,26,26,.64) 8%,rgba(26,26,26,0) 72%,rgba(26,26,26,0));
}
#allProjects > .inner { padding: 96px 0 40px;
width: 80%;
margin: 0 4% 0 16%;
align-items: flex-start;
}
#allProjects .allProjectsBtn a {
gap: 8px;
font-size: 30px;
}
#allProjects .allProjectsBtn a .allProjectsBtnArrow {
bottom: 17px;
width: 12px;
height: 12px;
}
#allProjects .allProjectsBtn a .allProjectsBtnArrowBefore, #allProjects .allProjectsBtn a .allProjectsBtnArrowAfter {
width: 12px;
height: 12px;
}
} #service {
position: relative;
overflow: clip;
z-index: 1;
}
#frontContentsWrapper #service > .inner {
padding: 100dvh 0 160px;
color: var(--white);
transition: 1s ease;
}
#frontContentsWrapper #service > .inner.isLightMode {
color: var(--black);
}
#service > .inner a {
color: var(--white);
transition: 1s ease;
}
#service > .inner.isLightMode a {
color: var(--black);
}
#service .serviceHeader {
position: relative;
}
#service .serviceHeader > .inner {
width: 95%;
margin: 0 5% 0 0; padding: 0 0 120px;
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 5%;
}
#service .serviceMovieWrapper {
z-index: 1;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
width: 36%;
position: absolute;
top: 0;
right: 5%;
}
#service #serviceMovie {
width: 100%;
overflow: hidden;
position: relative;
transform: scale(1);
transform-origin: center top;
flex-shrink: 0;
border-radius: 2px;
}
#service .serviceMovieFrame {
display: block;
width: 100%;
padding: 0;
box-sizing: border-box;
position: relative;
}
#service .serviceMovieFrameInner {
display: block;
position: relative;
inset: 0;
width: 100%;
height: 0;
padding-top: 56.25%;
background: none;
}
#service .serviceMovieVideo {
display: block;
width: auto;
height: auto;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#service .serviceHeaderContents {
position: relative;
z-index: 1;
flex-grow: 1;
}
#service .serviceHeaderContents > .inner {
width: 100%;
gap: 48px;
padding: 200px 0 0;
}
#service .serviceCatch {
font-size: 36px;
line-height: 1.5;
gap: 4px;
}
#service .serviceCatch .br_sp {
display: none;
}
#service .serviceHeaderDesc {
opacity: 0;
visibility: hidden;
}
#service .serviceHeaderDesc.isActive {
animation: serviceHeaderDesc 1s cubic-bezier(.48,.19,.57,.9) .5s forwards;
}
@keyframes serviceHeaderDesc {
0% {
transform: translateY(40px);
opacity: 0;
visibility: hidden;
}
100% {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
#service .serviceHeaderDescText {
max-width: 800px;
line-height: 2;
}
#service > .inner .serviceBtn {
margin-top: 32px;
}
#service > .inner .serviceBtn a {
color: var(--white);
transition: .5s ease;
}
#service > .inner.isLightMode .serviceBtn a {
color: var(--black);
}
#service > .inner .serviceBtn a::before {
background: var(--white);
transition: .5s ease;
}
#service > .inner.isLightMode .serviceBtn a::before {
background: var(--black);
}
#service > .inner .serviceBtn a .btnArrow svg path {
fill: var(--white);
transition: .5s ease;
}
#service > .inner.isLightMode .serviceBtn a .btnArrow svg path {
fill: var(--black);
}
#service #serviceBody { position: relative;
z-index: 1;
}
#service .serviceItem {
overflow: hidden;
position: relative;
}
#service > .inner .serviceItem:first-of-type::before,
#service > .inner .serviceItem::after {
display: block;
content: '';
width: 100%;
height: 1px;
background: var(--white);
position: absolute;
left: 0;
z-index: 1;
transition: 1s ease;
}
#service > .inner.isLightMode .serviceItem:first-of-type::before,
#service > .inner.isLightMode .serviceItem::after {
background: var(--black);
}
#service .serviceItem:first-of-type::before {
top: 0;
}
#service .serviceItem::after {
bottom: 0;
}
#service .serviceItem .serviceItemHeading {
height: 80px;
position: relative;
cursor: pointer;
transition: .5s ease;
}
#service .serviceItem.isActive .serviceItemHeading {
height: auto;
}
#service .serviceItem .serviceItemHeading > .inner {
width: 100%;
}
#service > .inner .serviceItem .serviceItemHeadingTextEn {
font-size: 72px;
line-height: 1;
position: relative;
padding: 24px 0 0;
overflow-x: clip;
transition: .75s cubic-bezier(.12,.94,.52,1);   }
#service > .inner.isLightMode .serviceItem .serviceItemHeadingTextEn { }
#service > .inner .serviceItem.isActive .serviceItemHeadingTextEn {
font-size: 14px; padding: 48px 0 20px; }
#service > .inner.isLightMode .serviceItem.isActive .serviceItemHeadingTextEn {  }
#service .serviceItem .serviceItemHeadingTextJa {
font-size: 40px;
line-height: 1;
white-space: nowrap;
} #service .serviceItem .serviceItemHeading .serviceItemHeadingPlus {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
width: 28px;
height: 28px;
position: relative;
background: var(--white);
border-radius: 4px;
transition: .5s ease;
}
#service > .inner.isLightMode .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
background: var(--darkGray01);
}
#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span {
display: block;
width: 11px;
height: 1.5px;
background: var(--black);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .5s ease;
}
#service > .inner.isLightMode .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span {
background: var(--white);
transition: .5s ease;
}
#service .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(90deg);
transition: .5s ease;
}
#service .serviceItem.isActive .serviceItemHeading .serviceItemHeadingPlusBtn > span:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(0);
}
#service .serviceItemContent {
display: none;
padding: 40px 0 56px;
}
#service .serviceItemContentInner {
width: 100%;
opacity: 0;
visibility: hidden;
}
#service .serviceItemContentInner.isActive {
animation: serviceItemContentInner .7s cubic-bezier(.48,.19,.57,.9) .5s forwards;
}
@keyframes serviceItemContentInner {
0% {
transform: translateY(24px);
opacity: 0;
visibility: hidden;
}
100% {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
#service .serviceItemContentLead {  max-width: 90%;
}
#service .serviceItemContentList {
margin-top: 32px;
}
#service .serviceItemContentList ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
#service .serviceItemContentListItem {
position: relative;
padding: 0 0 0 18px;
line-height: 1.5;
}
#service > .inner .serviceItemContentListItem::before {
display: block;
content: '';
width: 8px;
height: 1px;
background: var(--white);
position: absolute;
top: 11px;
left: 0;
transition: 1s ease;
}
#service > .inner.isLightMode .serviceItemContentListItem::before {
background: var(--black);
}
#service .serviceItemContentListItem a .serviceItemContentListItemArrow {
position: absolute;
bottom: 0;
right: -19px;
transform: translate(0, -50%);
width: 11px;
height: 11px;
overflow: hidden;
}
#service .serviceItemContentListItem a .serviceItemContentListItemArrowBefore,
#service .serviceItemContentListItem a .serviceItemContentListItemArrowAfter {
display: block;
width: 11px;
height: 11px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#service .serviceItemContentListItem a .serviceItemContentListItemArrowAfter {
transform: translateX(-100%);
}
#service .serviceItemContentListItem a:hover .serviceItemContentListItemArrowBefore {
animation-name: serviceItemContentListItemArrowFromRightToLeft;
animation-delay: 0s;
}
#service .serviceItemContentListItem a:hover .serviceItemContentListItemArrowAfter {
animation-name: serviceItemContentListItemArrowFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes serviceItemContentListItemArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes serviceItemContentListItemArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
#service > .inner .serviceItemContentListItem a .serviceItemContentListItemArrow svg path {
fill: var(--white);
transition: 1s ease;
}
#service > .inner.isLightMode .serviceItemContentListItem a .serviceItemContentListItemArrow svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
#frontContentsWrapper #service > .inner {
width: 80%;
margin: 0 4% 0 16%;
padding: 0 0 120px;
}
#service .serviceHeader > .inner {
width: 100%;
margin: 0;
padding-bottom: 80px;
gap: 5%;
}
#service .serviceHeaderContents > .inner {
gap: 32px;
padding-top: 120px;
}
#service .serviceCatch {
font-size: 28px;
gap: 3px;
}
#service .serviceBtn {
margin-top: 24px;
}
#service .serviceItem .serviceItemHeading {
height: 56px;
}
#service > .inner .serviceItem .serviceItemHeadingTextEn {
font-size: 44px;
white-space: nowrap;
padding: 20px 0 0; transition: 1s ease;
}
#service > .inner .serviceItem.isActive .serviceItemHeadingTextEn {
font-size: 12px;
padding: 44px 0 16px;
}
#service .serviceItem .serviceItemHeadingTextJa {
font-size: 32px;
}
#service .serviceItem .serviceItemHeading .serviceItemHeadingPlus {
width: 56px;
height: 56px;
}
#service .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
width: 24px;
height: 24px;
}
#service .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn > span {
width: 9px;
}
#service .serviceItemContent {
padding: 32px 0 48px;
}
}
@media (max-width: 640px) {
#frontContentsWrapper #service > .inner {
padding-bottom: 72px;
}
#service .serviceHeader > .inner {
padding-bottom: 64px;
}
#service .serviceHeaderContents > .inner {
gap: 16px;
padding-top: 80px;
}
#service > .inner .serviceCatch {
font-size: 24px;
gap: 2px;
}
#service > .inner .serviceCatch .br_sp {
display: inline;
}
#service > .inner .serviceBtn {
margin-top: 8px;
}
#service > .inner .serviceItem .serviceItemHeading { height: 40px;
}
#service > .inner .serviceItem .serviceItemHeadingTextEn { font-size: 28px;
padding: 16px 0 0;
}
#service > .inner .serviceItem.isActive .serviceItemHeadingTextEn {
padding-bottom: 14px;
}
#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlus { width: 36px;
height: 44px;
}
#service > .inner .serviceItem .serviceItemHeading .serviceItemHeadingPlusBtn {
width: 20px;
height: 20px;
}
#service .serviceItemContentLead {
max-width: initial;
}
#service .serviceItem .serviceItemHeadingTextJa {
font-size: 21px;
}
#service .serviceItemContent {
padding: 24px 0 40px;
}
#service .serviceItemContentList {
margin-top: 24px;
}
} #journal > .inner {
width: 74%;
margin: 0 10% 0 16%;
display: flex;
gap: 5%; padding: 25dvh 0 0;
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#journal.isActive > .inner {
opacity: 1;
visibility: visible;
}
#journal .journalHeader {
width: 15%;
}
#journal .journalHeader > .inner {
width: 100%;
position: relative;
}
#journal .journalHeading {
width: 265px;
height: 76px;
white-space: nowrap;
color: var(--lightGray01);
display: flex;
flex-direction: column-reverse;
gap: 16px;
position: absolute;
top: -76px; transform: rotate(90deg);
transform-origin: left bottom;
}
#journal .journalHeadingTitle {
font-size: 24px;
line-height: 1;
}
#journal .journalHeadingLead {
font-size: 12px;
line-height: 1.5;
}
#journal .journalBody {
width: 80%;
}
#journal .journalPostsWrapper {
display: flex;
gap: 4%;
}
#journal .journalPosts {
width: 54%;
display: flex;
flex-direction: column;
gap: 20px;
}
#journal .journalPost {
min-height: calc(calc(100% - 40px) / 3);
}
#journal .journalLatestPost {
width: 42%;
min-height: initial;
}
#journal > .inner .journalPost a {
width: 100%;
height: 100%; overflow: hidden; color: var(--white);
text-decoration: none;
display: flex;
transition: .5s ease;
}
#journal > .inner.isLightMode .journalPost a { color: var(--black);
}
#journal .journalLatestPost a {
flex-direction: column;
}
#journal .journalPost .journalPostThumb {
width: 40%;
flex-shrink: 0; border-radius: 4px;
}
#journal .journalLatestPost .journalPostThumb {
width: 100%;
}
#journal .journalPost .journalPostThumbImg {
height: 100%;
padding-top: 0;
}
#journal .journalLatestPost .journalPostThumbImg {
height: 0;
padding-top: 66.66%;
}
#journal .journalPost .journalPostDesc > .inner {
width: 100%;
height: 100%;
position: relative;
padding: 20px 0 24px 20px;   display: flex;
flex-direction: column; gap: 16px;
}
#journal .journalLatestPost .journalPostDesc > .inner {    padding: 24px 48px 24px 0; gap: 20px;
}
#journal .journalPost .journalPostTitle { font-size: 16px;
line-height: 1.75;
}
#journal .journalLatestPost .journalPostTitle { font-size: 21px;
}
#journal > .inner .journalPost .journalPostMeta {   color: var(--white);
display: flex;
flex-wrap: wrap;
align-items: center; gap: 12px;
opacity: .5;
transition: .5s ease;
}
#journal > .inner.isLightMode .journalPost .journalPostMeta {
color: var(--black);
}
#journal .journalPost .journalPostDate {
font-size: 14px;
flex-shrink: 0;
}
#journal .journalPost .journalPostCats {  display: flex; align-items: center;
gap: 8px; }
#journal > .inner .journalPost .journalPostCat { display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
line-height: 24px;
padding: 1px 12px 0;
border: 1px solid var(--white);
border-radius: 4px; transition: .5s ease;
}
#journal > .inner.isLightMode .journalPost .journalPostCat {
border: 1px solid var(--black);
} #journal .journalPost .journalPostCat::before { display: none;
}
#journal > .inner .journalPost a .journalPostArrow {
position: absolute;
top: 20px;
right: 20px;
width: 28px;
height: 28px;
background: var(--black);
border: 1px solid #3c3c3c;
border-radius: 4px;
overflow: hidden;
display: none; transition: .5s ease;
}
#journal > .inner.isLightMode .journalPost a .journalPostArrow {
background: var(--white);
border-color: #dedede;
}
#journal > .inner .journalPost a:hover .journalPostArrow {
background: #3c3c3c;
border-color: #3c3c3c;
}
#journal > .inner.isLightMode .journalPost a:hover .journalPostArrow {
background: #dedede;
border-color: #dedede;
}
#journal .journalPost a .journalPostArrowInner {
width: 11px;
height: 11px;
position: relative;
overflow: hidden;
}
#journal .journalPost a .journalPostArrowBefore,
#journal .journalPost a .journalPostArrowAfter {
display: block;
width: 11px;
height: 11px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#journal .journalPost a .journalPostArrowAfter {
transform: translateX(-100%);
}
#journal .journalPost a:hover .journalPostArrowBefore {
animation-name: journalPostArrowFromRightToLeft;
animation-delay: 0s;
}
#journal .journalPost a:hover .journalPostArrowAfter {
animation-name: journalPostArrowFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes journalPostArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes journalPostArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
#journal > .inner .journalPost a .journalPostArrow svg path {
fill: var(--white);
transition: .5s ease;
}
#journal > .inner.isLightMode .journalPost a .journalPostArrow svg path {
fill: var(--black);
}
#journal > .inner .journalPost a:hover .journalPostArrow svg path {
fill: var(--white);
}
#journal > .inner.isLightMode .journalPost a:hover .journalPostArrow svg path {
fill: var(--black);
}
#journal .journalBtn { margin: 48px 0 0;
}
#journal > .inner .journalBtn a {
color: var(--white);
transition: .5s ease;
}
#journal > .inner.isLightMode .journalBtn a {
color: var(--black);
}
#journal > .inner .journalBtn a::before {
background: var(--white);
transition: .5s ease;
}
#journal > .inner.isLightMode .journalBtn a::before {
background: var(--black);
}
#journal > .inner .journalBtn a .btnArrow svg path {
fill: var(--white);
transition: .5s ease;
}
#journal > .inner.isLightMode .journalBtn a .btnArrow svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
#journal > .inner {
width: 80%;
margin: 0 4% 0 16%; padding-top: 0;
flex-direction: column;
gap: 32px;
padding-bottom: 80px;
}
#journal .journalHeader {
width: 100%;
}
#journal .journalHeading {
width: auto;
height: auto;
white-space: normal;
flex-direction: column;
gap: 12px;
position: relative;
top: unset;
left: unset;
margin-left: 0;
transform: rotate(0);
transform-origin: unset;
}
#journal .journalHeadingTitle {
font-size: 56px;
}
#journal .journalHeadingLead {
font-size: 16px;
}
#journal .journalBody {
width: 100%;
}
#journal .journalPostsWrapper {
flex-direction: column;
gap: 20px;
}
#journal .journalPosts {
width: 100%;
gap: 20px;
}
#journal .journalPost {
min-height: initial;
height: 150px;
}
#journal .journalLatestPost {
width: 100%;
} #journal .journalLatestPost a {
flex-direction: row;
}
#journal .journalLatestPost .journalPostThumb {
width: 40%;
}
#journal .journalLatestPost .journalPostThumbImg {
height: 100%;
padding-top: 0;
}
#journal .journalPost .journalPostDesc > .inner,
#journal .journalLatestPost .journalPostDesc > .inner { padding: 24px 0 24px 24px;
gap: 14px;
}
#journal .journalPost .journalPostTitle,
#journal .journalLatestPost .journalPostTitle {
font-size: 16px;
}
#journal .journalBtn {
margin-left: 0;
}
}
@media (max-width: 640px) {
#journal > .inner {  gap: 24px; padding-bottom: 0;
} #journal .journalHeading {  gap: 8px; }
#journal .journalHeadingTitle { font-size: 32px;
}
#journal .journalHeadingLead { font-size: 12px;
}
#journal .journalHeadingLead br {
display: none;
} #journal .journalPostsWrapper {
gap: 14px;
}
#journal .journalPosts {
gap: 14px;
}
#journal .journalPost { height: auto;
}
#journal > .inner .journalPost a {
flex-direction: column;
}
#journal .journalPost .journalPostThumb,
#journal .journalLatestPost .journalPostThumb { width: 100%;
}
#journal .journalPost .journalPostThumbImg,
#journal .journalLatestPost .journalPostThumbImg {
height: 0;
padding-top: 66.66%;
}
#journal .journalPost .journalPostDesc > .inner,
#journal .journalLatestPost .journalPostDesc > .inner { padding: 16px 24px 16px 0;
gap: 10px;
}
#journal .journalPost .journalPostTitle,
#journal .journalLatestPost .journalPostTitle {
font-size: 14px;
}
#journal .journalPost a .journalPostArrow {
top: 16px;
right: 16px;
width: 22px;
height: 22px;
}
#journal .journalPost a .journalPostArrowInner {
width: 8px;
height: 8px;
}
#journal .journalPost a .journalPostArrowBefore,
#journal .journalPost a .journalPostArrowAfter {
width: 8px;
height: 8px;
}
#journal .journalBtn {
margin-top: 32px;
}
} #footer {
color: var(--black);
transition: .5s ease;
} #footer.isDarkMode {
color: var(--white);
}
#footer .footerContactBtn a::before {
background: var(--black);
transition: .5s ease;
} #footer.isDarkMode .footerContactBtn a::before {
background: var(--white);
}
#footer .footerContactBtn a .footerContactBtnText {
color: var(--black);
transition: .5s ease;
} #footer.isDarkMode .footerContactBtn a .footerContactBtnText {
color: var(--white);
}
#footer .footerContactBtn a .footerContactBtnArrow svg path {
fill: var(--black);
transition: .5s ease;
} #footer.isDarkMode .footerContactBtn a .footerContactBtnArrow svg path {
fill: var(--white);
} #footer .footerContactLead a:link,
#footer .footerContactLead a:visited {
color: var(--black);
transition: .7s ease;
} #footer.isDarkMode .footerContactLead a:link,
#footer.isDarkMode .footerContactLead a:visited {
color: var(--white);
}
@media (any-hover: hover) {
#footer .footerContactLead a:hover,
#footer .footerContactLead a:active {
color: var(--black);
} #footer.isDarkMode .footerContactLead a:hover,
#footer.isDarkMode .footerContactLead a:active {
color: var(--lightGray01);
}
}
#footer .footerNavItem a .footerNavItemSplit {
color: var(--black);
transition: .5s ease;
} #footer.isDarkMode .footerNavItem a .footerNavItemSplit {
color: var(--white);
}
#footer .footerSocialItem a svg path {
fill: var(--black);
transition: .5s ease;
} #footer.isDarkMode .footerSocialItem a svg path {
fill: var(--white);
}
#footer #footerLogo svg path {
fill: var(--lightGray02);
transition: .5s ease;
} #footer.isDarkMode #footerLogo svg path {
fill: var(--black);
}