@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;
--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);
} @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: #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: 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: .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;
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) {
}
 #journalContentsWrapper {
color: var(--black);
}
#journalContentsWrapper a:link,
#journalContentsWrapper a:visited {
color: var(--black);
}
@media (any-hover: hover) {
#journalContentsWrapper a:hover,
#journalContentsWrapper a:active {
color: var(--black);
}
} #journalContentsWrapper > .inner {
width: 74%;
margin: 0 10% 0 16%;
padding: 240px 0 104px;
display: flex;
flex-direction: column;
}
@media (max-width: 1024px) {
#journalContentsWrapper > .inner {
width: 92%;
margin: 0 auto;
padding: 200px 0 0;
}
}
@media (max-width: 640px) {
#journalContentsWrapper > .inner {
padding-top: 160px;
}
} #journalContentsWrapper .pageHeader {
width: 100%;
position: sticky;
top: 240px;
z-index: 0;
}
#journalContentsWrapper .pageHeader > .inner {
width: 100%;
display: flex;
flex-direction: column;
}
#journalContentsWrapper .pageHeaderTitle {
font-size: 144px;
line-height: 1;
opacity: 1;
visibility: visible;
transition: .5s ease;
}
#journalContentsWrapper .pageHeaderTitle.isPassive {
opacity: .08;
}
#journalContentsWrapper .pageHeaderTitle.isHidden {
opacity: 0;
visibility: hidden;
}
@media (max-width: 1024px) {
#journalContentsWrapper .pageHeader {
top: 200px;
}
#journalContentsWrapper .pageHeaderTitle {
font-size: 104px;
}
}
@media (max-width: 640px) {
#journalContentsWrapper .pageHeader {
top: 160px;
}
#journalContentsWrapper .pageHeaderTitle {
font-size: 64px;
}
} #journalContentsWrapper .pageBody {
width: 100%;
position: relative;
z-index: 1;
opacity: 0;
visibility: hidden;
transform: translate(0,40px);
transition: 1s ease;
}
#journalContentsWrapper .pageBody.isActive {
opacity: 1;
visibility: visible;
transform: translate(0,0);
}
#journalContentsWrapper .pageBody > .inner {
width: 100%;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} #journalNav {
position: sticky;
top: 120px;
z-index: 1; margin-top: -56px; opacity: 1;
visibility: visible;
transition: .5s ease;
}
#journalNav.isHidden {
opacity: 0;
visibility: hidden;
}
#journalNav > .inner {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 40px;
position: relative;
margin: 0 0 104px;  } #journalNav .journalNavItems {
height: 36px;
overflow: hidden;
}
#journalNav .journalNavItems ul {
display: flex;
align-items: center;
gap: 8px;
}
#journalNav .journalNavItem {
transform: translate(0, 100%);
transition: 1s ease;
}
#journalNav.isActive .journalNavItem {
transform: translate(0, 0);
} #journalNav .journalNavItem a {
font-size: 14px;
height: 36px;
line-height: 36px;
padding: 0 32px;
background: var(--white);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; } #journalNav .journalNavItem a .journalNavItemSplit {
line-height: 1;
overflow: hidden;
}
#journalNav .journalNavSearchContainer {
height: 36px;
overflow: hidden;
}
#journalNav #journalNavSearch {
display: block;
width: 36px;
height: 36px;
position: relative; overflow: hidden;
transform: translate(0, 100%);
transition: 1s ease;
}
#journalNav.isActive #journalNavSearch {
transform: translate(0, 0);
}
#journalNav #journalNavSearch button {
all: unset;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--black);
position: relative;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: .5s ease;
}
@media (any-hover: hover) {
#journalNavSearch button:hover {
background: var(--darkGray02);
}
}
#journalNavSearch .searchBtn .journalNavSearchIcon {
display: block;
width: 15px;
height: 15px;
opacity: 1;
visibility: visible;
transition: .5s ease .3s;
}
#journalNavSearch .searchBtn.isActive .journalNavSearchIcon {
opacity: 0;
visibility: hidden;
}
#journalNavSearch .journalNavSearchIcon svg {
width: 100%;
}
#journalNavSearch .journalNavSearchIcon svg path {
fill: var(--white);
}
@media (max-width: 1024px) {
#journalNav {
top: 96px;
margin-top: 32px;
}
#journalNav > .inner {
justify-content: space-between;
margin-bottom: 64px;
}
}
@media (max-width: 640px) {
#journalNav {
top: 80px;
margin-top: 24px;
}
#journalNav > .inner {
justify-content: space-between;
margin-bottom: 40px;
}
} #journalNavFilter {
position: absolute;
top: -8px;
right: -8px; width: calc(100% + 8px);
max-width: 480px;
background: rgba(26,26,26,.96);
color: var(--white);
border-radius: 8px;
padding: 64px 0 40px;
opacity: 0;
visibility: hidden;
transition: .5s ease;
}
#journalNavFilter.isActive {
opacity: 1;
visibility: visible;
}
#journalNavFilter > .inner {
width: 100%;
}
#journalNavFilterClose {
display: block;
width: 36px;
height: 36px;
position: absolute;
top: 8px;
right: 8px;
overflow: hidden;
}
#journalNavFilterClose .closeBtn {
all: unset;
display: block;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
background: var(--darkGray02);
border-radius: 4px;
overflow: hidden;
}
#journalNavFilter #journalNavFilterClose .closeBtn > span {
display: block;
width: 18px;
height: 1.5px;
background: var(--white);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .3s ease;
}
#journalNavFilter.isActive #journalNavFilterClose .closeBtn > span:nth-of-type(1) {
transform: translate(-50%, -50%) rotate(45deg);
}
#journalNavFilter.isActive #journalNavFilterClose .closeBtn > span:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(-45deg);
}
#journalNavFilter .journalNavFilterBody {
max-height: 400px;
overflow-y: scroll;
overflow-x: hidden;
}
#journalNavFilter .journalNavFilterBody::-webkit-scrollbar {
width: 7px;
}
#journalNavFilter .journalNavFilterBody::-webkit-scrollbar-track {
background: transparent;
}
#journalNavFilter .journalNavFilterBody::-webkit-scrollbar-thumb {
background: var(--gray01);
border-radius: 100px;
}
#journalNavFilter .journalNavFilterBody > .inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
}
#journalNavFilter .journalNavFilterBlock > .inner {
width: 100%;
padding: 0 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
#journalNavFilter .searchForm {
padding: 0;
}
#journalNavFilter .searchForm > .inner {
width: 100%;
height: 44px;
position: relative;
overflow: hidden;
}
#journalNavFilter .searchForm label {
display: none;
}
#journalNavFilter .searchForm input[type=text] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
all: unset;
font-family: inherit;
font-size: 14px;
color: var(--white);
background: var(--darkGray02);
box-sizing: border-box;
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 56px 0 24px;
border-radius: 22px;
border: none;
}
#journalNavFilter .searchForm input[type=text]:focus,
#journalNavFilter .searchForm input[type=text]:active {
outline: 0;
border: none;
}
#journalNavFilter ::placeholder {
color: var(--lightGray01);
}
#journalNavFilter ::-ms-input-placeholder {
color: var(--lightGray01);
}
#journalNavFilter .searchForm button[type='submit'] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
all: unset;
width: 56px;
height: 44px;
line-height: 44px;
background: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
#journalNavFilter .searchForm button[type='submit'] .iconSearch {
display: block;
width: 16px;
height: 16px;
background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/icon/icon_search_w.svg) no-repeat center center / cover;
}
#journalNavFilter .journalNavFilterBlockHeading {
font-size: 12px;
line-height: 1;
color: var(--gray02);
}
#journalNavFilter .journalNavFilterBlock ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#journalNavFilter .journalNavFilterBlockCategory a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 32px;
line-height: 30px;
background: var(--black);
border-radius: 4px;
overflow: hidden;
color: var(--white);
font-size: 12px;
padding: 0 16px;
}
@media (any-hover: hover) {
#journalNavFilter .journalNavFilterBlockCategory a:hover {
background: var(--white);
color: var(--black);
}
}
#journalNavFilter .journalNavFilterBlockTag a {
display: flex; justify-content: center;
align-items: center;
gap: .2em;
height: 26px;
line-height: 24px;
border-radius: 4px;
border: 1px solid var(--darkGray02);
overflow: hidden;
color: var(--white);
font-size: 12px;
padding: 0 12px;
}
#journalNavFilter .journalNavFilterBlockTag a::before {
display: block;
content: '#';
}
@media (any-hover: hover) {
#journalNavFilter .journalNavFilterBlockTag a:hover {
background: var(--white);
color: var(--black);
}
}
@media (max-width: 1024px) {
#journalNavFilter .journalNavFilterBlock > .inner {
padding: 0 40px;
gap: 16px;
}
}
@media (max-width: 640px) {
#journalNavFilter .journalNavFilterBlock > .inner {
padding: 0 24px;
gap: 16px;
}
} #journalContents {
position: relative;
z-index: 0;
}
#journalContents > .inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 104px;
}
@media (max-width: 1024px) {
#journalContents > .inner {
gap: 64px;
}
}
@media (max-width: 640px) {
#journalContents > .inner {
gap: 48px;
}
} .journalPost .journalPostDesc > .inner {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
}
.journalPost .journalPostDescContainer {
display: flex;
flex-direction: column;
gap: 16px;
}
.journalPost .journalPostTitle {
font-size: 16px;
line-height: 1.75;
}
.journalPost .journalPostLead {
font-size: 16px;
line-height: 1.75;
}
.journalPost .journalPostMeta {
color: var(--black);
display: flex;
align-items: center;
gap: 12px;
opacity: .5;
transition: .5s ease;
}
.journalPost .journalPostDate {
font-size: 14px;
flex-shrink: 0;
}
.journalPost .journalPostCats {
display: flex;
align-items: center;
gap: 8px;
}
.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(--black);
border-radius: 4px;
transition: .5s ease;
}
.journalPost .journalPostSeriesTotal {
display: flex; align-items: center;
gap: .1em;
font-size: 12px;
line-height: 24px;
padding: 1px 12px 0;
border: 1px solid var(--black);
border-radius: 4px;
transition: .5s ease;
}
@media (max-width: 1024px) {
.journalPost .journalPostLead {
font-size: 14px;
}
}
@media (max-width: 640px) {
} .journalArchiveSectionHeading {
font-size: 40px;
line-height: 1;
}
.journalArchiveSectionHeading a {
display: flex;
align-items: center;
gap: 16px;
}
.journalArchiveSectionHeading a .journalArchiveSectionHeadingArrow {
display: block;
width: 10px;
height: 16px;
position: relative;
left: 0;
opacity: 1;
transition: .5s ease;
}
.journalArchiveSectionHeading a:hover .journalArchiveSectionHeadingArrow {
left: 4px;
opacity: .5;
}
.journalArchiveSectionHeadingArrow svg {
width: 100%;
}
.journalArchiveSectionHeadingArrow svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
.journalArchiveSectionHeading {
font-size: 36px;
}
}
@media (max-width: 640px) {
.journalArchiveSectionHeading {
font-size: 28px;
}
.journalArchiveSectionHeading a {
gap: 12px;
}
} #feature > .inner {
width: 100%;
}
#feature > .inner .journalPost {
min-height: 420px;
}
#feature > .inner .journalPost a {
width: 100%;
height: 100%;
overflow: hidden;
color: var(--black);
text-decoration: none;
display: flex;
transition: .5s ease;
}
#feature .journalPost .journalPostThumb {
width: 56%;
flex-shrink: 0;
border-radius: 8px;
}
#feature .journalPost .journalPostThumbImg { padding-top: 66.66%;
}
#feature .journalPost .journalPostDesc > .inner { padding: 28px 0 40px 40px;
gap: 20px;
}
#feature .journalPost .journalPostTitle {
font-size: 32px;
}
@media (max-width: 1024px) {
#feature > .inner .journalPost a {
flex-direction: column;
}
#feature .journalPost .journalPostThumb {
width: 100%;
}
#feature .journalPost .journalPostDesc > .inner {
padding: 24px 40px 24px 0;
gap: 20px;
}
#feature .journalPost .journalPostTitle {
font-size: 24px;
}
}
@media (max-width: 640px) {
#feature .journalPost .journalPostThumb {
border-radius: 4px;
}
#feature .journalPost .journalPostDesc > .inner {
padding: 20px 0;
gap: 12px;
}
#feature .journalPost .journalPostTitle {
font-size: 18px;
}
} #latest > .inner {
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
gap: 56px; }
#latest .journalArchiveSectionHeader {
width: 95.24%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
#latest .latestSliderArrows {
overflow: hidden;
}
#latest .latestSliderArrows > .inner {
width: 100%;
background: rgba(26,26,26,.08);
border-radius: 4px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px; transition: 1s ease;
} #latest .latestSliderArrow {
width: 40px;
height: 40px;
background: var(--white);
border-radius: 3px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: .3s ease;
}
@media (any-hover: hover) {
#latest .latestSliderArrow:hover {
background: var(--black);
}
}
#latest .latestSliderArrowInner {
width: 16px;
height: 16px;
position: relative;
overflow: hidden;
}
#latest .latestSliderArrowPrevBefore,
#latest .latestSliderArrowPrevAfter {
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#latest .latestSliderArrowPrevAfter {
transform: translateX(100%);
}
@media (any-hover: hover) {
#latest .latestSliderArrow:hover .latestSliderArrowPrevBefore {
animation-name: latestSliderArrowPrevFromRightToLeft;
animation-delay: 0s;
}
#latest .latestSliderArrow:hover .latestSliderArrowPrevAfter {
animation-name: latestSliderArrowPrevFromLeftToRight;
animation-delay: 0.2s;
}
}
@keyframes latestSliderArrowPrevFromLeftToRight {
0% {
transform: translate(100%, 0);
}
100% {
transform: translate(0);
}
}
@keyframes latestSliderArrowPrevFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%, 0);
}
}
#latest .latestSliderArrowNextBefore,
#latest .latestSliderArrowNextAfter {
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#latest .latestSliderArrowNextAfter {
transform: translateX(-100%);
}
@media (any-hover: hover) {
#latest .latestSliderArrow:hover .latestSliderArrowNextBefore {
animation-name: latestSliderArrowNextFromRightToLeft;
animation-delay: 0s;
}
#latest .latestSliderArrow:hover .latestSliderArrowNextAfter {
animation-name: latestSliderArrowNextFromLeftToRight;
animation-delay: 0.2s;
}
}
@keyframes latestSliderArrowNextFromLeftToRight {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0);
}
}
@keyframes latestSliderArrowNextFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, 0);
}
}
#latest .latestSliderArrow svg {
width: 100%;
}
#latest .latestSliderArrow svg path {
fill: var(--black);
transition: .5 ease;
}
@media (any-hover: hover) {
#latest .latestSliderArrow:hover svg path {
fill: var(--white);
}
}
#latest .latestContents {
width: 2320px;
overflow: hidden;
position: relative; transition: 1s ease;
}
#latest.isActive .latestContents {  }
#latest .latestSlide a {
display: flex;
flex-direction: column;
width: 100%;
height: 100%; overflow: hidden; color: var(--black);
text-decoration: none;
}
#latest .latestSlide .latestSlideThumb {
width: 100%;
border-radius: 4px;
}
#latest .latestSlide .latestSlideThumbImg {
height: 0;
padding-top: 66.66%;
}
#latest .latestSlide .latestSlideDesc > .inner {
width: 100%;
height: 100%;
position: relative; padding: 24px 12% 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#latest .latestSlide .latestSlideTitle { font-size: 16px; line-height: 1.75;
}
#latest .latestSlide .latestSlideMeta { color: var(--black);
display: flex;
align-items: center;
gap: 12px;
opacity: .5;
transition: .5s ease;
}
#latest .latestSlide .latestSlideDate {
font-size: 14px;
flex-shrink: 0;
}
#latest .latestSlide .latestSlideCats {  display: flex; align-items: center;
gap: 8px; }
#latest .latestSlide .latestSlideCat {
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(--black);
border-radius: 4px;
transition: .5s ease;
}
#latest .latestSlide .latestSlideCat::before {
display: none;
}
#latest .latestSlide a .latestSlideArrow {
position: absolute;
top: 20px;
right: 20px;
width: 28px;
height: 28px;
background: var(--black);
border: 1px solid var(--darkGray02);
border-radius: 4px;
overflow: hidden;
display: none;
transition: .3s ease;
}
@media (any-hover: hover) {
#latest .latestSlide a:hover .latestSlideArrow {
background: var(--darkGray02);
border-color: var(--darkGray02);
}
}
#latest .latestSlide a .latestSlideArrowInner {
width: 11px;
height: 11px;
position: relative;
overflow: hidden;
}
#latest .latestSlide a .latestSlideArrowBefore,
#latest .latestSlide a .latestSlideArrowAfter {
display: block;
width: 11px;
height: 11px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#latest .latestSlide a .latestSlideArrowAfter {
transform: translateX(-100%);
}
@media (any-hover: hover) {
#latest .latestSlide a:hover .latestSlideArrowBefore {
animation-name: latestSlideArrowFromRightToLeft;
animation-delay: 0s;
}
#latest .latestSlide a:hover .latestSlideArrowAfter {
animation-name: latestSlideArrowFromLeftToRight;
animation-delay: 0.2s;
}
}
@keyframes latestSlideArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes latestSlideArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
#latest .latestSlide a .latestSlideArrow svg path {
fill: var(--white);
}
@media (max-width: 1024px) {
#latest .journalArchiveSectionHeader {
width: 100%;
}
}
@media (max-width: 640px) {
#latest > .inner {
gap: 32px;
} #latest .latestContents {
width: 1760px;
}
#latest .latestSlide .latestSlideDesc > .inner {
padding: 20px 12% 20px 0;
gap: 12px;
}
#latest .latestSlide .latestSlideTitle {
font-size: 14px;
}
} #general > .inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 7.5%;
}
#generalHeader {
display: flex;
flex-direction: column;
margin-bottom: 32px;
}
#generalHeader .generalType {
font-size: 14px;
line-height: 1;
}
#generalHeader .generalTitle {
font-size: 40px;
line-height: 1.5;
}
@media (max-width: 1024px) {
#general > .inner {
flex-direction: column-reverse;
gap: 64px;
}
}
@media (max-width: 640px) {
} #sidebar {
width: 30%;
max-width: 340px;
min-width: 320px;
flex-shrink: 0;
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 24px;
}
@media (max-width: 1024px) {
#sidebar {
width: 100%;
max-width: initial;
min-width: initial;
}
}
@media (max-width: 640px) {
} #sidebar .categoryItems {
background: #d5d5d5;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column; gap: 4px;
}
#sidebar .categoryItems ul {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px;
}
#sidebar .categoryItem {
width: 100%;
}
#sidebar .categoryItem a {
display: block;
width: 100%;
height: 36px;
line-height: 36px;
font-size: 14px;
border-radius: 4px;
color: var(--black);
position: relative;
overflow: hidden;
}
#sidebar .categoryItem a::before {
display: block;
content: '';
width: 100%;
height: 100%;
background: transparent;
position: absolute;
top: 0;
left: 0;
transition: .3s ease;
transform: translate(-100%, 0);
}
@media (any-hover: hover) {
#sidebar .categoryItem a:hover { color: var(--black);
padding: 0 16px;
}
#sidebar .categoryItem a:hover::before {
background: var(--white);
transform: translate(0, 0);
}
}
#sidebar .categoryItem.current-menu-item a { color: var(--white);
padding: 0 16px;
}
#sidebar .categoryItem.current-menu-item a::before {
background: var(--black);
transform: translate(0, 0);
}
@media (any-hover: hover) {
#sidebar .categoryItem.current-menu-item a:hover { color: var(--white);
padding: 0 16px;
}
}
#sidebar .categoryItem a::after {
display: block;
content: '';
width: 6px;
height: 10px;
background: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/arrow/arrow_03_k.svg) no-repeat center center / cover;
position: absolute;
top: 50%;
right: 16px;
transform: translate(0, -50%);
opacity: 0;
visibility: hidden;
transition: .5s ease;
}
@media (any-hover: hover) {
#sidebar .categoryItem a:hover::after {
opacity: 1;
visibility: visible;
right: 12px;
}
}
#sidebar .categoryItem.current-menu-item a::after {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/arrow/arrow_03_w.svg);
opacity: 1;
visibility: visible;
right: 12px;
}
@media (any-hover: hover) {
#sidebar .categoryItem.current-menu-item a:hover::after {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/arrow/arrow_03_w.svg);
opacity: 1;
visibility: visible;
right: 12px;
}
}
#sidebar .categoryItem a > span {
position: relative;
}
@media (max-width: 1024px) {
#sidebar .categoryItems {
display: none;
}
}
@media (max-width: 640px) {
} #sidebar .cta {
background: var(--black);
border-radius: 8px;
overflow: hidden;
color: var(--white);
}
#sidebar .cta > .inner {
width: 100%;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
#sidebar .ctaHeader > .inner {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
}
#sidebar .ctaHeaderTitle {
font-size: 40px;
line-height: 1;
}
#sidebar .ctaHeaderBy {
display: flex;
align-items: baseline;
gap: 4px;
font-size: 12px;
padding: 0 4px 0 0;
}
#sidebar .ctaHeaderBy .logo {
display: block;
width: 96px;
height: 12px;
}
#sidebar .ctaHeaderBy .logo svg {
width: 100%;
}
#sidebar .ctaHeaderBy .logo svg path {
fill: var(--white);
}
#sidebar .ctaBody {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
#sidebar .ctaDesc p {
display: flex;
flex-direction: column;
font-size: 14px;
}
#sidebar .ctaDesc p > span > span {
margin: 0 .25em;
}
#sidebar .ctaBtn a {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
line-height: 44px;
padding: 0 32px;
border-radius: 4px;
overflow: hidden;
background: var(--white);
color: var(--black);
}
#sidebar .ctaBtn a .ctaBtnTextLine {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.25;
}
.ctaBtn a .ctaBtnText > span:nth-of-type(2) > span {
position: relative;
top: auto;
left: auto;
transform: translate(0, 0);
}
#sidebar .ctaBtn a .icon {
width: 18px;
height: 16px;
}
#sidebar .ctaBtn a .icon svg {
width: 100%;
}
#sidebar .ctaBtn a .icon svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
#sidebar .ctaDesc p {
align-items: center;
}
}
@media (max-width: 640px) {
} #generalContents {
width: 62.5%;
}
#generalContents > .inner {
width: 100%;
}
#generalContents .generalPosts {
display: flex;
flex-direction: column;
gap: 20px;
}
#generalContents .journalPost {
width: 100%;
}
#generalContents .journalPost a {
width: 100%;
display: flex;
align-items: flex-start;
}
#generalContents .journalPostThumb {
width: 40%;
max-width: 280px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
#generalContents .journalPostThumb > .img {
padding-top: 66.66%;
}
#generalContents .journalPostDesc {
flex-grow: 1;
}
#generalContents .journalPostDesc > .inner {
width: 100%; position: relative; padding: 20px 0 24px 20px;
display: flex;
flex-direction: column;
gap: 16px;
} #journalContentsWrapper .btnMore {
display: flex;
justify-content: center;
margin-top: 64px;
}
.notFound #journalContentsWrapper .btnMore {
margin-top: 32px;
margin-bottom: 24px;
}
#journalContentsWrapper .btnMore a {
font-size: 16px;
height: 44px;
line-height: 44px;
padding: 0 32px;
background: var(--black);
color: var(--white);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
}
#journalContentsWrapper .btnMore a .btnMoreSplit {
line-height: 1;
overflow: hidden;
}
@media (max-width: 1024px) {
#generalContents {
width: 100%;
}
}
@media (max-width: 640px) {
#generalContents .generalPosts {
gap: 16px;
}
#generalContents .journalPost a {
flex-direction: column;
}
#generalContents .journalPostThumb {
width: 100%;
max-width: initial;
}
#generalContents .journalPostDesc > .inner {
padding: 20px 0;
gap: 12px;
} #journalContentsWrapper .btnMore {
margin-top: 40px;
}
.notFound #journalContentsWrapper .btnMore {
margin-top: 16px;
margin-bottom: 16px;
}
} #pageNav > .inner {
width: 100%;
margin: 64px 0 0;
display: flex;
justify-content: center;
}
#pageNav .wp-pagenavi {
display: flex;
align-items: center;
gap: 8px;
}
.wp-pagenavi a,
.wp-pagenavi span.current {
border-radius: 4px;
width: 44px;
height: 44px;
line-height: 44px;
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--black);
background: var(--white);
}
.wp-pagenavi span.current {
color: var(--white);
background: var(--black);
}
@media (any-hover: hover) {
#pageNav .wp-pagenavi a:hover,
#pageNav .wp-pagenavi a:active {
color: var(--white);
background: var(--black);
}
}
#pageNav .wp-pagenavi .previouspostslink::before,
#pageNav .wp-pagenavi .nextpostslink::before {
display: block;
content: '';
width: 6px;
height: 10px;
background: no-repeat center center / cover;
transition: .5s ease;
}
#pageNav .wp-pagenavi .previouspostslink::before {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/arrow/arrow_03_k_L.svg);
}
#pageNav .wp-pagenavi .previouspostslink:hover::before {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/arrow/arrow_03_w_L.svg);
}
#pageNav .wp-pagenavi .nextpostslink::before {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/arrow/arrow_03_k.svg);
}
#pageNav .wp-pagenavi .nextpostslink:hover::before {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/common/arrow/arrow_03_w.svg);
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} #journalPostContainer {
background: var(--white);
border-radius: 16px;
overflow: hidden;
color: var(--black);
}
#journalPostContainer > .inner {
width: 100%;
}
#journalPost .journalPostHeader > .inner {
width: 90%;
display: flex;
flex-direction: column;
gap: 24px;
padding: 40px 0;
}
.notFound #journalPost .journalPostHeader > .inner {
padding-bottom: 0;
}
#journalPost .journalPostTitle {
font-size: 2em;
line-height: 1.5;
}
#journalPost .journalPostMeta {
color: var(--black);
display: flex;
align-items: center;
gap: 12px;
opacity: .5;
}
#journalPost .journalPostDates {
font-size: 14px;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 12px;
}
#journalPost .journalPostDate {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
}
#journalPost .journalPostDate .icon {
width: 12px;
height: 12px;
}
#journalPost .journalPostDate .icon svg {
width: 100%;
height: auto;
}
#journalPost .journalPostDate .icon svg path {
fill: var(--black);
}
#journalPost .journalPostCats {
display: flex;
align-items: center;
gap: 8px;
}
#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(--black);
border-radius: 4px;
}
#journalPost .journalEyecatch > .img {
padding-top: 66.66%;
}
#journalPost .journalPostBody > .inner {
width: 90%;
padding: 40px 0;
}
#journalPost .journalPostBody .post {
padding: 0 0 24px;
position: relative;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
#journalPost .journalPostHeader > .inner {
gap: 12px;
padding: 28px 0 24px;
}
#journalPost .journalPostTitle {
font-size: 1.72em;
}
#journalPost .journalPostBody > .inner {
padding: 32px 0 16px;
}
#journalPost .journalPostBody .post {
padding-bottom: 16px;
}
} #journalPostTags {
margin-top: 3em;
}
#journalPostTags ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#journalPostTags a {
display: flex; justify-content: center;
align-items: center;
gap: .2em;
height: 26px;
line-height: 24px;
border-radius: 4px;
border: 1px solid var(--lightGray02);
overflow: hidden;
color: var(--black);
font-size: 12px;
padding: 0 12px;
}
#journalPostTags a::before {
display: block;
content: '#';
}
@media (any-hover: hover) {
#journalPostTags a:hover,
#journalPostTags a:active {
background: #e2e2e2; }
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
#journalPostTags {
margin-top: 2.5em;
}
} .journalPostInfo > .inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
padding: 40px 0;
position: relative;
}
.journalPostInfo > .inner::before {
display: block;
content: '';
width: 100%;
height: 1px;
background: var(--lightGray02);
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, 0);
}
.journalPostInfo .journalPostInfoHeading {
font-size: 1.3125em;
line-height: 1.5;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
.journalPostInfo > .inner {
gap: 20px;
padding: 32px 0;
}
} #journalPostAuthor .journalPostInfoBody {
background: rgba(26, 26, 26, .04);
border-radius: 8px;
overflow: hidden;
}
#journalPostAuthor .journalPostInfoBody > .inner {
width: 100%;
padding: 32px 32px 24px;
display: flex;
align-items: flex-start;
gap: 32px;
}
#journalPostAuthor .journalPostAuthorThumb {
flex-shrink: 0;
}
#journalPostAuthor .journalPostAuthorThumbImg {
width: 112px;
height: 112px;
border-radius: 50%;
overflow: hidden;
}
#journalPostAuthor .journalPostAuthorThumbImg > .img {
padding: 0;
width: 100%;
height: 100%;
}
#journalPostAuthor .journalPostAuthorDesc {
display: flex;
flex-direction: column;
gap: 16px;
}
#journalPostAuthor .journalPostAuthorDesc > .inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
#journalPostAuthor .journalPostAuthorName {
font-size: 16px;
line-height: 1;
}
#journalPostAuthor .journalPostAuthorText {
font-size: 14px;
}
#journalPostAuthor .journalPostAuthorSns ul {
display: flex;
align-items: center;
gap: 16px;
}
#journalPostAuthor .journalPostAuthorSnsItem {
overflow: hidden;
}
#journalPostAuthor .journalPostAuthorSnsItemNote {
padding: 4px 0 0;
}
#journalPostAuthor .journalPostAuthorSnsItem a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 24px;
height: 28px;  }
#journalPostAuthor .journalPostAuthorSnsItem a .journalPostAuthorSnsItemIcon > span:nth-of-type(1),
#journalPostAuthor .journalPostAuthorSnsItem a .journalPostAuthorSnsItemIcon > span:nth-of-type(2) {
height: 28px;
}
#journalPostAuthor .journalPostAuthorSnsItem a svg path {
fill: var(--black); }
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
#journalPostAuthor .journalPostInfoBody > .inner {
padding: 32px 20px 24px;
flex-direction: column;
align-items: center;
gap: 28px;
}
} #journalPostOther > .inner {
padding-bottom: 0;
}
#journalPostOther .journalPostInfoBody > .inner {
width: 100%;
}
#journalPostOther .otherPosts {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
#journalPostOther .otherPost {
width: calc(calc(100% - 24px) / 2);
}
#journalPostOther .otherPost a {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
color: var(--black);
text-decoration: none;
}
#journalPostOther .otherPost .otherPostThumb {
width: 100%;
border-radius: 4px;
}
#journalPostOther .otherPost .otherPostThumbImg {
height: 0;
padding-top: 66.66%;
}
#journalPostOther .otherPost .otherPostDesc > .inner {
width: 100%;
height: 100%;
position: relative;
padding: 24px 12% 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#journalPostOther .otherPost .otherPostTitle {
font-size: 16px;
line-height: 1.75;
}
#journalPostOther .otherPost .otherPostMeta {
color: var(--black);
display: flex;
align-items: center;
gap: 12px;
opacity: .5;
transition: .5s ease;
}
#journalPostOther .otherPost .otherPostDate {
font-size: 14px;
flex-shrink: 0;
}
#journalPostOther .otherPost .otherPostCats {
display: flex;
align-items: center;
gap: 8px;
}
#journalPostOther .otherPost .otherPostCat {
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(--black);
border-radius: 4px;
transition: .5s ease;
}
#journalPostOther .otherPost .otherPostCat::before {
display: none;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
#journalPostOther .otherPosts {
flex-direction: column;
gap: 12px;
}
#journalPostOther .otherPost {
width: 100%;
}
#journalPostOther .otherPost .otherPostDesc > .inner {
padding: 20px 12% 20px 0;
gap: 12px;
}
#journalPostOther .otherPost .otherPostTitle {
font-size: 14px;
}
} #footer.isActive .footerSocialItem a svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
}