:root {
    --bgc-base: #fff;
    --bgc-black: #000;
    --bgc-gray: #f0f2ec;
    --color-focus: #ff6900;
    --color-primary-light: #007bd0;
    --color-primary: #005bb6;
    --color-primary-dark: #004489;
    --color-green: #b5d135;
    --color-green-light: #b7d33d;
    --color-pink: #d86267;
    --color-pink-light: #ffd2d6;
    --color-blue: #2ca6df;
    --color-orange-light: #f5a100;
    --color-orange: #f90;
    --color-blue-light: #2ca6df;
    --color-border-light: #c7c7c7;
    --color-border: #d8d8d8;
    --color-text-black: #333;
    --linear-gradient-primary: linear-gradient(to right, #007bd0 0%, #005bb7 50%, #005bb7 100%);
    --color-text-white: #fff;
    --font-sans: "Noto Sans JP", sans-serif;
    --font-mincho: "Shippori Mincho", serif;
    --font-serif: "Noto Serif JP", serif;
    --font-ozwald: "Oswald", serif;
    --font-jost: jost, serif;
    --header-height: 108px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    --spacing-lg: 24px;
    --spacing-md: 16px;
    --spacing-sm: 8px;
    --spacing-xl: 32px;
    --spacing-xs: 4px;
    --spacing-xxs: 2px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;
    --text-6xl: 56px;
    --text-7xl: 64px;
    --text-lg: 18px;
    --text-md: 17px;
    --text-sm: 14px;
    --text-xl: 20px;
    --text-xs: 12px;
    --rounded-full: calc(infinity * 1px);
    --transition-duration: 0.25s;
    --z-index-header: 90;
}

@media (max-width: 1025px) {
    :root {
        --header-height: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-2xl: 24px;
        --spacing-3xl: 32px;
        --spacing-4xl: 40px;
        --spacing-lg: 12px;
        --spacing-md: 8px;
        --spacing-sm: 4px;
        --spacing-xl: 16px;
        --spacing-xs: 2px;
        --spacing-xxs: 1px;
        --text-2xl: 20px;
        --text-3xl: 24px;
        --text-4xl: 28px;
        --text-5xl: 32px;
        --text-6xl: 36px;
        --text-7xl: 40px;
        --text-lg: 16px;
        --text-md: 14px;
        --text-sm: 12px;
        --text-xl: 18px;
        --text-xs: 10px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}
html.instant-scroll {
    scroll-behavior: auto;
}

body {
    background-color: var(--bgc-base);
    color: var(--color-text-black);
    font-family: Jost, "Noto Serif JP", serif;
    font-size: medium;
    height: 100%;
    overflow-x: clip;
    width: 100%;
}

body:has(dialog[open]) {
    overflow: hidden;
}

body:has(dialog[open]) .scrollControl {
    overflow: auto;
    scrollbar-gutter: stable;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: auto;
}

img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

ul,
ol {
    list-style: none;
}

:where(a) {
    color: inherit;
    text-decoration: none;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
}

a:focus-visible,
button:focus-visible {
    box-shadow: 0 0 2px 0 var(--color-focus);
    outline: 3px solid var(--color-focus);
}

.block {
    display: block;
}