/* ---------------------------------------------
*   Custom Properties
--------------------------------------------- */
:root {
    --design-width: 1920;
    --contents-width: 1320;
    --contents-side-padding: 40;
    --minwidth: 320;
    --fixed-header-height: 72;
    --root-fz: 16;
    --line-height: 1.65;
    --tracking: 0.02em;
    --tracking-wide: 0.18em;
    --hover-opacity-ratio: 0.55;
    --hover-duration: .5s;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-inout: cubic-bezier(.65, 0, .35, 1);
    --color-ink-1: #0A0A0A;
    --color-ink-1-rgb: 10, 10, 10;
    --color-paper-1: #FFFFFF;
    --color-paper-1-rgb: 255, 255, 255;
    --color-fog-1: #F4F4F2;
    --color-fog-1-rgb: 244, 244, 242;
    --color-fog-2: #ECECEA;
    --color-fog-2-rgb: 236, 236, 234;
    --color-fog-3: #D4D4D2;
    --color-fog-3-rgb: 212, 212, 210;
    --color-fog-4: #A8A8A6;
    --color-fog-4-rgb: 168, 168, 166;
    --color-fog-5: #6F6F6D;
    --color-fog-5-rgb: 111, 111, 109;
    --color-line-1: #0A0A0A;
    --color-line-1-rgb: 10, 10, 10;
    --color-accent-1: #FF3D00;
    --color-accent-1-rgb: 255, 61, 0;
    --c-bg: var(--color-paper-1);
    --c-ink: var(--color-ink-1);
    --c-mute: var(--color-fog-5);
    --c-line: var(--color-fog-3);
    --c-line-soft: var(--color-fog-2);
    --c-surface: var(--color-fog-1);
    --ff-sans: "Inter", "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    --ff-display: "Inter Tight", "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    --ff-mono: "JetBrains Mono", "Space Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
@media screen and (max-width: 750px) {
    :root {
        --design-width: 750;
        --contents-width: 710;
        --contents-side-padding: 24;
        --minwidth: 320;
        --fixed-header-height: 56;
        --root-fz: 28;
        --line-height: 1.7;
    }
}

/* ---------------------------------------------
*   Universal selector
--------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
    background-color: var(--c-ink);
    color: var(--c-bg);
}

::selection {
    background-color: var(--c-ink);
    color: var(--c-bg);
}

/* ---------------------------------------------
*   html, body
--------------------------------------------- */
html,
body {
    color: var(--c-ink);
    background-color: var(--c-bg);
    font-size: calc(var(--root-fz) * 1px);
    font-family: var(--ff-sans);
    letter-spacing: var(--tracking);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
@media screen and (max-width: 750px) {
    html,
    body {
        font-size: calc(var(--root-fz) / var(--design-width) * 100vw);
    }
}

body {
    line-height: var(--line-height);
    overflow-x: hidden;
}

/* ---------------------------------------------
*   element resets
--------------------------------------------- */
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ---------------------------------------------
*   anchor offset
--------------------------------------------- */
hr[id^=anchor-] {
    display: block;
    width: auto;
    height: 0;
    padding: calc(var(--fixed-header-height) * 1px) 0 0 0;
    border: 0;
    margin: calc(var(--fixed-header-height) * -1px) 0 0 0;
    background: 0;
    pointer-events: none;
}