/* =============================================================
 * ベース / ヘッダー / フッター / 共通コンポーネント
 * ========================================================== */

/* ---- Reset ------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* アンカーリンク（#overview など）の移動先を、固定ヘッダー（とログイン中の管理バー）の下にする */
    scroll-padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
}

body {
    margin: 0;
    font-family: var(--ff-jp);
    font-size: var(--fz-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit;
    text-decoration: none;
}

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

ul,
ol {
    padding: 0;
    list-style: none;
}

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

/* ---- A11y -------------------------------------------------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

:where(a, button):focus-visible {
    outline: 2px solid var(--c-navy);
    outline-offset: 3px;
}

/* ---- Animation --------------------------------------------- */
.js .fade-in {
    --fade-dur: 1.6s;

    opacity: 0;
    filter: blur(6px);
    transform: translate(0px, 32px);
    transition:
        opacity var(--fade-dur) var(--ease),
        transform var(--fade-dur) var(--ease),
        filter var(--fade-dur) var(--ease);
    transition-delay: var(--fade-delay, 0s);

    &.is-inview {
        translate: none;
        rotate: none;
        scale: none;
        filter: blur(0px);
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

.line-draw {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        height: 1px;
        background: var(--line-color, var(--c-border));
        transform-origin: left center;
    }

    &.line-draw--top::after {
        inset-block: 0 auto;
    }
}

.js .line-draw {
    &::after {
        scale: 0 1;
        opacity: 0;
        transition: scale 1.3s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.9s 0.4s;
    }

    &.is-inview::after {
        scale: 1;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .fade-in {
        filter: none;
        transform: none;
        opacity: 1;
        transition: none;
    }

    .js .line-draw::after {
        scale: 1;
        opacity: 1;
        transition: none;
    }
}

/* ---- Layout ------------------------------------------------ */

.l-container {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
}

.site-main {
    margin-block-start: var(--header-h);
}

/* =============================================================
 * Header
 * ========================================================== */
.header {
    position: fixed;
    inset-block-start: var(--wp-admin--admin-bar--height, 0px);
    /* ログイン中は管理バーの下 */
    inset-inline: 0;
    z-index: 100;
    background: var(--c-header-bg);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));

    .header__inner {
        display: flex;
        align-items: center;
        padding-left: 32px;
    }

    .header_logo {
        flex-shrink: 0;
        line-height: 0;

        a {
            display: inline-block;
            transition: opacity var(--dur) var(--ease);

            &:hover {
                opacity: 0.6;
            }
        }
    }

    .header_logo__image {
        display: block;
        width: var(--logo-w);
        height: auto;
    }

    .global-nav {
        margin-inline-start: auto;

        .global-nav__list {
            display: flex;
            gap: 24px;
            align-items: center;
        }

        .menu-item>a {
            font-size: var(--fz-base);
            line-height: 1.35;
            color: var(--c-ink);
            letter-spacing: var(--ls-nav);
            white-space: nowrap;
            transition: color var(--dur) var(--ease);

            &:hover {
                color: var(--c-navy);
            }
        }
    }

    .header-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 7px;
        flex: 0 0 auto;
        margin-inline-start: 40px;
        width: var(--contact-w);
        height: var(--header-h);
        color: var(--c-white);
        background: var(--c-navy);
        transition: background var(--dur) var(--ease);

        &:hover {
            background: #0a2f6d;
        }

        .header-contact__icon {
            width: 37px;
            height: 26px;
        }

        .header-contact__label {
            font-family: var(--ff-en);
            font-size: var(--fz-label);
            font-weight: var(--fw-medium);
            line-height: 1;
            letter-spacing: var(--ls-label);
        }
    }
}

/* Hamburger */
.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    margin-inline-start: auto;

    .nav-toggle__bars {
        display: block;
        width: 32px;
        height: 1px;
        margin-inline: auto;
        background: var(--c-ink);
        transition: background var(--dur) var(--ease);

        &::before,
        &::after {
            content: "";
            position: relative;
            display: block;
            width: 32px;
            height: 1px;
            background: var(--c-ink);
            transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
        }

        &::before {
            inset-block-start: -8px;
        }

        &::after {
            inset-block-start: 6.5px;
        }
    }

    &[aria-expanded="true"] .nav-toggle__bars {
        background: transparent;

        &::before {
            transform: translateY(8px) rotate(45deg);
        }

        &::after {
            transform: translateY(-6.5px) rotate(-45deg);
        }
    }
}

/* =============================================================
 * 共通コンポーネント
 * ========================================================== */

