@charset "UTF-8";
@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);
}
#getInTouchLink:hover .getInTouchTextContainer {
transform: translate(-50%, -50%) scale(1.25);
}
#getInTouchLink .getInTouchText {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: getInTouchRotate 16s linear infinite;
}
@keyframes getInTouchRotate {
0% {
transform: translate(-50%, -50%) rotateZ(0);
}
100% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
#getInTouchLink .getInTouchText svg {
width: 100%;
}
#getInTouchLink .getInTouchText svg path {
fill: #efefef;
transition: .5s ease;
}
#getInTouchLink .getInTouchPlaneContainer {
display: block;
width: 72px;
height: 72px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#getInTouchLink .getInTouchPlaneContainer::before {
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: #efefef;
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.2);
transition: 0.5s transform cubic-bezier(.275,0,0,1);
}
#getInTouchLink:hover .getInTouchPlaneContainer::before {
transform: translate(-50%, -50%) scale(1);
}
#getInTouchLink .getInTouchPlaneBg {
display: block;
width: 28px;
height: 28px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: 0.5s transform cubic-bezier(.275,0,0,1);
}
#getInTouchLink:hover .getInTouchPlaneBg {
opacity: 1;
visibility: visible;
}
#getInTouchLink #getInTouchPlane {
display: block;
width: 28px;
height: 28px;
position: absolute;
top: calc(50% + 2px);
left: calc(50% - 3px);
transform: translate(-50%, -50%);
overflow: hidden;
transition: .3s ease;
}
#getInTouchLink #getInTouchPlane .getInTouchPlaneBefore,
#getInTouchLink #getInTouchPlane .getInTouchPlaneAfter {
display: block;
width: 28px;
height: 28px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: both;
animation-duration: 0.6s;
}
#getInTouchLink #getInTouchPlane .getInTouchPlaneAfter {
transform: translateX(-100%);
}
#getInTouchLink.isActive #getInTouchPlane .getInTouchPlaneBefore {
animation-name: planeFromLeftToRight;
animation-delay: 0.2s;
}
#getInTouchLink.isActive #getInTouchPlane .getInTouchPlaneAfter {
animation-name: planeFromRightToLeft;
}
#getInTouchLink.isActive:hover #getInTouchPlane .getInTouchPlaneBefore {
animation-name: planeFromRightToLeft;
animation-delay: 0s;
}
#getInTouchLink.isActive:hover #getInTouchPlane .getInTouchPlaneAfter {
animation-name: planeFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes planeFromLeftToRight {
0% {
transform: translate(-100%, 100%);
opacity: 0;
}
100% {
transform: translate(0);
opacity: 1;
}
}
@keyframes planeFromRightToLeft {
0% {
transform: translate(0);
opacity: 1;
}
100% {
transform: translate(100%, -100%);
opacity: 0;
}
}
#getInTouchLink #getInTouchPlane svg path {
fill: #1a1a1a;
transition: .5 ease;
}
@media (max-width: 1024px) {
#getInTouch {
right: 40px;
bottom: 40px;
}
#getInTouchLink {
width: 152px;
height: 152px;
}
#getInTouchLink .getInTouchPlaneContainer {
width: 64px;
height: 64px;
}
}
@media (max-width: 640px) {
#getInTouch {
right: 32px;
bottom: 32px;
}
#getInTouchLink {
width: 128px;
height: 128px;
}
} #getInTouch.isLightMode #getInTouchLink .getInTouchText svg path {
fill: #1a1a1a;
transition: .5s ease;
}
#getInTouch.isLightMode #getInTouchLink .getInTouchPlaneContainer::before {
background: #1a1a1a;
}
#getInTouch.isLightMode #getInTouchLink #getInTouchPlane svg path {
fill: #efefef;
} #footer {
width: 100%;
height: calc(100dvh + 40px);
position: relative;
color: var(--white);
}
#footer.isLightMode {
color: var(--black);
}
#footer > .inner {
height: 100%;
position: relative;
padding: 224px 8% 120px 0;
display: flex;
justify-content: space-between;
gap: 12%;
opacity: 0;
visibility: hidden;
transition: 1s ease;
}
#footer.isActive > .inner {
opacity: 1;
visibility: visible;
}
#footer .footerContactWrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 120px 0 0;
}
#footer .footerContactWrapper > .inner {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#footer .footerContactRollUp {
overflow: hidden;
}
#footer .footerContactRollUp > .inner {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
#footer .footerContactBtn {
position: relative;
overflow: hidden;
}
#footer .footerContactRollUp .footerContactBtn a {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 32px;
font-size: 104px;
color: var(--white);
position: relative;
overflow: hidden;
transform: translate(0, 100%);
transition: 1.5s ease;
}
#footer.isLightMode .footerContactRollUp .footerContactBtn a {
color: var(--black);
}
#footer .footerContactRollUp.isActive .footerContactBtn a {
transform: translate(0, 0);
}
#footer .footerContactBtn a::before {
display: block;
content: '';
width: 100%;
height: 2px;
background: var(--white);
position: absolute;
bottom: 0;
left: 0;
}
#footer.isLightMode .footerContactBtn a::before {
background: var(--black);
}
#footer .footerContactBtn a:hover::before {
animation: footerContactBtnUnderline 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes footerContactBtnUnderline {
0%, 20% {
transform: translateX(0);
}
50% {
transform: translateX(105%);
}
51%, 70% {
transform: translateX(-105%);
}
100% {
transform: translateX(0);
}
}
#footer .footerContactBtn a .footerContactBtnArrow {
position: relative;
bottom: 54px;
width: 24px;
height: 24px;
overflow: hidden;
}
#footer .footerContactBtn a .footerContactBtnArrowBefore,
#footer .footerContactBtn a .footerContactBtnArrowAfter {
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 0;
left: 0;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
#footer .footerContactBtn a .footerContactBtnArrowAfter {
transform: translateX(-100%);
}
#footer .footerContactBtn a:hover .footerContactBtnArrowBefore {
animation-name: footerContactBtnArrowFromRightToLeft;
animation-delay: 0s;
}
#footer .footerContactBtn a:hover .footerContactBtnArrowAfter {
animation-name: footerContactBtnArrowFromLeftToRight;
animation-delay: 0.2s;
}
@keyframes footerContactBtnArrowFromLeftToRight {
0% {
transform: translate(-100%, 100%);
}
100% {
transform: translate(0);
}
}
@keyframes footerContactBtnArrowFromRightToLeft {
0% {
transform: translate(0);
}
100% {
transform: translate(100%, -100%);
}
}
#footer .footerContactBtn a .footerContactBtnArrow svg path {
fill: var(--white);
transition: .5s ease;
}
#footer.isLightMode .footerContactBtn a .footerContactBtnArrow svg path {
fill: var(--black);
}
#footer .footerContactLead {
overflow: hidden;
}
#footer .footerContactLead a:link,
#footer .footerContactLead a:visited {
color: var(--white);
text-decoration: underline;
}
#footer.isLightMode .footerContactLead a:link,
#footer.isLightMode .footerContactLead a:visited {
color: var(--black);
}
@media (any-hover: hover) {
#footer .footerContactLead a:hover,
#footer .footerContactLead a:active {
text-decoration: none;
color: var(--lightGray01);
}
#footer.isActive .footerContactLead a:hover,
#footer.isActive .footerContactLead a:active {
color: var(--lightGray01);
}
}
#footer .footerContactRollUp .footerContactLeadText {
line-height: 2;
transform: translate(0, 100%);
transition: 1s ease;
}
#footer .footerContactRollUp.isActive .footerContactLeadText {
transform: translate(0, 0);
}
#footer .footerNav {
display: flex;
gap: 40px;
margin-bottom: 48px;
}
#footer .footerNavItems ul {
display: flex;
flex-direction: column;
gap: 24px;
}
#footer .footerNavItem {
overflow: hidden;
}
#footer .footerNavItem a {
font-size: 24px;
color: var(--white);
transform: translate(0, 100%);
transition: transform 1s ease;
}
#footer.isLightMode .footerNavItem a {
color: var(--black);
}
#footer .footerNavItem.isActive a {
transform: translate(0, 0);
}
#footer .footerNavItem a .footerNavItemText > span:nth-of-type(2) > span {
left: 0;
transform: translate(0, 0);
}
#footer .footerSocialItems ul {
display: flex;
align-items: center;
gap: 24px;
}
#footer .footerSocialItem {
overflow: hidden;
}
#footer .footerSocialItemNote {
padding: 4px 0 0;
}
#footer .footerSocialItem a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 24px;
height: 28px;
transform: translate(0, 100%);
transition: transform 1s ease;
}
#footer .footerSocialItem.isActive a {
transform: translate(0, 0);
}
#footer .footerSocialItem a .footerNavItemIcon > span:nth-of-type(1),
#footer .footerSocialItem a .footerNavItemIcon > span:nth-of-type(2) {
height: 28px;
}
#footer .copyright {
width: 78px;
height: 12px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
color: #555;
position: absolute;
top: 224px;
right: -78px;
transform: rotate(90deg);
transform-origin: left top;
}
#footer .copyright > small {
line-height: 1;
}
#footerLogo {
position: absolute;
top: 0;
right: 8%;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: clip;
z-index: -2;
opacity: 0;
visibility: hidden; transition: 1s ease;
}
#footer #footerLogo.isActive {
opacity: .8;
visibility: visible; }
#footer.isLightMode #footerLogo.isActive {
opacity: .08;
}
#footerLogoParallaxArea {
width: 495px;
height: 495px;
transition: .5s ease;
}
#footerLogoParallaxObject {
width: 100%;
height: 100%;
}
.footerLogoParallaxObjectImg {
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer #footerLogo svg path {
fill: var(--black);
}
@media (max-width: 1024px) {
#footer > .inner {
padding: 120px 0 40px;
flex-direction: column;
justify-content: unset;
gap: 56px;
}
#footer .footerContactWrapper {
height: auto;
}
#footer .footerContactRollUp .footerContactBtn a {
gap: 8px;
font-size: 80px;
}
#footer .footerContactBtn a .footerContactBtnArrow {
bottom: 40px;
width: 20px;
height: 20px;
}
#footer .footerContactBtn a .footerContactBtnArrowBefore,
#footer .footerContactBtn a .footerContactBtnArrowAfter {
width: 20px;
height: 20px;
}
#footer .copyright {
inset: auto;
bottom: 40px;
transform: rotate(0);
}
}
@media (max-width: 640px) {
#footer > .inner {
padding: 120px 0 24px;
gap: 48px;
}
#footer .footerContactWrapper {
padding-top: 48px;
}
#footer .footerContactRollUp > .inner {
gap: 32px;
}
#footer .footerContactRollUp .footerContactBtn a {
font-size: 48px;
}
#footer .footerContactBtn a .footerContactBtnArrow {
bottom: 25px;
width: 14px;
height: 14px;
}
#footer .footerContactBtn a .footerContactBtnArrowBefore,
#footer .footerContactBtn a .footerContactBtnArrowAfter {
width: 14px;
height: 14px;
}
#footer .footerContactRollUp .footerContactLeadText {
font-size: 14px;
}
#footer .footerContactRollUp .footerContactLeadText br {
display: none;
}
#footer .footerNav {
gap: 32px;
margin-bottom: 40px;
}
#footer .footerNavItem a {
font-size: 22px;
}
#footer .copyright {
bottom: 24px;
}
#footerLogo {
width: 72%;
}
}
 #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) {
}
 :root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, 0.1);--f-spinner-color-2: rgba(17, 24, 28, 0.8);--f-spinner-stroke: 2.75}.f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}.f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}.f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}.f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}.f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.f-throwOutUp{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0, var(--f-throw-out-distance, 150px), 0);opacity:0}}.f-zoomInUp{animation:var(--f-transition-duration, 0.2s) ease .1s both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, 0.2s) ease both f-zoomOutDown}@keyframes f-zoomInUp{from{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}}.f-fadeIn{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeOut{100%{opacity:0}}.f-fadeFastIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn;z-index:2}.f-fadeFastOut{animation:var(--f-transition-duration, 0.1s) ease-out both f-fadeFastOut;z-index:2}@keyframes f-fadeFastIn{0%{opacity:.75}100%{opacity:1}}@keyframes f-fadeFastOut{100%{opacity:0}}.f-fadeSlowIn{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn;z-index:2}.f-fadeSlowOut{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut;z-index:1}@keyframes f-fadeSlowIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeSlowOut{100%{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, 0.2s)*.5) linear .1s both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-crossfadeOut{100%{opacity:0}}.f-slideIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext}.f-slideIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev}.f-slideOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext}.f-slideOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev}@keyframes f-slideInPrev{0%{transform:translateX(100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideInNext{0%{transform:translateX(-100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideOutNext{100%{transform:translateX(-100%)}}@keyframes f-slideOutPrev{100%{transform:translateX(100%)}}.f-classicIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;z-index:2}.f-classicIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;z-index:2}.f-classicOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;z-index:1}.f-classicOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;z-index:1}@keyframes f-classicInNext{0%{transform:translateX(-75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translateX(75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicOutNext{100%{transform:translateX(-75px);opacity:0}}@keyframes f-classicOutPrev{100%{transform:translateX(75px);opacity:0}}:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: 0.65}.f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)}@media(hover: hover){.f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}}.f-button:active:not([disabled]){background-color:var(--f-button-active-bg)}.f-button:focus:not(:focus-visible){outline:none}.f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none}.f-button[disabled]{cursor:default}.f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}.f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next{position:absolute;z-index:1}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)}.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translateX(-50%)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)}.f-carousel__nav .f-button:disabled,.fancybox__nav .f-button:disabled{pointer-events:none}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body{touch-action:none}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden !important;overscroll-behavior-y:none}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, 0.98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, 0.1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:var(--fancybox-zIndex, 1050);outline:none;transform-origin:top left;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container::backdrop{background-color:rgba(0,0,0,0)}.fancybox__backdrop{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity}.fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__viewport{width:100%;height:100%}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__track{display:flex;margin:0 auto;height:100%}.fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;overscroll-behavior:contain;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px}.fancybox__slide.has-iframe,.fancybox__slide.has-video,.fancybox__slide.has-html5video{overflow:hidden}.fancybox__slide.has-image{overflow:hidden}.fancybox__slide.has-image.is-animating,.fancybox__slide.has-image.is-selected{overflow:visible}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}.fancybox__backdrop:empty,.fancybox__viewport:empty,.fancybox__track:empty,.fancybox__slide:empty{display:block}.fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20}.is-loading .fancybox__content{opacity:0}.is-draggable .fancybox__content{cursor:move;cursor:grab}.can-zoom_in .fancybox__content{cursor:zoom-in}.can-zoom_out .fancybox__content{cursor:zoom-out}.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__content [data-selectable],.fancybox__content [contenteditable]{cursor:auto}.fancybox__slide.has-image>.fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__slide.has-image>.fancybox__content>picture>img{width:100%;height:auto;max-height:100%}.is-animating .fancybox__content,.is-dragging .fancybox__content{will-change:transform,width,height}.fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none;filter:blur(0px)}.fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px 0;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible}.is-loading .fancybox__caption,.is-closing .fancybox__caption{opacity:0;visibility:hidden}.is-compact .fancybox__caption{padding-bottom:0}.f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40}.fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75}.is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden}.is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden}.fancybox__content>.f-button.is-close-btn:hover{opacity:1}.fancybox__footer{padding:0;margin:0;position:relative}.fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease}.is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:rgba(24,24,27,.5)}.is-compact .fancybox__footer .fancybox__caption{padding:12px}.is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, 0.6);--f-button-active-bg: rgba(0, 0, 0, 0.6);--f-button-hover-bg: rgba(0, 0, 0, 0.6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px}.fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, 0.3);--f-button-active-bg: rgba(24, 24, 27, 0.5);--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));--f-button-svg-disabled-opacity: 0.65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)}.fancybox__nav .f-button:before{position:absolute;content:"";top:-30px;right:-20px;left:-20px;bottom:-30px;z-index:1}.is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut}.is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));z-index:30;cursor:pointer}.fancybox-protected{position:absolute;top:0;left:0;right:0;bottom:0;z-index:40;user-select:none}.fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;user-select:none;pointer-events:none}.fancybox-focus-guard{outline:none;opacity:0;position:fixed;pointer-events:none}.fancybox__container:not([aria-hidden]){opacity:0}.fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-enter-duration, 0.25s) ease .1s backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:var(--f-backdrop-enter-duration, 0.35s) ease backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-exit-duration, 0.15s) ease forwards f-fadeOut}.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:var(--f-backdrop-exit-duration, 0.35s) ease forwards f-fadeOut}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content{width:calc(100% - 120px);height:90%}.fancybox__container.is-compact .has-iframe .fancybox__content,.fancybox__container.is-compact .has-map .fancybox__content,.fancybox__container.is-compact .has-pdf .fancybox__content{width:100%;height:100%}.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}.f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}.f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px}.f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)}.f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1}.f-thumbs .f-spinner svg{display:none}.f-thumbs.is-vertical{height:100%}.f-thumbs__viewport{width:100%;height:auto;overflow:hidden;transform:translate3d(0, 0, 0)}.f-thumbs__track{display:flex}.f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}.f-thumbs__slide.is-loading img{opacity:0}.is-classic .f-thumbs__viewport{height:100%}.is-modern .f-thumbs__track{width:max-content}.is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc((var(--f-thumb-clip-width, 0))*-0.5);width:calc(var(--width, 0)*1px + var(--f-thumb-clip-width, 0));cursor:pointer}.is-modern .f-thumbs__slide{width:var(--f-thumb-clip-width);transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}.is-modern.is-resting .f-thumbs__slide{transition:transform .33s ease}.is-modern.is-resting .f-thumbs__slide__button{transition:clip-path .33s ease}.is-using-tab .is-modern .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}.f-thumbs__slide__button{appearance:none;width:var(--f-thumb-width);height:100%;margin:0 -100% 0 -100%;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}.f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}.f-thumbs__slide__button:focus:not(:focus-visible){outline:none}.f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}.is-modern .f-thumbs__slide__button{--clip-path: inset( 0 calc( ((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * 0.5 ) round var(--f-thumb-border-radius, 0) );clip-path:var(--clip-path)}.is-classic .is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}.is-classic .is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}.f-thumbs__slide__img{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover;border-radius:var(--f-thumb-border-radius)}.f-thumbs.is-horizontal .f-thumbs__track{padding:8px 0 12px 0}.f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}.f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;padding:0 8px}.f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}.fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(0.23, 1, 0.32, 1)}.fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)}.fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0}.is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px}.fancybox__thumbs.is-masked{max-height:0px !important}.is-closing .fancybox__thumbs{transition:none !important}.fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, 0.65);--f-button-hover-bg: rgba(70, 70, 73, 0.65);--f-button-active-bg: rgba(90, 90, 93, 0.65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: 0.65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));pointer-events:none;z-index:20}.fancybox__toolbar :focus-visible{z-index:1}.fancybox__toolbar.is-absolute,.is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0}.is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.fancybox__toolbar__column.is-left,.fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0}.fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap}.fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;user-select:none}.fancybox__infobar span{padding:0 5px}.fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)}[data-fancybox-toggle-slideshow]{position:relative}[data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3}[data-fancybox-toggle-slideshow] svg g:first-child{display:flex}[data-fancybox-toggle-slideshow] svg g:last-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:first-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:last-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}.f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;user-select:none;pointer-events:none}
