/* Variables */
:root {
    /* Color */
    --base-color: #f5f5f5;
    --main-color: #004098;
    --sub-color: #111111;
    --tertiary-color: #f5f5f5;
    /* Fonts */
    --font-inter: "Inter", sans-serif;
    --font-inter-static: "Inter Static", sans-serif;
    --font-noto-sans-jp: "Noto Sans JP", sans-serif;
    --font-shippori-antique: "Shippori Antique", sans-serif;
    --font-roboto: "Roboto", sans-serif;
    /* Backgrounds */
    --black-texture: url(../img/black-bg.png);
    --silver-texture: url(../img/silver-texture.jpg);
    --main-gra-nz: linear-gradient(180deg, #004098 0%, #111111 100%);
    --main-gra-nz-texture: url(../img/black-bg-20.webp),
        linear-gradient(180deg, #004098 0%, #111111 100%);
    --main-gra-nz-2: linear-gradient(
        180deg,
        #111111 -2.99%,
        #004098 13.31%,
        #f5f5f5 105.7%
    );
    --common-title-gra: url(../img/black-bg-20.webp),
        linear-gradient(180deg, #004098 68.45%, #111111 101.55%);
    --title-grad: linear-gradient(180deg, #004098 55.34%, #111111 184.48%);
    --title-grad-texture: url(../img/black-bg-20.webp),
        linear-gradient(180deg, #004098 55.34%, #111111 184.48%);
    /* Viewport width with scrollbar adjustment */
    --vw-with-scrollbar: 100vw;
    --header-height-pc: calc(88 * var(--vw-with-scrollbar) / 1920);
    --header-height-sp: calc(64 * var(--vw-with-scrollbar) / 400);
    /* Italic Effect */
    --italic-effect: matrix(1, 0, -0.24, 0.97, 0, 0);
}

/* body::-webkit-scrollbar {
    display: none;
} */

/* Resets */
ul,
ol {
    list-style: none; /* Remove bullet points and numbers */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

button {
    all: unset; /* Reset all styles to default */
    background: transparent; /* Remove background */
    color: inherit; /* Inherit text color */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    font: inherit; /* Inherit font styles */
}

button[type="button"] {
    cursor: pointer; /* Restore pointer cursor */
}

a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent element */
    background: transparent; /* Remove background */
    border: none; /* Remove border (in case of styled links) */
    line-height: 1;
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

body {
    position: relative;
    margin: 0;
    font-family: var(--font-noto-sans-jp);
    line-height: 1.8;
    color: var(--sub-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1025px) {
    body:not([data-page-id="home"]) {
        margin-top: calc(
            var(--header-height-pc) * var(--vw-with-scrollbar) / 1920
        );
    }
}

li {
    line-height: 1;
}

picture {
    line-height: 0;
}

/* Common Style */
.h1-jp {
    font-family: var(--font-shippori-antique);
}
.h2-en {
    font-family: var(--font-inter);
    color: var(--base-color);
    line-height: 1;
    font-size: clamp(16px, calc(24 * var(--vw-with-scrollbar) / 1920), 99px);
    font-weight: 700;
}
.h2-jp {
    font-family: var(--font-noto-sans-jp);
    font-weight: 700;
    font-size: calc(70 * var(--vw-with-scrollbar) / 1920);
}
.body-jp {
    font-family: var(--font-noto-sans-jp);
    font-weight: 700;
    font-size: clamp(16px, calc(20 * var(--vw-with-scrollbar) / 1920), 99px);
}

@media (max-width: 1024px) {
    .h2-en {
        font-size: calc(20 * 100vw / 400);
    }
    .h2-jp {
        font-size: calc(32 * 100vw / 400);
    }
    .body-jp {
        font-size: calc(18 * 100vw / 400);
    }
}

/* Utility Style */
.hidden-sp {
    display: block;
}
.hidden-pc {
    display: block;
}
@media (max-width: 1024px) {
    .hidden-sp {
        display: none !important;
    }
}
@media (min-width: 1025px) {
    .hidden-pc {
        display: none !important;
    }
}

.texture-bg {
    position: relative;
}
.texture-bg::before,
.texture-bg::after {
    position: absolute;
    content: "";
    inset: 0;
}
.texture-bg::before {
    background-color: black;
    z-index: -2;
}
.texture-bg::after {
    background-image: url(../img/black-bg-20.webp);
    background-size: cover;
    /* opacity: 0.2; */
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 1024px) {
    .texture-bg::after {
        background-size: 100% 100%;
    }
}

.texture-bg--main-gra-nz::before {
    background: var(--main-gra-nz);
}

.texture-bg--title-grad::before {
    background: var(--title-grad);
}

.noise-bg-main {
    background: url(../img/black-bg-20.webp), var(--main-gra-nz);
    background-size: cover;
    background-position: center;
}

.bg-main-gra-nz {
    background: var(--main-gra-nz);
}

@media (max-width: 1024px) {
    .noise-bg-main {
        background-size: 100%;
    }
}

.silver-text {
    color: transparent;
    background-image: var(--silver-texture);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Only use on wrapper for bg clip text */
.italic-text {
    transform: matrix(1, 0, -0.24, 0.97, 0, 0);
}

.bg-clip-text {
    color: transparent;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.no-scrollbar {
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1025px) {
    body.header-pc-nav-open {
        overflow: hidden;
    }
}
@media (max-width: 1024px) {
    body.header-sp-nav-open {
        overflow: hidden;
    }
}

.box-shadow {
    box-shadow: 0px calc(4 * var(--vw-with-scrollbar) / 1920)
        calc(10 * var(--vw-with-scrollbar) / 1920) rgba(0, 0, 0, 0.25);
}
.text-shadow {
    text-shadow: 0px calc(4 * var(--vw-with-scrollbar) / 1920)
        calc(10 * var(--vw-with-scrollbar) / 1920) rgba(0, 0, 0, 0.25);
}
@media (max-width: 1024px) {
    .box-shadow {
        box-shadow: 0px calc(4 * 100vw / 400) calc(10 * 100vw / 400)
            rgba(0, 0, 0, 0.25);
    }
    .text-shadow {
        text-shadow: 0px calc(4 * 100vw / 400) calc(10 * 100vw / 400)
            rgba(0, 0, 0, 0.25);
    }
}

.anchor-section {
    scroll-margin-top: var(--header-height-pc);
}

@media (max-width: 1024px) {
    .anchor-section {
        scroll-margin-top: var(--header-height-sp);
    }
}

.cta-btn {
    position: relative;
    overflow: hidden;
    background: var(--main-gra-nz-texture);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-btn::before {
    content: "";
    z-index: 0;
    position: absolute;
    inset: 0;
    background: var(--silver-texture);
    background-size: cover;
    background-position: center;
    transition: transform ease 0.3s;
}

.cta-btn__icon {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 1;
    background: var(--silver-texture);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--base-color);
    transition: color ease 0.4s;
    overflow: hidden;
}

.cta-btn__icon::before {
    content: "";
    position: absolute;
    inset: calc(0.42 * var(--vw-with-scrollbar) / 1920);
    background: var(--main-color);
    background-size: cover;
    background-position: center;
    z-index: -1;
    border-radius: 50%;
    transition: transform ease 0.3s;
}

.cta-btn__icon svg {
    width: calc(25.64 * var(--vw-with-scrollbar) / 1920);
    aspect-ratio: 1;
}

.cta-btn__text {
    color: var(--main-color);
    z-index: 1;
    transition: color ease 0.4s;
}

.cta-btn:hover::before {
    transform: translateX(101%);
}

.cta-btn:hover .cta-btn__text {
    color: var(--base-color);
}

.cta-btn:hover .cta-btn__icon {
    color: var(--main-color);
}

.cta-btn:hover .cta-btn__icon::before {
    transform: translateX(101%);
}

/*.cta-btn--main-gra {
    background: var(--silver-texture);
    background-size: cover;
    background-position: center;
}
.cta-btn--main-gra::before {
    background: var(--main-gra-nz);
    background-size: cover;
    background-position: center;
}
.cta-btn--main-gra .cta-btn__text {
    color: var(--base-color);
}
.cta-btn--main-gra .cta-btn__icon {
    color: var(--main-color);
    background: var(--main-color);
}
.cta-btn--main-gra .cta-btn__icon::before {
    inset: 0;
    background: var(--silver-texture);
    background-size: cover;
    background-position: center;
}

.cta-btn--main-gra:hover .cta-btn__text {
    color: var(--main-color);
}

.cta-btn--main-gra:hover .cta-btn__icon {
    color: var(--base-color);
}*/

.no-overflow {
    overflow: hidden;
}

.ws-nowrap {
 	white-space: nowrap;
}