.btn {
    display: inline-flex;
    gap: var(--btn-gap);
    align-items: center;
    justify-content: space-between;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-size: var(--fz-btn);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: var(--ls-btn);
    border-radius: var(--btn-radius);
    min-width: 179px;
    transition-property: scale;
    transition-duration: .5s;
    transition-timing-function: ease;

    &:hover {
        scale: 1.04;
    }

    .btn__dot {
        flex: 0 0 auto;
        width: var(--dot);
        height: var(--dot);
        background: currentcolor;
        border-radius: 50%;
    }

    &.btn--light {
        color: var(--c-navy);
        background: var(--c-white);
    }

    &.btn--ghost {
        color: var(--c-white);
        border: 1px solid var(--c-white-65);
    }

    &.btn--primary {
        background: var(--c-navy);
        color: var(--c-white);
        min-width: 260px;
    }
}

/* セクション見出しラベル*/
.eyebrow {
    color: var(--c-navy);
    display: flex;
    gap: 16px;
    align-items: center;
    font-family: var(--ff-en);
    font-size: var(--fz-label);
    font-weight: var(--fw-regular);
    line-height: 1.2;
    letter-spacing: 0.08em;
    padding-left: 10px;

    .eyebrow__num {
        font-weight: var(--fw-extrabold);
    }

    .eyebrow__label {
        letter-spacing: 0.232em;
        text-transform: uppercase;
    }

    .eyebrow__rule {
        width: 38px;
        height: 1px;
        background: currentcolor;
        opacity: 0.45;
    }
}

.eyebrow--primary {
    color: var(--c-white-65);

    .eyebrow__num {
        color: var(--c-blue);
    }
}

/* サブラベル*/
.sub-label {
    display: flex;
    gap: 18px;
    align-items: center;
    font-family: var(--ff-en);
    font-size: var(--fz-label);
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    color: var(--c-navy);
    text-transform: uppercase;

    .sub-label__rule {
        width: 56px;
        height: 1px;
        background: currentcolor;
        opacity: 0.45;
    }
}

.section-head {
    .section-head__flex {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-block-start: 20px;
    }

    .section-head__title {
        max-width: 600px;
        font-size: var(--fz-h2);
        font-weight: var(--fw-light);
        line-height: var(--lh-head);
        letter-spacing: 0.04em;
    }

    .section-head__lead {
        font-size: var(--fz-body);
        line-height: var(--lh-body);
        letter-spacing: var(--ls-body);
        color: var(--c-text);
    }

    .section-head__actions {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 49px;
    }
}

.on-dark {
    .eyebrow {
        color: var(--c-white);
    }

}

.blue-bg {
    .blue-bg__text {
        color: var(--c-white-78);
    }
}

/* =============================================================
 * Footer
 * ========================================================== */
.site-footer {
    padding-block: 60px;
    border-block-start: 1px solid rgb(31 41 61 / 12%);
    font-size: 14px;

    .site-footer__inner {
        display: flex;
        flex-wrap: wrap;
        gap: 48px 80px;
        justify-content: space-between;
        width: min(100% - var(--gutter) * 2, var(--container));
        margin-inline: auto;
    }

    .site-footer__brand a {
        display: inline-block;
        transition: opacity var(--dur) var(--ease);

        &:hover {
            opacity: 0.6;
        }
    }

    .site-footer__address {
        margin-block-start: 24px;
        line-height: 1.9;
        color: var(--c-text);
    }

    .site-footer__copyright {
        margin-block-start: 32px;
        font-family: var(--ff-en);
        font-size: 13px;
    }

    .footer-nav__list {
        display: flex;
        flex-wrap: wrap;
        gap: 32px 56px;

        li {
            max-width: 160px;

            >a {
                font-weight: var(--fw-medium);
            }
        }

        a {
            transition: color var(--dur) var(--ease);

            &:hover {
                color: var(--c-navy);
            }
        }
    }

    .footer-nav__stack-list {
        display: grid;
        gap: 14px;
    }

    .sub-menu {
        margin-inline-start: 6px;

        a {
            position: relative;
            display: inline-block;
            padding-inline-start: 20px;
            font-size: 14px;
            color: var(--c-text);

            &::before {
                content: "";
                position: absolute;
                inset-block-start: 0.95em;
                inset-inline-start: 0;
                width: 8px;
                height: 1px;
                background: var(--c-ink-71);
            }

        }
    }
}

.post-list {
    display: grid;
    gap: 40px 32px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding-block-end: 80px;
}