.fancybox__container {
z-index: 10001;
} .postHeading {
line-height: 1.5;
margin: 1.75em 0 1.5em;
}
.postHeadingL {
font-size: 1.5em;
}
.postHeadingM {
font-size: 1.3125em;
}
.postHeadingS {
font-size: 1.125em;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
.postHeading {
margin: 1.25em 0;
}
} .post {
font-size: 16px;
}
.post > p a,
.post > dl > * > a {
text-decoration: underline;
}
.post > p:empty {
display: none;
}
@media (any-hover: hover) {
.post > p > a:hover,
.post > p > a:active,
.post > dl > * > a:hover,
.post > dl > * > a:active {
opacity: .5;
text-decoration: none;
}
}
@media (max-width: 1024px) {
.post {
font-size: 14px;
}
}
@media (max-width: 640px) {
} .postModalWrapper {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 3em;
margin-bottom: 3em;
}
.postModalWrapper + .postModalWrapper {
margin-top: -2em;
}
.postModalWrapper.col1 .postModalItem {
width: 100%;
}
.postModalWrapper.col2 .postModalItem {
width: calc(calc(100% - 16px) / 2);
}
.postModalWrapper.col3 .postModalItem {
width: calc(calc(100% - 32px) / 3);
}
a .postModalItemImg {
opacity: 1;
transition: .3s ease;
}
a .postModalItemImg > .img {
display: block;
padding-top: 66.66%;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
.postModalWrapper {
display: flex;
gap: 12px 8px;
margin-top: 2.5em;
margin-bottom: 2.5em;
}
.postModalWrapper + .postModalWrapper {
margin-top: -1.6428em;
}
.postModalWrapper.col2 .postModalItem {
width: calc(calc(100% - 8px) / 2);
}
.postModalWrapper.col3 .postModalItem {
width: calc(calc(100% - 16px) / 3);
}
} .post > ul,
.post > dl > dd > ul {
list-style-type: none;
margin-left: 1.5em;
margin-bottom: 30px;
}
.post > ul > li,
.post > dl > dd > ul > li {
position: relative;
margin-bottom: .25em;
}
.post > ul > li::before,
.post > dl > dd > ul > li::before {
display: block;
content: '';
position: absolute;
top: 10px;
left: -19px;
width: 8px;
height: 8px;
background: var(--gray02);
border-radius: 50%;
}
.post > ol,
.post > dl > dd > ol {
list-style-type: none;
counter-reset: num 0;
}
.post > ol > li,
.post > dl > dd > ol > li {
position: relative;
padding-left: 1.5em;
margin-bottom: .25em;
}
.post > ol > li:before,
.post > dl > dd > ol > li:before {
display: block;
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--gray02);
position: absolute;
top: 4px;
left: 0;
}
.post > ol > li::after,
.post > dl > dd > ol > li::after {
counter-increment: num 1;
content: counter(num);
position: absolute;
left: 0;
top: 4.5px;
font-size: 12px;
color: var(--white);
width: 20px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} .post > dl > dt {
margin-bottom: 1em;
position: relative;
font-weight: 600;
}
.post > dl > dd {
position: relative;
padding: 0 0 0 24px;
}
.post > dl > dd::before {
display: block;
content: '';
width: 4px;
height: 100%;
background: var(--lightGray02);
position: absolute;
top: 0;
left: 0;
opacity: .32;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} .post > blockquote {
background: rgba(26, 26, 26, .04);
position: relative;
border-radius: 8px;
z-index:1;
padding: 32px;
}
.post > blockquote:before,
.post > blockquote:after {
display: block;
content: '';
width: 24px;
height: 19px;
background: no-repeat center center / cover;
position: absolute;
z-index: -1;
opacity: .16;
}
.post > blockquote:before {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/journal/blockquote_open_k.svg);
top: 16px;
left: 16px;
}
.post > blockquote:after {
background-image: url(//bambooworks.co/wp-content/themes/bw2026/assets/images/journal/blockquote_close_k.svg);
bottom: 16px;
right: 16px;
}
.post > blockquote p {
margin-bottom: 1.5em;
}
.post > blockquote p:last-of-type {
margin-bottom: 0;
}
.post > blockquote cite {
font-size: 14px;
font-style: italic;
text-align: right;
display: inherit;
margin-top: 1.25rem;
}
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
} code[class*="language-"],
pre[class*="language-"] {
color: #000;
background: 0 0;
text-shadow: 0 1px #fff;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
code[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
pre[class*="language-"]::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
code[class*="language-"] ::selection,
code[class*="language-"]::selection,
pre[class*="language-"] ::selection,
pre[class*="language-"]::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
pre[class*="language-"] {
padding: 1em; margin-bottom: 1.75em;
overflow: auto;
}
.post > pre:first-child {
margin-top: 0;
}
.post > pre:last-child {
margin-bottom: 0;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #708090;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: 0.7;
}
.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
color: #905;
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #690;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.class-name,
.token.function {
color: #dd4a68;
}
.token.important,
.token.regex,
.token.variable {
color: #e90;
}
.token.bold,
.token.important {
font-weight: 700;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre[data-line] {
position: relative;
padding: 1em 0 1em 3em;
}
.line-highlight {
position: absolute;
left: 0;
right: 0;
padding: inherit 0;
margin-top: 1em;
background: hsla(24, 20%, 50%, 0.08);
background: linear-gradient(
to right,
hsla(24, 20%, 50%, 0.1) 70%,
hsla(24, 20%, 50%, 0)
);
pointer-events: none;
line-height: inherit;
white-space: pre;
}
@media print {
.line-highlight {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
.line-highlight:before,
.line-highlight[data-end]:after {
content: attr(data-start);
position: absolute;
top: 0.4em;
left: 0.6em;
min-width: 1em;
padding: 0 0.5em;
background-color: hsla(24, 20%, 50%, 0.4);
color: #f4f1ef;
font: bold 65%/1.5 sans-serif;
text-align: center;
vertical-align: 0.3em;
border-radius: 999px;
text-shadow: none;
box-shadow: 0 1px #fff;
}
.line-highlight[data-end]:after {
content: attr(data-end);
top: auto;
bottom: 0.4em;
}
.line-numbers .line-highlight:after,
.line-numbers .line-highlight:before {
content: none;
}
pre[id].linkable-line-numbers span.line-numbers-rows {
pointer-events: all;
}
pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
cursor: pointer;
}
pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
background-color: rgba(128, 128, 128, 0.2);
}
pre[class*="language-"].line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
z-index: 10;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: #bbb;
font-size: 0.8em;
padding: 0 0.5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
color: inherit;
text-decoration: none;
}
.command-line-prompt {
border-right: 1px solid #999;
display: block;
float: left;
font-size: 100%;
letter-spacing: -1px;
margin-right: 1em;
pointer-events: none;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.command-line-prompt > span:before {
opacity: 0.7;
content: " ";
display: block;
padding-right: 0.8em;
}
.command-line-prompt > span[data-user]:before {
content: "[" attr(data-user) "@" attr(data-host) "] $";
}
.command-line-prompt > span[data-user="root"]:before {
content: "[" attr(data-user) "@" attr(data-host) "] #";
}
.command-line-prompt > span[data-prompt]:before {
content: attr(data-prompt);
}
.command-line-prompt > span[data-continuation-prompt]:before {
content: attr(data-continuation-prompt);
}
.command-line span.token.output {
opacity: 0.7;
} .post .internal {
margin-top: 3em;
margin-bottom: 3em;
}
.post .internal + .internal {
margin-top: -2em;
}
.post .internal a {
display: block;
}
.post .internal a > .inner {
width: 100%;
border-radius: 8px;
padding: 12px;
background: var(--pureWhite);
display: flex;
align-items: flex-start;
}
.post .internal .internalThumb {
width: 40%;
max-width: 160px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
.post .internal .internalThumb > .internalThumbImg {
padding-top: 66.66%;
}
.post .internal .internalDesc {
flex-flow: 1;
padding: 0 0 0 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.post .internal .internalLabel {
font-size: 12px;
line-height: 1;
padding: 6px 14px 4px 12px;
background: #e8e8e8;
border-radius: 0 11px 11px 0;
}
.post .internal .internalTitle {
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 640px) {
.post .internal a > .inner {
flex-direction: column;
gap: 12px;
padding: 12px 12px 14px;
}
.post .internal .internalThumb {
width: 100%;
max-width: initial;
}
.post .internal .internalDesc {
width: 100%;
padding: 0;
gap: 8px;
}
} .post .box01 {
background: rgba(26, 26, 26, .04);
border-radius: 8px;
}
.post .box01 > .inner {
width: 100%;
padding: 28px 32px;
}
.post .box01 > .inner > * {
width: 100%;
margin-bottom: 1em;
}
.post .box01 > .inner > *:first-child {
margin-top: 0;
}
.post .box01 > .inner > *:last-child {
margin-bottom: 0;
}
@media (max-width: 640px) {
.post .box01 > .inner {
padding: 24px 20px;
}
} .post .youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.post .youtube iframe,
.post .youtube object,
.post .youtube embed {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
} .post .aff_link img {
display: none !important;
}
 #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) {
}