@charset "UTF-8";
  :root {
--green: #204a36;
--green-deep: #17392a;
--green-ink: #2b3e34;
--ink: #2b2b2b;
--ink-soft: #4a4a4a;
--muted: #8c8c8c;
--line: #e3e0d9;
--line-soft: #eeece7;
--bg: #ffffff;
--bg-soft: #f7f6f3;
--serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
--sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
--helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
--pad: clamp(24px, 6vw, 100px);
--gap-section: clamp(92px, 12.5vw, 190px);
--ease: cubic-bezier(.22, .61, .36, 1); --lp-label: clamp(13px, .95vw, 15px);
--lp-body: clamp(16px, 1.2vw, 18px);
--lp-body-sm: clamp(15px, 1.12vw, 17px);
--lp-caption: clamp(13px, .95vw, 15px);
--lp-caption-sm: clamp(13px, .88vw, 14px);
--lp-heading: clamp(31px, 3vw, 45px);
--lp-heading-md: clamp(29px, 2.8vw, 41px);
--lp-title: clamp(19px, 1.55vw, 23px);
--lp-lead: clamp(18px, 1.52vw, 22px);
--lp-step-title: clamp(17px, 1.4vw, 21px);
--lp-ui: clamp(16px, 1.2vw, 18px);
--lp-nav: clamp(14px, 1.15vw, 19px);
--lp-hero-lead: clamp(16px, 1.48vw, 23px);
--lp-name: clamp(31px, 3vw, 43px);
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body,
h1,
h2,
h3,
p,
ul,
ol,
li,
figure,
form {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
body {
font-size: 21px;
font-family: var(--serif);
font-weight: 600;
color: var(--ink);
background: var(--bg);
line-height: 2;
letter-spacing: .06em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
} .label {
font-family: var(--serif);
font-size: clamp(13px, 1.05vw, 17px);
font-weight: 600;
line-height: 1;
letter-spacing: .34em;
text-indent: .34em;
color: var(--muted);
margin-bottom: 26px;
}
.label--light {
color: rgba(255, 255, 255, .72);
}
.heading-lg {
font-size: clamp(26px, 3.15vw, 47px);
font-weight: 700;
line-height: 1.7;
letter-spacing: .13em;
text-indent: .13em;
}
.heading-md {
font-size: clamp(25px, 2.9vw, 44px);
font-weight: 700;
line-height: 1.8;
letter-spacing: .15em;
text-indent: .15em;
}
.section-head {
text-align: center;
margin-bottom: clamp(44px, 5vw, 72px);
}
.section-head .label {
margin-bottom: 20px;
}
.section-head__sub {
margin-top: 22px;
font-size: 17px;
line-height: 2.2;
letter-spacing: .1em;
color: var(--muted);
} .reveal {
opacity: 0;
transform: translateY(34px);
filter: blur(8px);
transition:
opacity 1.25s var(--ease),
transform 1.25s var(--ease),
filter 1.25s var(--ease);
will-change: opacity, transform, filter;
}
.reveal.is-visible {
opacity: 1;
transform: none;
filter: none;
}
.reveal--left {
transform: translate3d(-36px, 18px, 0);
}
.reveal--right {
transform: translate3d(36px, 18px, 0);
}
.reveal--soft {
transform: translateY(20px) scale(.985);
}
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--soft.is-visible {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
.hero__slide.is-active img,
.hero__slide.is-leaving img,
.band__slide.is-active img,
.band__slide.is-leaving img,
.hero__dots button.is-active::after {
animation: none;
}
.hero__slide img,
.band__slide img {
transform: none;
}
.band__caption {
transform: none;
}
.hero__dots button.is-active::before {
background: #fff;
}
} .site-header {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
border-bottom: 1px solid var(--line-soft);
transition: box-shadow .5s var(--ease);
}
.site-header.is-scrolled {
box-shadow: 0 1px 0 var(--line-soft);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 14px var(--pad);
}
.brand {
display: block;
flex: 0 0 auto;
}
.brand--circle {
width: clamp(44px, 4.5vw, 56px);
}
.brand__logo {
width: 100%;
height: auto;
}
.site-nav {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: clamp(10px, 1.1vw, 15px);
}
.site-nav__list {
display: flex;
align-items: center;
gap: clamp(16px, 1.9vw, 30px);
}
.site-nav__list a {
position: relative;
font-family: var(--helvetica);
font-size: clamp(12px, .99vw, 16px);
font-weight: 600;
letter-spacing: .22em;
line-height: 1;
color: var(--green);
text-transform: uppercase;
transition: opacity .3s var(--ease);
}
.site-nav__list a::after {
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform .45s var(--ease);
}
.site-nav__list a:hover {
opacity: 1;
}
.site-nav__list a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.site-nav__lang {
display: none;
}
.nav-toggle span {
background: var(--green);
} .site-header.is-scrolled .site-header__inner {
padding-top: 12px;
padding-bottom: 12px;
} .nav-toggle {
display: none;
position: relative;
width: 26px;
height: 16px;
z-index: 2;
}
.nav-toggle span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transition: transform .4s var(--ease), opacity .3s var(--ease), background-color .5s var(--ease);
}
.nav-toggle span:nth-child(1) {
top: 0;
}
.nav-toggle span:nth-child(2) {
top: 50%;
}
.nav-toggle span:nth-child(3) {
top: 100%;
} .hero {
position: relative;
height: 100vh;
min-height: 560px;
overflow: hidden;
} .hero__slider {
position: absolute;
inset: 0;
overflow: hidden;
background: #0b1420;
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.8s var(--ease);
will-change: opacity;
}
.hero__slide.is-active {
opacity: 1;
}
.hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.12);
} .hero__slide.is-active img,
.hero__slide.is-leaving img {
animation: heroKenBurns 9.5s linear both;
}
@keyframes heroKenBurns {
from {
transform: scale(1.12);
}
to {
transform: scale(1);
}
} .hero__dots {
position: absolute;
right: var(--pad);
bottom: clamp(26px, 4.4vw, 62px);
display: flex;
align-items: center;
gap: 12px;
z-index: 2;
}
.hero__dots button {
position: relative;
width: clamp(24px, 2.2vw, 34px);
height: 14px;
display: grid;
align-items: center;
}
.hero__dots button::before {
content: "";
display: block;
height: 1px;
width: 100%;
background: rgba(255, 255, 255, .45);
transition: background-color .5s var(--ease);
}
.hero__dots button::after {
content: "";
position: absolute;
left: 0;
top: 50%;
height: 1px;
width: 100%;
background: #fff;
transform: scaleX(0);
transform-origin: left;
}
.hero__dots button.is-active::after {
animation: heroDotFill var(--hero-interval, 6s) linear forwards;
}
@keyframes heroDotFill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.hero__veil {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom,
rgba(9, 18, 34, .46) 0%,
rgba(9, 18, 34, .24) 28%,
rgba(9, 18, 34, .30) 55%,
rgba(9, 18, 34, .46) 100%);
} .hero__copy {
position: absolute;
left: 0;
right: auto;
top: 53%;
transform: translateY(-50%);
width: min(960px, 100%);
padding-inline: var(--pad);
text-align: left;
color: #fff;
}
.hero__title {
font-size: clamp(36px, 5.6vw, 86px);
font-weight: 600;
line-height: 1.45;
letter-spacing: .3em;
text-indent: 0;
text-shadow: 0 2px 24px rgba(6, 14, 28, .45);
opacity: 0;
animation: heroRise 1.5s var(--ease) .35s forwards;
word-break: keep-all;
}
.hero__lead {
margin-top: clamp(18px, 2.2vw, 34px);
font-size: clamp(14px, 1.35vw, 20px);
font-weight: 500;
line-height: 2;
letter-spacing: .2em;
text-indent: 0;
color: rgba(255, 255, 255, .92);
text-shadow: 0 2px 18px rgba(6, 14, 28, .45);
opacity: 0;
animation: heroRise 1.5s var(--ease) .65s forwards;
word-break: keep-all;
}
.hero__tagline {
position: absolute;
left: 0;
right: 0;
bottom: clamp(26px, 4.4vw, 62px);
padding-inline: var(--pad);
text-align: center;
font-size: clamp(16px, 1.45vw, 22px);
font-weight: 500;
line-height: 1.8;
letter-spacing: .2em;
text-indent: .2em;
color: rgba(255, 255, 255, .78);
opacity: 0;
animation: heroRise 1.5s var(--ease) .95s forwards;
}
@keyframes heroRise {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: none;
}
} .scroll-cue {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
margin-top: clamp(-56px, -4vw, -34px);
height: clamp(110px, 12vw, 168px);
}
.scroll-cue__line {
position: relative;
width: 1px;
height: 100%;
overflow: hidden;
background: linear-gradient(to bottom,
rgba(255, 255, 255, .8) 0,
rgba(255, 255, 255, .8) 40%,
var(--line) 40%,
var(--line) 100%);
}
.scroll-cue__line::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 40%;
background: var(--green);
animation: cueDrop 2.4s var(--ease) infinite;
}
@keyframes cueDrop {
0% {
transform: translateY(-100%);
}
60%,
100% {
transform: translateY(250%);
}
} .about {
padding: clamp(40px, 5vw, 70px) 0 var(--gap-section);
}
.about__inner {
display: grid;
grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
align-items: center;
gap: clamp(28px, 4vw, 62px);
padding-left: clamp(16px, 2.4vw, 36px);
padding-right: var(--pad);
}
.about__media {
overflow: hidden;
}
.about__media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.about__media:hover img {
transform: scale(1.04);
}
.about__body {
max-width: 700px;
}
.about__text {
margin-top: clamp(26px, 2.6vw, 40px);
font-size: clamp(15px, 1.17vw, 18px);
line-height: 2.5;
letter-spacing: .09em;
color: var(--ink-soft);
} .strength {
padding: 0 var(--pad) var(--gap-section);
}
.strength__inner {
max-width: 1180px;
margin-inline: auto;
}
.strength__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 34px);
}
.card {
border: 1px solid var(--line);
background: #fff;
padding: clamp(14px, 1.4vw, 20px);
transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease);
}
.card:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: 0 18px 44px rgba(32, 74, 54, .12);
}
.card__media {
overflow: hidden;
}
.card__media img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 1.2s var(--ease);
}
.card:hover .card__media img {
transform: scale(1.05);
}
.card__body {
text-align: center;
padding: clamp(28px, 3.2vw, 48px) 8px clamp(24px, 2.8vw, 42px);
}
.card__title {
font-size: clamp(18px, 1.45vw, 21px);
font-weight: 600;
letter-spacing: .18em;
text-indent: .18em;
line-height: 1.8;
}
.card__en {
margin-top: 7px;
font-size: clamp(11px, .83vw, 12px);
font-weight: 500;
letter-spacing: .2em;
text-indent: .2em;
line-height: 1.6;
color: #b6b2a9;
}
.card__text {
margin-top: clamp(16px, 1.5vw, 22px);
font-size: clamp(14px, 1.06vw, 16px);
line-height: 2.1;
letter-spacing: .07em;
color: var(--muted);
} .band {
position: relative;
height: clamp(400px, 59vw, 900px);
overflow: hidden;
} .band__slider {
position: absolute;
inset: 0;
overflow: hidden;
background: #0d1712;
}
.band__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.6s var(--ease);
will-change: opacity;
}
.band__slide.is-active {
opacity: 1;
}
.band__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
transform: scale(1.1);
}
.band__slide.is-active img,
.band__slide.is-leaving img {
animation: bandKenBurns 8.6s linear both;
}
@keyframes bandKenBurns {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
} .band__captions {
display: grid;
}
.band__caption {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(10px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
pointer-events: none;
}
.band__caption.is-active {
opacity: 1;
transform: none;
pointer-events: auto;
}
.band__veil {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(8, 16, 12, .68) 0%, rgba(8, 16, 12, .30) 55%, rgba(8, 16, 12, .42) 100%),
linear-gradient(to top, rgba(8, 16, 12, .55) 0%, rgba(8, 16, 12, 0) 45%);
}
.band__inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(40px, 6vw, 92px) var(--pad) clamp(40px, 9vw, 140px);
color: #fff;
}
.band__title {
font-size: clamp(24px, 2.72vw, 40px);
font-weight: 500;
line-height: 1.9;
letter-spacing: .16em;
text-indent: .16em;
text-shadow: 0 2px 20px rgba(6, 14, 10, .4);
}
.band__foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(20px, 4vw, 60px);
}
.band__lead {
font-size: clamp(17px, 1.45vw, 21px);
font-weight: 600;
line-height: 1.9;
letter-spacing: .16em;
text-indent: .16em;
}
.band__note {
margin-top: 10px;
font-size: clamp(12px, 1.06vw, 16px);
font-weight: 500;
line-height: 2;
letter-spacing: .1em;
color: rgba(255, 255, 255, .8);
}
.band__action {
flex: 0 0 auto;
display: grid;
place-items: center;
width: clamp(52px, 5.5vw, 76px);
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 50%;
color: #fff;
transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.band__action svg {
width: 34%;
}
.band__action:hover {
background: #fff;
border-color: #fff;
color: var(--green);
} .member {
padding: var(--gap-section) var(--pad);
}
.member__inner {
max-width: 1180px;
margin-inline: auto;
}
.member__stage {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(14px, 2.5vw, 40px);
}
.member__viewport {
flex: 0 1 1070px;
margin-inline: auto;
overflow: hidden;
}
.member__track {
display: flex;
transition: transform .8s var(--ease);
}
.profile {
flex: 0 0 100%;
display: grid;
grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
align-items: stretch;
min-height: clamp(340px, 41vw, 626px);
background: var(--green-ink);
color: #f4f2ed;
}
.profile__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile__body {
padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3.6vw, 56px);
display: flex;
flex-direction: column;
justify-content: center;
}
.profile__role {
font-family: var(--serif);
font-size: 12px;
letter-spacing: .2em;
line-height: 1.6;
color: rgba(244, 242, 237, .6);
}
.profile__name {
margin-top: 10px;
font-size: clamp(25px, 2.53vw, 36px);
font-weight: 500;
letter-spacing: .1em;
line-height: 1.5;
}
.profile__text {
margin-top: clamp(20px, 2.4vw, 34px);
font-size: 16px;
line-height: 2.4;
letter-spacing: .07em;
color: rgba(244, 242, 237, .8);
}
.member__arrow {
flex: 0 0 auto;
display: grid;
place-items: center;
width: clamp(46px, 5.6vw, 84px);
aspect-ratio: 1;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--green);
transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.member__arrow svg {
width: 40%;
}
.member__arrow:hover {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.member__dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 34px;
}
.member__dots button {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--line);
transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.member__dots button.is-active {
background: var(--green);
transform: scale(1.4);
} .flow {
background: var(--green);
color: #f2f0ea;
padding: clamp(64px, 8vw, 120px) var(--pad) clamp(64px, 9vw, 132px);
}
.flow__inner {
max-width: 1290px;
margin-inline: auto;
}
.flow__head {
margin-bottom: clamp(34px, 4vw, 60px);
}
.flow__head .label {
margin-bottom: 20px;
}
.flow__title {
font-size: clamp(27px, 2.91vw, 43px);
font-weight: 500;
line-height: 1.7;
letter-spacing: .1em;
text-indent: .1em;
}
.flow__list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(10px, 1.6vw, 24px);
}
.step {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
gap: clamp(18px, 2vw, 28px);
min-height: clamp(250px, 24.5vw, 373px);
padding: clamp(22px, 2.2vw, 32px) clamp(10px, 1.1vw, 16px);
border: 1px solid rgba(242, 240, 234, .3);
transition: background-color .6s var(--ease);
}
.step:hover {
background: rgba(255, 255, 255, .06);
}
.step__no {
display: block;
font-family: var(--serif);
font-size: clamp(12px, .99vw, 16px);
font-weight: 500;
letter-spacing: .18em;
text-indent: .18em;
line-height: 1;
color: rgba(242, 240, 234, .6);
}
.step__label {
margin-top: clamp(14px, 1.5vw, 22px);
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 500;
line-height: 1.9;
letter-spacing: .1em;
text-indent: .1em;
}
.step__icon {
display: block;
width: clamp(32px, 3vw, 44px);
}
.step__icon svg {
width: 100%;
height: auto;
fill: currentColor;
} .step__icon svg .cut {
fill: var(--green);
}
.step__desc {
font-size: clamp(11px, .87vw, 14px);
font-weight: 500;
line-height: 1.95;
letter-spacing: .05em;
color: rgba(242, 240, 234, .62);
} .support {
background: var(--bg-soft);
padding: var(--gap-section) var(--pad);
}
.support__inner {
max-width: 1000px;
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
align-items: center;
gap: clamp(36px, 6vw, 84px);
}
.support__device {
display: flex;
justify-content: center;
}
.phone {
position: relative;
width: min(330px, 100%);
aspect-ratio: 9 / 19.2;
padding: 9px;
border-radius: 34px;
background: #1d1d1f;
box-shadow: 0 26px 60px rgba(20, 41, 31, .22);
}
.phone__notch {
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 34%;
height: 16px;
background: #1d1d1f;
border-radius: 0 0 12px 12px;
z-index: 2;
}
.phone__screen {
height: 100%;
border-radius: 26px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
}
.phone__hero {
flex: 0 0 34%;
overflow: hidden;
}
.phone__hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.phone__ui {
flex: 1 1 auto;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 9px;
}
.phone__bar {
display: block;
height: 6px;
border-radius: 3px;
background: #e7e5e0;
}
.phone__bar--title {
height: 9px;
width: 62%;
background: #cfd5d0;
}
.phone__bar--short {
width: 46%;
}
.phone__row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-top: 1px solid #f0eee9;
}
.phone__row span:first-child {
width: 22px;
height: 22px;
border-radius: 6px;
background: #eceae5;
flex: 0 0 auto;
}
.phone__row span:last-child {
height: 6px;
border-radius: 3px;
background: #ecebe6;
flex: 1 1 auto;
}
.phone__cta {
margin-top: auto;
display: block;
height: 30px;
border-radius: 6px;
background: var(--green);
}
.support__text {
margin-top: 28px;
font-size: 16px;
line-height: 2.5;
letter-spacing: .08em;
color: var(--ink-soft);
}
.heading-md--left {
text-align: left;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 30px;
font-family: var(--serif);
font-size: 14px;
letter-spacing: .16em;
color: var(--green);
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
transition: border-color .45s var(--ease), gap .45s var(--ease);
}
.link-arrow svg {
width: 16px;
}
.link-arrow:hover {
border-color: var(--green);
gap: 18px;
} .contact {
padding: var(--gap-section) var(--pad);
}
.contact__inner {
max-width: 700px;
margin-inline: auto;
}
.form {
margin-top: 8px;
}
.form__field {
margin-bottom: 22px;
}
.form__label {
display: block;
font-size: 15px;
letter-spacing: .12em;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: 9px;
}
.req {
color: #b4674f;
}
.form__input {
display: block;
width: 100%;
padding: 13px 14px;
font-family: var(--serif);
font-size: 17px;
font-weight: 500;
line-height: 1.7;
letter-spacing: .05em;
background: #f2f1ee;
border: 1px solid transparent;
border-radius: 2px;
outline: none;
transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.form__input::placeholder {
color: #b3b0a9;
}
.form__input:focus {
background: #fff;
border-color: var(--green);
}
.form__input--area {
resize: vertical;
min-height: 150px;
}
.form__input.is-invalid {
border-color: #c0705a;
background: #fbf5f3;
}
.form__error {
min-height: 0;
margin-top: 6px;
font-size: 14px;
line-height: 1.6;
letter-spacing: .06em;
color: #b4674f;
}
.form__error--center {
text-align: center;
}
.form__consent {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 10px;
margin-top: 14px;
font-size: 14px;
line-height: 1.9;
letter-spacing: .06em;
color: var(--ink-soft);
cursor: pointer;
}
.form__consent input {
margin-top: 5px;
width: 13px;
height: 13px;
accent-color: var(--green);
flex: 0 0 auto;
}
.form__consent a {
text-decoration: underline;
text-underline-offset: 3px;
}
.form__submit {
display: flex;
justify-content: center;
margin-top: 34px;
}
.btn {
min-width: 220px;
padding: 15px 40px;
font-family: var(--serif);
font-size: 16px;
letter-spacing: .3em;
line-height: 1;
text-indent: .3em;
color: #fff;
background: var(--green);
border: 1px solid var(--green);
border-radius: 2px;
transition: background-color .45s var(--ease), color .45s var(--ease);
}
.btn:hover {
background: #fff;
color: var(--green);
}
.form__done {
margin-top: 22px;
text-align: center;
font-size: 16px;
letter-spacing: .08em;
color: var(--green);
} .site-footer {
background: var(--green);
color: #f2f0ea;
}
.site-footer__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(40px, 5vw, 70px);
padding: clamp(90px, 13vw, 200px) var(--pad) clamp(70px, 10vw, 155px);
}
.footer-brand {
display: block;
width: clamp(118px, 13vw, 186px);
}
.footer-brand img {
width: 100%;
height: auto;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px clamp(20px, 3vw, 40px);
font-family: var(--helvetica);
font-size: 14px;
letter-spacing: .18em;
}
.footer-nav a {
opacity: .75;
transition: opacity .35s var(--ease);
}
.footer-nav a:hover {
opacity: 1;
}
.site-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 26px var(--pad) 30px;
border-top: 1px solid rgba(242, 240, 234, .2);
}
.to-top {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--helvetica);
font-size: 12px;
letter-spacing: .28em;
opacity: .8;
transition: opacity .35s var(--ease);
}
.to-top svg {
width: 13px;
}
.to-top:hover {
opacity: 1;
}
.site-footer__bottom small {
font-family: var(--helvetica);
font-size: 12px;
letter-spacing: .1em;
opacity: .55;
} @media (max-width: 1024px) {
.site-nav__list {
gap: 20px;
}
.site-nav {
gap: 22px;
}
.strength__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.flow__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
body {
line-height: 1.95;
} .nav-toggle {
display: block;
}
.site-nav {
position: fixed;
inset: 0;
flex-direction: column;
justify-content: center;
gap: 40px;
background: var(--green);
clip-path: circle(0% at calc(100% - 40px) 34px);
transition: clip-path .7s var(--ease);
pointer-events: none;
}
.site-nav.is-open {
clip-path: circle(150% at calc(100% - 40px) 34px);
pointer-events: auto;
}
.site-nav__list {
flex-direction: column;
gap: 26px;
}
.site-nav__list a,
.site-nav__lang,
.site-nav__lang button {
color: #fff !important;
font-size: 17px;
letter-spacing: .24em;
}
.site-header.is-scrolled .site-nav__list a {
color: #fff;
}
body.is-nav-open .nav-toggle span {
background: #fff !important;
}
body.is-nav-open .nav-toggle span:nth-child(1) {
top: 50%;
transform: rotate(45deg);
}
body.is-nav-open .nav-toggle span:nth-child(2) {
opacity: 0;
}
body.is-nav-open .nav-toggle span:nth-child(3) {
top: 50%;
transform: rotate(-45deg);
}
body.is-nav-open {
overflow: hidden;
} .about__inner {
grid-template-columns: 1fr;
padding-inline: var(--pad);
}
.about__media img {
aspect-ratio: 3 / 2;
}
.about__body {
max-width: none;
}
.about__text {
font-size: 16px;
line-height: 2.3;
}
.about__text br {
display: none;
}
.strength__list {
grid-template-columns: 1fr;
gap: 18px;
}
.card__media img {
aspect-ratio: 16 / 9;
}
.profile {
grid-template-columns: 1fr;
}
.profile__photo img {
min-height: 0;
aspect-ratio: 4 / 3;
}
.member__stage {
width: 100%;
min-width: 0;
}
.member__viewport {
flex: 1 1 0;
min-width: 0;
max-width: none;
}
.member__arrow {
flex: 0 0 auto;
width: clamp(52px, 14vw, 64px);
}
.flow__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.step {
min-height: 232px;
gap: 14px;
padding: 24px 10px;
}
.collaborate .step__desc br {
display: inline;
}
.step__label br {
display: none;
}
.step:last-child {
grid-column: 1 / -1;
}
.support__inner {
grid-template-columns: 1fr;
}
.support__text br {
display: none;
}
.heading-md--left {
text-align: center;
}
.support__body {
text-align: center;
}
.support__body .label {
text-align: center;
}
.link-arrow {
margin-inline: auto;
}
.band__action {
width: 54px;
}
.band__foot {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
.band__note br {
display: none;
}
.band__title {
letter-spacing: .1em;
text-indent: .1em;
}
.btn {
width: 100%;
}
}
@media (max-width: 359px) {
.flow__list {
grid-template-columns: 1fr;
}
.step:last-child {
grid-column: auto;
}
}  .site-header--float {
position: fixed;
top: clamp(18px, 2.8vw, 36px);
left: clamp(18px, 3.6vw, 56px);
right: clamp(18px, 3.6vw, 56px);
z-index: 100;
background: transparent;
border: none;
transition: top .5s var(--ease), left .5s var(--ease), right .5s var(--ease);
}
.site-header--float .site-header__inner {
background: #fff;
border-radius: 8px;
padding: clamp(14px, 1.6vw, 18px) clamp(22px, 2.6vw, 36px);
min-height: clamp(56px, 6vw, 68px);
box-shadow: 0 8px 32px rgba(15, 30, 22, .10);
transition: border-radius .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.site-header--float.site-header.is-scrolled {
top: 0;
left: 0;
right: 0;
box-shadow: none;
}
.site-header--float.site-header.is-scrolled .site-header__inner {
border-radius: 0;
box-shadow: 0 1px 0 var(--line-soft);
padding-inline: var(--pad);
}
.brand {
display: flex;
align-items: center;
gap: clamp(10px, 1.2vw, 14px);
}
.brand__logo {
display: block;
width: clamp(148px, 13.5vw, 200px);
height: auto;
flex: 0 0 auto;
}
.site-nav {
flex-direction: column;
align-items: flex-end;
gap: clamp(6px, .65vw, 10px);
}
.site-nav__lang {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--helvetica);
font-size: clamp(13px, 1vw, 15px);
font-weight: 600;
letter-spacing: .08em;
color: var(--ink);
opacity: .75;
}
.site-nav__lang button {
font-size: inherit;
color: inherit;
opacity: .65;
padding: 0;
}
.site-nav__lang button.is-active {
opacity: 1;
text-decoration: underline;
text-underline-offset: 3px;
}
.site-header--float .site-nav__list a {
font-family: var(--helvetica);
font-size: clamp(15px, 1.22vw, 18px);
font-weight: 700;
letter-spacing: .06em;
text-transform: none;
color: var(--ink);
opacity: .88;
}
.site-header--float .site-nav__list a:hover {
opacity: 1;
color: var(--green);
}
.site-header--float .nav-toggle span {
background: var(--ink);
} .hero {
position: relative;
height: 100vh;
min-height: 560px;
max-height: none;
overflow: hidden;
--hero-interval: 6s;
}
.hero__slider,
.hero__veil {
z-index: 0;
}
.hero__veil {
z-index: 1;
}
.hero__copy {
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%);
z-index: 3;
width: min(960px, 100%);
margin-inline: auto;
padding-inline: var(--pad);
text-align: center;
}
.hero__title {
font-size: clamp(44px, 6.8vw, 92px);
font-weight: 600;
letter-spacing: .18em;
text-indent: .18em;
line-height: 1.6;
word-break: keep-all;
}
.hero__lead {
margin-top: clamp(20px, 2.6vw, 36px);
font-size: clamp(15px, 1.45vw, 21px);
font-weight: 500;
letter-spacing: .1em;
text-indent: .1em;
line-height: 2;
color: rgba(255, 255, 255, .94);
word-break: keep-all;
}
.hero__title span,
.hero__lead span {
display: inline;
}
@media (min-width: 768px) {
.hero__copy {
width: 100%;
max-width: none;
}
.hero__title,
.hero__lead {
white-space: nowrap;
}
}
.hero__tagline {
position: absolute;
left: 0;
right: 0;
bottom: clamp(28px, 4vw, 52px);
z-index: 3;
padding-inline: var(--pad);
text-align: center;
font-size: clamp(18px, 1.55vw, 23px);
font-weight: 500;
letter-spacing: .12em;
text-indent: .12em;
line-height: 1.8;
color: rgba(255, 255, 255, .82);
opacity: 1;
animation: none;
}
.hero__dots {
z-index: 3;
}
.intro {
padding: clamp(64px, 8vw, 104px) 0 0;
background: #fff;
}
.intro__inner {
width: min(1040px, calc(100% - clamp(48px, 10vw, 160px)));
margin-inline: auto;
padding-bottom: clamp(56px, 7vw, 88px);
}
.intro__head {
text-align: center;
}
.intro__line {
display: block;
width: 1px;
height: clamp(56px, 7vw, 80px);
margin: 0 auto clamp(32px, 3.6vw, 44px);
background: #ddd;
}
.intro__label {
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .34em;
line-height: 1;
color: var(--green);
margin-bottom: clamp(36px, 4.2vw, 52px);
}
.intro__title {
font-family: var(--serif);
font-size: var(--lp-heading-md);
font-weight: 700;
line-height: 2;
letter-spacing: .14em;
color: var(--green);
}
.intro__text {
margin-top: clamp(40px, 4.8vw, 64px);
font-family: var(--serif);
font-size: var(--lp-body);
font-weight: 500;
line-height: 2.45;
letter-spacing: .06em;
color: #000000;
}
.intro__banner {
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
.intro__banner img {
display: block;
width: 100%;
max-width: none;
height: clamp(180px, 22vw, 360px);
object-fit: cover;
object-position: center 38%;
}
.strength {
padding: clamp(64px, 8vw, 104px) var(--pad) clamp(72px, 9vw, 120px);
background: #fff;
}
.strength__inner {
max-width: 1180px;
margin-inline: auto;
}
.strength__head {
text-align: center;
margin-bottom: clamp(48px, 6vw, 72px);
}
.strength__label {
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .34em;
line-height: 1;
color: var(--green);
margin-bottom: clamp(28px, 3.2vw, 40px);
}
.strength__title {
font-family: var(--serif);
font-size: var(--lp-heading-md);
font-weight: 700;
line-height: 1.85;
letter-spacing: .12em;
color: var(--green);
}
.strength__list {
gap: clamp(14px, 1.8vw, 24px);
}
.offerings .card {
border: 1px solid var(--line);
background: #fff;
padding: clamp(10px, 1vw, 14px);
box-shadow: 0 2px 14px rgba(15, 30, 22, .06);
transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease);
}
.offerings .card:hover {
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 22px 50px rgba(15, 30, 22, .13);
}
.offerings .card__media {
width: min(349px, 100%);
aspect-ratio: 1 / 1;
margin-inline: auto;
overflow: hidden;
}
.offerings .card__media img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
display: block;
transition: transform 1.4s var(--ease);
}
.offerings .card:hover .card__media img {
transform: scale(1.06);
}
.offerings .card__media--guide img {
object-position: center 58%;
}
.offerings .card__body {
text-align: center;
padding: clamp(22px, 2.4vw, 32px) clamp(10px, 1.2vw, 16px) clamp(26px, 2.8vw, 36px);
}
.offerings .card__title {
font-family: var(--serif);
font-size: var(--lp-title);
font-weight: 700;
letter-spacing: .12em;
text-indent: 0;
line-height: 1.7;
color: var(--green);
}
.offerings .card__en {
margin-top: 6px;
font-family: var(--serif);
font-size: var(--lp-caption-sm);
font-weight: 500;
letter-spacing: .14em;
text-indent: 0;
line-height: 1.5;
color: #b6b2a9;
}
.lang-en .offerings .card__en:empty {
display: none;
}
.form__optional {
font-size: .85em;
font-weight: 400;
opacity: .75;
}
.offerings .card__text {
margin-top: clamp(18px, 2vw, 26px);
font-family: var(--serif);
font-size: var(--lp-body-sm);
font-weight: 500;
line-height: 2;
letter-spacing: .06em;
color: #000000;
}
.experiences.band {
position: relative;
height: clamp(420px, 56vw, 780px);
overflow: hidden;
--experiences-interval: 6s;
}
.experiences .band__slider,
.experiences .band__veil,
.experiences .band__inner {
position: absolute;
inset: 0;
}
.experiences .band__slider {
z-index: 0;
}
.experiences .band__veil {
z-index: 1;
background:
linear-gradient(to right, rgba(8, 16, 12, .48) 0%, rgba(8, 16, 12, .12) 52%, rgba(8, 16, 12, .22) 100%),
linear-gradient(to top, rgba(8, 16, 12, .38) 0%, rgba(8, 16, 12, 0) 42%);
pointer-events: none;
}
.experiences .band__inner {
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
padding: clamp(36px, 5vw, 72px) var(--pad) clamp(32px, 4.5vw, 56px);
color: #fff;
}
.experiences .band__head {
align-self: flex-start;
}
.experiences .band__label {
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .34em;
line-height: 1;
color: #fff;
margin-bottom: clamp(24px, 2.8vw, 36px);
}
.experiences .band__title {
font-family: var(--serif);
font-size: var(--lp-heading);
font-weight: 600;
line-height: 1.85;
letter-spacing: .12em;
text-indent: 0;
color: #fff;
text-shadow: none;
}
.experiences .band__foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(20px, 3vw, 48px);
}
.experiences .band__captions {
flex: 1 1 auto;
min-width: 0;
}
.experiences .band__action {
border: none;
background: transparent;
cursor: pointer;
padding: 0;
font: inherit;
color: inherit;
}
.experiences .band__copy {
max-width: none;
}
.experiences .band__lead {
font-family: var(--serif);
font-size: var(--lp-lead);
font-weight: 600;
letter-spacing: .08em;
text-indent: 0;
line-height: 1.8;
color: #fff;
}
.experiences .band__note {
margin-top: 8px;
font-family: var(--serif);
font-size: var(--lp-body-sm);
font-weight: 500;
letter-spacing: .06em;
line-height: 1.9;
color: #fff;
}
.experiences .band__credit {
margin-top: clamp(18px, 2.2vw, 28px);
font-family: var(--serif);
font-size: var(--lp-caption-sm);
font-weight: 400;
letter-spacing: .04em;
line-height: 1;
color: rgba(255, 255, 255, .35);
}
.experiences .band__action {
flex: 0 0 auto;
display: grid;
place-items: center;
width: clamp(56px, 5.8vw, 76px);
aspect-ratio: 1;
border: 3px solid rgba(255, 255, 255, .85);
border-radius: 50%;
color: #fff;
transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.experiences .band__action svg {
width: 44%;
}
.experiences .band__action:hover {
background: #fff;
border-color: #fff;
color: var(--green);
}
.core-member {
padding: clamp(64px, 8vw, 104px) var(--pad) clamp(72px, 9vw, 120px);
background: #fff;
}
.core-member .member__inner {
max-width: none;
width: 100%;
}
.core-member .member__stage {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(14px, 2.5vw, 40px);
width: 100%;
}
.core-member .member__viewport {
grid-column: 2;
grid-row: 1;
flex: none;
width: 100%;
max-width: none;
margin-inline: 0;
overflow: hidden;
}
.core-member .member__nav {
display: contents;
}
.core-member .member__arrow--prev {
grid-column: 1;
grid-row: 1;
}
.core-member .member__arrow--next {
grid-column: 3;
grid-row: 1;
}
.core-member .member__head {
text-align: center;
margin-bottom: clamp(40px, 5vw, 56px);
}
.core-member .member__label {
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .34em;
line-height: 1;
color: var(--green);
margin-bottom: clamp(24px, 2.8vw, 36px);
}
.core-member .member__title {
font-family: var(--serif);
font-size: var(--lp-heading-md);
font-weight: 700;
line-height: 1.6;
letter-spacing: .12em;
color: var(--green);
}
.core-member .member__lead {
margin-top: clamp(16px, 2vw, 24px);
font-family: var(--serif);
font-size: var(--lp-body-sm);
font-weight: 500;
letter-spacing: .06em;
line-height: 1.55;
color: #000000;
}
.core-member .profile {
position: relative;
display: block;
width: 100%;
min-height: 0;
background: transparent;
color: #fff;
overflow: hidden;
}
.core-member .profile__photo {
position: relative;
width: 100%;
background: transparent;
}
.core-member .profile__photo img {
display: block;
width: 100%;
height: auto;
object-fit: unset;
object-position: center;
}
.core-member .profile__body {
position: absolute;
top: 0;
bottom: 0;
left: 47%;
right: clamp(28px, 4.5vw, 64px);
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: clamp(28px, 4vw, 48px) 0;
z-index: 1;
}
.core-member .profile__role {
font-family: var(--serif);
font-size: clamp(11px, 0.4vw + 10px, 15px);
font-weight: 500;
letter-spacing: .28em;
line-height: 1;
text-transform: uppercase;
color: rgba(255, 255, 255, .85);
margin: 0 0 clamp(8px, 1vw, 14px);
}
.core-member .profile__name {
margin: 0 0 clamp(18px, 2.2vw, 42px);
font-family: var(--serif);
font-size: clamp(22px, 2vw + 10px, 38px);
font-weight: 600;
letter-spacing: .06em;
line-height: 1.25;
color: #fff;
}
.core-member .profile__text {
margin-top: 0;
font-family: var(--serif);
font-size: clamp(13px, 0.65vw + 8px, 17px);
font-weight: 500;
line-height: 1.5;
letter-spacing: .06em;
color: rgba(255, 255, 255, .92);
max-width: 38em;
}
.core-member .profile__text p {
margin: 0;
}
.core-member .profile__text p + p {
margin-top: 0.9em;
}
.core-member .member__arrow {
width: clamp(52px, 5.5vw, 72px);
border: 3px solid var(--line);
color: var(--ink);
}
.core-member .member__arrow svg {
width: 44%;
}
.core-member .member__arrow:hover {
background: #fff;
border-color: var(--line);
color: var(--ink);
}
@media (max-width: 1440px) {
.core-member {
padding: clamp(48px, 10vw, 64px) var(--pad);
overflow: hidden;
}
.core-member .member__head {
margin-bottom: clamp(28px, 6vw, 40px);
}
.core-member .member__title {
font-size: clamp(24px, 6.4vw, 30px);
}
.core-member .member__stage {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
min-width: 0;
gap: clamp(20px, 4vw, 28px);
}
.core-member .member__viewport {
grid-column: auto;
grid-row: auto;
width: 100%;
max-width: none;
transition: height .45s cubic-bezier(.22, .61, .36, 1);
}
.core-member .member__track {
align-items: flex-start;
}
.core-member .profile {
display: flex;
flex-direction: column;
align-self: flex-start;
position: relative;
overflow: hidden;
background: var(--green-ink);
min-height: auto;
height: auto;
}
.core-member .profile__photo {
position: relative;
flex: 0 0 auto;
}
.core-member .profile__photo img {
width: 100%;
aspect-ratio: 3 / 2;
height: auto;
object-fit: cover;
object-position: center 20%;
}
.core-member .profile__body {
position: static;
flex: 0 0 auto;
width: 100%;
display: block;
padding: 18px 16px 22px;
}
.core-member .profile__role {
font-size: clamp(12px, 3vw, 14px);
letter-spacing: .18em;
margin-bottom: 6px;
}
.core-member .profile__name {
font-size: clamp(24px, 6vw, 30px);
margin-bottom: 12px;
line-height: 1.35;
}
.core-member .profile__text {
font-size: clamp(15px, 3.8vw, 17px);
max-width: none;
line-height: 1.65;
letter-spacing: .04em;
}
.core-member .profile__text p + p {
margin-top: 0.65em;
}
.core-member .member__nav {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(28px, 8vw, 44px);
}
.core-member .member__arrow--prev,
.core-member .member__arrow--next {
grid-column: auto;
grid-row: auto;
}
.core-member .member__arrow {
flex: 0 0 auto;
width: clamp(72px, 20vw, 88px);
border-width: 3px;
}
.core-member .member__arrow svg {
width: 44%;
}
}
.collaborate {
background: #1b3d2f;
color: #fff;
padding: clamp(64px, 8vw, 104px) var(--pad) clamp(72px, 9vw, 120px);
}
.collaborate .flow__head {
text-align: left;
margin-bottom: clamp(40px, 5vw, 56px);
}
.collaborate .flow__label {
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .1em;
line-height: 1;
color: #fff;
margin-bottom: clamp(20px, 2.4vw, 28px);
}
.collaborate .flow__title {
font-family: var(--serif);
font-size: var(--lp-heading);
font-weight: 600;
line-height: 1.7;
letter-spacing: .1em;
text-indent: 0;
color: #fff;
}
.collaborate .flow__list {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(10px, 1.4vw, 18px);
isolation: isolate;
}
.collaborate .flow__list::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 58%;
height: 1px;
background: rgba(255, 255, 255, .32);
pointer-events: none;
z-index: 0;
}
.collaborate .step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(8px, 1vw, 14px);
min-height: clamp(220px, 23vw, 280px);
padding: clamp(14px, 1.5vw, 20px) clamp(12px, 1.2vw, 16px);
border: 1px solid rgba(255, 255, 255, .55);
background: #1b3d2f;
text-align: center;
}
.collaborate .step:hover {
background: #1b3d2f;
}
.collaborate .step__no {
display: block;
width: 100%;
text-align: center;
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .08em;
line-height: 1;
color: rgba(255, 255, 255, .72);
}
.collaborate .step__title {
width: 100%;
min-height: calc(2 * 1.55em);
margin-top: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--serif);
font-size: var(--lp-step-title);
font-weight: 600;
line-height: 1.55;
letter-spacing: .06em;
color: #fff;
text-wrap: balance;
}
.collaborate .step__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: clamp(52px, 5.2vw, 68px);
margin: clamp(6px, 0.8vw, 10px) 0;
color: #fff;
}
.collaborate .step__icon img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.collaborate .step__desc {
display: block;
width: 100%;
min-height: calc(2 * 1.75em);
margin-top: 0;
padding-top: 0;
text-align: center;
font-family: var(--serif);
font-size: var(--lp-caption);
font-weight: 500;
line-height: 1.75;
letter-spacing: .03em;
color: rgba(255, 255, 255, .88);
text-wrap: balance;
}
.collaborate .step__label {
display: none;
}
@media (max-width: 1024px) {
.collaborate .flow__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.collaborate .flow__list::before {
display: none;
}
}
@media (max-width: 767px) {
.collaborate .flow__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.collaborate .step:last-child {
grid-column: 1 / -1;
}
.collaborate .step {
min-height: 208px;
padding: 14px 12px 16px;
}
}
.support {
background: #fff;
}
.online-support {
padding: clamp(64px, 8vw, 104px) var(--pad);
background: #fff;
}
.online-support .support__inner {
max-width: 1180px;
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
align-items: center;
gap: clamp(40px, 6vw, 88px);
}
.online-support .support__device {
display: flex;
justify-content: center;
}
.online-support .support__device img {
display: block;
width: min(196px, 48vw);
height: auto;
margin-inline: auto;
}
.online-support .phone {
width: min(180px, 48vw);
aspect-ratio: 196 / 446;
padding: 8px;
border-radius: 28px;
background: #1d1d1f;
box-shadow: 0 16px 36px rgba(20, 41, 31, .14);
}
.online-support .phone__screen {
height: 100%;
border-radius: 22px;
overflow: hidden;
background: #e5ddd5;
display: flex;
flex-direction: column;
}
.online-support .phone__screen--image {
padding: 0;
background: #000;
}
.online-support .phone__screen--image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: top center;
}
.online-support .phone__chat-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #204a36;
color: #fff;
}
.online-support .phone__chat-logo {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.online-support .phone__chat-brand {
font-family: var(--serif);
font-size: 11px;
font-weight: 500;
letter-spacing: .18em;
}
.online-support .phone__chat-body {
flex: 1 1 auto;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.online-support .phone__bubble {
max-width: 88%;
padding: 8px 10px;
border-radius: 8px;
font-family: var(--serif);
font-size: 7px;
line-height: 1.45;
letter-spacing: 0;
}
.online-support .phone__bubble--in {
align-self: flex-start;
background: #fff;
color: #222;
}
.online-support .phone__bubble--in p {
margin: 0;
}
.online-support .phone__bubble--out {
align-self: flex-end;
background: #d9fdd3;
color: #222;
}
.online-support .phone__bubble-title {
margin: 0 0 4px;
font-weight: 600;
font-size: 7px;
}
.online-support .phone__bubble-list {
margin: 0;
padding: 0;
list-style: none;
}
.online-support .phone__bubble-list li {
display: grid;
grid-template-columns: 24px 1fr;
gap: 4px;
margin-top: 2px;
}
.online-support .phone__bubble-list span {
font-weight: 600;
}
.online-support .phone__chat-footer {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
background: #f0f0f0;
}
.online-support .phone__chat-input {
flex: 1 1 auto;
height: 22px;
border-radius: 16px;
background: #fff;
}
.online-support .phone__chat-action {
width: 18px;
height: 18px;
border-radius: 50%;
background: #cfd5d0;
flex: 0 0 auto;
}
.online-support .support__body {
text-align: left;
}
.online-support .support__label {
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .28em;
line-height: 1;
color: var(--green);
margin-bottom: clamp(24px, 2.8vw, 36px);
}
.online-support .support__title {
font-family: var(--serif);
font-size: var(--lp-heading);
font-weight: 600;
line-height: 1.75;
letter-spacing: .1em;
color: var(--green);
}
.online-support .support__text {
margin-top: clamp(28px, 3.2vw, 40px);
font-family: var(--serif);
font-size: var(--lp-body);
font-weight: 500;
line-height: 2.2;
letter-spacing: .06em;
color: #000000;
}
@media (max-width: 767px) {
.online-support .support__inner {
grid-template-columns: 1fr;
gap: clamp(32px, 8vw, 40px);
}
.online-support .support__body {
order: 1;
text-align: center;
}
.online-support .support__device {
order: 2;
}
.online-support .support__device img {
width: min(160px, 42vw);
}
}
.contact-section {
padding: clamp(64px, 8vw, 104px) var(--pad) clamp(80px, 10vw, 120px);
background: #fff;
}
.contact-section .contact__inner {
max-width: 720px;
margin-inline: auto;
}
.contact-section .contact__head {
text-align: center;
margin-bottom: clamp(40px, 5vw, 56px);
}
.contact-section .contact__label {
font-family: var(--serif);
font-size: var(--lp-label);
font-weight: 500;
letter-spacing: .34em;
line-height: 1;
color: var(--green);
margin-bottom: clamp(24px, 2.8vw, 36px);
}
.contact-section .contact__title {
font-family: var(--serif);
font-size: var(--lp-heading);
font-weight: 600;
line-height: 1.75;
letter-spacing: .1em;
color: var(--green);
}
.contact-section .contact__lead {
margin-top: clamp(20px, 2.4vw, 28px);
font-family: var(--serif);
font-size: var(--lp-body);
font-weight: 500;
line-height: 2;
letter-spacing: .06em;
color: #000000;
}
.contact-section .form {
margin-top: clamp(32px, 4vw, 48px);
}
.contact-section .form__field {
margin-bottom: clamp(18px, 2vw, 24px);
}
.contact-section .form__label {
font-family: var(--serif);
font-size: var(--lp-body-sm);
font-weight: 500;
letter-spacing: .06em;
line-height: 1.6;
color: #000000;
margin-bottom: 12px;
}
.contact-section .form__input {
padding: 12px 14px;
font-family: var(--serif);
font-size: var(--lp-ui);
font-weight: 500;
background: #f2f2f2;
border: none;
border-radius: 0;
}
.contact-section .form__input:focus {
background: #ececec;
border-color: transparent;
}
.contact-section .form__input--area {
min-height: clamp(140px, 16vw, 180px);
resize: vertical;
}
.contact-section .form__consent {
justify-content: center;
margin-top: clamp(20px, 2.4vw, 28px);
font-family: var(--serif);
font-size: var(--lp-caption);
line-height: 1.85;
letter-spacing: .04em;
color: #000000;
text-align: left;
}
.contact-section .form__submit {
margin-top: clamp(28px, 3.2vw, 36px);
}
.contact-section .btn--contact,
.contact-section .wpcf7-submit {
min-width: 0;
width: auto;
max-width: fit-content;
padding: 12px 24px;
font-family: var(--serif);
font-size: var(--lp-ui);
font-weight: 500;
letter-spacing: .1em;
text-indent: 0;
border-radius: 0;
transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
background: var(--green);
border: 1px solid var(--green);
color: #fff;
cursor: pointer;
}
.contact-section .btn.btn--contact:hover,
.contact-section .wpcf7-submit:hover {
background: #000;
border-color: #000;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.contact-section .btn.btn--contact:active,
.contact-section .wpcf7-submit:active {
background: #000;
border-color: #000;
transform: translateY(0);
box-shadow: none;
}
.contact-section .btn.btn--contact:disabled,
.contact-section .wpcf7-submit:disabled {
background: var(--green);
border-color: var(--green);
color: #fff;
opacity: 1;
cursor: pointer;
} .contact-section .wpcf7-form-wrap .wpcf7-form {
margin: 0;
}
.contact-section .wpcf7-form-wrap .wpcf7-form p {
margin: 0;
}
.contact-section .wpcf7-form-wrap .wpcf7-form p.form__label {
margin-bottom: 12px;
}
.contact-section .wpcf7-form-wrap .wpcf7-form-control-wrap {
display: block;
}
.contact-section .wpcf7-form-wrap .wpcf7-not-valid-tip {
margin-top: 8px;
font-family: var(--serif);
font-size: var(--lp-body-sm);
color: #c0392b;
}
.contact-section .wpcf7-form-wrap .wpcf7-spinner {
display: none !important;
}
.contact-section .wpcf7-form-wrap .wpcf7-response-output {
display: none;
}
.contact-section .wpcf7-form-wrap .form__consent .wpcf7-list-item {
margin: 0;
}
.contact-section .wpcf7-form-wrap .form__consent label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.contact-section .wpcf7-form-wrap .form__consent input[type="checkbox"] {
flex-shrink: 0;
margin-top: 4px;
} .contact-section .wpcf7-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance),
.contact-section .wpcf7-form-wrap input.wpcf7-form-control:not(.wpcf7-submit),
.contact-section .wpcf7-form-wrap select.wpcf7-form-control,
.contact-section .wpcf7-form-wrap textarea.wpcf7-form-control,
.contact-section .wpcf7-form-wrap .form__input {
display: block;
width: 100%;
padding: 12px 14px;
font-family: var(--serif);
font-size: var(--lp-ui);
font-weight: 500;
background: #f2f2f2;
border: none;
border-radius: 0;
box-sizing: border-box;
}
.contact-section .wpcf7-form-wrap textarea.wpcf7-form-control,
.contact-section .wpcf7-form-wrap .form__input--area {
min-height: clamp(140px, 16vw, 180px);
resize: vertical;
}
.contact-section .wpcf7-form-wrap .wpcf7-form-control:focus,
.contact-section .wpcf7-form-wrap .form__input:focus {
background: #ececec;
outline: none;
}
.contact-section .wpcf7-form-wrap .form__submit {
display: flex;
justify-content: center;
} .contact-section .contact-wrap_info .title {
display: none;
}
.contact-section .contact-wrap_info,
.contact-section .contact-wrap_info .form-content {
margin: 0;
padding: 0;
}
.contact-section .contact-wrap_info .form-content .flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(18px, 2vw, 24px);
margin-bottom: clamp(18px, 2vw, 24px);
}
.contact-section .contact-wrap_info .form-content .row {
margin-bottom: clamp(18px, 2vw, 24px);
}
.contact-section .contact-wrap_info label {
display: block;
font-family: var(--serif);
font-size: var(--lp-body-sm);
font-weight: 500;
letter-spacing: .06em;
line-height: 1.6;
color: #000;
}
.contact-section .contact-wrap_info label > span:not(.wpcf7-form-control-wrap) {
color: #c0392b;
margin-left: 4px;
}
.contact-section .contact-wrap_info .wpcf7-form-control-wrap {
display: block;
margin-top: 8px;
}
.contact-section .contact-wrap_info .button.lang.EN {
display: flex;
justify-content: center;
margin-top: clamp(28px, 3.2vw, 36px);
}
@media (max-width: 767px) {
.contact-section .contact-wrap_info .form-content .flex {
grid-template-columns: 1fr;
}
}
#wpcf7-modal {
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
justify-content: center;
align-items: center;
z-index: 10000;
}
#wpcf7-modal__bg {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
z-index: -1;
}
#wpcf7-modal__wrap {
background-color: #ffffff;
border-radius: 0;
width: min(90vw, 550px);
max-height: 80vh;
padding: clamp(48px, 8vw, 80px) 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
text-align: center;
}
#wpcf7-modal__wrap .wpcf7-modal__title,
#wpcf7-modal__wrap h3 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(22px, 3.2vw, 30px);
letter-spacing: .1em;
line-height: 1.6;
color: var(--green);
margin: 0 0 clamp(16px, 2vw, 24px);
}
#wpcf7-modal__wrap .wpcf7-modal__text,
#wpcf7-modal__wrap p {
margin: 0 auto clamp(32px, 4vw, 40px);
width: min(90%, 420px);
font-family: var(--serif);
font-size: var(--lp-body-sm);
font-weight: 500;
line-height: 1.85;
letter-spacing: .04em;
color: #000;
}
#wpcf7-modal__wrap .wpcf7-modal__btn {
display: inline-block;
min-width: 200px;
padding: 14px 48px;
font-family: var(--serif);
font-size: var(--lp-ui);
font-weight: 500;
letter-spacing: .2em;
text-indent: .2em;
background: var(--green);
border: 1px solid var(--green);
color: #fff;
border-radius: 0;
text-decoration: none;
cursor: pointer;
transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
#wpcf7-modal__wrap .wpcf7-modal__btn:hover,
#wpcf7-modal__wrap .wpcf7-modal__btn:focus,
#wpcf7-modal__wrap .wpcf7-modal__btn:visited {
background: var(--green-deep);
border-color: var(--green-deep);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(32, 74, 54, .18);
}
#wpcf7-modal__wrap .wpcf7-modal__btn:active {
transform: translateY(0);
box-shadow: none;
}
.form__input--select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 36px;
}
.site-footer__main {
background: #1c442b;
color: #fff;
}
.site-footer__inner {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
gap: clamp(40px, 6vw, 80px);
max-width: 1280px;
margin-inline: auto;
width: 100%;
min-height: clamp(260px, 24vw, 320px);
padding: clamp(72px, 8vw, 108px) clamp(48px, 6vw, 100px) clamp(64px, 7vw, 96px);
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: clamp(22px, 2.4vw, 32px);
flex: 0 0 auto;
color: #fff;
text-decoration: none;
}
.footer-brand__logo {
display: block;
width: clamp(96px, 9vw, 132px);
height: auto;
}
.footer-brand__name {
display: block;
font-family: var(--serif);
font-size: clamp(15px, 1.15vw, 19px);
font-weight: 400;
letter-spacing: .62em;
text-indent: .62em;
line-height: 1;
color: #fff;
}
.site-footer__side {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
gap: clamp(32px, 4vw, 48px);
flex: 1 1 auto;
min-width: 0;
}
.site-footer__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: clamp(16px, 2vw, 24px);
width: 100%;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: clamp(18px, 2.2vw, 36px);
font-family: var(--helvetica);
font-size: clamp(15px, 1.22vw, 18px);
font-weight: 700;
letter-spacing: .06em;
line-height: 1;
}
.footer-nav a {
color: #fff;
opacity: 1;
transition: opacity .35s var(--ease);
}
.footer-nav a:hover {
opacity: .75;
}
.footer-social {
flex: 0 0 auto;
}
.footer-social a {
display: grid;
place-items: center;
width: 36px;
height: 36px;
color: #fff;
opacity: 1;
transition: opacity .35s var(--ease);
}
.footer-social svg {
width: 26px;
height: 26px;
}
.footer-social a:hover {
opacity: .75;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 4px 10px;
font-family: var(--helvetica);
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 500;
letter-spacing: .04em;
line-height: 1.5;
color: rgba(255, 255, 255, .92);
}
.footer-legal a {
color: inherit;
transition: opacity .35s var(--ease);
}
.footer-legal a:hover {
opacity: .7;
}
.footer-legal__sep {
opacity: .65;
}
.site-footer__bottom {
display: flex;
justify-content: center;
align-items: center;
padding: 20px var(--pad);
background: #fff;
border-top: none;
}
.site-footer__bottom small {
font-family: var(--serif);
font-size: clamp(11px, .78vw, 13px);
font-weight: 400;
letter-spacing: .42em;
text-indent: .42em;
color: #8a8a8a;
opacity: 1;
}
@media (max-width: 767px) {
.site-footer__inner {
flex-direction: column;
align-items: center;
text-align: center;
min-height: 0;
padding: clamp(56px, 12vw, 72px) var(--pad) clamp(48px, 10vw, 64px);
}
.footer-brand {
align-items: center;
}
.footer-brand__name {
text-indent: 0;
letter-spacing: .45em;
}
.site-footer__side {
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 28px;
}
.site-footer__meta {
flex-direction: column;
align-items: center;
gap: 20px;
}
.footer-nav,
.footer-legal {
justify-content: center;
}
.support__text br {
display: none;
}
} @media (max-width: 1024px) and (min-width: 768px) {
.intro__inner {
width: min(1040px, calc(100% - clamp(32px, 6vw, 80px)));
}
.offerings .card__media {
width: 100%;
}
.experiences.band {
height: clamp(380px, 52vw, 680px);
}
}
@media (max-width: 900px) {
.strength.offerings .strength__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.strength.offerings .strength__list .card:last-child {
grid-column: 1 / -1;
max-width: 349px;
margin-inline: auto;
width: 100%;
}
}
@media (max-width: 767px) {
body {
font-size: 17px;
}
.site-header--float {
top: 12px;
left: 12px;
right: 12px;
}
.site-header--float.site-header.is-scrolled {
top: 0;
left: 0;
right: 0;
}
.site-header--float .site-header__inner {
padding: 12px 16px;
min-height: 52px;
}
.site-header--float.site-header.is-scrolled .site-header__inner {
padding-inline: var(--pad);
}
.site-header--float .site-nav {
align-items: center;
padding-inline: var(--pad);
}
.site-header--float .site-nav__list {
align-items: center;
}
.site-nav.is-open .site-nav__list a {
text-align: center;
}
.brand__logo {
width: clamp(112px, 32vw, 140px);
}
.hero {
height: 100svh;
min-height: 480px;
}
.hero__copy {
inset: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: none;
width: 100%;
max-width: none;
margin: 0;
padding-inline: clamp(16px, 4vw, 24px);
text-align: center;
box-sizing: border-box;
}
.hero__title span,
.hero__lead span {
display: block;
}
.hero__title {
letter-spacing: .12em;
text-indent: 0;
font-size: clamp(36px, 10vw, 48px);
font-weight: 600;
line-height: 1.65;
}
.hero__lead {
letter-spacing: .08em;
text-indent: 0;
font-size: clamp(13px, 3.6vw, 16px);
font-weight: 500;
line-height: 2;
}
.hero__tagline {
letter-spacing: .06em;
text-indent: 0;
bottom: clamp(68px, 17vw, 84px);
font-size: clamp(15px, 4.2vw, 18px);
padding-inline: clamp(16px, 4vw, 24px);
line-height: 1.7;
}
.hero__dots {
left: 0;
right: 0;
bottom: 20px;
justify-content: center;
}
.intro {
padding-top: clamp(48px, 10vw, 64px);
}
.intro__inner {
width: 100%;
max-width: 100%;
padding-inline: var(--pad);
box-sizing: border-box;
padding-bottom: clamp(40px, 8vw, 56px);
}
.intro__title {
font-size: clamp(24px, 6.4vw, 30px);
line-height: 1.85;
}
.intro__text {
font-size: clamp(15px, 4vw, 17px);
line-height: 2;
}
.intro__banner img {
height: clamp(140px, 38vw, 220px);
}
.strength {
padding: clamp(48px, 10vw, 64px) var(--pad);
}
.strength__head {
margin-bottom: clamp(32px, 6vw, 48px);
}
.strength.offerings .strength__list {
grid-template-columns: 1fr;
max-width: none;
width: 100%;
}
.strength.offerings .strength__list .card:last-child {
grid-column: auto;
max-width: none;
}
.offerings .card {
width: 100%;
}
.offerings .card__media {
width: min(349px, 100%);
max-width: 100%;
margin-inline: auto;
}
.offerings .card__media img {
aspect-ratio: 1 / 1;
}
.experiences.band {
height: clamp(480px, 118vw, 640px);
}
.experiences .band__inner {
align-items: stretch;
padding: clamp(24px, 6vw, 28px) clamp(16px, 4vw, 20px) clamp(24px, 6vw, 32px);
}
.experiences .band__title {
font-size: clamp(24px, 6.5vw, 32px);
line-height: 1.75;
letter-spacing: .08em;
}
.experiences .band__label {
margin-bottom: 16px;
}
.experiences .band__lead {
font-size: clamp(16px, 4.3vw, 19px);
}
.experiences .band__note {
font-size: clamp(14px, 3.7vw, 16px);
line-height: 1.7;
}
.experiences .band__captions {
min-width: 0;
}
.experiences .band__foot {
flex-direction: row;
align-items: flex-end;
gap: 12px;
}
.experiences .band__action {
flex: 0 0 auto;
width: 48px;
border-width: 2px;
}
.collaborate .flow__head {
margin-bottom: clamp(32px, 6vw, 48px);
}
.collaborate .flow__title {
font-size: clamp(24px, 6.4vw, 30px);
}
.contact-section {
padding: clamp(48px, 10vw, 64px) var(--pad);
}
.contact-section .contact__title {
font-size: clamp(26px, 6.8vw, 34px);
}
.contact-section .contact__lead {
font-size: clamp(15px, 4vw, 17px);
line-height: 1.95;
}
}
@media (max-width: 480px) {
.hero {
height: 100svh;
min-height: 380px;
}
.hero__tagline {
bottom: 64px;
font-size: clamp(14px, 3.8vw, 16px);
}
.experiences.band {
height: clamp(460px, 122vw, 580px);
}
.experiences .band__inner {
padding: 20px 16px 24px;
}
.experiences .band__foot {
gap: 10px;
}
.experiences .band__action {
width: 42px;
}
.collaborate .flow__list {
grid-template-columns: 1fr;
}
.collaborate .step:last-child {
grid-column: auto;
}
.core-member .profile__name {
font-size: clamp(22px, 5.4vw, 26px);
}
.core-member .profile__text {
font-size: clamp(14px, 3.6vw, 16px);
line-height: 1.75;
}
.core-member .member__arrow {
width: clamp(68px, 19vw, 80px);
}
} html.lang-en .hero__title {
letter-spacing: .04em;
word-break: normal;
text-indent: 0;
}
html.lang-en .hero__lead {
letter-spacing: .03em;
word-break: normal;
text-indent: 0;
}
html.lang-en .hero__title span,
html.lang-en .hero__lead span {
display: block;
}
@media (min-width: 768px) {
html.lang-en .hero__title,
html.lang-en .hero__lead {
white-space: normal;
}
html.lang-en .hero__title {
line-height: 1.15;
}
html.lang-en .hero__lead {
line-height: 1.35;
margin-top: clamp(32px, 3.6vw, 52px);
}
}
html.lang-en .hero__tagline {
letter-spacing: .04em;
text-indent: 0;
font-size: clamp(19px, 1.75vw, 26px);
}
@media (max-width: 900px) {
html.lang-en .hero__tagline {
font-size: clamp(16px, 4.5vw, 20px);
}
}
@media (max-width: 480px) {
html.lang-en .hero__tagline {
font-size: clamp(15px, 4.2vw, 18px);
}
}
html.lang-en .intro__label,
html.lang-en .strength__label,
html.lang-en .experiences .band__label,
html.lang-en .core-member .member__label,
html.lang-en .contact-section .contact__label {
letter-spacing: .1em;
}
html.lang-en .intro__title,
html.lang-en .strength__title,
html.lang-en .experiences .band__title,
html.lang-en .core-member .member__title,
html.lang-en .collaborate .flow__title,
html.lang-en .online-support .support__title,
html.lang-en .contact-section .contact__title {
letter-spacing: .02em;
}
html.lang-en .intro__text,
html.lang-en .offerings .card__title,
html.lang-en .offerings .card__text,
html.lang-en .experiences .band__lead,
html.lang-en .experiences .band__note,
html.lang-en .core-member .member__lead,
html.lang-en .online-support .support__text,
html.lang-en .contact-section .contact__lead,
html.lang-en .contact-section .form__label,
html.lang-en .contact-section .form__consent {
letter-spacing: 0;
}
html.lang-en .collaborate .flow__label {
letter-spacing: .04em;
}
html.lang-en .collaborate .step__no,
html.lang-en .collaborate .step__title,
html.lang-en .collaborate .step__desc {
letter-spacing: 0;
}
html.lang-en .online-support .support__label {
letter-spacing: .08em;
}
html.lang-en .core-member .profile__role {
letter-spacing: .1em;
}
html.lang-en .core-member .profile__name {
letter-spacing: .02em;
}
html.lang-en .core-member .profile__text {
letter-spacing: 0;
}
html.lang-en .contact-section .btn--contact {
letter-spacing: .06em;
text-indent: 0;
}
html.lang-en .site-header--float .site-nav__list a {
letter-spacing: .03em;
}
html.lang-en .footer-nav {
letter-spacing: .04em;
}
html.lang-en .footer-legal {
letter-spacing: 0;
}
@media (max-width: 1440px) {
html.lang-en .core-member .profile__role {
letter-spacing: .06em;
}
} .intro__line {
transform: scaleY(0);
transform-origin: top center;
transition: transform 1.35s var(--ease);
}
.reveal.is-visible .intro__line {
transform: scaleY(1);
}
.intro__banner.reveal img {
transform: scale(1.08);
transition: transform 2s var(--ease);
}
.intro__banner.reveal.is-visible img {
transform: scale(1);
}
.collaborate .step {
transition: transform .65s var(--ease), box-shadow .65s var(--ease), border-color .65s var(--ease), background-color .65s var(--ease);
}
.collaborate .step:hover {
transform: translateY(-6px);
border-color: rgba(255, 255, 255, .82);
box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}
.collaborate .step__icon img {
transition: transform .8s var(--ease);
}
.collaborate .step:hover .step__icon img {
transform: scale(1.08) translateY(-2px);
}
.contact-section .form__input,
.contact-section .wpcf7-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.contact-section .form__input:focus,
.contact-section .wpcf7-form-wrap .wpcf7-form-control:focus:not(.wpcf7-submit):not(.wpcf7-acceptance) {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(32, 74, 54, .08);
}
.footer-nav a,
.footer-legal a {
display: inline-block;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.footer-nav a:hover,
.footer-legal a:hover {
transform: translateY(-2px);
}
.footer-social a {
transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.footer-social a:hover {
transform: translateY(-3px) scale(1.06);
}
.site-header--float .brand__logo {
transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.site-header--float.is-scrolled .brand__logo {
transform: scale(.94);
}
.band__caption {
transform: translateY(16px);
filter: blur(4px);
transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}
.band__caption.is-active {
filter: none;
}
.core-member .member__arrow {
transition: transform .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.core-member .member__arrow:hover {
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
.intro__line,
.intro__banner.reveal img,
.collaborate .step,
.contact-section .btn--contact,
.contact-section .form__input,
.footer-nav a,
.footer-legal a,
.footer-social a,
.site-header--float .brand__logo,
.band__caption,
.core-member .member__arrow {
transition: none;
transform: none;
filter: none;
}
}