/* 記事カード */
.post-card {
    .post-card__title {
        margin-block: 12px 8px;
        font-size: 18px;
        font-weight: var(--fw-medium);
        line-height: 1.6;
    }

    .post-card__date {
        font-family: var(--ff-en);
        font-size: 13px;
        color: var(--c-ink-55);
    }

    .post-card__excerpt {
        font-size: 14px;
        line-height: 1.9;
        color: var(--c-text);
    }
}

.entry {
    padding-block: 24px 96px;

    .entry__body {
        margin-block-start: 40px;

        >*+* {
            margin-block-start: 1.6em;
        }
    }

    /* 固定ページ（page.php など）の本文：段落とリストを見出しより 20px 下げる。
       - 本文の直下（> p / > ul / > ol）だけが対象。引用・表・カラム・フォーム（Contact Form 7）の中の段落には効かない
       - 産業廃棄物収集運搬ページは独自レイアウト（industrial-waste.css）なので除く */
    &.entry--page:not(.entry--industrial-waste) .entry__body {
        --entry-indent: 20px;

        >p,
        >.wp-block-buttons {
            padding-inline-start: var(--entry-indent);
        }

        /* リスト：初期化 CSS で消している記号を戻し、記号の分だけさらに下げて段落の文字と揃える */
        >ul,
        >ol {
            padding-inline-start: calc(var(--entry-indent) + 1.5em);
        }

        >ul {
            list-style: disc;
        }

        >ol {
            list-style: decimal;
        }

        >ul li+li,
        >ol li+li {
            margin-block-start: 0.4em;
        }
    }
}

/* 404 */
.error-404 {
    padding-block: 120px 160px;
    text-align: center;

    .error-404__title {
        font-family: var(--ff-en);
        font-size: clamp(64px, 10vw, 160px);
        font-weight: var(--fw-extralight);
        line-height: 1;
        color: var(--c-navy);
    }
}

/* 検索フォーム */
.search-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin-inline: auto;

    .search-form__input {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--c-border);
        border-radius: 4px;
    }

    .search-form__submit {
        padding: 12px 24px;
        color: var(--c-white);
        background: var(--c-navy);
        border-radius: 4px;
    }
}

/* =============================================================
 * ブレイクポイント（1280px / 959px / 600px）
 * ========================================================== */

@media (width <=1280px) {
    .header {
        .header__inner {
            padding-inline-start: 24px;
        }

        .global-nav {
            .global-nav__list {
                gap: clamp(12px, 1.25vw, 16px);
            }

            .menu-item>a {
                font-size: 14px;
            }
        }

        .header-contact {
            width: 120px;
            margin-inline-start: 24px;
        }
    }
}

@media (width <=959px) {
    :root {
        --header-h: 72px;
        --logo-w: clamp(230px, 47.6vw - 53px, 280px);
    }

    .section-head {
        .section-head__title br {
            display: none;
        }
    }

    .recruit .section-head {
        .section-head__title br {
            display: inline;
        }
    }

    .header {
        .header__inner {
            padding-inline-start: 16px;
        }

        .nav-toggle {
            display: block;
        }

        .global-nav {
            position: fixed;
            inset: var(--header-h) 0 auto;
            display: none;
            padding: 24px 20px 40px;
            background: var(--c-white);
            border-block-end: 1px solid var(--c-border);

            &.is-open {
                display: block;
            }

            .global-nav__list {
                flex-direction: column;
                gap: 4px;
                align-items: stretch;

                a {
                    display: block;
                    padding-block: 14px;
                    border-block-end: 1px solid var(--c-border);
                }
            }
        }

        .header-contact {
            width: 72px;
            margin-inline-start: 16px;

            .header-contact__icon {
                width: 26px;
                height: auto;
            }

            .header-contact__label {
                font-size: 9px;
            }
        }
    }

    .section-head {
        .section-head__flex {
            display: block;
        }

        .section-head__actions {
            justify-content: flex-start;
            align-items: flex-start;
        }

        .section-head__lead {
            margin-block-start: 20px;
        }
    }
}

@media (width <=600px) {
    .header {
        .header-contact {
            margin-inline-start: 8px;
        }

        .nav-toggle__bars,
        .nav-toggle__bars::before,
        .nav-toggle__bars::after {
            width: 28px;
        }
    }

    .sub-label {
        gap: 8px;

        .sub-label__rule {
            width: 32px;
        }
    }

    .eyebrow {
        padding-left: 5px;
    }

    .site-footer {
        .footer-nav__list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 32px 24px;

            >li {
                max-width: none;
            }
        }
    }
}