@charset "UTF-8";
@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;
--accent02: #FF003A;
--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: .64;
z-index: -1;
}
.isLightMode #noise {
opacity: .4;
} #noise::before {
display: block;
content: '';  background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/noise.webp) repeat center center / 500px 500px;
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;
}
.exclamation {
margin: 0 0 0 -.1em;
}  * > .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);
} @media (any-hover: hover) {
#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);
} @media (any-hover: hover) {
#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);
} @media (any-hover: hover) {
#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;
} @media (any-hover: hover) {
#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: var(--black);
transition: .5s ease;
}
#getInTouch.isLightMode #getInTouchLink .getInTouchPlaneContainer::before {
background: var(--black);
}
#getInTouch.isLightMode #getInTouchLink #getInTouchPlane svg path {
fill: var(--white);
}
#getInTouch:not(.isLightMode) #getInTouchLink .getInTouchText svg path {
fill: var(--white);
transition: .5s ease;
}
#getInTouch:not(.isLightMode) #getInTouchLink .getInTouchPlaneContainer::before {
background: var(--white);
}
#getInTouch:not(.isLightMode) #getInTouchLink #getInTouchPlane svg path {
fill: var(--black);
} #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: 1;
visibility: visible;
transition: 1s ease;
} #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 > .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: 1;
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;
transform: translate(0, 0);
}
#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%;
}
}
 #breadcrumbs {
