:root {
    --colorWhite: #fff;
    --colorBg: #f8f8f8;
    --colorBlack: #151515;
    --colorOrange: #ffb94a;
    --colorLightOrange: #fdd08c;
    --colorDarkOrange: #f48249;
    --colorBeige: #ede7df;
    --fontNotoSansJP: "Noto Sans JP", sans-serif;
    --headerHeight: 78px;
    --heroHeight: calc(var(--headerHeight) + 45px);
    --zIndexHeader: 90;
    --zIndexLoading: 100;
}

@media (max-width: 768px) {
    :root {
        --headerHeight: 62px;
        --heroHeight: calc(var(--headerHeight) + 29px);
    }
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--headerHeight) + 60px);
    scrollbar-gutter: stable;
}

body {
    background: var(--colorBg);
    color: var(--colorBlack);
    display: grid;
    font-family: var(--fontNotoSansJP);
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    overflow-x: clip;
    position: relative;
}

body:has(.hero__section.active) {
    overflow: hidden;
}

body:has(.hero.animated),
body:has(.hero.hidden),
body:has(.hero.skiped) {
    overflow: clip auto;
}

/* ヒーロースキップ時の初期状態制御（ちらつき防止） */
.js-hero {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.js-main {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.inner {
    margin-inline: auto;
    max-width: 1200px;
    width: 100%;
}

.inner--tight {
    margin-inline: auto;
    max-width: 1100px;
    width: 100%;
}

.for-pc {
    display: block;
}

.for-sp {
    display: none;
}

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

a:focus-visible {
    box-shadow: 0 0 6px 3px rgb(31 31 198 / 20%);
    outline: 3px solid #2424bd;
    outline-offset: 0;
}

input:focus,
textarea:focus {
    box-shadow: 0 0 3px 2px rgb(244 130 73 / 20%);
    outline: 2px solid var(--colorOrange);
    outline-offset: -2px;
}

textarea {
    resize: vertical;
}

@media (max-width: 1270px) {
    .inner {
        padding-inline: 35px;
    }
}

@media (max-width: 1170px) {
    .inner--tight {
        padding: 0 35px;
        width: auto;
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: calc(var(--headerHeight) + 0px);
    }

    .for-pc {
        display: none;
    }

    .for-sp {
        display: block;
    }
}