@charset "UTF-8";
/*
    Base / Tokens / Layout utilities
    編集時の見通しを優先してコメントを多めにしています。
    1rem = 16pxを基準にpx換算コメントを付けています。
    納品前にコメントを削除する場合は、このファイル内のコメントをまとめて削除してください。
*/

@layer reset, tokens, base, layout, utilities;

@layer reset {
    /*
        Reset:
        ブラウザ差を減らすための最小リセットです。
        装飾ではなく、案件共通の土台として扱います。
    */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body, h1, h2, h3, h4, h5, h6,
    p, figure, blockquote, dl, dd {
        margin: 0;
    }

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

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

    table {
        border-collapse: collapse;
        table-layout: fixed;
    }

    input, button, textarea, select {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
    }

    button:disabled,
    button[aria-disabled="true"] {
        cursor: default;
    }

    [hidden] {
        display: none !important;
    }
}

@layer tokens {
    :root {
        /*
            Font:
            基本フォントです。案件ごとにNoto Sans JP以外へ差し替える場合はここを変更します。
        */
        --font-sans: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

        /*
            Color tokens:
            案件ごとに最初に触る色だけを集約しています。
            headerの透過背景やheroの黒重ねなどの派生色は、各CSS側でcolor-mix()から作ります。

            Surface: ページ背景・カード背景・薄い背景
            Text: 通常文字・補助文字・濃色背景上の文字
            Brand: メインカラー・薄い背景・hover用の濃い色
            Utility: 境界線・キーボードフォーカス
        */
        --color-bg: #ffffff;
        --color-surface: #ffffff;
        --color-surface-muted: #f6f7f8;
        --color-text: #111111;
        --color-text-muted: #60646c;
        --color-text-inverse: #ffffff;
        --color-border: #d9dde3;
        --color-primary: #d92323;
        --color-primary-soft: #fff0f0;
        --color-primary-strong: #a91515;
        --color-focus: #1a73e8;

        /*
            Spacing scale:
            余白用の基本スケールです。margin / padding / gap は原則この変数を使います。
        */
        --space-2xs: 0.25rem; /* 4px */
        --space-xs: 0.5rem; /* 8px */
        --space-sm: 0.75rem; /* 12px */
        --space-md: 1rem; /* 16px */
        --space-lg: 1.5rem; /* 24px */
        --space-xl: 2rem; /* 32px */
        --space-2xl: 3rem; /* 48px */
        --space-3xl: 4.5rem; /* 72px */

        /*
            Container:
            ページ幅の基準です。LPなどで最大幅を変えたい場合はここを調整します。
        */
        --container-sm: 62.5rem; /* 1000px */
        --container-md: 67.5rem; /* 1080px */
        --container-lg: 80rem; /* 1280px */

        /*
            Radius:
            角丸の基準です。ブランドの雰囲気に合わせてまとめて調整できます。
        */
        --radius-sm: 0.25rem; /* 4px */
        --radius-md: 0.5rem; /* 8px */
        --radius-lg: 0.75rem; /* 12px */
        --radius-pill: 9999px; /* pill / circle用 */

        /*
            Shadow:
            カードやドロワーなど、浮いている要素に使います。
        */
        --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
        --shadow-md: 0 8px 24px rgb(0 0 0 / 10%);

        /*
            Z-index:
            ヘッダーやドロワーの重なり順を一元管理します。
        */
        --z-header: 100;
        --z-drawer: 1000;

        /*
            Motion:
            hoverや開閉アニメーションの速度・イージングです。
        */
        --ease-out: cubic-bezier(.16, 1, .3, 1);
        --duration-fast: 150ms;
        --duration-base: 250ms;
    }
}

@layer base {
    html {
        min-height: 100%;
        font-family: var(--font-sans);
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    body {
        min-height: 100%;
        color: var(--color-text);
        background: var(--color-bg);
        font-size: 1rem; /* 16px */
        line-height: 1.7;
    }

    body.is-drawer-open {
        overflow: hidden;
    }

    a {
        color: var(--color-primary);
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
        text-decoration-skip-ink: auto;
    }

    a:hover {
        text-decoration: none;
    }

    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 3px;
    }

    h1 {
        font-size: clamp(2rem, 1.55rem + 2vw, 3.5rem); /* min 32px / preferred 24.8px+2vw / max 56px */
        line-height: 1.15;
        font-weight: 900;
    }

    h2 {
        font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); /* min 24px / preferred 20px+1vw / max 36px */
        line-height: 1.25;
        font-weight: 800;
    }

    h3 {
        font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* min 18px / preferred 16px+0.5vw / max 24px */
        line-height: 1.35;
        font-weight: 700;
    }

    p {
        font-size: 1rem; /* 16px */
    }
}

