@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Old+Mincho:wght@400;500;700&display=swap");

:root {
    --bgc-blue: #c9d8ff;
    --bgc-blue-dark: #9aa1e3;
    --bgc-blue-light: #e1ebff;
    --bgc-header: #00166d;
    --bgc-blue-medium: #dce3f3;
    --bgc-white: #fff;
    --btn-bgc-hover: #aab2fa;
    --btn-fgc-hover: #101c8a;
    --btn-primary-bgc: #101c8a;
    --btn-primary-fgc: #fff;
    --btn-disabled-bgc: #b3b3b3;
    --btn-disabled-fgc: #e6e6e6;
    --color-border: #d1d8e7;
    --color-border-dark: #c3c3c3;
    --color-disabled: #ababab;
    --color-focus: #f80;
    --color-primary: #101c8a;
    --color-primary-dark: #020a91;
    --color-primary-light: #3fa0dc;
    --color-text-base: #000;
    --color-text-white: #fff;
    --content-width: 72.25rem;
    --font-noto-sans: "Noto Sans JP", sans-serif;
    --font-roboto: "Roboto", sans-serif;
    --font-mincho: "Zen Old Mincho", serif;
    --header-height: 7.375rem;
    --modal-backdrop: rgb(0, 0, 0, 64%);
    --rounded-full: 9999em;
    --z-index-mobile-menu: 90;
    --color-energy: #e9bb26;
    --color-fiber: #3fa0dc;
    --color-food: #cb528b;
    --color-housing-life: #47a248;
    --color-info-finance: #088579;
    --color-machine: #e37a03;
    --color-metal: #a9006e;
    --color-head-office: #656668;
    --color-8th-company: #1d4295;
}

@media (max-width: 46.4375rem) {
    :root {
        --header-height: 3.75rem;
    }
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
}

body {
    color: var(--color-text-base);
    font-family: Roboto, "Noto Sans JP", sans-serif;
    font-size: medium;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8125;
}

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

body:has(.menuButton.open) {
    overflow: clip;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 0.125rem solid var(--color-focus);
}

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

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

button:focus-visible {
    outline: 0.125rem solid var(--color-focus);
}