position: fixed;
top: 0;
left: 4%;
width: 28px;
height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--white);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#breadcrumbs.isLightMode {
color: var(--black);
}
#breadcrumbs.isActive {
opacity: 1;
visibility: visible;
}
#breadcrumbs > .inner {
width: 100%;
height: 28px;
transform: rotate(90deg);
transform-origin: left top;
position: relative;
right: -28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 28px;
white-space: nowrap;
}
#breadcrumbs .arrow {
width: 28px;
height: 28px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
position: relative;
}
#breadcrumbs .arrow::before {
display: block;
content: '';
width: 8px;
height: 1px;
background: var(--white);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#breadcrumbs.isLightMode .arrow::before {
background: var(--black);
}
#breadcrumbs * {
font-size: inherit;
}
#breadcrumbs.isLightMode a:link,
#breadcrumbs.isLightMode a:visited {
color: var(--black);
}
@media (any-hover: hover) {
#breadcrumbs.isLightMode a:hover,
#breadcrumbs.isLightMode a:active {
color: var(--black);
}
} #breadcrumbs > .inner > span:nth-of-type(n+4) {
display: none;
}
@media (max-width: 1024px) {
#breadcrumbs {
display: none;
}
}
@media (max-width: 640px) {
} #footer .footerSocialItem a svg path {
fill: var(--black);
transition: .5s ease;
}
#footer.isActive .footerSocialItem a svg path {
fill: var(--white);
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
}
 #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: 1s ease;
}
#kv.isPassive #kvParallaxArea {
opacity: 0;
}
#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%;
}
.isChromeIOS .isLightMode .kvParallaxObjectImg {
background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/front/bamboo_isChromeIOS.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%;
}
} #lpContentsWrapper > .inner {
width: 100%;
padding: 240px 0 0;
display: flex;
flex-direction: column;
}
@media (max-width: 1024px) {
#lpContentsWrapper > .inner {
padding-top: 200px;
}
}
@media (max-width: 640px) {
#lpContentsWrapper > .inner {
padding-top: 160px;
}
} #lpHeader {
width: 100%;
min-height: calc( 100dvh - 240px ); z-index: 0; }
#lpHeader > .inner {
width: 74%;
margin: 0 10% 0 16%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(24px, 2.77vw, 40px);
padding: 0 0 clamp(80px, 8.3333vw, 120px);
}
#lpHeader .lpHeaderTop {
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(24px, 2.77vw, 40px);
}
#lpHeader .lpHeaderTitleParent {
font-size: 24px;
line-height: 1;
overflow: hidden;
}
#lpHeader .lpHeaderTitleParent > span {
display: block;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#lpHeader.isActive .lpHeaderTitleParent > span {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
#lpHeader .lpHeaderCatch {
display: flex;
flex-direction: column;
font-size: clamp(24px, 4.44vw, 64px);
line-height: 1.33;
white-space: nowrap;
}
#lpHeader .lpHeaderCatch .punctuation {
margin: 0 -.25em 0 .1em;
}
#lpHeader .lpHeaderMain {
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(24px, 2.22vw, 32px);
}
#lpHeader .lpHeaderTitleArea {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.66vw, 24px);
}
#lpHeader .lpHeaderTitle {
font-size: clamp(24px, 2.22vw, 32px);
line-height: 1;
overflow: hidden;
}
#lpHeader .lpHeaderTitle > span {
display: block;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#lpHeader.isActive .lpHeaderTitle > span {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
#lpHeader .lpHeaderLead {
line-height: 1.75;
width: clamp(24px, 47.22vw, 680px);
overflow: hidden;
}
#lpHeader .lpHeaderLead > p {
display: block;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#lpHeader.isActive .lpHeaderLead > p {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
#lpHeader .lpHeaderCta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(12px, 1.11vw, 16px);
overflow: hidden;
}
#lpHeader .lpHeaderCtaBtn {
display: block;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#lpHeader.isActive .lpHeaderCtaBtn {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
#lpHeader .lpHeaderCtaBtn a {
font-size: clamp(14px, 1.11vw, 16px);
width: 208px;
background: var(--darkGray02);
border-radius: 4px;
padding: 0 12px 0 24px;
}
#lpHeader .lpHeaderCtaBtn.toContact a {
background: var(--accent);
}
@media (any-hover: hover) {
#lpHeader .lpHeaderCtaBtn a:hover,
#lpHeader .lpHeaderCtaBtn a:active {
font-size: clamp(14px, 1.11vw, 16px);
background: var(--gray01);
}
#lpHeader .lpHeaderCtaBtn.toContact a:hover,
#lpHeader .lpHeaderCtaBtn.toContact a:active {
background: var(--accent02);
}
}
#lpHeader .lpHeaderCtaBtn a::before {
display: none;
}
#lpHeader .lpHeaderCtaBtn a .btnArrow {
top: auto;
bottom: 8px;
right: 12px;
} @media (max-width: 1024px) {
#lpHeader {
min-height: initial;
}
#lpContentsWrapper .lpHeader {  }
#lpContentsWrapper .lpHeader > .inner {
width: 92%;
margin: 0 auto;
} }
@media (max-width: 640px) {
#lpContentsWrapper .lpHeader {
top: 160px;
margin-bottom: 32px;
}
#lpContentsWrapper .lpHeader > .inner {
gap: 16px;
} } .lpBodySection {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease;
}
.lpBodySection.isActive {
opacity: 1;
visibility: visible;
}
.lpBodySection > .inner {
width: 74%;
margin: 0 10% 0 16%;
}
@media (max-width: 1024px) {
.lpBodySection > .inner {
width: 92%;
margin: 0 auto;
}
}
@media (max-width: 640px) {
} .lpBodySectionSticky > .inner {
display: flex;
align-items: flex-start;
gap: 5%;
}
.lpBodySectionSticky .lpBodySectionHeader {
width: 40%;
position: sticky;
top: 200px;
flex-shrink: 0;
}
.lpBodySectionSticky .lpBodySectionCatch {
font-size: clamp(28px, 2.5vw, 36px);
line-height: 1.5;
gap: 4px;
white-space: nowrap;
}
@media (max-width: 1024px) {
.lpBodySectionSticky > .inner {
flex-direction: column;
gap: clamp(32px, 5.2083vw, 40px);
}
.lpBodySectionSticky .lpBodySectionHeader {
width: 100%;
position: relative;
top: auto;
}
}
@media (max-width: 640px) {
} .blurFadeIn > * {
line-height: 2;
display: flex;
flex-direction: column;
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);
} .lpBodySectionDefault > .inner {
display: flex;
flex-direction: column;
gap: clamp(48px, 5.5555vw, 80px);
}
.lpBodySection .lpBodySectionHeaderDefault { gap: 24px;
}
.lpBodySection .lpBodySectionHeadingDefault {
font-size: clamp(16px, 1.6666vw, 24px);
line-height: 1;
overflow: hidden;
text-transform: uppercase;
}
.lpBodySection .lpBodySectionHeadingDefault > span {
display: block;
transform: translate(0, 100%);
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
.lpBodySection.isActive .lpBodySectionHeadingDefault > span {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
.lpBodySection .lpBodySectionCatchDefault {
font-size: clamp(32px, 3.3333vw, 48px);
line-height: 1;
overflow: hidden;
}
.lpBodySection .lpBodySectionHeaderLeadDefault {
width: 100%;
font-size: clamp(14px, 1.1111vw, 16px);
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} .glassBlur {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid #434343;
}
.glassBlack {
background: linear-gradient( to bottom, rgba(26, 26, 26, 0.25), rgba(26, 26, 26, .96) );
}
.glassDarkGray {
background: linear-gradient( to bottom, rgba(39, 39, 39, 0.4), rgba(39, 39, 39, .96) );
}
.glassGray {
background: linear-gradient( to bottom, rgba(54, 54, 54, 0.25), rgba(54, 54, 54, .96) );
}
.glassShadow {
box-shadow: 0 0 24px 0 rgba(26, 26, 26, .64);
}
.glassInnerShadow {
box-shadow: inset 0 0 12px 0 rgba(239, 239, 239, .12);
}
.glassBorderRed {
border-color: var(--accent);
box-shadow: 0 0 32px 0 rgba(220, 0, 50, .5);
} #project > .inner {
padding: 0 0 clamp(104px, 11.1111vw, 160px);
} #projectItems > .inner {
width: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 5%;
}
#projectItems .projectItem {
width: 47.5%;
display: flex;
flex-direction: column;
gap: 16px;
}
#projectItems .projectItem:nth-of-type(2n) {
margin-top: 6%;
}
#projectItems .projectItem > a {
display: flex;
flex-direction: column;
gap: 32px;
}
#projectItems .projectItem > a .projectItemImgWrapper {
position: relative;
overflow: hidden;
border-radius: 4px;
}
#projectItems .projectItem > a .projectItemImgWrapper::before {
display: block;
content: '';
width: calc(100% + 2px);
height: 100%;
background: #1f1f1f;
pointer-events: none;
position: absolute;
inset: 0 -1px;
z-index: 1;
transition: .5s ease;
}
#projectItems .projectItem.isActive > a .projectItemImgWrapper::before {
animation: projectItemImgWrapper .7s cubic-bezier(1,-0.08,.27,.97) forwards;
}
@keyframes projectItemImgWrapper {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
#projectItems .projectItem > a .projectItemImg {
position: relative;
z-index: 0;
overflow: hidden;
opacity: 0;
filter: blur(8px);
transform: scale(1.25);
transition: 1s ease;
}
#projectItems .projectItem.isActive > a .projectItemImg {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
#projectItems .projectItem.isActive > a .projectItemImg picture {
display: block;
filter: blur(0);
transform: scale(1);
transition: .3s ease;
}
#projectItems .projectItem.isActive > a:hover .projectItemImg picture {
filter: blur(4px);
transform: scale(1.05);
}
#projectItems .projectItemContent > .inner {
width: 100%;
padding: 0 8% 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
#projectItems .projectItemHeading {
font-size: 32px;
line-height: 1.5;
}
#projectItems .projectItemHeading br {
display: none;
}
#projectItems .projectItem .projectItemDesc {
display: flex;
flex-direction: column;
gap: 16px;
opacity: 0;
visibility: hidden;
transform: translate(0,16px) scale(1.05);
filter: blur(8px);
transition: 1s ease;
}
#projectItems .projectItem.isActive .projectItemDesc {
opacity: 1;
visibility: visible;
filter: blur(0);
transform: translate(0,0) scale(1);
}
#projectItems .projectItem .projectItemText br {
display: none;
}
#projectItems .projectItem .projectItemCategory {
opacity: 0;
visibility: hidden;
transform: translate(0,16px) scale(1.05);
filter: blur(8px);
transition: 1s ease;
}
#projectItems .projectItem.isActive .projectItemCategory {
opacity: 1;
visibility: visible;
transform: translate(0,0) scale(1);
filter: blur(0);
}
#projectItems .projectItemCategory ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#projectItems .projectItemCategoryItem a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
line-height: 24px;
padding: 0 12px;
border: 1px solid var(--white);
border-radius: 4px;
opacity: .5;
}
#projectItems .projectItemCategoryItem a:hover,
#projectItems .projectItemCategoryItem a:active {
opacity: 1;
}
@media (max-width: 1024px) {
#projectItems .projectItem > a {
gap: 24px;
}
#projectItems .projectItemHeading {
font-size: 24px;
}
#projectItems .projectItem .projectItemText {
font-size: 14px;
}
}
@media (max-width: 640px) {
#projectItems > .inner {
flex-direction: column;
gap: 32px;
}
#projectItems .projectItem {
width: 100%;
gap: 16px;
}
#projectItems .projectItem:nth-of-type(2n) {
margin-top: 0;
}
#projectItems .projectItem > a {
gap: 20px;
}
} #planTable {
padding: 0 0 clamp(80px, 7.2222vw, 104px);
display: flex;
flex-direction: column;
gap: clamp(24px, 2.2222vw, 32px);
}
.planTableWrapper {
display: flex;
flex-direction: column;  overflow-x: scroll;
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
.planTableContainer {
width: 100%;
min-width: 800px;
}
.planTable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.planTable th,
.planTable td {
padding: 0;
display: table-cell;
height: 1px;
width: 25%;
}
.planTable .planTableCellBorder {
border: 1px solid var(--gray01);
border-bottom: none;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
padding: clamp(24px, 2.2222vw, 32px);
gap: clamp(12px, 1.1111vw, 16px);
}
.planTable .planTableHeader tr .planTableCellBorder,
.planTable .planTableBody tr:nth-of-type(2n) .planTableCellBorder {
background: linear-gradient(to bottom, rgba(39, 39, 39, .4), rgba(39, 39, 39, .8));
}
.planTable .planTableBody tr:nth-of-type(2n+1) .planTableCellBorder {
background: linear-gradient(to bottom, rgba(32, 32, 32, .8), rgba(32, 32, 32, .8));
}
.planTable .cellBorderNoneTop {
border-top: none;
}
.planTable .cellBorderNoneLeft {
border-left: none;
}
.planTable .cellBorderNoneRight {
border-right: none;
}
.planTable .cellBorderBottom {
border-bottom: 1px solid var(--gray01);
}
.planTable .planTableCellHidden {
border: none;
background: none;
}
.planTable .planTableCornerTl > * {
border-radius: 12px 0 0 0;
}
.planTable .planTableCornerTr > * {
border-radius: 0 12px 0 0;
}
.planTable .planTableCornerBr > * {
border-radius: 0 0 12px 0;
}
.planTable .planTableCornerBl > * {
border-radius: 0 0 0 12px;
}
.planTable .planTableBody {
font-size: clamp(12px, .9722vw, 14px);
}
.planTable .planTableBody .planTableRowHeader  {
font-size: clamp(14px, 1.1111vw, 16px);
}
.planTable .planTableBody .planTableRowHeader .planTableCellBorder {
align-items: flex-start;
text-align: left;
}
.planTable .planTableRowHeader .planThItem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.66;
gap: clamp(8px, .8333vw, 12px);
}
.planTable .planTableRowHeader .planThItem .planTableSub {
font-size: 12px;
color: var(--lightGray01);
}
.planTable .planTdItem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.planTable .planTdItemHeading {
font-size: 12px;
color: var(--lightGray01);
line-height: 1.25;
}
.planTable .planTdItemPrice {
font-size: 12px;
display: flex;
align-items: baseline;
gap: 0.25em;
}
.planTable .priceNum {
font-size: 1.5em;
}
.planTable .planTableNote {
font-size: 12px;
color: var(--lightGray01);
display: flex;
gap: .25em;
}
.planTable .planTableNote::before {
display: block;
content: '※';
}
.planTableNotes ul {
display: flex;
flex-direction: column;
gap: .25em;
}
.planTableNote {
display: flex;
gap: .25em;
line-height: 1.66;
font-size: clamp(12px, .9722vw, 14px);
color: var(--lightGray01);
}
.planTableNote::before {
display: block;
content: '※';
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} .lpBodySectionSub > .inner {
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(32px, 2.7777vw, 40px);
}
.lpBodySectionsubHeader {
gap: clamp(16px, 1.6666vw, 24px);
}
.lpBodySectionsubHeading {
font-size: clamp(24px, 2.2222vw, 32px);
line-height: 1;
}
.lpBodySectionsubHeaderText {
width: 100%;
max-width: 800px;
}
.lpBodySectionsubHeaderText > p {
display: flex;
flex-direction: column;
line-height: 1.66;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} #fixedCta {
position: fixed;
right: clamp(24px, 2.2222vw, 32px);
bottom: clamp(24px, 2.2222vw, 32px);
z-index: 10000;
}
#fixedCta .fixedCtaBox {
box-shadow: 0 0 40px 0 rgba(26, 26, 26, .8);
transition: .5s ease;
}
#fixedCtaPc {
width: 288px;
border-radius: 12px;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
#fixedCta.isActive #fixedCtaPc {
opacity: 1;
visibility: visible;
}
#fixedCtaPc > .inner {
width: 100%; padding: 24px 24px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
#fixedCtaPc .fixedCtaTitle > p {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 -.5em 0 0;
font-size: clamp(12px, .9722vw, 14px);
line-height: 1.66;
}
#fixedCta .fixedCtaBtn > a::before {
display: none;
}
#fixedCtaPc .fixedCtaBtn > a {
font-size: 16px; width: 240px; height: 56px;
background: var(--accent);
color: var(--white); border-radius: 4px;
padding: 0 12px 0 24px;
}
#fixedCtaPc .fixedCtaBtn > a .btnArrow {
top: auto;
bottom: 8px;
right: 8px;
transform: translate(0, 0);
}
#fixedCtaPc .fixedCtaBtn > a .btnArrow svg path {
fill: var(--white);
}
@media (any-hover: hover) {
#fixedCtaPc .fixedCtaBtn > a:hover,
#fixedCtaPc .fixedCtaBtn > a:active { background: var(--white);
color: var(--accent);
}
#fixedCtaPc .fixedCtaBtn > a:hover .btnArrow svg path,
#fixedCtaPc .fixedCtaBtn > a:active .btnArrow svg path {
fill: var(--accent);
}
}
#fixedCtaSp {
display: none;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
#fixedCta {
width: 100%;
right: 0;
bottom: 0;
}
#fixedCtaPc {
display: none;
}
#fixedCtaSp {
display: block;
transform: translate( 0, 100% );
}
#fixedCta.isActive #fixedCtaSp {
transform: translate( 0, 0 );
}
#fixedCtaSp > .inner {
width: 100%;
height: 80px;
}
#fixedCtaSp .fixedCtaBtn > a { width: calc( 100% - 16px );
height: 64px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--accent);
font-size: 16px;
line-height: 1; border-radius: 4px;
position: relative;
top: 8px;
left: 50%;
transform: translate(-50%, 0);
}
#fixedCtaSp .fixedCtaBtn > a .fixedCtaBtnText {
display: flex;
align-items: baseline;
gap: 4px;
padding: 3px 0 0;
}
#fixedCtaSp .fixedCtaBtnArrow {
position: absolute;
bottom: 12px;
right: 12px;
}
#fixedCtaSp .fixedCtaBtnArrow svg path {
fill: var(--white);
}
} #lead > .inner {
padding: clamp(24px, 13.8888vw, 200px) 0 clamp(280px, 25vw, 360px);
}
#lead .leadText > p {
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media (max-width: 1024px) {
#lead > .inner {
padding: clamp(16px, 3.125vw, 24px) 0 clamp(80px, 13.5416vw, 104px);
}
}
@media (max-width: 640px) {
} #ourDifference > .inner {
padding: 0 0 clamp(104px, 11.1111vw, 160px);
}
#ourDifference .ourDifferenceConcept {
padding: clamp(56px, 5.5555vw, 80px) 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#ourDifference .ourDifferenceConcept img {
width: 100%;
max-width: 1152px;
}
#ourDifference .ourDifferenceAvoid {
border-radius: 12px;
}
#ourDifference .ourDifferenceAvoid > .inner {
width: 100%;
padding: clamp(24px, 2.2222vw, 32px);
}
#ourDifference .ourDifferenceAvoidBoxes {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: clamp(16px, 1.6666vw, 24px);
}
#ourDifference .ourDifferenceAvoidHeader > .inner {
width: 100%;
padding: clamp(20px, 1.6666vw, 24px) clamp(20px, 1.6666vw, 24px) clamp(16px, 1.6666vw, 24px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(16px, 1.3888vw, 20px);
}
#ourDifference .ourDifferenceAvoidHeaderTitle {
font-size: clamp(24px, 2.2222vw, 32px);
line-height: 1.5;
}
#ourDifference .ourDifferenceAvoidHeaderDesc {
color: var(--lightGray01);
padding: 0 48px 0 0;
}
#ourDifference .ourDifferenceAvoidBox {
border-radius: 8px;
}
#ourDifference .ourDifferenceAvoidBox > .inner {
width: 100%;
padding: clamp(20px, 1.6666vw, 24px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(12px, 1.11vw, 24px);
}
#ourDifference .ourDifferenceAvoidBoxTitle {
display: flex;
gap: 12px;
}
#ourDifference .ourDifferenceAvoidBoxTitleMark {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #6D6D6D;
background: #4C4C4C;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 8px 0 rgba(10,10,10, .9);
margin-top: -2px;
}
#ourDifference .ourDifferenceAvoidBoxTitleText {
font-size: clamp(16px, 1.3888vw, 20px);
line-height: 1.5;
}
#ourDifference .ourDifferenceAvoidBoxDesc {
font-size: clamp(12px, .9722vw, 14px);
color: var(--lightGray01);
}
@media (max-width: 1024px) {
#ourDifference > .inner {
padding-bottom: clamp(80px, 13.5416vw, 104px);
}
#ourDifference .ourDifferenceConcept img {
max-width: 560px;
}
#ourDifference .ourDifferenceAvoidBoxes {
display: flex;
flex-direction: column;
}
#ourDifference .ourDifferenceAvoidHeader > .inner {
padding-right: 0;
padding-left: 0;
}
#ourDifference .ourDifferenceAvoidHeaderDesc {
padding-right: 0;
}
}
@media (max-width: 640px) {
#ourDifference .ourDifferenceConcept img {
max-width: 296px;
}
} #service > .inner {
padding: 0 0 160px;
}
#service .serviceItems {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: clamp(16px, 1.6666vw, 24px);
}
#service .serviceItem {
border-radius: 12px;
padding: clamp(16px, 1.3888vw, 20px);
gap: clamp(40px, 4.4444vw, 64px);
}
#service .serviceItemIcon {
width: 48px;
height: 48px;
border-radius: 6px;
border: 1px solid #6D6D6D;
background: #4C4C4C;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 12px 0 rgba(10,10,10, .9);
}
#service .serviceItemBody {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(12px, 1.1111vw, 16px);
}
#service .serviceItemTitle {
font-size: clamp(16px, 1.3888vw, 20px);
line-height: 1.5;
}
#service .serviceItemTitle .dot {
margin: 0 -.05em;
}
#service .serviceItemDesc {
font-size: clamp(12px, .9722vw, 14px);
line-height: 1.66;
color: var(--lightGray01);
}
@media (max-width: 1024px) {
#service > .inner {
padding-bottom: clamp(80px, 13.5416vw, 104px);
}
#service .serviceItems {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}
}
@media (max-width: 640px) {
#service .serviceItems {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(12, 1fr);
}
} #flow > .inner {
padding: 0 0 clamp(296px, 25vw, 360px);
}
#flow .flowLead {
max-width: 384px;
padding: 24px 0 0;
}
#flow .flowItems {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(80px, 9.4444vw, 136px);
}
#flow .flowItem {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 0 0 0 clamp(48px, 10vw, 144px); }
#flow .flowItemHeaderTitle {
font-size: clamp(20px, 1.6666vw, 24px);
line-height: 1.5;
}
#flow .flowItemHeaderTitle .dot {
margin: 0 -.05em;
}
#flow .flowItemDesc {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
#flow .flowItemText  {
font-size: clamp(14px, 1.1111vw, 16px);
}
#flow .flowItemNote {
font-size: clamp(12px, 1.9722vw, 14px);
line-height: 1.5;
color: var(--lightGray01);
}
#flow .flowItemNum {
font-size: clamp(120px, 12.7777vw, 184px);
line-height: 1;
overflow: hidden;
position: absolute;
top: -40px;
left: 0;
background: linear-gradient(0deg,rgba(239,239,239,0) 0,rgba(239,239,239,1));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: .16;
}
@media (max-width: 1024px) {
#flow > .inner {
padding-bottom: clamp(80px, 13.5416vw, 104px);
gap: clamp(48px, 10.4166vw, 80px);
}
#flow .flowLead {
max-width: 800px;
padding-top: 0;
}
#flow .flowItems {
gap: clamp(48px, 8.3333vw, 64px);
}
#flow .flowItemNum {
font-size: clamp(80px, 15.625vw, 120px);
}
}
@media (max-width: 640px) {
} #plan > .inner {
padding: clamp(120px, 13.8888vw, 200px) 0 clamp(104px, 11.1111vw, 160px);
margin-top: clamp(-200px, -13.8888vw, -120px);
}
#plan .planBoxes {
padding: 0 0 clamp(80px, 7.2222vw, 104px);
}
#plan .planBoxContainer > .inner {
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(32px, 2.7777vw, 40px);
}
#plan .planBox {
border-radius: 12px;
}
#plan .planBox  > .inner {
width: 100%;
padding: clamp(32px, 3.3333vw, 48px);
display: flex;
}
#plan .planBoxMain {
width: 56%;
flex-shrink: 0;
position: relative;
padding: 0 clamp(24px, 2.7777vw, 40px) 0 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(24px, 2.2222vw, 32px);
}
#plan .planBoxMain::before {
display: block;
content: '';
width: 1px;
height: 100%;
background: var(--darkGray02);
position: absolute;
top: 0;
right: 0;
}
#plan .planBoxMainHeader { display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(12px, 1.1111vw, 16px);
}
#plan .planBoxMainName {
display: flex;
align-items: center;
gap: clamp(12px, 1.1111vw, 16px);
}
#plan .planBoxMainNameText {
font-size: clamp(16px, 1.3888vw, 20px);
line-height: 1;
}
#plan .recommendedTag {
font-size: clamp(12px, .9722vw, 14px);
line-height: 1;
background: var(--black);
border: 1px solid var(--gray01);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 7px clamp(16px, 1.3888vw, 20px) 6px;
border-radius: 15px;
}
#plan .planBoxMainPrice { display: flex;
flex-direction: column;
align-items: flex-end;
gap: clamp(4px, .5555vw, 8px);
}
#plan .planBoxMainPriceRow {
display: flex;
align-items: baseline;
line-height: 1;
}
#plan .planBoxMainPriceRow.installment {
font-size: clamp(48px, 4.4444vw, 64px);
}
#plan .planBoxMainPriceRow.lump-sum {
font-size: clamp(24px, 2.2222vw, 32px);
padding: 0 .25em 0 0;
}
#plan .planBoxMainPriceRow .priceText {
font-size: .44em;
position: relative;
bottom: .1em;
}
#plan .planBoxMainPriceRow .priceMethod {
margin-right: .25em
}
#plan .planBoxMainPriceRow .priceUnit {
margin-left: .25em;
}
#plan .planBoxMainDesc {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(20px, 1.6666vw, 24px);
}
#plan .planBoxMainText {
font-size: clamp(12px, .9722vw, 14px);
color: var(--lightGray01);
}
#plan .planBoxMainCta {
width: 100%;
display: flex;
align-items: center;
gap: clamp(12px, 1.11vw, 16px);
overflow: hidden;
}
#plan .planBoxMainCtaBtn {
width: 100%;
display: block;
}
#plan .planBoxMainCtaBtn a {
font-size: clamp(14px, 1.11vw, 16px);
width: 264px;
background: var(--darkGray02);
border-radius: 4px;
padding: 0 12px 0 24px;
}
#plan .planBoxMainCtaBtn.recommended a {
background: var(--accent);
}
@media (any-hover: hover) {
#plan .planBoxMainCtaBtn a:hover,
#plan .planBoxMainCtaBtn a:active {
font-size: clamp(14px, 1.11vw, 16px);
background: var(--gray01);
}
#plan .planBoxMainCtaBtn.recommended a:hover,
#plan .planBoxMainCtaBtn.recommended a:active {
background: var(--accent02);
}
}
#plan .planBoxMainCtaBtn a::before {
display: none;
}
#plan .planBoxMainCtaBtn a .btnArrow {
top: auto;
bottom: 8px;
right: 12px;
}
#plan .planBoxSub {
width: 44%;
padding: 0 0 0 clamp(24px, 2.7777vw, 40px);
}
#plan .planBoxPurpose ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(4px, .5555vw, 8px);
}
#plan .planBoxPurposeItem {
display: flex;
font-size: clamp(16px, 1.3888vw, 20px);
gap: clamp(12px, 1.1111vw, 16px);
line-height: 1.66;
}
#plan .planBoxPurposeItem::before {
display: block;
content: '';
width: 21px;
height: 15px;
background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/lp/icon/icon_check.svg) no-repeat center center / cover;
flex-shrink: 0;
margin-top: 8px;
}
@media (max-width: 1024px) {
#plan .planBox  > .inner {
padding: clamp(32px, 3.3333vw, 48px);
flex-direction: column;
gap: clamp(24px, 2.2222vw, 32px);
}
#plan .planBoxMain {
width: 100%;
padding: 0;
gap: clamp(24px, 2.2222vw, 32px);
}
#plan .planBoxMain::before {
display: none;
}
#plan .planBoxMainHeader {
width: 100%;
align-items: center;
}
#plan .planBoxMainCta {
justify-content: center;
padding: clamp(16px, 2.6041vw, 20px) 0;
}
#plan .planBoxMainCtaBtn a {
width: 100%;
}
#plan .planBoxSub {
width: 100%;
padding: 0;
}
}
@media (max-width: 640px) {
} #option > .inner {
padding: 0 0 clamp(80px, 7.2222vw, 104px);
}
#option .optionItems {
display: flex;
flex-wrap: wrap;
gap: clamp(8px, 0.8333vw, 12px);
}
#option .optionItem {
border-radius: 8px;
}
#option .optionItem > a,
#option .optionItem > .noLink {
width: inherit;
height: inherit;
padding: clamp(16px, 1.3888vw, 20px) clamp(56px, 4.4444vw, 64px) clamp(14px, 1.1111vw, 16px)  clamp(20px, 1.6666vw, 24px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(4px, .5555vw, 8px);
}
#option .optionItem > a .btnArrowContainer {
position: absolute;
right: 8px;
bottom: 8px;
width: 26px;
height: 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #6D6D6D;
background: var(--darkGray02);
border-radius: 4px;
box-shadow: inset 0 0 12px 0 rgba(10,10,10, .9);
}
#option .optionItem > a .btnArrow {
right: 50%;
transform: translate(50%, -50%);
}
#option .optionItem > a .btnArrow svg path {
fill: var(--white);
}
#option .optionItem > a::before {
display: none;
}
#option .optionItem .optionName {
font-size: clamp(16px, 1.3888vw, 20px);
line-height: 1;
}
#option .optionItem .optionPrice {
font-size: clamp(12px, .9722vw, 14px);
line-height: 1;
color: var(--lightGray01);
display: flex;
align-items: baseline;
gap: .25em;
}
#option .optionItem .optionPriceNum {
font-size: 1.1em;
}
@media (max-width: 1024px) {
#option .optionItem {
width: 100%;
}
}
@media (max-width: 640px) {
} #support .supportPlanBoxes {
display: flex;
flex-direction: column;
gap: clamp(24px, 2.2222vw, 32px);
}
#support .supportPlanBoxContainer > .inner {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(32px, 2.7777vw, 40px);
}
#support .supportPlanBox {
border-radius: 12px;
}
#support .supportPlanBox > .inner {
width: 100%;
padding: clamp(40px, 3.3333vw, 48px) clamp(32px, 2.7777vw, 40px) clamp(32px, 2.7777vw, 40px);
display: flex;
flex-direction: column;
gap: clamp(24px, 2.2222vw, 32px);
}
#support .supportPlanBoxHeader {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(12px, 1.1111vw, 16px);
}
#support .supportPlanBoxNameText {
font-size: clamp(20px, 1.6666vw, 24px);
line-height: 1;
}
#support .supportPlanBoxPrice {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#support .supportPlanBoxPriceRow {
display: flex;
align-items: baseline;
line-height: 1;
font-size: clamp(40px, 3.3333vw, 48px);
}
#support .supportPlanBoxPriceRow .priceText {
font-size: .44em;
position: relative;
bottom: .1em;
}
#support .supportPlanBoxPriceRow .priceUnit {
margin-left: .25em;
}
#support .supportPlanBoxBody {
position: relative;
padding: clamp(24px, 2.2222vw, 32px) 0 0;
}
#support .supportPlanBoxBody::before {
display: block;
content: '';
width: 100%;
height: 1px;
background: #434343;
position: absolute;
top: 0;
left: 0;
}
#support .supportPlanBoxList ul {
display: flex;
flex-direction: column;
gap: clamp(2px, .2777vw, 4px);
}
#support .supportPlanBoxListItem {
display: flex;
gap: clamp(8px, .8333vw, 12px);
font-size: clamp(14px, 1.1111vw, 16px);
line-height: 1.66;
}
#support .supportPlanBoxListItem::before {
display: block;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lightGray01);
position: relative;
top: 10px;
}
#support .supportNotes ul {
display: flex;
flex-direction: column;
gap: clamp(2px, .2777vw, 4px);
}
#support .supportNote {
display: flex;
gap: .25em;
font-size: clamp(12px, .9722vw, 14px);
line-height: 1.66;
color: var(--lightGray01);
}
#support .supportNote::before {
display: block;
content: '※';
}
@media (max-width: 1024px) {
#support .supportPlanBoxContainer > .inner {
display: flex;
flex-direction: column;
}
#support .supportPlanBoxHeader {
align-items: center;
}
#support .supportPlanBoxList {
display: flex;
}
}
@media (max-width: 640px) {
} #faq .faqItems {
display: flex;
flex-direction: column;
}
#faq .faqItem {
overflow: hidden;
position: relative;
}
#faq .faqItem:first-of-type::before,
#faq .faqItem::after {
display: block;
content: '';
width: 100%;
height: 1px;
background: var(--gray01);
position: absolute;
left: 0;
z-index: 1;
transition: 1s ease;
}
#faq .faqItem:first-of-type::before {
top: 0;
}
#faq .faqItem::after {
bottom: 0;
}
#faq .faqItem .faqItemHeader {
cursor: pointer;
font-size: clamp(16px, 1.3888vw, 20px);
line-height: 1.66;
}
#faq .faqItem .faqItemHeader > .inner {
width: 100%;
padding: clamp(24px, 2.2222vw, 32px) clamp(64px, 7.2222vw, 104px) clamp(24px, 2.2222vw, 32px) 0;
transition: .5s ease;
}
#faq .faqItem.isActive .faqItemHeader > .inner {
padding-top: clamp(32px, 3.3333vw, 48px);
}
#faq .faqItem .faqItemHeader .faqItemHeadingPlus {
position: absolute;
top: clamp(20px, 1.6666vw, 24px);
right: 0;
width: 44px;
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#faq .faqItem .faqItemHeader .faqItemHeadingPlus .faqItemHeadingPlusBtn > span {
display: block;
width: 20px;
height: 1.5px;
background: var(--white);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .5s ease;
}
#faq .faqItem .faqItemHeader .faqItemHeadingPlus .faqItemHeadingPlusBtn > span:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(90deg);
transition: .5s ease;
}
#faq .faqItem.isActive .faqItemHeader .faqItemHeadingPlus .faqItemHeadingPlusBtn > span:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(0);
}
#faq .faqItemBody {
display: none;
}
#faq .faqItemBody > .inner {
width: 100%;
padding: 0 clamp(80px, 7.2222vw, 104px) clamp(32px, 3.3333vw, 48px) 0;
}
#faq .faqItemBody .faqItemContent {
font-size: clamp(14px, 1.1111vw, 16px);
line-height: 1.66;
color: var(--lightGray01);
}
#faq .faqItemBody .faqItemContent a:link,
#faq .faqItemBody .faqItemContent a:visited {
text-decoration: underline;
color: var(--lightGray01);
}
@media (any-hover: hover) {
#faq .faqItemBody .faqItemContent a:hover,
#faq .faqItemBody .faqItemContent a:active {
text-decoration: none;
color: var(--white);
}
}
#faq .faqItemBody .faqItemContentList ul {
display: flex;
flex-direction: column;
gap: clamp(2px, .2777vw, 4px);
}
#faq .faqItemBody .faqItemContentListItem {
display: flex;
gap: clamp(8px, .8333vw, 12px);
font-size: clamp(14px, 1.1111vw, 16px);
line-height: 1.66;
}
#faq .faqItemBody .faqItemContentListItem::before {
display: block;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lightGray01);
position: relative;
top: 10px;
}
#faq .faqItemBody .faqItemContentNotes ul {
display: flex;
flex-direction: column;
gap: clamp(2px, .2777vw, 4px);
}
#faq .faqItemBody .faqItemContentNote {
display: flex;
gap: .25em;
font-size: clamp(12px, .9722vw, 14px);
line-height: 1.66;
color: var(--lightGray01);
}
#faq .faqItemBody .faqItemContentNote::before {
display: block;
content: '※';
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
}