html,
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1em;
font-weight: bold;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
ol,
ul {
margin-bottom: 1em;
padding-left: 1.5em;
}
table {
width: 100%;
margin-bottom: 1em;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
padding: 0.5em;
border: 1px solid #000;
}
table th {
font-weight: bold;
}
caption,
table th,
table td {
font-weight: normal;
text-align: left;
vertical-align: middle;
}
strong,
b {
font-weight: 700;
}
em,
i {
font-style: italic;
}
q,
blockquote {
quotes: none;
}
q::before,
q::after,
blockquote::before,
blockquote::after {
content: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body * {
max-height: 99999em;
word-break: break-word;
}
p {
margin-bottom: 1.5em;
}
a {
color: inherit;
}
a:hover {
text-decoration: none;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
vertical-align: middle;
}
a img {
border: none;
}
input,
label,
select,
button {
line-height: inherit;
}
input,
label,
select,
button,
textarea {
display: inline-block;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
word-break: normal;
vertical-align: middle;
white-space: normal;
-webkit-appearance: none;
}
button {
color: inherit;
}
textarea {
overflow: auto;
line-height: 1.5;
white-space: pre-line;
resize: none;
}
button:focus {
outline: 0;
}
button:focus-visible {
outline: 2px solid #000;
}
input:focus,
textarea:focus,
select:focus {
outline: auto;
}
input[type=search] {
-webkit-appearance: textfield;
}
::-webkit-search-decoration {
display: none;
}
@media print {
html,
body {
width: 1600px;
margin: 0;
}
body {
-webkit-print-color-adjust: exact;
}
@page {
margin: 0;
size: 11in 14.028in;
}
@page :left {
margin: 0;
}
@page :right {
margin: 0;
}
@page :first {
margin-top: 0;
}
}
html {
opacity: 0.01;
line-height: 1;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
html.wf-active {
opacity: 1;
}
@media only screen and (min-width: 840px), print {
html {
font-size: 625%;
}
}
@media only screen and (max-width: 839.98px) {
html::-webkit-scrollbar {
width: 0;
opacity: 0;
}
html {
min-height: 100vh;
font-size: 26.6666666667vw;
}
}
body {
background: #f9f0ec;
color: #181818;
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.46666;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
img,
svg {
image-rendering: smooth;
shape-rendering: geometricprecision;
}
.hidden {
display: none;
}
.trans {
-webkit-transition: opacity 0.26s ease;
transition: opacity 0.26s ease;
opacity: 1;
text-decoration: none;
}
.trans:hover {
opacity: 0.8;
}
body:not(.page-id-69) .grecaptcha-badge {
visibility: hidden;
}
@media only screen and (max-width: 839.98px) {
.container {
min-width: 320px;
}
}
@media only screen and (min-width: 840px), print {
.wrapper {
max-width: 1320px;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
}
}
@media only screen and (max-width: 839.98px) {
.wrapper {
padding-right: 0.2rem;
padding-left: 0.2rem;
}
}
@media only screen and (max-width: 1139.98px) {
.lg {
display: none !important;
}
}
@media only screen and (min-width: 840px), print {
.sm {
display: none !important;
}
}
@media only screen and (max-width: 839.98px) {
.md {
display: none !important;
}
}
@media only screen and (min-width: 1140px), print {
.md-sm {
display: none !important;
}
}
.header {
position: fixed;
z-index: 1000;
left: 0;
width: 100%;
-webkit-transition: top 0.3s ease;
transition: top 0.3s ease;
}
.header::before {
content: "";
position: absolute;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
background-image: url("../img/common/icon_envelope_active.svg");
pointer-events: none;
}
@media print {
.header {
position: absolute;
}
}
@media only screen and (min-width: 1140px), print {
.header {
top: 50px;
}
.header--fixed {
top: 20px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.header {
top: 45px;
}
.header--fixed {
top: 20px;
}
}
@media only screen and (max-width: 839.98px) {
.header {
top: 35px;
}
.header--fixed {
top: 20px;
}
}
.header__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
margin: 0 auto;
}
@media only screen and (min-width: 1140px), print {
.header__wrapper {
max-width: 1320px;
padding: 0 20px;
}
}
@media only screen and (max-width: 1139.98px) {
.header__wrapper {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 0 50px;
}
}
@media only screen and (max-width: 839.98px) {
.header__wrapper {
padding: 0 22px;
}
}
.header__logo {
display: block;
position: relative;
}
@media only screen and (min-width: 1140px), print {
.header__logo {
top: 4px;
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
flex: 0 0 100px;
margin: 0 94px 0 0;
}
}
@media only screen and (min-width: 1140px) and (max-width: 1280px), print and (max-width: 1280px) {
.header__logo {
margin-right: 52px;
}
}
@media only screen and (max-width: 1139.98px) {
.header__logo {
top: 2px;
-webkit-box-flex: 0;
-ms-flex: 0 0 48px;
flex: 0 0 48px;
margin: 0;
}
}
.header__logo a {
display: block;
width: 100%;
text-decoration: none;
}
@media (hover: hover) {
.header__logo a {
-webkit-transition: opacity 0.26s ease;
transition: opacity 0.26s ease;
opacity: 1;
}
.header__logo a:hover {
opacity: 0.8;
}
}
.header__logo img {
display: block;
width: 100%;
height: auto;
}
@media only screen and (min-width: 1140px), print {
.header__navigation {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 908px;
height: 75px;
}
}
@media only screen and (max-width: 1139.98px) {
.header__navigation {
display: none;
}
}
.header__language {
position: relative;
}
@media only screen and (min-width: 1140px), print {
.header__language {
width: 154px;
height: 75px;
margin-left: 26px;
}
}
@media only screen and (max-width: 1139.98px) {
.header__language {
width: 111px;
height: 42px;
margin-right: 22px;
margin-left: auto;
}
}
.header__cta {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
position: fixed;
z-index: 10;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 12px 24px;
-webkit-transition: background-color 0.3s ease, color 0.3s ease;
transition: background-color 0.3s ease, color 0.3s ease;
background: #ff7043;
color: #fff;
font-size: 13px;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
}
@media (hover: hover) {
.header__cta:hover {
background-color: #ff855f;
}
}
.header__cta:active, .header__cta.active {
background: #fff;
color: #ff7043;
}
.header__cta:active::after, .header__cta.active::after {
background-image: url("../img/common/icon_envelope_active.svg");
}
@media print {
.header__cta {
position: absolute;
}
}
.header__cta::after {
content: "";
display: block;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-transition: background-image 0s;
transition: background-image 0s;
background: url("../img/common/icon_envelope_light.svg") 0 0/100% auto no-repeat;
}
.header__cta span {
display: block;
position: relative;
}
@media only screen and (min-width: 840px), print {
.header__cta {
top: 188px;
right: 0;
width: 60px;
height: 200px;
border-radius: 20px 0 0 20px;
font-weight: 700;
letter-spacing: 0.2em;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
gap: 12px;
}
.header__cta::after {
width: 21px;
height: 18px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.header__cta {
top: 36.2vw;
}
}
@media only screen and (max-width: 839.98px) {
.header__cta {
top: auto;
right: 20px;
bottom: 20px;
left: 20px;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
width: auto;
height: 50px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
-webkit-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
border-radius: 5px;
opacity: 0;
-webkit-box-shadow: 3px 3px 5px #dadada;
box-shadow: 3px 3px 5px #dadada;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.07em;
pointer-events: none;
gap: 35px;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
.header__cta::after {
width: 32px;
height: 25px;
}
.header__cta--animated {
opacity: 1;
pointer-events: auto;
}
}
.header__btn-menu {
position: relative;
z-index: 1000;
-webkit-box-flex: 0;
-ms-flex: 0 0 42px;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 3.5px;
background: #ff7043;
cursor: pointer;
}
@media only screen and (min-width: 1140px), print {
.header__btn-menu {
display: none;
}
}
.header__btn-menu span {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 2px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background: #fff;
}
.header__btn-menu span::before, .header__btn-menu span::after {
content: "";
display: block;
position: absolute;
left: 0;
width: 24px;
height: 2px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background: #fff;
}
.header__btn-menu span::before {
top: -8px;
}
.header__btn-menu span::after {
top: 8px;
}
.header__btn-menu--active span {
background: transparent;
}
.header__btn-menu--active span::before {
top: 0;
width: 25px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.header__btn-menu--active span::after {
top: 0;
width: 25px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.header__mobile-menu {
overflow: hidden auto;
display: none;
position: fixed;
z-index: 20;
top: 0;
left: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
min-width: 305px;
height: 100%;
padding: 110px 20px 60px;
-webkit-transform: translateX(10%);
-ms-transform: translateX(10%);
transform: translateX(10%);
-webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
transition: opacity 0.4s ease, transform 0.4s ease;
transition: opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
opacity: 0;
background: #ebe1dc url("../img/common/nav_bg.svg") -25px -36px/224px 237px no-repeat;
gap: 56px;
}
.header__mobile-menu--active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.header__mobile-menu--active .mobile-menu__item,
.header__mobile-menu--active .button-cta,
.header__mobile-menu--active .lang-selector {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
@media only screen and (max-width: 839.98px) {
.header__mobile-menu {
background-position: -36px -30px;
}
}
@media only screen and (min-width: 1140px), print {
.header__mobile-menu {
display: none !important;
}
}
.navigation {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
padding: 0 40px;
border-radius: 12px;
background: #ebe1dc;
-webkit-box-shadow: 3px 3px 4px rgba(98, 98, 98, 0.45);
box-shadow: 3px 3px 4px rgba(98, 98, 98, 0.45);
}
.navigation__item {
display: block;
height: 100%;
}
.navigation__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
padding: 0 10px;
color: #181818;
text-decoration: none;
gap: 6px;
}
.navigation__link strong {
display: block;
font-family: "Host Grotesk", sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1;
}
.navigation__link span {
display: block;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.07em;
line-height: 1;
}
.navigation__link {
cursor: pointer;
-webkit-transition: color 0.26s ease;
transition: color 0.26s ease;
}
@media (hover: hover) {
.navigation__link:hover {
color: #ff7043;
}
}
.lang-switcher {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #ebe1dc;
}
@media only screen and (min-width: 1140px), print {
.lang-switcher {
border-radius: 12px;
-webkit-box-shadow: 3px 3px 4px rgba(98, 98, 98, 0.45);
box-shadow: 3px 3px 4px rgba(98, 98, 98, 0.45);
}
}
@media only screen and (max-width: 1139.98px) {
.lang-switcher {
border-radius: 5px;
}
}
.lang-switcher__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
color: #ff7043;
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1;
text-align: center;
}
@media only screen and (min-width: 1140px), print {
.lang-switcher__label {
height: 75px;
font-size: 15px;
}
}
@media only screen and (max-width: 1139.98px) {
.lang-switcher__label {
height: 42px;
font-size: 13px;
}
}
.lang-switcher__label::after {
content: "";
display: block;
margin-top: 0.2em;
background: url("../img/common/icon_globe.svg") 0 0/100% auto no-repeat;
}
@media only screen and (min-width: 1140px), print {
.lang-switcher__label::after {
width: 1.6em;
height: 1.6em;
margin-left: 0.9em;
}
}
@media only screen and (max-width: 1139.98px) {
.lang-switcher__label::after {
width: 1em;
height: 1em;
margin-left: 0.5em;
}
}
.lang-switcher__options {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-height: 0;
overflow: hidden;
-webkit-transition: opacity 0.5s ease, max-height 0.5s ease, padding 0.5s ease;
transition: opacity 0.5s ease, max-height 0.5s ease, padding 0.5s ease;
opacity: 0;
}
@media only screen and (min-width: 1140px), print {
.lang-switcher__options {
padding: 0 20px;
gap: 20px;
}
}
@media only screen and (max-width: 1139.98px) {
.lang-switcher__options {
padding: 0 5px;
gap: 20px;
}
}
.lang-switcher__item {
display: block;
position: relative;
font-weight: 500;
letter-spacing: 0.07em;
line-height: 1;
}
@media only screen and (min-width: 1140px), print {
.lang-switcher__item {
padding-left: 32px;
font-size: 15px;
}
}
@media only screen and (max-width: 1139.98px) {
.lang-switcher__item {
padding-left: 30px;
font-size: 13px;
}
}
.lang-switcher__link {
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
color: #ff7043;
text-decoration: none;
}
.lang-switcher__link:hover {
color: #000;
}
.lang-switcher__link::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 1em;
width: 0.6em;
height: 0.6em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: 2px solid #ff7043;
border-radius: 100%;
opacity: 0;
}
.lang-switcher__link--active::after {
opacity: 1;
}
@media only screen and (min-width: 840px), print {
.lang-switcher:hover .lang-switcher__options, .lang-switcher:focus-within .lang-switcher__options {
max-height: 160px;
opacity: 1;
}
}
@media only screen and (min-width: 840px) and (min-width: 1140px), print {
.lang-switcher:hover .lang-switcher__options, .lang-switcher:focus-within .lang-switcher__options {
padding-bottom: 30px;
}
}
@media only screen and (min-width: 840px) and (min-width: 840px) and (max-width: 1139.98px) {
.lang-switcher:hover .lang-switcher__options, .lang-switcher:focus-within .lang-switcher__options {
padding-top: 10px;
padding-bottom: 20px;
}
}
@media only screen and (max-width: 839.98px) {
.lang-switcher--active .lang-switcher__options {
max-height: 160px;
padding-top: 10px;
padding-bottom: 20px;
opacity: 1;
}
}
@media only screen and (max-width: 839.98px) and (max-width: 1139.98px) {
.lang-switcher--active .lang-switcher__options {
padding-top: 10px;
padding-bottom: 20px;
}
}
.mobile-menu {
width: 100%;
}
.mobile-menu__list {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
gap: 41px;
}
.mobile-menu__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0;
}
.mobile-menu__item:nth-child(1) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.mobile-menu__item:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.mobile-menu__item:nth-child(3) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.mobile-menu__item:nth-child(4) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.mobile-menu__item:nth-child(5) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.mobile-menu__item:nth-child(6) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.mobile-menu__item:nth-child(7) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.mobile-menu__item:nth-child(8) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.mobile-menu__item:nth-child(9) {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
}
.mobile-menu__item:nth-child(10) {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.header__mobile-menu:not(.header__mobile-menu--active) .mobile-menu__item {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.mobile-menu__link {
display: block;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-transition: color 0.26s ease;
transition: color 0.26s ease;
}
@media (hover: hover) {
.mobile-menu__link:hover {
color: #ff7043;
}
}
.mobile-menu__link strong {
display: block;
margin-bottom: 6px;
font-family: "Host Grotesk", sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1;
}
.mobile-menu__link span {
display: block;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.07em;
line-height: 1;
}
.button-cta {
display: block;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
opacity: 0;
}
.button-cta__link {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 305px;
height: 59px;
padding: 12px 24px;
-webkit-transition: background-color 0.3s ease, color 0.3s ease;
transition: background-color 0.3s ease, color 0.3s ease;
border-radius: 5px;
background: #ff7043;
-webkit-box-shadow: 3px 3px 5px #dadada;
box-shadow: 3px 3px 5px #dadada;
color: #fff;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.07em;
line-height: 1;
text-align: center;
text-decoration: none;
gap: 35px;
}
@media only screen and (max-width: 374.98px) {
.button-cta__link {
width: 280px;
}
}
.header__mobile-menu:not(.header__mobile-menu--active) .button-cta__link {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.button-cta__link:active, .button-cta__link.active {
background: #fff;
color: #ff7043;
}
.button-cta__link:active::before, .button-cta__link.active::before {
background-image: url("../img/common/icon_envelope_active.svg");
}
.button-cta__link::before {
content: "";
display: block;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 32px;
height: 25px;
-webkit-transition: background-image 0s;
transition: background-image 0s;
background: url("../img/common/icon_envelope_light.svg") 0 0/100% auto no-repeat;
}
.button-cta__link span {
display: block;
position: relative;
top: -1px;
}
.lang-selector {
width: 305px;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
}
.header__mobile-menu:not(.header__mobile-menu--active) .lang-selector {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.lang-selector__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
margin-bottom: 20px;
color: #ff7043;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1;
text-align: center;
gap: 9px;
}
.lang-selector__label::before {
content: "";
display: block;
width: 31px;
height: 31px;
background: url("../img/common/icon_globe.svg") 0 0/100% auto no-repeat;
}
.lang-selector__label strong {
font-weight: inherit;
}
.lang-selector__options {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 215px;
margin: 0 auto;
gap: 15px;
}
.lang-selector__link {
display: block;
width: 100px;
padding: 11px 5px;
-webkit-transition: color 0.26s ease, background 0.26s ease;
transition: color 0.26s ease, background 0.26s ease;
border-radius: 5px;
background: #f9f0ec;
-webkit-box-shadow: 3px 3px 5px #dadada;
box-shadow: 3px 3px 5px #dadada;
color: #ff7043;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.07em;
line-height: 1;
text-align: center;
text-decoration: none;
}
.lang-selector__link--active {
background: #ff7043;
color: #fff;
}
.lang-selector__link {
cursor: pointer;
}
@media (hover: hover) {
.lang-selector__link:hover {
background: #ff7043;
color: #fff;
}
}
.footer {
position: relative;
color: #fff;
}
@media only screen and (min-width: 1140px), print {
.footer {
padding: 78px 0 82px;
background: url("../img/common/footer_bg_lg.jpg") 50% 0/cover no-repeat;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.footer {
padding: 40px 0;
background: url("../img/common/footer_bg_md.jpg") 50% 0/cover no-repeat;
}
}
@media only screen and (max-width: 839.98px) {
.footer {
padding: 40px 0 90px;
background: url("../img/common/footer_bg_sm.jpg") 50% 0/cover no-repeat;
}
}
.footer::after {
content: "";
display: block;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(98, 98, 98, 0.64);
pointer-events: none;
}
.footer__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
@media only screen and (min-width: 840px), print {
.footer__wrapper {
gap: 35px;
}
}
@media only screen and (max-width: 839.98px) {
.footer__wrapper {
gap: 36px;
}
}
.footer__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (max-width: 1139.98px) {
.footer__heading {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 22px;
}
}
.footer__logo {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100px;
margin: 0;
}
.footer__logo a,
.footer__logo img {
display: block;
width: 100%;
height: auto;
}
.footer__logo a {
text-decoration: none;
}
@media (hover: hover) {
.footer__logo a {
-webkit-transition: opacity 0.26s ease;
transition: opacity 0.26s ease;
opacity: 1;
}
.footer__logo a:hover {
opacity: 0.8;
}
}
.footer__description {
border-bottom: 1px solid #fff;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.666667;
}
@media only screen and (min-width: 1140px), print {
.footer__description {
width: 51%;
margin: -6px 0 0;
padding-bottom: 30px;
}
}
@media only screen and (max-width: 1139.98px) {
.footer__description {
margin: 0;
padding-bottom: 32px;
}
}
.footer__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (max-width: 839.98px) {
.footer__content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 40px;
}
}
.footer__content address {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.666667;
}
.footer__content-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media only screen and (min-width: 1140px), print {
.footer__content-col {
gap: 66px;
}
.footer__content-col:nth-child(1) {
width: 49%;
}
.footer__content-col:nth-child(2) {
width: 51%;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.footer__content-col {
gap: 40px;
}
.footer__content-col:nth-child(1) {
width: 47%;
}
.footer__content-col:nth-child(2) {
width: 53%;
}
}
@media only screen and (max-width: 839.98px) {
.footer__content-col {
gap: 40px;
}
}
.footer__content-row {
display: block;
}
.footer__content-title {
position: relative;
margin: 0;
padding: 0 0 0 27px;
font-family: "Host Grotesk", sans-serif;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.375;
}
.footer__content-title::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 0.45833em;
height: 0.45833em;
margin-top: -0.04em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 100%;
background: #fff;
}
.footer__copyright {
margin: -20px 0 0;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1;
text-align: center;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.footer__copyright {
padding-bottom: 12px;
}
}
.information-list {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0;
}
.information-list__item {
display: block;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.07em;
line-height: 2.2;
}
.information-list a {
text-decoration: none;
text-decoration: none;
}
@media (hover: hover) {
.information-list a {
-webkit-transition: opacity 0.26s ease;
transition: opacity 0.26s ease;
opacity: 1;
}
.information-list a:hover {
opacity: 0.8;
}
}
.information-list a:hover {
color: #ff7043;
}
.magazine-list {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-top: 25px;
gap: 15px 12px;
}
.magazine-list__item {
display: block;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 2.0625;
}
.magazine-list a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 4px 28px;
border: 1px solid #fff;
text-decoration: none;
}
.magazine-list a:hover {
background: rgba(255, 255, 255, 0.3);
}
.js-animate [data-animate-item],
.js-animate [data-animate-child] {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
transition: opacity 1s ease, -webkit-transform 1s ease;
transition: opacity 1s ease, transform 1s ease;
transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease;
opacity: 0;
will-change: transform, opacity;
}
[data-animate-bg] {
position: relative;
}
[data-animate-bg] > span {
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 0;
will-change: opacity;
}
.animate-bg [data-animate-bg] span {
-webkit-animation: reveal-text 1s ease-in-out 0.5s forwards;
animation: reveal-text 1s ease-in-out 0.5s forwards;
}
.animate-bg [data-animate-bg]::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-name: animate-bg-lr-extend;
animation-name: animate-bg-lr-extend;
-webkit-animation-duration: 1s;
animation-duration: 1s;
background-color: #ff7043;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes animate-bg-lr-extend {
0% {
clip-path: inset(0 100% 0 0);
}
50% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 100%);
}
}
@keyframes animate-bg-lr-extend {
0% {
clip-path: inset(0 100% 0 0);
}
50% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 100%);
}
}
@-webkit-keyframes reveal-text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes reveal-text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in-up {
0% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in-up {
0% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes fade-in-left {
0% {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-left {
0% {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@-webkit-keyframes fade-in-right {
0% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-right {
0% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@-webkit-keyframes fade-in-down {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in-down {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.js-fadein-children > * {
opacity: 0;
will-change: opacity, transform;
}
.js-fadein-children > *.animated {
-webkit-animation-name: fade-in;
animation-name: fade-in;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border: 1px solid #ff7043;
opacity: 1;
color: #ff7043;
font-weight: 500;
letter-spacing: 0.07em;
line-height: 1.65;
text-decoration: none;
}
.btn::after {
content: "";
display: block;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
border-radius: 100%;
background-color: #ff7043;
background-image: url("../img/common/icon_arrow_right_light.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 20px auto;
}
@media only screen and (min-width: 840px), print {
.btn {
width: 353px;
height: 73px;
border-radius: 73px;
font-size: 20px;
}
.btn::after {
right: 14px;
width: 42px;
height: 42px;
}
}
@media only screen and (max-width: 839.98px) {
.btn {
width: 260px;
height: 60px;
border-radius: 60px;
font-size: 15px;
}
.btn::after {
right: 11px;
width: 32px;
height: 32px;
background-size: 16px auto;
}
}
.btn {
cursor: pointer;
}
@media (hover: hover) {
.btn:hover {
opacity: 0.85;
}
}
@media only screen and (hover: hover) and (min-width: 840px), print and (hover: hover) {
.btn:hover::after {
-webkit-transform: translate(6px, -50%);
-ms-transform: translate(6px, -50%);
transform: translate(6px, -50%);
}
}
.btn__text {
display: inline;
}
.btn__loading {
display: none;
}
.btn--primary {
background: #ff7043;
color: #fff;
}
.btn--primary::after {
background-color: #fff;
background-image: url("../img/common/icon_arrow_right.svg");
}
.btn--secondary {
background: transparent;
color: #ff7043;
}
.btn--downloading {
pointer-events: none;
}
.btn--downloading .btn__loading {
display: inline;
}
.btn--downloading .btn__text {
display: none;
}
.btn--downloading::after {
margin-top: -21px;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
border: 2px solid transparent;
border-radius: 50%;
border-top-color: currentcolor;
background: none;
}
@media only screen and (max-width: 839.98px) {
.btn--downloading::after {
margin-top: -16px;
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.btn-scroll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 316px;
height: 75px;
padding-right: 80px;
border-radius: 75px;
background: #ff7043;
color: #fff;
text-decoration: none;
}
@media only screen and (max-width: 839.98px) {
.btn-scroll {
width: 260px;
height: 62px;
padding-right: 66px;
}
}
.btn-scroll__text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 2;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn-scroll__text-en {
margin-bottom: 5px;
font-family: "Host Grotesk", sans-serif;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1;
}
@media only screen and (max-width: 839.98px) {
.btn-scroll__text-en {
font-size: 16px;
}
}
.btn-scroll__text-ja {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1;
}
@media only screen and (max-width: 839.98px) {
.btn-scroll__text-ja {
font-size: 14px;
}
}
.btn-scroll::after {
content: "";
display: block;
position: absolute;
z-index: 0;
top: 50%;
right: 15px;
width: 50px;
height: 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 100%;
background-color: #f9f0ec;
}
@media only screen and (max-width: 839.98px) {
.btn-scroll::after {
right: 12px;
width: 41px;
height: 41px;
}
}
.btn-scroll::before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 33px;
width: 0;
height: 0;
-webkit-transform: translateY(-30%);
-ms-transform: translateY(-30%);
transform: translateY(-30%);
border: transparent solid 6px;
border-top-width: 9px;
border-bottom-width: 0;
border-top-color: #ff7043;
}
@media only screen and (max-width: 839.98px) {
.btn-scroll::before {
right: 28px;
border: transparent solid 5px;
border-top-width: 8px;
border-bottom-width: 0;
border-top-color: #ff7043;
}
}
.btn-scroll {
cursor: pointer;
}
@media (hover: hover) {
.btn-scroll:hover {
opacity: 0.85;
}
}
.btn-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
height: 50px;
padding: 0 23px;
-webkit-transition: color 0.3s ease, background 0.3s ease;
transition: color 0.3s ease, background 0.3s ease;
border: 1px solid #ff7043;
border-radius: 50px;
background: transparent;
color: #484848;
text-decoration: none;
white-space: nowrap;
gap: 27px;
will-change: color, background;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.666667;
}
.btn-nav::after {
content: "";
display: block;
width: 12px;
height: 10px;
background: url("../img/common/icon_arrow_down.svg") 0/100% auto no-repeat;
}
.btn-nav {
cursor: pointer;
}
@media (hover: hover) {
.btn-nav:hover {
background: #ff7043;
color: #fff;
}
.btn-nav:hover::after {
background-image: url("../img/common/icon_arrow_down_light.svg");
}
}
.button-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
z-index: 1000;
right: 20px;
bottom: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 100%;
opacity: 0;
background: #ebe1dc;
color: #ff7043;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.5625;
text-decoration: none;
white-space: nowrap;
pointer-events: none;
text-decoration: none;
}
@media (hover: hover) {
.button-top {
-webkit-transition: opacity 0.26s ease;
transition: opacity 0.26s ease;
opacity: 1;
}
.button-top:hover {
opacity: 0.8;
}
}
@media only screen and (max-width: 839.98px) {
.button-top {
display: none;
}
}
.button-top::before {
content: "";
display: block;
width: 0;
height: 0;
margin-bottom: 8px;
border: transparent solid 9px;
border-top-width: 0;
border-bottom-width: 15px;
border-bottom-color: #ff7043;
}
.bottom-cta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #f9f0ec;
}
@media only screen and (min-width: 1140px), print {
.bottom-cta {
padding: 150px 0;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.bottom-cta {
padding: 120px 0;
}
}
@media only screen and (max-width: 839.98px) {
.bottom-cta {
padding: 100px 0;
}
}
.bottom-cta__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding: 0 20px;
}
@media only screen and (min-width: 1140px), print {
.bottom-cta__wrapper {
max-width: 1250px;
}
}
@media only screen and (max-width: 1139.98px) {
.bottom-cta__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
}
.bottom-cta__content {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
}
@media only screen and (min-width: 1140px), print {
.bottom-cta__content {
max-width: 754px;
}
}
.bottom-cta__title {
color: #484848;
}
@media only screen and (min-width: 1140px), print {
.bottom-cta__title {
margin: 0 0 50px;
margin-top: -15px;
font-family: "Host Grotesk", sans-serif;
font-size: 64px;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1;
}
}
@media only screen and (max-width: 1139.98px) {
.bottom-cta__title {
margin: 0 0 30px;
font-family: "Host Grotesk", sans-serif;
font-size: 32px;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.03125;
}
}
.bottom-cta__description {
margin: 0;
color: #484848;
}
@media only screen and (min-width: 1140px), print {
.bottom-cta__description {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.666667;
}
}
@media only screen and (max-width: 1139.98px) {
.bottom-cta__description {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.46666;
white-space: nowrap;
}
}
@media (max-width: 409.98px) {
.bottom-cta__description {
margin-right: -0.5em;
font-size: 14.5px;
letter-spacing: 0.03em;
}
}
@media only screen and (max-width: 374.98px) {
.bottom-cta__description {
font-size: 12px;
}
}
.bottom-cta__buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
}
@media only screen and (min-width: 1140px), print {
.bottom-cta__buttons {
-webkit-box-flex: 1;
-ms-flex: 1 0 386px;
flex: 1 0 386px;
}
}
@media only screen and (max-width: 1139.98px) {
.bottom-cta__buttons {
width: 100%;
max-width: 566px;
}
}
.bottom-cta__button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 137px;
padding-top: 0.5em;
-webkit-transition: background-color 0.3s ease, color 0.5s ease;
transition: background-color 0.3s ease, color 0.5s ease;
border: 4px solid #ff7043;
border-radius: 5px;
color: #ff7043;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1;
text-decoration: none;
gap: 10px;
}
@media only screen and (min-width: 1140px), print {
.bottom-cta__button {
max-width: 386px;
}
}
@media only screen and (max-width: 1139.98px) {
.bottom-cta__button {
height: 137px;
}
}
.bottom-cta__button span {
display: block;
margin-bottom: 0.5em;
}
.bottom-cta__button::after {
content: "";
display: block;
width: 38px;
height: 38px;
-webkit-transition: -webkit-filter 0.3s;
transition: -webkit-filter 0.3s;
transition: filter 0.3s;
transition: filter 0.3s, -webkit-filter 0.3s;
background-image: url("../img/common/icon_envelope.svg");
background-repeat: no-repeat;
background-size: 100% auto;
}
.bottom-cta__button:hover {
background-color: #ff7043;
color: #fff;
}
.bottom-cta__button:hover::after {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.bottom-cta__button--line {
border-color: #4b874f;
color: #4b874f;
}
.bottom-cta__button--line::after {
width: 44px;
height: 42px;
background-image: url("../img/common/icon_chat.svg");
}
.bottom-cta__button--line:hover {
background-color: #4b874f;
color: #fff;
}
.hero {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 486px;
padding: 110px 20px 0;
background: #ebe1dc url("../img/about_us/hero_bg.jpg") center/cover no-repeat;
color: #fff;
}
@media only screen and (max-width: 839.98px) {
.hero {
padding: 140px 10px 0;
background-position: 60% 50%;
}
}
.hero::after {
content: "";
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 44, 76, 0.26);
}
.hero__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.hero__title {
margin: 0 0 12px;
font-size: 32px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.59375;
}
@media only screen and (max-width: 839.98px) {
.hero__title {
margin-bottom: 8px;
font-size: 20px;
white-space: nowrap;
}
}
@media only screen and (max-width: 374.98px) {
.hero__title {
font-size: 17px;
}
}
.hero__subtitle {
margin: 0;
font-family: "Host Grotesk", sans-serif;
font-size: 24px;
letter-spacing: 0.05em;
line-height: 1.2;
}
@media only screen and (max-width: 839.98px) {
.hero__subtitle {
font-size: 15px;
white-space: nowrap;
}
}
@media only screen and (max-width: 374.98px) {
.hero__subtitle {
font-size: 14px;
}
}
.intro__heading {
position: relative;
background: #ebe1dc;
}
.intro__heading::after {
content: "";
position: absolute;
left: 50%;
height: 95px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
}
@media only screen and (min-width: 1140px), print {
.intro__heading {
padding: 60px 0 114px;
}
.intro__heading::after {
bottom: -66px;
width: 224px;
background-image: url("../img/about_us/icon_arrow_down.svg");
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.intro__heading {
padding: 67px 0 74px;
}
.intro__heading::after {
bottom: -48px;
width: 200px;
background-image: url("../img/about_us/icon_arrow_down_md.svg");
}
}
@media only screen and (max-width: 839.98px) {
.intro__heading {
padding: 67px 0 74px;
}
.intro__heading::after {
bottom: -32px;
width: 150px;
background-image: url("../img/about_us/icon_arrow_down_sm.svg");
}
}
.intro__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (min-width: 1140px), print {
.intro__title {
margin: 0 0 58px;
}
}
@media only screen and (max-width: 1139.98px) {
.intro__title {
margin: 0 0 31px;
}
}
.intro__title-en {
display: block;
color: #ff7043;
font-family: "Host Grotesk", sans-serif;
font-weight: 700;
letter-spacing: 0.07em;
}
@media only screen and (min-width: 1140px), print {
.intro__title-en {
margin-bottom: 3px;
font-size: 64px;
line-height: 1.109375;
}
}
@media only screen and (max-width: 1139.98px) {
.intro__title-en {
margin-bottom: 3px;
font-size: 32px;
line-height: 1.109375;
}
}
.intro__title-ja {
display: block;
color: #484848;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.466667;
}
.intro__description {
margin: 0;
color: #484848;
font-weight: 500;
letter-spacing: 0.05em;
text-align: center;
}
@media only screen and (min-width: 1140px), print {
.intro__description {
font-size: 20px;
line-height: 1.65;
}
}
@media only screen and (max-width: 1139.98px) {
.intro__description {
font-size: 15px;
line-height: 1.8;
}
}
@media only screen and (max-width: 374.98px) {
.intro__description {
font-size: 13px;
}
}
.intro__description > span {
display: inline-block;
position: relative;
margin-right: 0.2em;
color: #fff;
}
.intro__description > span::before {
top: 15%;
max-height: 76%;
}
.intro__description > span > span {
display: inline-block;
position: relative;
z-index: 1;
padding: 0 0.25em 0 0.3em;
}
.intro__description > span > span::after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 15%;
left: 0;
width: 100%;
height: 76%;
background: #ff7043;
}
.intro__main {
width: 100%;
margin: 0 auto;
background: #f9f0ec;
text-align: center;
}
@media only screen and (min-width: 1140px), print {
.intro__main {
max-width: 1350px;
padding: 147px 20px 80px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.intro__main {
padding: 167px 40px 140px;
}
}
@media only screen and (max-width: 839.98px) {
.intro__main {
padding: 132px 12px 100px;
}
}
.intro__subtitle {
display: inline-block;
margin: 0 auto;
margin-bottom: 80px;
padding: 7px 27px;
border-radius: 5px;
background: #ccbeb7;
color: #fff;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 2.066667;
}
@media only screen and (max-width: 839.98px) {
.intro__subtitle {
padding: 10px 27px;
font-size: 15px;
}
}
.intro__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.intro__content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 250px;
}
}
@media only screen and (max-width: 839.98px) {
.intro__content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 206px;
}
}
@media only screen and (min-width: 840px), print {
.intro__speech {
width: 580px;
}
}
@media only screen and (max-width: 839.98px) {
.intro__speech {
width: 100%;
max-width: 400px;
}
}
.intro__speech-bubbles {
margin: 0;
padding: 0;
list-style: none;
}
.intro__speech-bubble {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 24px 30px;
border-radius: 80px;
background: #fff;
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.07em;
line-height: 1.657143;
text-align: center;
}
.intro__speech-bubble::before {
content: "";
position: absolute;
bottom: 0;
left: 57%;
-webkit-transform: skew(-13deg);
-ms-transform: skew(-13deg);
transform: skew(-13deg);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
border-width: 19px 18px 0 0;
border-style: solid;
border-color: #fff transparent transparent;
translate: -50% 100%;
}
.intro__speech-bubble:nth-child(1) {
width: 367px;
margin-left: auto;
}
.intro__speech-bubble:nth-child(1)::before {
left: 60%;
}
.intro__speech-bubble:nth-child(2) {
width: 315px;
margin-top: 24px;
}
.intro__speech-bubble:nth-child(2)::before {
left: 40%;
-webkit-transform: skew(50deg);
-ms-transform: skew(50deg);
transform: skew(50deg);
}
.intro__speech-bubble:nth-child(3) {
width: 140px;
margin-top: -8px;
margin-right: 37px;
margin-left: auto;
}
@media only screen and (max-width: 839.98px) {
.intro__speech-bubble {
min-height: 55px;
padding: 10px;
border-radius: 80px;
font-size: 13px;
}
.intro__speech-bubble::before {
border-width: 12px 12px 0 0;
}
.intro__speech-bubble:nth-child(1) {
width: 260px;
}
.intro__speech-bubble:nth-child(2) {
width: 190px;
margin-top: 16px;
}
.intro__speech-bubble:nth-child(3) {
width: 80px;
margin-top: -4px;
}
.intro__speech-bubble:nth-child(3) img {
width: 30px;
}
}
.intro__speech-circle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 310px;
height: 310px;
margin: 27px auto 0;
border-radius: 100%;
background: #f6e9e3;
}
.intro__speech-circle-title {
margin: 0 0 25px;
color: #ff7043;
font-size: 20px;
font-weight: 700;
line-height: 1.985;
}
.intro__speech-circle-icon {
display: block;
width: 160px;
}
@media only screen and (max-width: 839.98px) {
.intro__speech-circle {
width: 178px;
height: 178px;
margin-top: 15px;
}
.intro__speech-circle-title {
margin-bottom: 10px;
font-size: 15px;
letter-spacing: 0.07em;
}
.intro__speech-circle-icon {
width: 92px;
}
}
.intro__arrow {
display: block;
position: absolute;
top: 50%;
left: 44.3%;
width: 89px;
height: 87px;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.intro__arrow {
top: 51%;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@media only screen and (max-width: 839.98px) {
.intro__arrow {
top: 415px;
left: 50%;
width: 65px;
height: 55px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@media only screen and (max-width: 374.98px) {
.intro__arrow {
top: 425px;
}
}
.intro__arrow-icon {
display: block;
width: 100%;
height: auto;
}
@media only screen and (max-width: 1139.98px) {
.intro__arrow-icon {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
}
.intro__flow {
-ms-flex-item-align: center;
align-self: center;
border-radius: 12px;
background: #f9f0ec;
}
@media only screen and (min-width: 840px), print {
.intro__flow {
width: 640px;
padding: 177px 0 0;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.intro__flow {
padding: 0;
}
}
@media only screen and (max-width: 839.98px) {
.intro__flow {
width: calc(100% - 14px);
height: auto;
padding: 0 0 40px;
}
}
.intro__flow-inner {
position: relative;
width: 4.28em;
height: 4.28em;
margin: 0 auto;
-webkit-transition: opacity 0.8s ease, margin-top 0.8s ease;
transition: opacity 0.8s ease, margin-top 0.8s ease;
background: url("../img/top/support_connector.svg") 50% 50%/100% 100% no-repeat;
font-size: 100px;
}
@media only screen and (max-width: 839.98px) {
.intro__flow-inner {
width: 2.45em;
height: 2.45em;
font-size: 100px;
}
}
@media only screen and (max-width: 374.98px) {
.intro__flow-inner {
width: 2.45em;
height: 2.45em;
font-size: 86px;
}
}
.intro__flow-title {
position: absolute;
z-index: 10;
top: 28.5%;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
color: #ff7043;
font-size: 0.2em;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 2.055;
}
@media only screen and (max-width: 839.98px) {
.intro__flow-title {
font-size: 0.16em;
white-space: nowrap;
}
}
.intro__circle {
position: absolute;
top: 50%;
left: 50%;
width: 2.34em;
height: 2.34em;
}
@media only screen and (max-width: 839.98px) {
.intro__circle {
width: 1.6em;
height: 1.6em;
}
}
.intro__circle::after {
content: "";
display: block;
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
width: 88%;
height: 88%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #ebe1dc;
pointer-events: none;
}
@media only screen and (max-width: 839.98px) {
.intro__circle::after {
width: 100%;
height: 100%;
}
}
.intro__circle img {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
@media only screen and (max-width: 839.98px) {
.intro__circle img {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
.intro__circle--website {
-webkit-transform: translate(-50%, -140.5%);
-ms-transform: translate(-50%, -140.5%);
transform: translate(-50%, -140.5%);
}
.intro__circle--photo {
-webkit-transform: translate(-129%, -3%);
-ms-transform: translate(-129%, -3%);
transform: translate(-129%, -3%);
}
.intro__circle--design {
-webkit-transform: translate(29%, -3%);
-ms-transform: translate(29%, -3%);
transform: translate(29%, -3%);
}
@media only screen and (max-width: 839.98px) {
.intro__circle--website {
-webkit-transform: translate(-50%, -133%);
-ms-transform: translate(-50%, -133%);
transform: translate(-50%, -133%);
}
.intro__circle--photo {
-webkit-transform: translate(-110%, -2%);
-ms-transform: translate(-110%, -2%);
transform: translate(-110%, -2%);
}
.intro__circle--design {
-webkit-transform: translate(10%, -2%);
-ms-transform: translate(10%, -2%);
transform: translate(10%, -2%);
}
}
.intro__circle-title {
position: absolute;
z-index: 2;
top: 2.5em;
left: 0;
width: 100%;
margin: 0;
color: #ff7043;
font-size: 0.16em;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 2.111111;
text-align: center;
}
.intro__circle--website .intro__circle-title {
top: 3.5em;
}
@media only screen and (max-width: 839.98px) {
.intro__circle-title {
top: 1.8em;
font-size: 0.14em;
}
.intro__circle--website .intro__circle-title {
top: 2.1em;
}
}
.intro__center-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 52.5%;
left: 50%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 0.98em;
height: 0.98em;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #f2e382;
}
.intro__center-icon img {
display: block;
width: 0.57em;
height: auto;
}
@media only screen and (max-width: 839.98px) {
.intro__center-icon {
width: 0.56em;
height: 0.56em;
}
.intro__center-icon img {
width: 0.33em;
}
}
.highlights {
padding: 120px 0 140px;
background: #f9f0ec url("../img/common/pattern_noise_02.png") center 0/32px auto repeat;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.highlights {
padding: 95px 0 100px;
}
}
@media only screen and (max-width: 839.98px) {
.highlights {
padding: 82px 0 88px;
}
}
.highlights__wrapper {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.highlights__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 80px;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.highlights__title {
margin: 0 0 74px;
}
}
.highlights__title-en {
display: block;
margin-bottom: 3px;
color: #ff7043;
font-family: "Host Grotesk", sans-serif;
font-size: 64px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.109375;
}
@media only screen and (max-width: 1139.98px) {
.highlights__title-en {
margin-bottom: 5px;
font-size: 32px;
}
}
@media only screen and (max-width: 374.98px) {
.highlights__title-en {
font-size: 28px;
white-space: nowrap;
}
}
.highlights__title-ja {
display: block;
color: #484848;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.466667;
}
.highlights__list {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (max-width: 1139.98px) {
.highlights__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 42px;
}
}
@media only screen and (max-width: 839.98px) {
.highlights__list {
gap: 36px;
}
}
.highlights__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 386px;
flex: 0 0 386px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 386px;
height: 386px;
padding: 74px 0 0;
border-radius: 100%;
background: #fffaf4;
color: #ff7043;
text-align: center;
}
@media (min-width: 1140px) and (max-width: 1240px) {
.highlights__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 356px;
flex: 0 0 356px;
width: 356px;
height: 356px;
padding-top: 70px;
}
}
.highlights__item::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 92%;
height: 92%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid #ff7043;
border-radius: 100%;
pointer-events: none;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.highlights__item {
padding-top: 72px;
}
}
@media only screen and (max-width: 839.98px) {
.highlights__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 330px;
flex: 0 0 330px;
width: 330px;
height: 330px;
padding-top: 66px;
}
}
@media only screen and (max-width: 374.98px) {
.highlights__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 280px;
flex: 0 0 280px;
width: 280px;
height: 280px;
padding-top: 40px;
}
}
.highlights__item-icon {
display: block;
margin-bottom: 17px;
}
@media only screen and (max-width: 839.98px) {
.highlights__item-icon {
width: 62px;
margin-bottom: 10px;
}
}
.highlights__item-icon img {
display: block;
width: 100%;
height: auto;
}
.highlights__item-title {
margin-bottom: 28px;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.15;
}
@media only screen and (max-width: 839.98px) {
.highlights__item-title {
font-size: 20px;
}
}
.highlights__item-description {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
}
@media (min-width: 1140px) and (max-width: 1240px) {
.highlights__item-description {
font-size: 14px;
}
}
@media only screen and (max-width: 839.98px) {
.highlights__item-description {
font-size: 14px;
line-height: 1.678571;
}
}
@media only screen and (max-width: 374.98px) {
.highlights__item-description {
font-size: 12px;
}
}
.section-group {
background: #484848;
}
.brand {
background: url("../img/top/service_bg_01.svg") 98% 0/589px auto no-repeat, url("../img/top/service_bg_02.svg") 0 100%/284px auto no-repeat;
color: #f9f0ec;
}
@media only screen and (min-width: 1140px), print {
.brand {
padding: 210px 0 320px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.brand {
padding: 230px 0 315px;
background-position: 100% 0, -4% 65%;
background-size: 440px auto, 300px auto;
}
}
@media only screen and (max-width: 839.98px) {
.brand {
padding: 116px 0 320px;
background-position: 100% 0, -4% 65%;
background-size: 300px auto, 180px auto;
}
}
.brand__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
@media only screen and (min-width: 1140px), print {
.brand__wrapper {
max-width: 1160px;
gap: 80px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.brand__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}
}
@media only screen and (max-width: 839.98px) {
.brand__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 62px;
}
}
.brand__heading {
text-align: center;
}
@media only screen and (min-width: 1140px), print {
.brand__heading {
width: 570px;
}
}
.brand__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 148px;
}
.brand__title-en {
display: block;
margin-bottom: 10px;
font-family: "Host Grotesk", sans-serif;
font-size: 64px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.109375;
}
.brand__title-ja {
display: block;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.666667;
}
@media only screen and (max-width: 1139.98px) {
.brand__title {
margin: 0 0 50px;
}
.brand__title-en {
margin-bottom: 5px;
font-size: 32px;
line-height: 1.2;
}
}
@media only screen and (max-width: 839.98px) {
.brand__title {
margin: 0 0 40px;
}
}
@media only screen and (max-width: 374.98px) {
.brand__title-en {
font-size: 30px;
white-space: nowrap;
}
}
.brand__message {
margin: 0;
font-size: 32px;
font-weight: 500;
letter-spacing: 0.07em;
line-height: 1.8125;
}
.brand__message span {
display: block;
}
@media only screen and (min-width: 1140px), print {
.brand__message [data-animate-item] {
-webkit-transition-duration: 1.8s;
transition-duration: 1.8s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
}
@media only screen and (max-width: 1139.98px) {
.brand__message [data-animate-item] {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
}
@media only screen and (max-width: 839.98px) {
.brand__message {
font-size: 20px;
line-height: 1.7;
}
}
@media only screen and (max-width: 374.98px) {
.brand__message {
font-size: 18px;
}
}
.brand__content {
font-size: 15px;
letter-spacing: 0.07em;
line-height: 2.8;
}
@media only screen and (min-width: 1140px), print {
.brand__content {
width: 448px;
}
}
@media only screen and (max-width: 839.98px) {
.brand__content {
line-height: 1.8;
}
}
@media only screen and (max-width: 374.98px) {
.brand__content {
font-size: 13px;
}
}
.brand__content-text {
margin: 0 0 2.8em;
}
@media only screen and (min-width: 1140px), print {
.brand__content-text[data-animate-item] {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
}
@media only screen and (max-width: 1139.98px) {
.brand__content-text[data-animate-item] {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
}
@media only screen and (max-width: 839.98px) {
.brand__content-text {
margin: 0 0 1.8em;
}
}
.brand__content-text:last-child {
margin-bottom: 0;
}
.team {
color: #f9f0ec;
}
@media only screen and (min-width: 1140px), print {
.team {
margin: -155px 0 0;
padding: 0 0 227px;
}
}
@media only screen and (max-width: 1139.98px) {
.team {
margin: -185px 0 0;
padding: 0 0 256px;
}
}
@media only screen and (max-width: 839.98px) {
.team {
padding: 0 0 124px;
}
}
.team__wrapper {
width: 100%;
margin: 0 auto;
}
@media only screen and (min-width: 1140px), print {
.team__wrapper {
max-width: 1020px;
padding: 0 20px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.team__wrapper {
padding: 0 98px;
}
}
@media only screen and (max-width: 839.98px) {
.team__wrapper {
padding: 0 20px;
}
}
.team__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 279px;
height: 279px;
margin: 0 auto;
margin-bottom: 80px;
border: 2px solid #f9f0ec;
border-radius: 100%;
font-family: "Host Grotesk", sans-serif;
font-size: 40px;
font-weight: 600;
letter-spacing: 0.07em;
line-height: 1.2;
text-align: center;
}
@media only screen and (max-width: 839.98px) {
.team__title {
width: 183px;
height: 183px;
margin-bottom: 120px;
font-size: 32px;
}
}
.team__list {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 70px;
}
@media only screen and (max-width: 839.98px) {
.team__list {
gap: 50px;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
}
.team__member {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (min-width: 1140px), print {
.team__member {
gap: 131px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.team__member {
gap: 70px;
}
}
@media only screen and (max-width: 839.98px) {
.team__member {
gap: 30px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.team__member-photo {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 253px;
}
.team__member-photo img {
display: block;
width: 100%;
height: auto;
}
.team__member-content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
}
.team__member-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #f9f0ec;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.team__member-info {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
}
}
@media only screen and (max-width: 374.98px) {
.team__member-info {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
}
}
.team__member-name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 0;
}
@media only screen and (min-width: 840px) and (max-width: 1139.98px) {
.team__member-name {
margin-bottom: 15px;
}
}
@media only screen and (max-width: 374.98px) {
.team__member-name {
margin-bottom: 10px;
}
}
.team__member-name-en {
font-family: "Host Grotesk", sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.375;
}
.team__member-name-ja {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.666667;
}
.team__member-role {
margin-bottom: 0;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.666667;
}
.team__member-description {
margin-bottom: 0;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.666667;
line-height: 1.666667;
}