*:where(
:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(
audio
):not(svg *):not(symbol *)
) {
all: unset;
display: revert;
}
*,
*::before,
*::after {
box-sizing: border-box;
min-width: 0;
}
a,
button {
cursor: revert;
}
ol,
ul,
menu,
summary {
list-style: none;
}
ol {
counter-reset: revert;
}
table {
border-collapse: collapse;
}
input,
textarea {
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
textarea {
white-space: revert;
}
meter {
-webkit-appearance: revert;
-moz-appearance: revert;
appearance: revert;
}
:where(pre) {
all: revert;
box-sizing: border-box;
}
::-moz-placeholder {
color: inherit;
}
::placeholder {
color: inherit;
}
:where([contenteditable]:not([contenteditable='false'])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
word-wrap: break-word;
line-break: after-white-space;
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
:where([draggable='true']) {
-webkit-user-drag: element;
}
:where(dialog:modal) {
all: revert;
}
::-webkit-details-marker {
display: none;
}
:where(a, button, summary, label, input, select, textarea):focus-visible {
outline: #0049dc auto 1px;
outline: var(--focus-color, Highlight) auto 1px;
}
@property --vw {
syntax: '';
initial-value: 0;
inherits: true;
}
@property --one-rem {
syntax: '';
initial-value: 0;
inherits: false;
}
:root {
--vw: 100vw;
--one-rem: 1rem;
--window-width: calc(
tan(atan2(var(--vw), 1px)) * min(1, 16 / tan(atan2(var(--one-rem), 1px)))
);
--scale: max(1, var(--window-width) / 400);
--px: calc(1px * var(--scale));
--rem: calc(1rem * var(--scale));
--header-height: 62px;
--init-opacity: 0;
--font-noto-sans-jp: 'Noto Sans JP', sans-serif;
--font-oswald: 'Oswald', sans-serif;
--font-shippori-antique: 'Shippori Antique', sans-serif;
--color-white: #fff;
--color-black: #000;
--color-blue: #0c2c84;
--focus-color: #0049dc;
--breakpoint-xs: 400px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 960px;
--breakpoint-xl: 1488px;
--breakpoint-xxl: 1920px;
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
--ease-gleasing: cubic-bezier(0.4, 0, 0, 1);
--ease-linear: linear;
--ease-spring-1: linear(
0,
0.006,
0.025 2.8%,
0.101 6.1%,
0.539 18.9%,
0.721 25.3%,
0.849 31.5%,
0.937 38.1%,
0.968 41.8%,
0.991 45.7%,
1.006 50.1%,
1.015 55%,
1.017 63.9%,
1.001
);
--ease-spring-2: linear(
0,
0.007,
0.029 2.2%,
0.118 4.7%,
0.625 14.4%,
0.826 19%,
0.902,
0.962,
1.008 26.1%,
1.041 28.7%,
1.064 32.1%,
1.07 36%,
1.061 40.5%,
1.015 53.4%,
0.999 61.6%,
0.995 71.2%,
1
);
--ease-spring-3: linear(
0,
0.009,
0.035 2.1%,
0.141 4.4%,
0.723 12.9%,
0.938 16.7%,
1.017,
1.077,
1.121,
1.149 24.3%,
1.159,
1.163,
1.161,
1.154 29.9%,
1.129 32.8%,
1.051 39.6%,
1.017 43.1%,
0.991,
0.977 51%,
0.974 53.8%,
0.975 57.1%,
0.997 69.8%,
1.003 76.9%,
1
);
--ease-spring-4: linear(
0,
0.009,
0.037 1.7%,
0.153 3.6%,
0.776 10.3%,
1.001,
1.142 16%,
1.185,
1.209 19%,
1.215 19.9% 20.8%,
1.199,
1.165 25%,
1.056 30.3%,
1.008 33%,
0.973,
0.955 39.2%,
0.953 41.1%,
0.957 43.3%,
0.998 53.3%,
1.009 59.1% 63.7%,
0.998 78.9%,
1
);
--ease-spring-5: linear(
0,
0.01,
0.04 1.6%,
0.161 3.3%,
0.816 9.4%,
1.046,
1.189 14.4%,
1.231,
1.254 17%,
1.259,
1.257 18.6%,
1.236,
1.194 22.3%,
1.057 27%,
0.999 29.4%,
0.955 32.1%,
0.942,
0.935 34.9%,
0.933,
0.939 38.4%,
1 47.3%,
1.011,
1.017 52.6%,
1.016 56.4%,
1 65.2%,
0.996 70.2%,
1.001 87.2%,
1
);
--z-base: 100;
--z-box-link-cover: 101;
--z-menu: 102;
--z-header: 103;
--z-popup: 104;
--z-skip-link: 105;
--grid-columns: 25;
}
@media screen and (min-width: 960px) {
:root {
--scale: max(1, var(--window-width) / 1366);
--header-height: calc(4.5 * var(--rem));
--grid-columns: 40;
--grid-margin: 20rem;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--init-opacity: 1;
}
}
@media (scripting: none) {
:root {
--init-opacity: 1;
}
}
@supports not (animation-timing-function: linear(0, 1)) {
:root {
--ease-spring-1: var(--ease-out-quad);
--ease-spring-2: var(--ease-out-cubic);
--ease-spring-3: var(--ease-out-quart);
--ease-spring-4: var(--ease-out-quint);
--ease-spring-5: var(--ease-out-expo);
}
}
:root.is-scroll-lock {
overflow: hidden;
scrollbar-gutter: stable;
}
body {
font-family: 'Noto Sans JP', sans-serif;
font-family: var(--font-noto-sans-jp);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
background-color: #cedae1;
}
a {
display: block;
color: currentcolor;
cursor: pointer;
}
button {
color: currentcolor;
cursor: pointer;
}
details,
summary {
cursor: pointer;
}
video,
img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.preload * {
transition: none !important;
}
::-moz-selection {
color: #fff;
color: var(--color-white);
background-color: #0c2c84;
background-color: var(--color-blue);
}
::selection {
color: #fff;
color: var(--color-white);
background-color: #0c2c84;
background-color: var(--color-blue);
}
.lMain {
min-height: 100vh;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
white-space: nowrap !important;
border: 0 !important;
clip: rect(0 0 0 0) !important;
}
@media screen and (min-width: 960px) {
.sp-only {
display: none !important;
}
}
@media screen and (max-width: 959px) {
.pc-only {
display: none !important;
}
}
.header {
width: 100%;
pointer-events: none;
}
.header-fv {
display: none;
}
.header-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 103;
z-index: var(--z-header);
width: 100%;
padding: 8px 12px 0;
}
.header-fixed-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 62px;
min-height: var(--header-height);
padding: 0 8px 0 16px;
pointer-events: auto;
background-color: #fff;
background-color: var(--color-white);
border-radius: 8px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}
.header-fixed-head {
position: relative;
z-index: 1;
display: flex;
gap: 16px;
align-items: flex-start;
}
.header-fixed-head-logo {
flex-shrink: 0;
width: 112px;
height: 42px;
}
.header-fixed-head-portal {
position: relative;
color: #0c2c84;
color: var(--color-blue);
}
.header-fixed-head-portal-title {
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-start;
}
.header-fixed-head-portal-title-en {
font-family: 'Oswald', sans-serif;
font-family: var(--font-oswald);
font-size: 10px;
font-weight: 400;
line-height: 1;
}
.header-fixed-head-portal-title-ja {
font-size: 10px;
font-weight: 500;
line-height: 1;
}
.header-fixed-head-portal-link {
display: flex;
align-items: center;
justify-content: center;
padding: 2px 8px 3px;
margin-top: 5px;
border: 1px solid currentcolor;
border-radius: 50vh;
}
.header-fixed-head-portal-link-text {
font-size: 10px;
font-weight: 500;
line-height: 1;
}
.header-fixed-nav {
display: none;
}
.header-fixed-menu {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
}
.header-fixed-menu-icon {
position: relative;
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.header-fixed-menu-icon-line {
position: absolute;
width: 100%;
height: 2px;
background-color: #0c2c84;
background-color: var(--color-blue);
transition:
translate 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
rotate 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition:
translate 0.4s var(--ease-out-quart),
rotate 0.4s var(--ease-out-quart);
}
.header-fixed-menu-icon-line:nth-child(1) {
translate: 0 -6px;
}
.header-fixed-menu-icon-line:nth-child(3) {
translate: 0 6px;
}
.header-popup {
position: absolute;
top: calc(
100% + 4 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
top: calc(
100% + 4 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
top: calc(100% + 4 * var(--px));
left: 0;
width: calc(
224 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(
224 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(224 * var(--px));
padding: calc(
4 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
32 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
4 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
8 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
4 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
32 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
4 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
8 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(4 * var(--px)) calc(32 * var(--px)) calc(4 * var(--px))
calc(8 * var(--px));
overflow: hidden;
pointer-events: none;
background-color: #fff;
background-color: var(--color-white);
border: 1px solid #0c2c84;
border: 1px solid var(--color-blue);
border-radius: calc(
4 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
border-radius: calc(
4 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
border-radius: calc(4 * var(--px));
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
opacity: 0;
}
.header-popup-text {
position: relative;
z-index: 1;
font-size: calc(
0.75 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
0.75 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(0.75 * var(--rem));
font-weight: 500;
line-height: 1.64;
color: #0c2c84;
color: var(--color-blue);
}
.header-popup-close {
position: absolute;
top: 0;
right: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: calc(
24 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(
24 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(24 * var(--px));
height: calc(
24 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(
24 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(24 * var(--px));
background-color: #0c2c84;
background-color: var(--color-blue);
border-radius: 0
calc(
2 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
4 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
border-radius: 0
calc(
2 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
4 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
border-radius: 0 calc(2 * var(--px)) 0 calc(4 * var(--px));
}
.header-popup-close::before,
.header-popup-close::after {
position: absolute;
z-index: 1;
width: calc(
12 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(
12 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(12 * var(--px));
height: 1px;
content: '';
background-color: #fff;
background-color: var(--color-white);
}
.header-popup-close::before {
rotate: 45deg;
}
.header-popup-close::after {
rotate: -45deg;
}
.header-popup.is-open {
pointer-events: auto;
opacity: 1;
}
.is-menu-open .header-fixed-menu-icon-line:nth-child(1) {
rotate: 16deg;
translate: 0;
}
.is-menu-open .header-fixed-menu-icon-line:nth-child(2) {
opacity: 0;
}
.is-menu-open .header-fixed-menu-icon-line:nth-child(3) {
rotate: -16deg;
translate: 0;
}
@media screen and (min-width: 960px) {
.header-fv {
position: absolute;
top: 0;
left: 0;
z-index: 102;
z-index: var(--z-menu);
display: block;
width: 100%;
}
.header-fv-inner {
display: flex;
align-items: flex-start;
padding: calc(
32 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
39 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
48 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
32 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
39 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
48 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(32 * var(--px)) calc(39 * var(--px)) 0 calc(48 * var(--px));
}
.header-fv-head {
display: flex;
gap: calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(16 * var(--px));
align-items: center;
pointer-events: auto;
}
.header-fv-head-logo {
flex-shrink: 0;
width: calc(
179 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
179 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(179 * var(--px));
height: calc(
66 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(
66 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(66 * var(--px));
}
.header-fv-head-portal {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
color: var(--color-white);
}
.header-fv-head-portal-title {
display: flex;
flex-direction: column;
gap: calc(
0.1875 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
0.1875 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(0.1875 * var(--rem));
align-items: flex-start;
}
.header-fv-head-portal-title-en {
font-family: 'Oswald', sans-serif;
font-family: var(--font-oswald);
font-size: calc(
1.125 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
1.125 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(1.125 * var(--rem));
font-weight: 400;
line-height: 1;
letter-spacing: 0.02em;
}
.header-fv-head-portal-title-ja {
font-size: calc(
1 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
1 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(1 * var(--rem));
font-weight: 500;
line-height: 1;
}
.header-fv-head-portal-link {
display: flex;
align-items: center;
padding: calc(
5 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
23 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
7 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
5 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
23 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
7 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(5 * var(--px)) calc(23 * var(--px)) calc(7 * var(--px));
margin-top: calc(
11 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(
11 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(11 * var(--px));
border: 1px solid currentcolor;
border-radius: 50vh;
}
.header-fv-head-portal-link-text {
font-size: calc(
0.6875 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.6875 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.6875 * var(--rem));
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
}
.header-fv-head-portal-link.is-active {
background-color: #0c2c84;
background-color: var(--color-blue);
border-color: #0c2c84;
border-color: var(--color-blue);
}
.header-fv-body {
display: flex;
align-items: center;
margin-top: calc(
-11 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(
-11 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(-11 * var(--px));
margin-left: auto;
}
.header-fv-nav {
display: block;
height: 100%;
}
.header-fv-nav-list {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
color: var(--color-white);
}
.header-fv-nav-list-link {
position: relative;
display: flex;
justify-content: flex-start;
padding: calc(
11 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(
11 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(11 * var(--px)) 0;
font-size: calc(
1 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
1 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(1 * var(--rem));
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
pointer-events: auto;
}
.header-trigger {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100vh;
pointer-events: none;
}
.header-fixed {
display: var(--_header-fixed-display);
padding: calc(
24 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
33 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(
24 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
33 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(24 * var(--px)) calc(33 * var(--px)) 0;
}
.header-fixed-inner {
padding: 0
calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
32 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0
calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
32 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0 calc(16 * var(--px)) 0 calc(32 * var(--px));
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.header-fixed-head {
gap: calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(16 * var(--px));
align-items: center;
padding: calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
14 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
14 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(16 * var(--px)) 0 calc(14 * var(--px));
}
.header-fixed-head-logo {
width: calc(
109 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
109 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(109 * var(--px));
height: calc(
40 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(
40 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(40 * var(--px));
}
.header-fixed-head-portal {
display: flex;
flex-wrap: wrap;
gap: calc(
8 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
8 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(8 * var(--px)) calc(16 * var(--px));
align-items: center;
justify-content: flex-start;
color: #0c2c84;
color: var(--color-blue);
}
.header-fixed-head-portal-title-en {
font-size: calc(
0.875 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.875 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.875 * var(--rem));
}
.header-fixed-head-portal-title-ja {
font-size: calc(
0.75 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.75 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.75 * var(--rem));
}
.header-fixed-head-portal-link {
padding: calc(
4 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
22 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
5 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
4 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
22 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
5 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(4 * var(--px)) calc(22 * var(--px)) calc(5 * var(--px));
margin-top: 0;
}
.header-fixed-head-portal-link-text {
font-size: calc(
0.6875 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.6875 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.6875 * var(--rem));
}
.header-fixed-head-portal-link.is-active {
color: #fff;
color: var(--color-white);
background-color: #0c2c84;
background-color: var(--color-blue);
border-color: #0c2c84;
border-color: var(--color-blue);
}
.header-fixed-body {
display: flex;
gap: calc(
12 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
12 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(12 * var(--px));
align-items: center;
justify-content: flex-start;
}
.header-fixed-menu {
width: calc(
72 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
72 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(72 * var(--px));
height: calc(
72 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(
72 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(72 * var(--px));
}
.header-fixed-menu-icon {
gap: 4px;
width: calc(
40 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
40 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(40 * var(--px));
height: calc(
40 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(
40 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(40 * var(--px));
}
.header-fixed-menu-icon-line:nth-child(1) {
translate: 0
calc(
-6 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0
calc(
-6 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0 calc(-6 * var(--px));
}
.header-fixed-menu-icon-line:nth-child(3) {
translate: 0
calc(
6 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0
calc(
6 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0 calc(6 * var(--px));
}
.header-popup {
top: 65%;
left: calc(
100% + 8 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
left: calc(
100% + 8 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
left: calc(100% + 8 * var(--px));
width: calc(
370 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
370 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(370 * var(--px));
padding: calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
32 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
24 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
32 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
24 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(16 * var(--px)) calc(32 * var(--px)) calc(16 * var(--px))
calc(24 * var(--px));
}
.header-popup-text {
font-size: calc(
0.875 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.875 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.875 * var(--rem));
}
.header-popup-close {
width: calc(
20 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
20 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(20 * var(--px));
height: calc(
20 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(
20 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(20 * var(--px));
}
.header-popup-close::before,
.header-popup-close::after {
width: calc(
10 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
10 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(10 * var(--px));
}
}
@media screen and (min-width: 1240px) {
.header-fixed-nav {
display: block;
height: 100%;
}
.header-fixed-nav-list {
display: flex;
align-items: center;
height: 100%;
color: #0c2c84;
color: var(--color-blue);
}
.header-fixed-nav-list-link {
position: relative;
padding: calc(
0.5 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
12 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
0.5 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
12 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(0.5 * var(--rem)) calc(12 * var(--px));
font-size: calc(
1 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
1 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(1 * var(--rem));
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
}
.header-fixed-nav-list-link::before {
position: absolute;
bottom: 0;
left: calc(
50% - 16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
) /
2
);
left: calc(
50% - 16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
) /
2
);
left: calc(50% - 16 * var(--px) / 2);
width: calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(16 * var(--px));
height: calc(
3 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(
3 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(3 * var(--px));
content: '';
background-color: #0c2c84;
background-color: var(--color-blue);
border-radius: 50vh;
scale: 0;
}
.header-fixed-nav-list-link-text {
display: inline-block;
}
}
@media (any-hover: hover) {
.header-fv-menu:hover .header-fv-menu-icon-line,
.header-fv-menu:hover .header-fixed-menu-icon-line,
.header-fixed-menu:hover .header-fv-menu-icon-line,
.header-fixed-menu:hover .header-fixed-menu-icon-line {
transition-duration: 0.24s;
}
.header-fv-menu:hover .header-fv-menu-icon-line:first-child,
.header-fv-menu:hover .header-fixed-menu-icon-line:first-child,
.header-fixed-menu:hover .header-fv-menu-icon-line:first-child,
.header-fixed-menu:hover .header-fixed-menu-icon-line:first-child {
translate: 0
calc(
-10 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0
calc(
-10 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0 calc(-10 * var(--px));
}
.header-fv-menu:hover .header-fv-menu-icon-line:last-child,
.header-fv-menu:hover .header-fixed-menu-icon-line:last-child,
.header-fixed-menu:hover .header-fv-menu-icon-line:last-child,
.header-fixed-menu:hover .header-fixed-menu-icon-line:last-child {
translate: 0
calc(
10 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0
calc(
10 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0 calc(10 * var(--px));
}
.is-menu-open
.header-fixed-menu:hover
.header-fixed-menu-icon-line:nth-child(1) {
rotate: 0deg;
}
.is-menu-open
.header-fixed-menu:hover
.header-fixed-menu-icon-line:nth-child(2) {
opacity: 1;
}
.is-menu-open
.header-fixed-menu:hover
.header-fixed-menu-icon-line:nth-child(3) {
rotate: 0deg;
}
.header-fixed-nav-list-link::before {
transition: scale 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: scale 0.4s var(--ease-out-quart);
}
.header-fixed-nav-list-link-text {
transition: translate 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: translate 0.4s var(--ease-out-quart);
}
.header-fixed-nav-list-link:hover::before {
scale: 1;
transition-duration: 0.24s;
}
.header-fixed-nav-list-link:hover .header-fv-nav-list-link-text,
.header-fixed-nav-list-link:hover .header-fixed-nav-list-link-text {
translate: 0
calc(
-0.25 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0
calc(
-0.25 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
translate: 0 calc(-0.25 * var(--rem));
transition-duration: 0.24s;
}
}
.footer-inner {
padding: 0
calc(
32 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
64 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0
calc(
32 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
64 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0 calc(32 * var(--px)) calc(64 * var(--px));
}
.footer-nav-list {
display: flex;
flex-direction: column;
gap: calc(
10 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(
10 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(10 * var(--px));
align-items: flex-start;
}
.footer-nav-item {
font-size: calc(
0.8125 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
0.8125 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(0.8125 * var(--rem));
font-weight: 400;
line-height: 1.5;
}
.footer-nav-item-link {
display: flex;
gap: calc(
2 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(
2 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(2 * var(--px));
align-items: center;
justify-content: flex-start;
}
.footer-nav-item-link-icon {
flex-shrink: 0;
width: calc(
12 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(
12 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(12 * var(--px));
height: calc(
12 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(
12 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(12 * var(--px));
margin-top: calc(
2 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(
2 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(2 * var(--px));
rotate: -45deg;
}
.footer-copyright {
margin-top: calc(
32 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(
32 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(32 * var(--px));
margin-left: calc(
3 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-left: calc(
3 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-left: calc(3 * var(--px));
font-family: 'Oswald', sans-serif;
font-family: var(--font-oswald);
font-size: calc(
0.625 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
0.625 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(0.625 * var(--rem));
font-weight: 400;
line-height: 1.5;
color: #565656;
}
@media screen and (min-width: 960px) {
.footer {
display: grid;
grid-template-rows: min-content;
grid-template-columns: repeat(25, 1fr);
grid-template-columns: repeat(var(--grid-columns), 1fr);
border-top: solid 1px #92b6cc;
}
.footer-inner {
grid-column: 3/39;
padding: calc(
22 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
40 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
22 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0
calc(
40 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(22 * var(--px)) 0 calc(40 * var(--px));
}
.footer-nav-list {
flex-direction: row;
gap: 0;
margin: calc(
-5 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin: calc(
-5 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin: calc(-5 * var(--px));
}
.footer-nav-item {
font-size: calc(
0.75 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.75 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.75 * var(--rem));
}
.footer-nav-item-link {
padding: calc(
5 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
5 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(5 * var(--px));
}
.footer-copyright {
margin-top: calc(
11 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(
11 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(11 * var(--px));
margin-left: 0;
font-size: calc(
0.6875 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.6875 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.6875 * var(--rem));
}
}
.menu-inner {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 102;
z-index: var(--z-menu);
pointer-events: none;
opacity: 0;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.4s var(--ease-out-quart);
}
.menu-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.menu-content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
color: #0c2c84;
color: var(--color-blue);
}
.menu-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-image: linear-gradient(73deg, #dcf9ff 0%, #a8cffc 100%);
}
.menu-scroll {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.menu-scroll-inner {
padding: calc(
62px + 3.8125 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
12 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
3.75 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
62px + 3.8125 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
12 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
3.75 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(var(--header-height) + 3.8125 * var(--rem)) calc(12 * var(--px))
calc(3.75 * var(--rem));
}
.menu-main {
padding: 0
calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0
calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0 calc(16 * var(--px));
}
.menu-main-title {
font-family: 'Oswald', sans-serif;
font-family: var(--font-oswald);
font-size: calc(
1 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
1 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(1 * var(--rem));
font-weight: 400;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.menu-main-nav {
margin-top: calc(
21 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(
21 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(21 * var(--px));
}
.menu-main-nav-list-item {
display: flex;
justify-content: flex-start;
}
.menu-main-nav-list-item-link {
display: flex;
gap: calc(
16 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(
16 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(16 * var(--px));
align-items: center;
justify-content: flex-start;
padding: calc(
11 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(
11 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(11 * var(--px)) 0;
}
.menu-main-nav-list-item-link-icon {
position: relative;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(
30 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(
30 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(30 * var(--px));
height: calc(
14 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(
14 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(14 * var(--px));
overflow: hidden;
background-color: #0c2c84;
background-color: var(--color-blue);
border-radius: 50vh;
}
.menu-main-nav-list-item-link-icon-arrow {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.menu-main-nav-list-item-link-icon-arrow img {
width: calc(
12 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(
12 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(12 * var(--px));
height: calc(
12 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(
12 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(12 * var(--px));
}
.menu-main-nav-list-item-link-icon-arrow[data-id='2'] {
translate: -100%;
}
.menu-main-nav-list-item-link-icon-arrow[data-id='3'] {
translate: -100%;
}
.menu-main-nav-list-item-link-text {
font-size: calc(
1.125 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
1.125 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(1.125 * var(--rem));
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
}
.menu-main-nav-list-item-link[target='_blank']
.menu-main-nav-list-item-link-icon-arrow {
transform: rotate(-45deg);
}
.menu-sub {
padding: 0
calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0
calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0 calc(16 * var(--px));
margin-top: calc(
53 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(
53 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(53 * var(--px));
}
.menu-sub-title {
font-family: 'Oswald', sans-serif;
font-family: var(--font-oswald);
font-size: calc(
1 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
1 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(1 * var(--rem));
font-weight: 400;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.menu-sub-nav {
margin-top: calc(
16 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(
16 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(16 * var(--px));
}
.menu-sub-nav-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0
calc(
-12 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin: 0
calc(
-12 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin: 0 calc(-12 * var(--px));
}
.menu-sub-nav-list-item {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
}
.menu-sub-nav-list-item-link {
padding: calc(
8 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
12 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
8 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
12 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(8 * var(--px)) calc(12 * var(--px));
}
.menu-sub-nav-list-item-link-text {
font-size: calc(
0.875 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
0.875 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(0.875 * var(--rem));
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.06em;
}
.menu-sub-nav-list-item:not(:last-child)::before {
position: absolute;
right: 0;
width: 1px;
height: calc(
1.3125 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(
1.3125 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(1.3125 * var(--rem));
pointer-events: none;
content: '';
background-color: currentcolor;
}
.menu-sns {
margin-top: calc(
48 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(
48 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
margin-top: calc(48 * var(--px));
}
.menu-sns-list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(
12 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
4 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
grid-gap: calc(
12 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
4 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
grid-gap: calc(12 * var(--px)) calc(4 * var(--px));
gap: calc(
12 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
4 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
12 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
4 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(12 * var(--px)) calc(4 * var(--px));
padding: 0
calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0
calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: 0 calc(16 * var(--px));
}
.menu-sns-item-link {
display: flex;
gap: calc(
6 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(
6 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
gap: calc(6 * var(--px));
align-items: center;
justify-content: flex-start;
}
.menu-sns-item-icon {
flex-shrink: 0;
width: calc(
50 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(
50 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
width: calc(50 * var(--px));
height: calc(
50 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(
50 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
height: calc(50 * var(--px));
}
.menu-sns-item-text {
font-size: calc(
0.75 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
0.75 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(0.75 * var(--rem));
line-height: 1.3;
letter-spacing: 0.06em;
}
.is-menu-open .menu-inner {
pointer-events: auto;
opacity: 1;
}
@media screen and (min-width: 960px) {
.menu-content {
display: flex;
align-items: flex-start;
justify-content: center;
}
.menu-scroll {
display: flex;
align-items: flex-start;
justify-content: center;
}
.menu-scroll-inner {
width: calc(
804 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
804 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(804 * var(--px));
padding: calc(62px + 13.02vh) 0 13.02vh;
padding: calc(var(--header-height) + 13.02vh) 0 13.02vh;
}
.menu-main {
padding: 0;
}
.menu-main-title {
font-size: calc(
1 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
1 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(1 * var(--rem));
}
.menu-main-nav {
margin-top: calc(
15 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(
15 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(15 * var(--px));
}
.menu-main-nav-list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: calc(
24 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
grid-column-gap: calc(
24 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
grid-column-gap: calc(24 * var(--px));
-moz-column-gap: calc(
24 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
column-gap: calc(
24 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
-moz-column-gap: calc(
24 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
column-gap: calc(
24 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
-moz-column-gap: calc(24 * var(--px));
column-gap: calc(24 * var(--px));
}
.menu-main-nav-list-item {
display: flex;
justify-content: flex-start;
}
.menu-main-nav-list-item-link {
gap: calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(16 * var(--px));
padding: calc(
9 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(
9 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
0;
padding: calc(9 * var(--px)) 0;
}
.menu-sub {
padding: 0;
margin-top: calc(
71 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(
71 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(71 * var(--px));
}
.menu-sub-nav {
margin-top: calc(
8 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(
8 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(8 * var(--px));
}
.menu-sub-nav-list {
margin: 0
calc(
-16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin: 0
calc(
-16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin: 0 calc(-16 * var(--px));
}
.menu-sub-nav-list-item {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
}
.menu-sub-nav-list-item-link {
padding: calc(
8 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
16 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(
8 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
16 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
padding: calc(8 * var(--px)) calc(16 * var(--px));
}
.menu-sub-nav-list-item-link-text {
font-size: calc(
1 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
1 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(1 * var(--rem));
}
.menu-sns {
margin-top: calc(
40 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(
40 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
margin-top: calc(40 * var(--px));
}
.menu-sns-list {
display: flex;
flex-wrap: wrap;
gap: calc(
20 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
40 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(
20 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
)
calc(
40 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
gap: calc(20 * var(--px)) calc(40 * var(--px));
align-items: center;
justify-content: flex-start;
padding: 0;
}
.menu-sns-item-icon {
width: calc(
60 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(
60 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
width: calc(60 * var(--px));
height: calc(
60 *
(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(
60 *
calc(
1px *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
height: calc(60 * var(--px));
}
.menu-sns-item-text {
font-size: calc(
0.875 *
(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(
0.875 *
calc(
1rem *
max(
1,
calc(
tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))
) /
400
)
)
);
font-size: calc(0.875 * var(--rem));
}
}
@media (any-hover: hover) {
.menu-main-nav-list-item-link {
--_arrow-x-1: 0%;
--_arrow-x-2: -100%;
--_arrow-x-3: -100%;
--_arrow-transition-1: translate 0.4s var(--ease-out-quart);
--_arrow-transition-2: translate 0.4s var(--ease-out-quart);
--_arrow-transition-3: translate 0.4s var(--ease-out-quart);
}
.menu-main-nav-list-item-link:hover {
--_arrow-x-1: 100%;
--_arrow-x-2: 0%;
}
.menu-main-nav-list-item-link-icon-arrow[data-id='1'] {
translate: var(--_arrow-x-1);
transition: var(--_arrow-transition-1);
}
.menu-main-nav-list-item-link-icon-arrow[data-id='2'] {
translate: var(--_arrow-x-2);
transition: var(--_arrow-transition-2);
}
.menu-main-nav-list-item-link.is-hover-in {
--_arrow-x-1: 100%;
--_arrow-x-2: 0%;
}
.menu-main-nav-list-item-link.is-hover-out {
--_arrow-x-1: 0%;
--_arrow-x-2: -100%;
--_arrow-transition-1: none;
--_arrow-transition-2: none;
}
.menu-main-nav-list-item-link[target='_blank'] {
--_arrow-x-1: 0%;
--_arrow-x-2: -60% 100%;
}
.menu-main-nav-list-item-link[target='_blank']:hover {
--_arrow-x-1: 60% -100%;
--_arrow-x-2: 0%;
}
.menu-main-nav-list-item-link[target='_blank'].is-hover-out {
--_arrow-x-1: 0%;
--_arrow-x-2: -60% 100%;
--_arrow-transition-1: none;
--_arrow-transition-2: none;
}
}
@media (any-hover: hover) {
.hover-underline-text {
background-image: linear-gradient(90deg, currentcolor, currentcolor);
background-repeat: no-repeat;
background-position: 100% 100%;
background-position: var(--_background-position, 100% 100%);
background-size: 0% 1px;
background-size: var(--_background-size, 0% 1px);
transition: background-size 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: background-size 0.4s var(--ease-out-cubic);
}
.hover-underline:hover {
--_background-position: 0% 100%;
--_background-size: 100% 1px;
}
.hover-image {
overflow: hidden;
}
.hover-image-target {
scale: 1;
scale: var(--_image-scale, 1);
transition: scale 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: scale 0.4s var(--ease-out-quart);
}
.hover-image:hover {
--_image-scale: 1.05;
}
.hover-arrow {
--_arrow-x-1: 0%;
--_arrow-x-2: -100%;
--_arrow-transition-1: translate 0.4s var(--ease-out-quart);
--_arrow-transition-2: translate 0.4s var(--ease-out-quart);
}
.hover-arrow-icon-arrow[data-id='1'] {
translate: var(--_arrow-x-1);
transition: var(--_arrow-transition-1);
}
.hover-arrow-icon-arrow[data-id='2'] {
translate: var(--_arrow-x-2);
transition: var(--_arrow-transition-2);
}
.hover-arrow:hover {
--_arrow-x-1: 100%;
--_arrow-x-2: 0%;
}
.hover-arrow.is-hover-out {
--_arrow-x-1: 0%;
--_arrow-x-2: -100%;
--_arrow-transition-1: none;
--_arrow-transition-2: none;
}
.hover-arrow-blank {
--_arrow-x-1: 0%;
--_arrow-x-2: -60% 100%;
--_arrow-transition-1: translate 0.4s var(--ease-out-quart);
--_arrow-transition-2: translate 0.4s var(--ease-out-quart);
}
.hover-arrow-blank-icon-arrow[data-id='1'] {
translate: var(--_arrow-x-1);
transition: var(--_arrow-transition-1);
}
.hover-arrow-blank-icon-arrow[data-id='2'] {
translate: var(--_arrow-x-2);
transition: var(--_arrow-transition-2);
}
.hover-arrow-blank:hover {
--_arrow-x-1: 60% -100%;
--_arrow-x-2: 0%;
}
.hover-arrow-blank.is-hover-out {
--_arrow-x-1: 0%;
--_arrow-x-2: -60% 100%;
--_arrow-transition-1: none;
--_arrow-transition-2: none;
}
.hover-text-link {
background-image: linear-gradient(90deg, currentcolor, currentcolor);
background-repeat: no-repeat;
background-position: 0% 100%;
background-position: 0% var(--underline-position, 100%);
background-size: 100% 1px;
transition: background-size 0.48s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: background-size 0.48s var(--ease-out-quart);
}
.hover-text-link:hover {
background-position: 100% 100%;
background-position: 100% var(--underline-position, 100%);
background-size: 0% 1px;
transition-duration: 0.4s;
}
}
.hover-hide-underline-text {
background-image: linear-gradient(90deg, currentcolor, currentcolor);
background-repeat: no-repeat;
background-position: 0% 100%;
background-size: 100% 1px;
transition: background-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: background-size 0.4s var(--ease-out-quart);
}
@media (any-hover: hover) {
.hover-hide-underline:hover .hover-hide-underline-text {
background-position: 100% 100%;
background-size: 0% 1px;
transition: background-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: background-size 0.4s var(--ease-out-quart);
}
}
.js-c-cover {
position: relative;
opacity: 0;
opacity: var(--init-opacity);
}
.js-c-cover-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 101;
z-index: var(--z-box-link-cover);
background-image: linear-gradient(58deg, #137bee -8.51%, #0f36c4 104.67%);
}
.skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 105;
z-index: var(--z-skip-link);
display: inline-flex;
justify-content: flex-start;
padding: calc(
8 *
(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
padding: calc(
8 *
calc(
1px *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
padding: calc(8 * var(--px));
font-size: calc(
0.75 *
(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(
0.75 *
calc(
1rem *
max(
1,
calc(tan(atan2(100vw, 1px)) * min(1, 16 / tan(atan2(1rem, 1px)))) /
400
)
)
);
font-size: calc(0.75 * var(--rem));
font-weight: 500;
pointer-events: none;
background-color: #fff;
background-color: var(--color-white);
opacity: 0;
}
.skip-link:focus {
opacity: 1;
}