@charset "UTF-8";

*,
:before,
:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}
html,
:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
line-height: inherit
}
hr {
height: 0;
color: inherit;
border-top-width: 1px
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit
}
a {
color: inherit;
text-decoration: inherit
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}
button,
select {
text-transform: none
}
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
:-moz-focusring {
outline: auto
}
:-moz-ui-invalid {
box-shadow: none
}
progress {
vertical-align: baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
summary {
display: list-item
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0
}
fieldset {
margin: 0;
padding: 0
}
legend {
padding: 0
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0
}
dialog {
padding: 0
}
textarea {
resize: vertical
}
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
color: #9ca3af
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af
}
button,
[role=button] {
cursor: pointer
}
:disabled {
cursor: default
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle
}
img,
video {
max-width: 100%;
height: auto
}
[hidden] {
display: none
}
.utility-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border-width: 0 !important
}
.utility-w-6em {
width: 6em !important
}
.utility-w-8em {
width: 8em !important
}
.utility-border-none {
border-style: none !important
}
.utility-px-0 {
padding-left: 0 !important;
padding-right: 0 !important
}
.utility-py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important
}
.utility-text-center {
text-align: center !important
}
.utility-font-bold {
font-weight: 700 !important
}
@keyframes splide-loading {
0% {
transform: rotate(0)
}
to {
transform: rotate(1turn)
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.splide__track--fade>.splide__list>.splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0
}
.splide__track--fade>.splide__list>.splide__slide.is-active {
opacity: 1;
z-index: 1
}
.splide--rtl {
direction: rtl
}
.splide__track--ttb>.splide__list {
display: block
}
.splide__container {
box-sizing: border-box;
position: relative
}
.splide__list {
backface-visibility: hidden;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block
}
.splide__pagination {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
pointer-events: none
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto
}
.splide:not(.is-overflow) .splide__pagination {
display: none
}
.splide__progress__bar {
width: 0
}
.splide {
position: relative;
visibility: hidden
}
.splide.is-initialized,
.splide.is-rendered {
visibility: visible
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative
}
.splide__slide img {
vertical-align: bottom
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: transparent;
border-radius: 50%;
contain: strict;
display: inline-block;
height: 20px;
inset: 0;
margin: auto;
position: absolute;
width: 20px
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
display: none
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0
}
@keyframes scroll-hint-appear {
0% {
transform: translate(40px);
opacity: 0
}
10% {
opacity: 1
}
50%,
to {
transform: translate(-40px);
opacity: 0
}
}
.scroll-hint-text {
font-size: 10px;
color: #fff;
margin-top: 5px
}
:root {
--primary: #000078;
--secondary: #000078;
--text: #464646;
--base-white: #fff;
--gray-1: #f8f8f8;
--gray-2: #bebebe;
--gray-3: #8c8c8c;
--dark-normal: rgb(255 255 255 / .33);
--dark-bg-hover: rgb(0 0 120 / .66);
--emp: #f00
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px
}
@media (min-width: 1272px) {
html {
scroll-padding-top: 115px
}
}
@media (min-width: 1920px) {
html {
scroll-padding-top: 150px
}
}
body {
position: relative;
font-size: clamp(1rem, .873rem + .32vw, 1.125rem);
color: var(--text);
overflow-wrap: break-word;
animation: fadeIn 1.5s ease;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: unset
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
}
@media (min-width: 1272px) {
body {
font-size: clamp(1.125rem, .757rem + .46vw, 1.3125rem)
}
}
iframe[src*=youtube][src*=embed],
iframe[src*=vimeo] {
border: none
}
.layout-main {
position: relative;
min-height: calc(100vh - var(--headerHeight) - var(--footerHeight))
}
.layout-section {
position: relative;
display: block;
padding-inline: clamp(1.5625rem, -.02rem + 3.96vw, 3.125rem);
padding-block: clamp(6rem, 3.215rem + 6.96vw, 8.75rem)
}
@media (min-width: 1272px) {
.layout-section {
padding-block: clamp(8.75rem, 2.861rem + 7.41vw, 11.75rem)
}
}
.layout-container {
position: relative;
width: 100%;
max-width: clamp(50rem, -8.889rem + 74.07vw, 80rem);
margin-inline: auto
}
body:has(.l-local-nav) .layout-container {
max-width: clamp(45.625rem, -8.356rem + 67.9vw, 73.125rem)
}
.layout-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 50;
display: none;
width: 100%;
height: 100%;
background-color: #00000080
}
.layout-overlay.is-active {
display: block
}
body:has(.layout-overlay.is-active) {
padding-right: var(--scrollBar);
overflow: hidden
}
body:has(.layout-overlay.is-active) .layout-header {
width: 100vw;
padding-right: calc(25px + var(--scrollBar))
}
@media (min-width: 1272px) {
body:has(.layout-overlay.is-active) .layout-header {
padding-right: var(--scrollBar)
}
}
body:has(.layout-overlay.is-active) .layout-gnav-sp_btn {
margin-right: -10px
}
body:has(.layout-overlay.is-active) .element-pagetop {
right: var(--scrollBar)
}
.layout-header {
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 100;
display: flex;
justify-content: space-between;
height: 50px;
padding-left: 25px;
background-color: var(--base-white);
border-bottom: 1px solid var(--gray-2);
transition: background-color .3s
}
.layout-header:has(.behavior-gnavMenu.is-active) {
position: fixed
}
body:has(.front-home) .layout-header {
position: fixed
}
.layout-header svg {
transition: fill .3s, stroke .3s, transform .3s
}
.layout-header .layout-header_logo {
display: flex;
align-items: center
}
.layout-header .layout-header_logo svg {
width: 74px;
height: auto;
fill: var(--primary);
transition: fill .3s
}
@media (max-width: 1271px) {
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) {
background-color: transparent;
border-bottom: 1px solid transparent
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-gnav_item-btn {
color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-gnav_item-btn .icon-caret,
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-gnav_item-btn .icon-external {
background-color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-header_logo svg {
fill: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-gnav_item.-sustainability:after {
border-right: 1px solid var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-lang_btn {
color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-lang_btn .icon-lang {
fill: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-lang_btn .icon-caret {
background-color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavSP.is-active)):has(+.front-home) .layout-gnav-sp_btn span {
background-color: var(--base-white)
}
}
@media (min-width: 1272px) {
.layout-header {
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 65px;
padding: 0 0 0 25px;
background-color: var(--base-white)
}
.layout-header .layout-header_logo svg {
width: 120px;
height: 40px
}
.layout-header .layout-gnav_item-btn .icon-caret {
margin-top: clamp(.0625rem, -.306rem + .46vw, .25rem)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) {
background-color: transparent;
border-bottom: 1px solid transparent
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-gnav_item-btn {
color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-gnav_item-btn .icon-caret,
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-gnav_item-btn .icon-external {
background-color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-header_logo svg {
fill: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-gnav_item.-sustainability:after {
border-right: 1px solid var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-lang_btn {
color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-lang_btn .icon-lang {
fill: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-lang_btn .icon-caret {
background-color: var(--base-white)
}
.layout-header.is-scrolltop:not(:has(.behavior-gnavMenu.is-active)):has(+.front-home) .layout-gnav-sp_btn span {
background-color: var(--base-white)
}
}
@media (min-width: 1920px) {
.layout-header {
height: 80px
}
}
.layout-footer {
background-color: var(--primary)
}
.layout-footer.layout-section {
padding-block: clamp(3.4375rem, 3.121rem + .79vw, 3.75rem) 20px
}
.layout-footer * {
color: var(--base-white)
}
@media (min-width: 1272px) {
.layout-footer.layout-section {
padding-block: clamp(5.625rem, .718rem + 6.17vw, 8.125rem) clamp(1.875rem, -.579rem + 3.09vw, 3.125rem)
}
}
.layout-footer_logo svg {
width: 74px;
fill: var(--base-white)
}
@media (min-width: 1272px) {
.layout-footer_logo svg {
width: clamp(4.375rem, 1.308rem + 3.86vw, 5.9375rem)
}
}
.layout-footer_header {
display: flex;
justify-content: space-between
}
.layout-footer_info {
margin-top: 55px;
font-size: clamp(.75rem, .687rem + .16vw, .8125rem)
}
@media (min-width: 1272px) {
.layout-footer_info {
margin-top: clamp(1.875rem, -1.069rem + 3.7vw, 3.375rem)
}
}
.layout-footer_copy {
display: block;
margin-top: clamp(4.6875rem, 8.854rem - 6.51vw, 6.25rem);
font-size: clamp(.75rem, .687rem + .16vw, .8125rem)
}
@media (min-width: 1272px) {
.layout-footer_copy {
margin-top: clamp(4.6875rem, 1.62rem + 3.86vw, 6.25rem);
font-size: .8125rem
}
}
.element-accordion_contents .element-btn {
margin-top: clamp(1.5rem, .994rem + 1.27vw, 2rem)
}
@media (min-width: 1272px) {
.element-accordion_contents .element-btn {
margin-top: clamp(2rem, .037rem + 2.47vw, 3rem)
}
}
.utility-mt-xs {
margin-top: clamp(.5rem, .247rem + .63vw, .75rem) !important
}
@media (min-width: 1272px) {
.utility-mt-xs {
margin-top: clamp(.75rem, .259rem + .62vw, 1rem) !important
}
}
.utility-mb-lg {
margin-bottom: clamp(1.5rem, .994rem + 1.27vw, 2rem) !important
}
@media (min-width: 1272px) {
.utility-mb-lg {
margin-bottom: clamp(2rem, .037rem + 2.47vw, 3rem) !important
}
}
.c-new-icon,
.element-btn_label {
font-size: clamp(.75rem, .623rem + .32vw, .875rem);
line-height: inherit
}
@media (min-width: 1272px) {
.c-new-icon,
.element-btn_label {
font-size: clamp(.875rem, .63rem + .31vw, 1rem)
}
}
.layout-gnav-sp .element-accordion_label {
font-size: clamp(1rem, .873rem + .32vw, 1.125rem);
line-height: inherit
}
@media (min-width: 1272px) {
.layout-gnav-sp .element-accordion_label {
font-size: clamp(1.125rem, .757rem + .46vw, 1.3125rem)
}
}
[data-text-overflow="1"] {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 1 !important;
overflow: hidden !important
}
[data-text-overflow="2"] {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important
}
[data-text-overflow="3"] {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
overflow: hidden !important
}
[data-text-overflow="4"] {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 4 !important;
overflow: hidden !important
}
[data-text-overflow="5"] {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 5 !important;
overflow: hidden !important
}
body:has(.layout-gnav-sp.is-active) {
padding-right: var(--scrollBar);
overflow: hidden
}
.layout-gnav-sp {
position: fixed;
scrollbar-width: thin;
inset: 0;
margin-top: 50px;
overflow-y: auto;
visibility: hidden;
background-color: var(--base-white);
opacity: 0;
transition: visibility .3s, opacity .3s
}
.layout-gnav-sp.is-active {
visibility: visible;
opacity: 1
}
.layout-gnav-sp.is-active .element-accordion_icon {
margin-right: 25px
}
.layout-gnav-sp .element-accordion {
width: 100%;
margin-left: 0
}
.layout-gnav-sp .element-accordion_summary {
padding: 0;
background-color: var(--base-white)
}
@media (any-hover: hover) {
.layout-gnav-sp .element-accordion_summary:hover {
background-color: transparent
}
.layout-gnav-sp .element-accordion_summary:hover .element-accordion_label {
color: var(--primary)
}
.layout-gnav-sp .element-accordion_summary:hover .element-accordion_label .icon-arrow {
background-color: var(--primary)
}
}
.layout-gnav-sp .element-accordion_contents {
padding-block: 0
}
@media (any-hover: hover) {
.layout-gnav-sp .element-accordion_contents a:hover {
text-decoration: underline
}
}
.layout-gnav-sp .element-accordion_label {
gap: 8px;
align-items: center;
width: 100%;
font-weight: 700;
color: var(--primary)
}
.layout-gnav-sp .element-accordion_label a {
display: inline-block;
width: inherit;
padding: 24px 25px
}
.layout-gnav-sp .element-accordion_label .icon-arrow {
margin-top: -.1em;
vertical-align: middle
}
.layout-gnav-sp .element-accordion_icon {
margin-inline: 25px calc(25px - var(--scrollBar));
background-color: var(--primary);
transition: background .3s
}
.layout-gnav-sp .element-accordion_icon span {
background-color: var(--base-white);
transition: background .3s, transform .3s
}
.layout-gnav-sp .element-accordion.open .element-accordion_icon {
background-color: var(--gray-1)
}
.layout-gnav-sp .element-accordion.open .element-accordion_icon span {
background-color: var(--primary)
}
@media (min-width: 1272px) {
.layout-gnav-sp {
display: none
}
}
.layout-gnav-sp_links a {
display: inline-block;
display: flex;
gap: 5px;
align-items: center;
width: 100%;
min-height: 44px;
padding-left: 1em;
font-size: 14px;
font-weight: 500
}
.layout-gnav-sp_links a .icon-external {
background-color: var(--text);
transition: none
}
@media (any-hover: hover) {
.layout-gnav-sp_links a:hover {
font-weight: 700;
color: var(--primary)
}
.layout-gnav-sp_links a:hover .icon-external {
background-color: var(--primary)
}
}
.layout-gnav-sp_separator {
height: 1px;
margin-inline: 25px;
background-color: var(--primary);
border-top-width: 0
}
.element-accordion.open+.layout-gnav-sp_separator {
margin-top: 15px
}
.layout-gnav-sp_langlinks {
display: flex;
padding: 25px
}
.layout-gnav-sp_langlinks a {
display: block;
flex: 1;
height: 24px;
text-align: center
}
.layout-gnav-sp_langlinks a:not(:first-child) {
border-left: 1px solid var(--gray-2)
}
.layout-gnav-sp_langlinks a.is-active {
font-weight: 700;
color: var(--primary)
}
.layout-gnav-sp_btn {
position: relative;
width: 50px;
height: 50px;
margin: 0;
cursor: pointer
}
body:has(.layout-gnav-sp_btn.is-active) .layout-header {
width: 100vw
}
.layout-gnav-sp_btn span {
position: absolute;
left: 7px;
display: inline-block;
height: 4px;
background-color: var(--primary);
transition: transform .3s, opacity .3s, left .3s, width .3s, top .3s
}
.layout-gnav-sp_btn span:nth-of-type(1) {
top: 12px;
width: 34px
}
.layout-gnav-sp_btn span:nth-of-type(2) {
top: 22px;
width: 34px;
opacity: 1
}
.layout-gnav-sp_btn span:nth-of-type(3) {
top: 32px;
width: 14px
}
.layout-gnav-sp_btn.is-active {
margin-right: var(--scrollBar)
}
.layout-gnav-sp_btn.is-active span:nth-of-type(1) {
top: 17px;
left: 9px;
width: 60%;
transform: translateY(6px) rotate(-45deg)
}
.layout-gnav-sp_btn.is-active span:nth-of-type(2) {
opacity: 0
}
.layout-gnav-sp_btn.is-active span:nth-of-type(3) {
top: 29px;
left: 9px;
width: 60%;
transform: translateY(-6px) rotate(45deg)
}
@media (min-width: 1272px) {
.layout-gnav-sp_btn {
display: none
}
}
.layout-gnav {
display: none
}
.layout-gnav.is-active {
position: absolute;
top: 50px;
left: 0;
display: block;
width: 100vw;
background-color: #ffb6c1
}
.layout-gnav.is-active img {
width: 50px
}
@media (min-width: 1272px) {
.layout-gnav,
.layout-gnav_listswrap {
display: flex;
height: 100%
}
.layout-gnav_list {
display: flex;
height: inherit
}
}
.layout-gnav_item a {
text-decoration: none
}
@media (min-width: 1272px) {
.layout-gnav_item {
height: inherit;
font-size: clamp(.875rem, .63rem + .31vw, 1rem)
}
.layout-gnav_item-btn {
display: flex;
align-items: center;
height: inherit;
padding-inline: clamp(.625rem, -1.483rem + 2.65vw, 1.0625rem);
color: var(--text);
text-align: center
}
.layout-gnav_item-btn .icon-external {
height: auto;
aspect-ratio: 1/1;
margin-left: 4px;
background-color: var(--text)
}
.layout-gnav_item-btn .icon-caret {
margin-left: clamp(.25rem, -.051rem + .38vw, .3125rem);
background-color: var(--text)
}
.layout-gnav_item-btn.is-active {
font-weight: 700;
color: var(--primary)
}
.layout-gnav_item-btn.is-active .icon-caret {
background-color: var(--primary);
transform: rotate(180deg)
}
}
@media (min-width: 1272px) and (any-hover: hover) {
.layout-gnav_item-btn {
transition: color .1s, font-weight .1s
}
.layout-gnav_item-btn:hover {
font-weight: 700;
color: var(--primary);
text-decoration: none
}
.layout-gnav_item-btn:hover .icon-caret,
.layout-gnav_item-btn:hover .icon-external {
background-color: var(--primary)
}
}
.layout-gnav_item.-sustainability {
position: relative;
padding-right: clamp(.625rem, -1.483rem + 2.65vw, 1.0625rem);
margin-right: clamp(.625rem, -1.483rem + 2.65vw, 1.0625rem)
}
.layout-gnav_item.-sustainability:after {
position: absolute;
top: 50%;
right: 0;
display: block;
height: 40%;
content: "";
border-right: 1px solid var(--text);
transform: translateY(-50%)
}
.element-titleLvTwo {
font-size: clamp(2.0625rem, 1.746rem + .79vw, 2.375rem);
font-weight: 700;
line-height: 1.3;
}
@media (min-width: 1272px) {
.element-titleLvTwo {
font-size: clamp(2.375rem, 1.148rem + 1.54vw, 3rem)
}
}
.element-titleLvTwo sup {
position: static;
font-size: calc(clamp(1rem, .873rem + .32vw, 1.125rem)*.75);
line-height: inherit;
vertical-align: top
}
@media (min-width: 1272px) {
.element-titleLvTwo sup {
font-size: calc(clamp(1.125rem, .757rem + .46vw, 1.3125rem)*.75)
}
}
.layout-gnavmenu_content {
position: fixed;
right: 0;
left: 0;
display: flex;
width: 100vw;
padding: 80px 48px;
visibility: hidden;
background-color: var(--base-white);
border-top: 1px solid var(--gray-2);
opacity: 0;
transition: opacity .3s, visibility .3s
}
.layout-gnavmenu_content.is-overflow {
height: calc(100% - 50px);
overflow-y: auto;
scrollbar-width: thin
}
@media (min-width: 1272px) {
.layout-gnavmenu_content.is-overflow {
height: calc(100% - 65px)
}
}
@media (min-width: 1920px) {
.layout-gnavmenu_content.is-overflow {
height: calc(100% - 80px)
}
}
.layout-gnavmenu_content.is-overflow .layout-container {
height: -moz-fit-content;
height: fit-content
}
.layout-gnavmenu_content.is-active {
visibility: visible;
opacity: 1
}
.layout-gnavmenu_card .icon-arrow.-bold {
width: 16px
}
.layout-gnavmenu_figure {
position: relative;
width: 100%;
aspect-ratio: 380/224;
border: 2px solid var(--gray-1)
}
.layout-gnavmenu_figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
@media (any-hover: hover) {
.layout-gnavmenu_figure:before {
position: absolute;
inset: 0;
z-index: 1;
display: block;
content: "";
background: transparent;
transition: background .3s
}
.layout-gnavmenu_card:hover .layout-gnavmenu_figure:before {
background-color: var(--dark-bg-hover)
}
}
.layout-gnavmenu_closebtn {
position: absolute;
top: 0;
right: 0;
padding: 20px
}
.layout-gnavmenu_closebtn .icon-cross {
width: 24px
}
.layout-gnavmenu_content.-business_product .element-grid.-card {
gap: 0;
justify-content: center;
margin-inline: clamp(-5rem, -.556rem - 3.7vw, -3.5rem)
}
.layout-gnavmenu_content.-business_product .element-grid.-card .element-grid_col {
padding-inline: clamp(1.75rem, .278rem + 1.85vw, 2.5rem)
}
.layout-gnavmenu_content.-business_product .element-grid.-card .element-grid_col:first-child {
border-right: 1px solid var(--gray-2)
}
.layout-gnavmenu_content.-business_product .element-grid.-card .element-grid_col:nth-child(2) {
border-right: 1px solid var(--gray-2)
}
.layout-gnavmenu_content.-business_product .element-grid.-card .element-grid_col:last-child {
border-left: 1px solid var(--gray-2)
}
@media (min-width: 1272px) {
.layout-lang {
position: relative;
align-items: center;
transition: border-left .3s
}
.layout-lang a,
.layout-lang button {
transition: color .3s, background-color .3s, border .3s
}
.layout-lang:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 40%;
margin-block: auto;
content: "";
transition: border-left .3s
}
.layout-lang_btn {
display: flex;
align-items: center;
height: 100%;
padding-inline: clamp(.625rem, -1.483rem + 2.65vw, 1.0625rem) clamp(.625rem, -3.892rem + 5.68vw, 1.5625rem);
font-size: 1rem;
font-weight: 700;
color: var(--primary);
text-align: center;
background-color: transparent;
border: none
}
.layout-lang_btn .-label {
position: relative;
margin-inline: clamp(.625rem, .257rem + .46vw, .8125rem) clamp(.25rem, .127rem + .15vw, .3125rem);
font-size: clamp(.875rem, .63rem + .31vw, 1rem)
}
.layout-lang_btn.is-active .-label:after {
margin-top: clamp(.375rem, .007rem + .46vw, .5625rem);
width: clamp(.625rem, .257rem + .46vw, .8125rem);
height: clamp(.625rem, .257rem + .46vw, .8125rem);
border-color: var(--primary);
border-style: solid;
border-width: 0 1px 1px 0;
transform: rotate(225deg)
}
.layout-lang_btn .icon-lang {
display: inline-block;
width: clamp(1.375rem, 1.13rem + .31vw, 1.5rem);
height: auto;
aspect-ratio: 1/1;
vertical-align: clamp(-.375rem, -.19rem - .15vw, -.3125rem);
fill: var(--primary);
transition: fill .3s
}
.layout-lang_btn .icon-caret {
margin-top: clamp(.0625rem, -.306rem + .46vw, .25rem);
background-color: var(--primary)
}
.layout-lang_btn.is-active .icon-caret {
transform: rotate(180deg)
}
.layout-lang_select {
position: absolute;
z-index: 2;
width: 100%;
font-weight: 700;
color: var(--primary);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
visibility: hidden;
border: none;
opacity: 0;
transition: opacity .3s, visibility .3s
}
.layout-lang_select li {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
margin-top: -1px
}
.layout-lang_select li:first-child {
margin-top: 0
}
}
.layout-lang_option {
text-decoration: none
}
@media (min-width: 1272px) {
.layout-lang_option {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: clamp(.8125rem, .444rem + .46vw, 1rem);
font-weight: 700;
color: var(--primary);
cursor: pointer;
background-color: var(--base-white);
border: 1px solid var(--gray-2)
}
}
@media (min-width: 1272px) and (any-hover: hover) {
.layout-lang_option:hover {
color: var(--base-white);
text-decoration: none;
background-color: var(--primary)
}
}
.element-link {
align-items: center;
color: var(--primary)
}
.element-link [class*=icon-] {
margin-inline: 8px
}
@media (min-width: 640px) {
.element-link [class*=icon-] {
margin-inline: 6px
}
}
@media (min-width: 1272px) {
.element-link [class*=icon-] {
margin-inline: clamp(.375rem, .248rem + .32vw, .5rem)
}
}
.element-link .icon-arrow {
margin-bottom: clamp(0rem, .089rem - .11vw, .0625rem)
}
@media (min-width: 1272px) {
.element-link .icon-external {
margin-bottom: -1px
}
}
@media (any-hover: hover) {
.element-link[href]:hover {
text-decoration: underline
}
}
.element-grid:has(.element-grid_col>.element-link) {
row-gap: clamp(.75rem, .37rem + .95vw, 1.125rem)
}
@media (min-width: 1272px) {
.element-grid:has(.element-grid_col>.element-link) {
row-gap: clamp(1.125rem, .389rem + .93vw, 1.5rem)
}
}
.l-local-nav {
z-index: 1;
display: block
}
.l-local-nav .l-local-nav {
position: static
}
.l-local-nav .l-local-nav .l-local-nav_link {
padding-left: 3em
}
.l-local-nav .l-local-nav .l-local-nav .l-local-nav_link {
padding-left: 4em
}
.l-local-nav .l-local-nav .l-local-nav .l-local-nav .l-local-nav_link {
padding-left: 5em
}
@media (min-width: 1272px) {
.l-local-nav {
position: absolute;
right: 0
}
}
@media (min-width: 2000px) {
.l-local-nav {
position: absolute;
right: -350px;
left: initial
}
}
.l-local-nav_link {
display: flex;
align-items: center;
width: 100%;
min-height: 50px;
padding-inline: 36px;
font-size: 14px
}
.l-local-nav_item.is-active>.l-local-nav_link {
font-weight: 700;
color: var(--base-white);
background-color: var(--secondary)
}
.l-local-nav_link .icon-external {
background-color: var(--text)
}
@media (any-hover: hover) {
.l-local-nav_link {
transition: background-color .3s, color .3s
}
.l-local-nav_link .icon-external {
transition: background-color .3s
}
.l-local-nav_link:hover {
font-weight: 700;
color: var(--primary)
}
.l-local-nav_link:hover .icon-external {
background-color: var(--primary)
}
}
@media (min-width: 1272px) {
.l-local-nav_link {
width: clamp(13.125rem, 5.764rem + 9.26vw, 16.875rem);
min-height: 88px;
padding-block: 22px
}
}
.element-grid {
display: flex;
flex-wrap: wrap;
--column-gap: clamp(1.5rem, 1.247rem + .63vw, 1.75rem);
--row-gap: clamp(1.5rem, 1.247rem + .63vw, 1.75rem)
}
@media (min-width: 1272px) {
.element-grid {
--column-gap: clamp(1.75rem, .278rem + 1.85vw, 2.5rem);
--row-gap: clamp(1.75rem, .278rem + 1.85vw, 2.5rem)
}
}
.element-grid {
gap: var(--row-gap) var(--column-gap);
justify-content: start
}
.element-grid:where([data-grid-col*="[1]"])>.element-grid_col {
width: calc(100% - var(--column-gap) + var(--column-gap) / 1)
}
.element-grid:where([data-grid-col*="[2]"])>.element-grid_col {
width: calc(50% - var(--column-gap) + var(--column-gap) / 2)
}
@media (min-width: 1272px) {
.element-grid:where([data-grid-col*="[2]"]):has(> .element-grid_col.-business_product)>.element-grid_col {
width: 48%;
}
}
.element-grid:where([data-grid-col*="[2]"]):has(> .element-grid_col.-business_product)>.element-grid_col .element-btn {
height: auto;
}
.element-grid:where([data-grid-col*="[3]"])>.element-grid_col {
width: calc(33.3333333333% - var(--column-gap) + var(--column-gap) / 3)
}
.element-grid:where([data-grid-col*="[4]"])>.element-grid_col {
width: calc(25% - var(--column-gap) + var(--column-gap) / 4)
}
.element-grid:where([data-grid-col*="[5]"])>.element-grid_col {
width: calc(20% - var(--column-gap) + var(--column-gap) / 5)
}
.element-grid:where([data-grid-col*="[6]"])>.element-grid_col {
width: calc(16.6666666667% - var(--column-gap) + var(--column-gap) / 6)
}
.element-grid:where([data-grid-col*="[7]"])>.element-grid_col {
width: calc(14.2857142857% - var(--column-gap) + var(--column-gap) / 7)
}
.element-grid:where([data-grid-col*="[8]"])>.element-grid_col {
width: calc(12.5% - var(--column-gap) + var(--column-gap) / 8)
}
.element-grid:where([data-grid-col*="[9]"])>.element-grid_col {
width: calc(11.1111111111% - var(--column-gap) + var(--column-gap) / 9)
}
.element-grid:where([data-grid-col*="[10]"])>.element-grid_col {
width: calc(10% - var(--column-gap) + var(--column-gap) / 10)
}
.element-grid:where([data-grid-col*="[11]"])>.element-grid_col {
width: calc(9.0909090909% - var(--column-gap) + var(--column-gap) / 11)
}
.element-grid:where([data-grid-col*="[12]"])>.element-grid_col {
width: calc(8.3333333333% - var(--column-gap) + var(--column-gap) / 12)
}
@media (max-width: 639px) {
.element-grid {
gap: var(--row-gap) var(--column-gap);
justify-content: start
}
.element-grid:where([data-grid-col*="[sp:1]"])>.element-grid_col {
width: calc(100% - var(--column-gap) + var(--column-gap) / 1)
}
.element-grid:where([data-grid-col*="[sp:2]"])>.element-grid_col {
width: calc(50% - var(--column-gap) + var(--column-gap) / 2)
}
.element-grid:where([data-grid-col*="[sp:3]"])>.element-grid_col {
width: calc(33.3333333333% - var(--column-gap) + var(--column-gap) / 3)
}
.element-grid:where([data-grid-col*="[sp:4]"])>.element-grid_col {
width: calc(25% - var(--column-gap) + var(--column-gap) / 4)
}
.element-grid:where([data-grid-col*="[sp:5]"])>.element-grid_col {
width: calc(20% - var(--column-gap) + var(--column-gap) / 5)
}
.element-grid:where([data-grid-col*="[sp:6]"])>.element-grid_col {
width: calc(16.6666666667% - var(--column-gap) + var(--column-gap) / 6)
}
.element-grid:where([data-grid-col*="[sp:7]"])>.element-grid_col {
width: calc(14.2857142857% - var(--column-gap) + var(--column-gap) / 7)
}
.element-grid:where([data-grid-col*="[sp:8]"])>.element-grid_col {
width: calc(12.5% - var(--column-gap) + var(--column-gap) / 8)
}
.element-grid:where([data-grid-col*="[sp:9]"])>.element-grid_col {
width: calc(11.1111111111% - var(--column-gap) + var(--column-gap) / 9)
}
.element-grid:where([data-grid-col*="[sp:10]"])>.element-grid_col {
width: calc(10% - var(--column-gap) + var(--column-gap) / 10)
}
.element-grid:where([data-grid-col*="[sp:11]"])>.element-grid_col {
width: calc(9.0909090909% - var(--column-gap) + var(--column-gap) / 11)
}
.element-grid:where([data-grid-col*="[sp:12]"])>.element-grid_col {
width: calc(8.3333333333% - var(--column-gap) + var(--column-gap) / 12)
}
}
@media (min-width: 640px) and (max-width: 1271px) {
.element-grid {
gap: var(--row-gap) var(--column-gap);
justify-content: start
}
.element-grid:where([data-grid-col*="[tab:1]"])>.element-grid_col {
width: calc(100% - var(--column-gap) + var(--column-gap) / 1)
}
.element-grid:where([data-grid-col*="[tab:2]"])>.element-grid_col {
width: calc(50% - var(--column-gap) + var(--column-gap) / 2)
}
.element-grid:where([data-grid-col*="[tab:3]"])>.element-grid_col {
width: calc(33.3333333333% - var(--column-gap) + var(--column-gap) / 3)
}
.element-grid:where([data-grid-col*="[tab:4]"])>.element-grid_col {
width: calc(25% - var(--column-gap) + var(--column-gap) / 4)
}
.element-grid:where([data-grid-col*="[tab:5]"])>.element-grid_col {
width: calc(20% - var(--column-gap) + var(--column-gap) / 5)
}
.element-grid:where([data-grid-col*="[tab:6]"])>.element-grid_col {
width: calc(16.6666666667% - var(--column-gap) + var(--column-gap) / 6)
}
.element-grid:where([data-grid-col*="[tab:7]"])>.element-grid_col {
width: calc(14.2857142857% - var(--column-gap) + var(--column-gap) / 7)
}
.element-grid:where([data-grid-col*="[tab:8]"])>.element-grid_col {
width: calc(12.5% - var(--column-gap) + var(--column-gap) / 8)
}
.element-grid:where([data-grid-col*="[tab:9]"])>.element-grid_col {
width: calc(11.1111111111% - var(--column-gap) + var(--column-gap) / 9)
}
.element-grid:where([data-grid-col*="[tab:10]"])>.element-grid_col {
width: calc(10% - var(--column-gap) + var(--column-gap) / 10)
}
.element-grid:where([data-grid-col*="[tab:11]"])>.element-grid_col {
width: calc(9.0909090909% - var(--column-gap) + var(--column-gap) / 11)
}
.element-grid:where([data-grid-col*="[tab:12]"])>.element-grid_col {
width: calc(8.3333333333% - var(--column-gap) + var(--column-gap) / 12)
}
}
@media (min-width: 1272px) {
.element-grid {
gap: var(--row-gap) var(--column-gap);
justify-content: start
}
.element-grid:where([data-grid-col*="[pc:1]"])>.element-grid_col {
width: calc(100% - var(--column-gap) + var(--column-gap) / 1)
}
.element-grid:where([data-grid-col*="[pc:2]"])>.element-grid_col {
width: calc(50% - var(--column-gap) + var(--column-gap) / 2)
}
.element-grid:where([data-grid-col*="[pc:3]"])>.element-grid_col {
width: calc(33.3333333333% - var(--column-gap) + var(--column-gap) / 3)
}
.element-grid:where([data-grid-col*="[pc:4]"])>.element-grid_col {
width: calc(25% - var(--column-gap) + var(--column-gap) / 4)
}
.element-grid:where([data-grid-col*="[pc:5]"])>.element-grid_col {
width: calc(20% - var(--column-gap) + var(--column-gap) / 5)
}
.element-grid:where([data-grid-col*="[pc:6]"])>.element-grid_col {
width: calc(16.6666666667% - var(--column-gap) + var(--column-gap) / 6)
}
.element-grid:where([data-grid-col*="[pc:7]"])>.element-grid_col {
width: calc(14.2857142857% - var(--column-gap) + var(--column-gap) / 7)
}
.element-grid:where([data-grid-col*="[pc:8]"])>.element-grid_col {
width: calc(12.5% - var(--column-gap) + var(--column-gap) / 8)
}
.element-grid:where([data-grid-col*="[pc:9]"])>.element-grid_col {
width: calc(11.1111111111% - var(--column-gap) + var(--column-gap) / 9)
}
.element-grid:where([data-grid-col*="[pc:10]"])>.element-grid_col {
width: calc(10% - var(--column-gap) + var(--column-gap) / 10)
}
.element-grid:where([data-grid-col*="[pc:11]"])>.element-grid_col {
width: calc(9.0909090909% - var(--column-gap) + var(--column-gap) / 11)
}
.element-grid:where([data-grid-col*="[pc:12]"])>.element-grid_col {
width: calc(8.3333333333% - var(--column-gap) + var(--column-gap) / 12)
}
}
@media (min-width: 1920px) {
.element-grid {
gap: var(--row-gap) var(--column-gap);
justify-content: start
}
.element-grid:where([data-grid-col*="[full:1]"])>.element-grid_col {
width: calc(100% - var(--column-gap) + var(--column-gap) / 1)
}
.element-grid:where([data-grid-col*="[full:2]"])>.element-grid_col {
width: calc(50% - var(--column-gap) + var(--column-gap) / 2)
}
.element-grid:where([data-grid-col*="[full:3]"])>.element-grid_col {
width: calc(33.3333333333% - var(--column-gap) + var(--column-gap) / 3)
}
.element-grid:where([data-grid-col*="[full:4]"])>.element-grid_col {
width: calc(25% - var(--column-gap) + var(--column-gap) / 4)
}
.element-grid:where([data-grid-col*="[full:5]"])>.element-grid_col {
width: calc(20% - var(--column-gap) + var(--column-gap) / 5)
}
.element-grid:where([data-grid-col*="[full:6]"])>.element-grid_col {
width: calc(16.6666666667% - var(--column-gap) + var(--column-gap) / 6)
}
.element-grid:where([data-grid-col*="[full:7]"])>.element-grid_col {
width: calc(14.2857142857% - var(--column-gap) + var(--column-gap) / 7)
}
.element-grid:where([data-grid-col*="[full:8]"])>.element-grid_col {
width: calc(12.5% - var(--column-gap) + var(--column-gap) / 8)
}
.element-grid:where([data-grid-col*="[full:9]"])>.element-grid_col {
width: calc(11.1111111111% - var(--column-gap) + var(--column-gap) / 9)
}
.element-grid:where([data-grid-col*="[full:10]"])>.element-grid_col {
width: calc(10% - var(--column-gap) + var(--column-gap) / 10)
}
.element-grid:where([data-grid-col*="[full:11]"])>.element-grid_col {
width: calc(9.0909090909% - var(--column-gap) + var(--column-gap) / 11)
}
.element-grid:where([data-grid-col*="[full:12]"])>.element-grid_col {
width: calc(8.3333333333% - var(--column-gap) + var(--column-gap) / 12)
}
}
.element-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: -moz-fit-content;
height: fit-content;
padding-block: 12px;
text-align: center;
text-decoration: none;
background-color: var(--base-white);
border: 1px solid var(--primary);
padding: clamp(.875rem, .63rem + .31vw, 1rem) clamp(1.5rem, .764rem + .93vw, 1.875rem);
font-size: clamp(.875rem, .63rem + .31vw, 1rem);
}
.element-btn.-left {
margin-right: auto
}
.element-btn.-right {
margin-left: auto
}
.element-btn.-dark {
background-color: var(--dark-normal);
border: 1px solid var(--base-white)
}
.element-grid .element-btn {
height: 100%
}
@media (min-width: 640px) {
.element-btn {
width: -moz-fit-content;
width: fit-content;
min-width: auto;
min-height: clamp(3.25rem, 2.269rem + 1.23vw, 3.75rem);
padding: clamp(.875rem, .63rem + .31vw, 1rem) clamp(1.5rem, .764rem + .93vw, 1.875rem);
font-size: clamp(.875rem, .63rem + .31vw, 1rem)
}
.element-btn.-lg {
min-width: min(100%, clamp(15.5rem, -3.148rem + 23.46vw, 25rem))
}
}
@media (any-hover: hover) {
.element-btn {
transition: background-color .3s, border .3s
}
.element-btn:hover {
text-decoration: none;
background-color: var(--primary);
border: 1px solid var(--primary)
}
.element-btn:hover.-dark {
background-color: var(--dark-bg-hover);
border: 1px solid var(--base-white)
}
}
.element-btn_label {
display: inline-block;
font-weight: 700;
color: var(--primary);
vertical-align: middle
}
.element-btn.-dark .element-btn_label {
color: var(--base-white)
}
@media (any-hover: hover) {
.element-btn_label,
.element-btn_label * {
transition: color .3s
}
.element-btn:hover .element-btn_label,
.element-btn:hover .element-btn_label *,
.element-btn.-dark:hover .element-btn_label {
color: var(--base-white)
}
}
.element-btn_label:has([class*=icon-]) {
display: inline-flex;
gap: clamp(.375rem, .13rem + .31vw, .5rem);
align-items: center
}
.element-btn_label:has([class*=icon-]) [class*=icon-] {
flex-shrink: 0
}
.element-btn-arrow {
position: relative;
display: flex;
align-items: center;
justify-content: space-around;
width: clamp(2.75rem, 2.244rem + 1.27vw, 3.25rem);
height: -moz-fit-content;
height: fit-content;
aspect-ratio: 1/1;
background-color: var(--base-white);
border: 1px solid var(--primary);
transition: background-color .3s, border .3s
}
.element-btn-arrow.-dark {
background-color: var(--dark-normal);
border: 1px solid var(--base-white)
}
.element-btn-arrow.-left .icon-arrow {
transform: rotate(180deg)
}
@media (any-hover: hover) {
.element-btn-arrow:hover {
background-color: var(--primary);
border: 1px solid var(--primary)
}
.element-btn-arrow:hover.-dark {
background-color: var(--dark-bg-hover);
border: 1px solid var(--base-white)
}
}
@media (min-width: 1272px) {
.element-btn-arrow {
width: clamp(3.25rem, 1.042rem + 2.78vw, 4.375rem)
}
}
.element-grid_col .element-btn {
margin-top: 0
}
.element-accordion {
width: calc(100vw - var(--scrollBar));
margin-left: -25px
}
.element-accordion:not(:first-child) {
margin-top: 0;
border-top: solid 2px var(--base-white)
}
@media (min-width: 640px) {
.element-accordion {
width: 100%;
margin-left: 0
}
.element-accordion+.element-accordion {
border-top: solid 3px var(--base-white)
}
}
.element-accordion_icon {
position: relative;
bottom: 0;
flex-shrink: 0;
width: 32px;
height: 32px;
margin-block: auto;
background-color: var(--base-white);
border-radius: 50%
}
.element-accordion_icon span {
position: absolute;
inset: 0;
width: 17px;
height: 2px;
margin: auto;
content: "";
background-color: var(--primary);
transition: transform .3s
}
.element-accordion .element-accordion_icon span:last-child {
transform: rotate(90deg)
}
.element-accordion[open] .element-accordion_icon span:last-child {
transform: rotate(0)
}
@media (min-width: 1920px) {
.element-accordion_icon {
width: 48px;
height: 48px
}
.element-accordion_icon span {
width: 24px
}
}
.element-accordion_summary {
position: relative;
display: flex;
justify-content: space-between;
padding: 25px 25px 25px 32px;
font-size: 21px;
font-weight: 500;
cursor: pointer;
background-color: var(--gray-1);
transition: background-color .3s
}
.element-accordion_summary::-webkit-details-marker {
display: none
}
@media (min-width: 640px) {
.element-accordion_summary {
padding: clamp(1.125rem, .688rem + 1.09vw, 2rem);
font-size: clamp(1.375rem, 1.188rem + .47vw, 1.75rem)
}
}
@media (any-hover: hover) {
.element-accordion_summary:hover {
background-color: var(--primary)
}
.element-accordion_summary:hover .element-accordion_label {
color: var(--base-white)
}
}
.element-accordion_label {
transition: color .3s
}
.element-accordion_contents {
padding: 25px
}
@media (min-width: 640px) {
.element-accordion_contents {
padding: clamp(2rem, .037rem + 2.47vw, 3rem) clamp(1.125rem, -.593rem + 2.16vw, 2rem)
}
}
.element-accordion.-link {
display: block
}
.element-accordion.-link .element-accordion_summary {
display: inline-flex;
gap: 16px;
align-items: center;
justify-content: space-between;
width: 100%;
padding-inline: 48px
}
@media (min-width: 640px) {
.element-accordion.-link .element-accordion_summary {
gap: 12px
}
.element-accordion.-link .element-accordion_summary .icon-arrow {
position: static
}
}
@media (any-hover: hover) {
.element-accordion.-link .element-accordion_summary:hover .element-accordion_label {
color: var(--base-white)
}
}
.element-accordion.-link .element-accordion_label {
display: inline;
width: auto;
font-weight: 700;
color: var(--primary)
}
.c-breadcrumb_item {
display: inline
}
.c-breadcrumb_item:not(:last-child):after {
display: inline-block;
width: clamp(.375rem, .248rem + .32vw, .5rem);
height: auto;
aspect-ratio: 8.62/18.3;
margin-inline: clamp(.5rem, -.006rem + 1.27vw, 1rem);
margin-bottom: clamp(-.125rem, .026rem - .38vw, -.0625rem);
content: "";
background-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-caret-breadcrumb.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain
}
.c-breadcrumb_item:has(a) {
font-weight: 700;
color: var(--primary)
}
@media (min-width: 640px) {
.c-breadcrumb_item:not(:last-child):after {
margin-bottom: -3px
}
}
@media screen and (max-width: 639.9px) {
.figure-technology {
margin-inline: auto;
max-width: fit-content;
}
}
.c-progress {
display: none
}
@media (min-width: 1272px) {
.c-progress {
position: fixed !important;
top: calc(var(--headerHeight) + clamp(8.75rem, 2.861rem + 7.41vw, 11.75rem));
bottom: 0 !important;
z-index: 1;
width: 200px;
height: -moz-fit-content;
height: fit-content;
margin-block: initial;
margin-left: clamp(-15.625rem, -9.144rem - 5.4vw, -13.4375rem)
}
.c-progress.is-active {
visibility: visible;
opacity: 1;
transition: opacity, .3s, visibility, .3s
}
}
.icon-cross,
.icon-arrow,
.icon-external,
.icon-caret {
display: inline-block;
height: auto;
background-color: var(--primary);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color .3s, transform .3s
}
.-dark.icon-cross,
.-dark.icon-arrow,
.-dark.icon-external,
.-dark.icon-caret {
background-color: var(--base-white)
}
.-with-text.icon-cross,
.-with-text.icon-arrow,
.-with-text.icon-external,
.-with-text.icon-caret {
margin-left: 8px
}
@media (min-width: 640px) {
.-with-text.icon-cross,
.-with-text.icon-arrow,
.-with-text.icon-external,
.-with-text.icon-caret {
margin-left: 6px
}
}
@media (min-width: 1272px) {
.-with-text.icon-cross,
.-with-text.icon-arrow,
.-with-text.icon-external,
.-with-text.icon-caret {
margin-left: clamp(.375rem, .248rem + .32vw, .5rem)
}
}
@media (any-hover: hover) {
a:hover .-hover\:color.icon-cross,
a:hover .-hover\:color.icon-arrow,
a:hover .-hover\:color.icon-external,
a:hover .-hover\:color.icon-caret,
button:hover .-hover\:color.icon-cross,
button:hover .-hover\:color.icon-arrow,
button:hover .-hover\:color.icon-external,
button:hover .-hover\:color.icon-caret,
summary:hover .-hover\:color.icon-cross,
summary:hover .-hover\:color.icon-arrow,
summary:hover .-hover\:color.icon-external,
summary:hover .-hover\:color.icon-caret {
background-color: var(--base-white)
}
a:hover .-hover\:color.-dark.icon-cross,
a:hover .-hover\:color.-dark.icon-arrow,
a:hover .-hover\:color.-dark.icon-external,
a:hover .-hover\:color.-dark.icon-caret,
button:hover .-hover\:color.-dark.icon-cross,
button:hover .-hover\:color.-dark.icon-arrow,
button:hover .-hover\:color.-dark.icon-external,
button:hover .-hover\:color.-dark.icon-caret,
summary:hover .-hover\:color.-dark.icon-cross,
summary:hover .-hover\:color.-dark.icon-arrow,
summary:hover .-hover\:color.-dark.icon-external,
summary:hover .-hover\:color.-dark.icon-caret {
background-color: var(--base-white)
}
}
.icon-caret {
width: clamp(.75rem, -.756rem + 1.89vw, 1.0625rem);
aspect-ratio: 16/8;
background-color: var(--text);
-webkit-mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-caret.svg);
mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-caret.svg)
}
.icon-external {
width: clamp(.75rem, .623rem + .32vw, .875rem);
aspect-ratio: 1;
-webkit-mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-external.svg);
mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-external.svg)
}
.icon-external.-lg {
width: clamp(.9375rem, .719rem + .55vw, 1.375rem)
}
@media (min-width: 1272px) {
.icon-external {
width: clamp(.875rem, .63rem + .31vw, 1rem)
}
}
.icon-arrow {
flex-shrink: 0;
width: clamp(1rem, .81rem + .47vw, 1.1875rem);
aspect-ratio: 27.061/18.31;
-webkit-mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-arrow.svg);
mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-arrow.svg)
}
.icon-arrow.-bold {
width: 32px;
aspect-ratio: 32/24;
-webkit-mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-arrow-bold.svg);
mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-arrow-bold.svg)
}
.icon-arrow.-lg {
width: clamp(1.25rem, .87rem + .95vw, 1.625rem)
}
@media (min-width: 1272px) {
.icon-arrow {
width: clamp(1.1875rem, .329rem + 1.08vw, 1.625rem)
}
}
@media (any-hover: hover) {
a:hover .icon-arrow.-hover\:move,
button:hover .icon-arrow.-hover\:move,
summary:hover .icon-arrow.-hover\:move {
transform: translate(.3em)
}
}
.icon-cross {
aspect-ratio: 1;
-webkit-mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-cross.svg);
mask-image: url(//mektec.cz/wp-content/themes/mektec-manufacturing-corporation-europe-cz-sro/assets/assets_co/images/icon-cross.svg)
}
.c-list_type {
position: absolute;
left: 0
}
.c-new-icon {
position: absolute;
top: -20px;
left: -20px;
z-index: 2;
display: none;
align-items: center;
justify-content: center;
width: 50px;
aspect-ratio: 1;
font-weight: 700;
color: var(--base-white);
background-color: var(--primary);
border: 1px solid var(--base-white);
border-radius: 50%
}
@media (min-width: 640px) {
.c-new-icon {
top: -22px;
left: -22px;
width: 55px
}
}
@media (min-width: 1920px) {
.c-new-icon {
top: -25.6px;
left: -25.6px;
width: 64px
}
}
.element-pagetop {
right: 0;
z-index: 49;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: clamp(3.9375rem, 3.368rem + 1.42vw, 4.5rem);
height: clamp(3.9375rem, 3.368rem + 1.42vw, 4.5rem);
padding-block: clamp(.75rem, .56rem + .47vw, .9375rem) clamp(.5rem, .437rem + .16vw, .5625rem);
margin: clamp(1.5625rem, 1.246rem + .79vw, 1.875rem);
text-decoration: none;
visibility: hidden;
background-color: #ffffffe0;
box-shadow: 0 0 8px #00000029;
opacity: 0;
transition: opacity .3s, background-color .3s, visibility .3s
}
.element-pagetop .icon-arrow {
width: 24px;
height: auto;
transform: rotate(-90deg)
}
.element-pagetop .-label {
font-size: 12px;
font-weight: 700;
color: var(--primary);
transition: color .3s;
text-align: center;
}
.element-pagetop.is-active {
visibility: visible;
opacity: 1
}
@media (any-hover: hover) {
.element-pagetop:hover {
text-decoration: none;
background-color: var(--primary)
}
.element-pagetop:hover .-label {
color: var(--base-white)
}
.element-pagetop:hover .icon-arrow {
transform: rotate(-90deg)
}
}
@media (min-width: 1272px) {
.element-pagetop {
width: clamp(4.5rem, 2.537rem + 2.47vw, 5.5rem);
height: clamp(4.5rem, 2.537rem + 2.47vw, 5.5rem);
padding-block: clamp(.9375rem, .815rem + .15vw, 1rem) clamp(.5625rem, .44rem + .15vw, .625rem)
}
.element-pagetop .-label {
font-size: 12px
}
.element-pagetop .icon-arrow {
width: clamp(1.5rem, .396rem + 1.39vw, 2.0625rem)
}
}
html[lang=en] .element-pagetop {
width: 72px;
height: 72px;
padding-block: 16px 12px
}
html[lang=en] .element-pagetop .-label {
font-size: 11px;
white-space: nowrap
}
@media (min-width: 1272px) {
html[lang=en] .element-pagetop {
width: clamp(4.5rem, 2.537rem + 2.47vw, 5.5rem);
height: clamp(4.5rem, 2.537rem + 2.47vw, 5.5rem);
padding-block: clamp(1.125rem, .88rem + .31vw, 1.25rem) clamp(.75rem, .505rem + .31vw, .875rem)
}
html[lang=en] .element-pagetop .-label {
font-size: 12px
}
}
.c-scrollable {
overflow-x: scroll;
scrollbar-width: thin
}
.scroll-hint-text {
display: none
}
.front-hero {
position: relative;
visibility: visible;
height: calc(100vh - var(--headerHeight));
min-height: 667px
}
.front-hero .splide__track {
height: 100%
}
.front-home .front-hero {
height: 100vh
}
@media (min-width: 768px) {
.front-hero {
min-height: 720px
}
}
.front-hero_info {
position: absolute;
top: 50%;
width: 100%;
color: var(--base-white);
transform: translateY(-50%)
}
.front-hero_info .element-titleLvTwo {
margin-bottom: 25px;
font-size: clamp(2.625rem, 2.055rem + 1.42vw, 3.1875rem)
}
.front-hero_info .-lead {
margin-bottom: 30px;
font-size: clamp(1rem, .62rem + .95vw, 1.375rem)
}
.front-hero_info .element-btn {
width: -moz-fit-content;
width: fit-content;
min-width: auto;
min-height: clamp(3.25rem, 2.269rem + 1.23vw, 3.75rem);
padding-inline: 35px
}
@media (min-width: 768px) {
.front-hero_info .element-btn {
padding-inline: 40px
}
}
@media (min-width: 1272px) {
.front-hero_info .element-titleLvTwo {
margin-bottom: clamp(.9375rem, -.289rem + 1.54vw, 1.5625rem);
font-size: clamp(3.1875rem, 1.102rem + 2.62vw, 4.25rem)
}
.front-hero_info .-lead {
margin-bottom: clamp(2.1875rem, .961rem + 1.54vw, 2.8125rem);
font-size: clamp(1.375rem, .884rem + .62vw, 1.625rem)
}
}
.front-hero_links {
display: flex;
flex-direction: column;
gap: 15px
}
.front-hero_links a {
color: var(--base-white)
}
@media (min-width: 768px) {
.front-hero_links {
flex-direction: row;
gap: 45px
}
}
.front-hero_bgimg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.front-slide_arrows {
display: flex;
gap: clamp(.4375rem, -6.807rem + 30.91vw, 1.5rem)
}
@media (min-width: 430px) {
.front-slide_arrows {
gap: clamp(1.5rem, 1.12rem + .95vw, 1.875rem)
}
}
@media (min-width: 1272px) {
.front-slide_arrows {
gap: clamp(1.875rem, .648rem + 1.54vw, 2.5rem)
}
}
.front-hero_arrows .front-slide_arrows {
position: absolute;
bottom: 0;
z-index: 1;
display: flex;
gap: clamp(.4375rem, -6.807rem + 30.91vw, 1.5rem);
padding-bottom: 25px
}
@media (min-width: 430px) {
.front-hero_arrows .front-slide_arrows {
gap: clamp(1.5rem, 1.12rem + .95vw, 1.875rem)
}
}
@media (min-width: 768px) {
.front-hero_arrows .front-slide_arrows {
padding-bottom: 60px
}
}
@media (min-width: 1272px) {
.front-hero_arrows .front-slide_arrows {
gap: clamp(1.875rem, .648rem + 1.54vw, 2.5rem)
}
}
.front-slide_progressPagination {
position: absolute;
right: 0;
bottom: 25px;
left: clamp(1.6875rem, -5.983rem + 32.73vw, 2.8125rem);
z-index: 3;
gap: 4px;
width: 100%;
max-width: clamp(7.375rem, -7.114rem + 61.82vw, 9.5rem);
margin-inline: auto
}
.front-slide_progressPagination li {
display: inline-block;
flex: 1;
height: 4px;
margin: 0;
line-height: 1;
list-style-type: none;
pointer-events: auto
}
.front-slide_progressPagination .splide__progress {
display: block;
height: 100%;
background-color: #ffffff8c
}
.front-slide_progressPagination.pause .is-active .splide__progress {
background-color: var(--base-white)
}
.front-slide_progressPagination .splide__pagination__page {
position: relative;
display: block;
width: 100%;
height: 100%
}
.front-slide_progressPagination .splide__pagination__page:before {
position: absolute;
top: 50%;
left: 0;
display: block;
width: inherit;
height: 2rem;
content: "";
translate: 0 -50%
}
.front-slide_progressPagination .splide__pagination__page.is-active {
z-index: 100
}
.front-slide_progressPagination .splide__pagination__page.is-active .splide__progress__bar {
display: block;
height: 100%;
background-color: var(--base-white)
}
@media (min-width: 430px) {
.front-slide_progressPagination {
max-width: clamp(9.5rem, 4.648rem + 18.05vw, 19rem)
}
}
@media (min-width: 768px) {
.front-slide_progressPagination {
bottom: 60px;
left: 0
}
.front-slide_progressPagination .splide__pagination__page:before {
height: 3rem
}
}
@media (min-width: 1272px) {
.front-slide_progressPagination {
max-width: clamp(19rem, -1.488rem + 25.77vw, 29.4375rem)
}
}
.front-hero_toggleBtn {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
padding-block: 0 25px
}
.front-hero_toggleBtn .layout-container {
text-align: right
}
@media (min-width: 768px) {
.front-hero_toggleBtn {
padding-bottom: 60px
}
}
.front-toggleBtn {
display: flex;
flex-direction: column;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto 0
}
.front-toggleBtn_text {
margin-bottom: clamp(.5rem, -.006rem + 1.27vw, 1rem);
font-size: 12px;
color: var(--base-white);
text-align: center
}
@media (min-width: 1272px) {
.front-toggleBtn_text {
font-size: 16px
}
}
.front-toggleBtn_btn {
position: relative;
display: inline-block;
width: 70px;
height: 35px;
background-color: #000078c4;
border-radius: 50px;
transition: background-color .3s
}
.front-toggleBtn_btn:after {
position: absolute;
top: 2px;
left: 36px;
width: 31px;
height: 31px;
content: "";
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #0003;
transition: left .4s
}
.front-toggleBtn_btn input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0
}
.front-toggleBtn_btn:has(:checked) {
background-color: #8c8c8cc4
}
.front-toggleBtn_btn:has(:checked) .splide__toggle__play {
display: block
}
.front-toggleBtn_btn:has(:checked) .splide__toggle__pause {
display: none
}
.front-toggleBtn_btn:has(:checked):after {
left: 2px
}
.front-toggleBtn_btn:not(:has(:checked)) .splide__toggle__play {
display: none
}
.front-toggleBtn_btn:not(:has(:checked)) .splide__toggle__pause {
display: block
}
@media (any-hover: hover) {
.front-toggleBtn_btn:has(input:focus-visible) {
outline: 2px solid var(--base-white)
}
}
@media (min-width: 768px) {
.prod-feature .element-titleLvTwo {
grid-area: title
}
}
@keyframes blink {
0%,
to {
color: var(--primary);
background-color: var(--base-white)
}
50% {
color: var(--base-white);
background-color: var(--primary)
}
}
@keyframes search-products-animation {
0% {
opacity: 0;
transform: translateY(3rem)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes fadeIn {
0% {
visibility: hidden;
opacity: 0
}
50% {
visibility: hidden;
opacity: 0
}
to {
visibility: visible;
opacity: 1
}
}
@keyframes fadeOut {
0% {
visibility: visible;
opacity: 1
}
to {
visibility: hidden;
opacity: 0
}
}
@keyframes fadeOutToTop {
0% {
opacity: 1;
transform: translateY(0)
}
to {
opacity: 0;
transform: translateY(-3rem)
}
}
@keyframes leftToRight {
0% {
opacity: 0;
transform: translate(-3rem)
}
to {
opacity: 1;
transform: translate(0)
}
}
@keyframes rightToLeft {
0% {
opacity: 0;
transform: translate(3rem)
}
to {
opacity: 1;
transform: translate(0)
}
}
@keyframes bottomToTop {
0% {
opacity: 0;
transform: translateY(3rem)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes topToBottom {
0% {
opacity: 0;
transform: translateY(-3rem)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes zoomIn {
0% {
transform: scale(1)
}
to {
transform: scale(1.2)
}
}
@keyframes zoomOut {
0% {
transform: scale(1.2)
}
to {
transform: scale(1)
}
}
@keyframes blur {
0% {
filter: blur(1.5rem)
}
to {
filter: blur(0)
}
}
@keyframes scroll {
0% {
transform: translateY(-100%)
}
to {
transform: translateY(100%)
}
}
@keyframes scrollTop {
0% {
transform: translateY(100%)
}
to {
transform: translateY(-100%)
}
}
@keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
to {
background-position: 0% 50%
}
}
@keyframes slideTip {
0% {
transform: scaleX(0);
transform-origin: left
}
50% {
transform: scaleX(1);
transform-origin: left
}
50.001% {
transform-origin: right
}
to {
transform: scaleX(0);
transform-origin: right
}
}
@media not print {
[data-animation] {
opacity: 0
}
}
.front-hero {
animation-fill-mode: both;
animation-name: fadeIn;
animation-duration: 2s
}
.front-hero .front-hero_info .layout-container {
animation-fill-mode: both;
animation-name: rightToLeft;
animation-duration: 1.5s;
animation-delay: 2s
}
@media screen and (min-width: 1272px) {
.technology-img {
max-width: 500px;
}
}
.layout-gnavmenu_content.-business_product .element-grid.-card {
justify-content: space-between;
margin-inline: 0;
}
.technology_cap {
font-size: 14px;
text-align: center;
max-width: 450px;
margin-top: .5em;
}