:root {
    --min-content-width: 375px;
    --max-content-width: 1280px;
    --fluid-viewport: calc((100vw - 375px) / (1280 - 375));
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --header-height: 3rem;

    /* 一般的な配色 */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-text-muted: #999999;
    --color-background: #f5f6f7;
    --color-background-alt: #ffffff;
    --color-border: #e1e5e9;
    --color-border-light: #f1f3f4;

    /* ハイライト・アクション */
    --color-highlight: #ffeb3b;
    --color-accent: #ffae00;
    --color-link: #0073aa;
    --color-link-hover: #00aeff;

    /* ステータス */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;
}

/* すべての要素でbox-sizingをborder-boxにする */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset some default styles */
body {
    margin: 0;
    color: var(--color-text);
    background-color: var(--color-background);
    letter-spacing: 0.05em;
}

img,
svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Fluid Typography */
body {
    font-size: clamp(14px,
            calc(14px + (18 - 14) * var(--fluid-viewport)),
            18px);
}

h1 {
    font-size: clamp(16px,
            calc(16px + (36 - 16) * var(--fluid-viewport)),
            36px);
}

h2 {
    font-size: clamp(15px,
            calc(15px + (32 - 15) * var(--fluid-viewport)),
            32px);
}

h3 {
    font-size: clamp(14px,
            calc(14px + (27 - 14) * var(--fluid-viewport)),
            27px);
}

p,
textarea,
li,
label {
    line-height: 1.75;
}

p {
    margin-block: 1.25em;
}

h1,
h2,
h3 {
    margin-block-start: 2em;
    margin-block-end: 1em;
}

label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
}

input,
select,
textarea,
button {
    padding: 0.5em;
}

a {
    color: var(--color-link);
    text-decoration: none;

    &:hover {
        color: var(--color-link-hover);
    }
}

.content-area {
    max-width: var(--max-content-width);
    margin: 0 auto;
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;

    @media (width >=640px) {
        grid-template-columns: auto 1fr;
    }

    gap: 1em;
    align-items: center;
    margin-bottom: 1em;

    p {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    >div[cols] {
        display: grid;
        gap: 1em;
        grid-template-columns: repeat(auto-fit, calc(100% / attr(cols, 1)));
        margin-left: calc(-1 * attr(cols, 1) * 0.5em);
    }
}

.form-grid button,
.form-grid output,
.form-grid progress,
.form-grid meter {}

[data-flex] {
    display: flex;
    flex-wrap: wrap;

    >* {
        flex-grow: attr(data-flex-grow, 1);
        flex-shrink: attr(data-flex-shrink, 1);
        flex-basis: attr(data-flex-basis, clamp(calc(100% / 3), var(--min-content-width), 100%));
    }
}

.r45 {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    >div {
        aspect-ratio: 1;
        padding: 1rem;
        /*transform: rotate(45deg);*/
        clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
        background-color: cornflowerblue;

        &:nth-of-type(2n) {
            background-color: lightcoral;
        }
    }
}