@layer layout {
    /*
        Container:
        ページ左右の余白と最大幅をまとめて制御します。
    */
    .container_big,
    .container_middle,
    .container_small {
        width: min(100% - 2rem, var(--container-width)); /* 2rem = 左右合計32px */
        margin-inline: auto;
    }

    .container_big {
        --container-width: var(--container-lg);
    }

    .container_middle {
        --container-width: var(--container-md);
    }

    .container_small {
        --container-width: var(--container-sm);
    }

    .section {
        padding-block: clamp(var(--space-2xl), 6vw, var(--space-3xl)); /* 48px〜72px */
    }

    .section__inner {
        width: min(100% - 2rem, var(--container-lg)); /* 2rem = 左右合計32px */
        margin-inline: auto;
    }

    .section--muted {
        background: var(--color-surface-muted);
    }

    /*
        Stack:
        縦並び要素の間隔を親側で管理するためのユーティリティです。
    */
    .stack {
        --stack-space: var(--space-md);
    }

    .stack > * + * {
        margin-block-start: var(--stack-space);
    }

    .stack--xs { --stack-space: var(--space-xs); }
    .stack--sm { --stack-space: var(--space-sm); }
    .stack--md { --stack-space: var(--space-md); }
    .stack--lg { --stack-space: var(--space-lg); }
    .stack--xl { --stack-space: var(--space-xl); }
    .stack--2xl { --stack-space: var(--space-2xl); }

    /*
        Flex utilities:
        既存案件でよく使う横並び補助です。
    */
    .flex { display: flex; }
    .flex_center { display: flex; align-items: center; justify-content: center; }
    .flex_between { display: flex; align-items: center; justify-content: space-between; }
    .flex_column { display: flex; flex-direction: column; }
    .flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }

    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--cluster-gap, var(--space-md));
        align-items: center;
    }

    .repel {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        align-items: center;
        justify-content: space-between;
    }

    /*
        Grid utilities:
        カード一覧や2カラムレイアウトなどに使います。
    */
    .grid {
        display: grid;
        gap: var(--grid-gap, var(--space-lg));
    }

    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .grid--auto {
        grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 18rem), 100%), 1fr)); /* 18rem = 288px */
    }

    .grid--center {
        align-items: center;
    }

    .sidebar-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); /* sidebar 256px〜352px */
        gap: var(--space-xl);
    }

    @media (max-width: 768px) {
        .pc { display: none !important; }

        .flex_responsive,
        .repel,
        .sidebar-layout {
            grid-template-columns: 1fr;
            flex-direction: column;
            align-items: stretch;
        }

        .grid--2,
        .grid--3,
        .grid--4 {
            grid-template-columns: 1fr;
        }
    }

    @media (min-width: 769px) {
        .sp { display: none !important; }
    }
}

@layer utilities {
    /*
        Utility:
        汎用的に使う補助クラスです。
    */
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .thumbnail {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }

    .text-center { text-align: center; }
    .text-muted { color: var(--color-text-muted); }
}

/*
    WordPress parent theme compatibility:
    BlankSlateなどの親テーマCSSは@layer外で読み込まれるため、親テーマのリセットCSSが
    @layer内の.container_bigなどより優先される場合があります。
    その対策として、制作時によく使うレイアウトユーティリティだけを@layer外でも再宣言します。
*/
.container_big,
.container_middle,
.container_small {
    width: min(100% - 2rem, var(--container-width)); /* 2rem = 左右合計32px */
    margin-inline: auto;
    margin-left: auto;
    margin-right: auto;
}

.container_big {
    --container-width: var(--container-lg);
}

.container_middle {
    --container-width: var(--container-md);
}

.container_small {
    --container-width: var(--container-sm);
}

.section {
    padding-block: clamp(var(--space-2xl), 6vw, var(--space-3xl)); /* 48px〜72px */
}

.section__inner {
    width: min(100% - 2rem, var(--container-lg)); /* 2rem = 左右合計32px */
    margin-inline: auto;
    margin-left: auto;
    margin-right: auto;
}

.section--muted {
    background: var(--color-surface-muted);
}

.stack {
    --stack-space: var(--space-md);
}

.stack > * + * {
    margin-block-start: var(--stack-space);
}

.stack--xs { --stack-space: var(--space-xs); }
.stack--sm { --stack-space: var(--space-sm); }
.stack--md { --stack-space: var(--space-md); }
.stack--lg { --stack-space: var(--space-lg); }
.stack--xl { --stack-space: var(--space-xl); }
.stack--2xl { --stack-space: var(--space-2xl); }

.flex { display: flex; }
.flex_center { display: flex; align-items: center; justify-content: center; }
.flex_between { display: flex; align-items: center; justify-content: space-between; }
.flex_column { display: flex; flex-direction: column; }
.flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-md));
    align-items: center;
}

.repel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
}

.grid {
    display: grid;
    gap: var(--grid-gap, var(--space-lg));
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 18rem), 100%), 1fr)); /* 18rem = 288px */
}

.grid--center {
    align-items: center;
}

.sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); /* sidebar 256px〜352px */
    gap: var(--space-xl);
}

@media (max-width: 768px) {
    .pc { display: none !important; }

    .flex_responsive,
    .repel,
    .sidebar-layout {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .sp { display: none !important; }
}