/* ------------------------
    reset css
--------------------------- */

/* border-boxを全要素にセット */
:where(*, ::before, ::after) {
    box-sizing: border-box;
}

/* 全要素のマージンをリセット */
* {
    margin: 0;
}

/* 親要素をはみ出さないようにする + 隙間ができないようにする */
:where(img, video) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* iframe */
:where(iframe) {
    display: block;
    border: none;
}

/* テキストのオーバーフローを回避 */
:where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

/* form要素のtypographをreset */
:where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    text-transform: none;
}

/* textareaの水平resizeを無効に */
:where(textarea) {
    resize:vertical;
}

/* カーソルset */
:where(button, label, select, summary) {
    cursor: pointer;
}

/* --------------------------------------
共通デザインtoken 
----------------------------------------- */

:root {
    /* fontsize(流体typography) */
    /* 400px ~ 1200px */
    --font-size--base: clamp(1rem, 0.8rem + 0.8vw, 1.4rem);

    --font-size--xs: calc(var(--font-size--base) * 0.8);
    --font-size--sm: calc(var(--font-size--base) * 0.9);
    --font-size--md: calc(var(--font-size--base) * 1.1);
    --font-size--lg: calc(var(--font-size--base) * 1.25);
    --font-size--xl: calc(var(--font-size--base) * 1.5);
    --font-size--2xl: calc(var(--font-size--base) * 2);
    --font-size--3xl: calc(var(--font-size--base) * 2.5);

    /* 余白 */
    --space: calc(var(--font-size--base) * 0.25); /* = 0.25rem ~ ≒ 4px ~ */

    --space--1: var(--space); /* 4px ~ */
    --space--2: calc(var(--space) * 2); /* 8px */
    --space--4: calc(var(--space) * 4); /* 16px */
    --space--6: calc(var(--space) * 6); /* 24px */
    --space--8: calc(var(--space) * 8); /* 32px */
    --space--12: calc(var(--space) * 12); /* 48px */
    --space--16: calc(var(--space) * 16); /* 64px */

    /* color token */
    --color--text: #1f2937;
    --color--bg: #fff;
    --color--border: #d4d8e0;
    --color--btn: #2a65ff;
    --color--focus: #2563ed;

    /* ボーダーradius */
    --radius--sm: 4px;
    --radius--md: 8px;
    --radius--lg: 16px;
    --radius--full: 9999px;

    /* shadow */
    --shadow-color: rgb(0 0 0 / 0.15);
    --shadow--sm: 1px 3px 6px var(--shadow-color);
    --shadow--md: 2px 8px 16px var(--shadow-color);
    --shadow--lg: 3px 13px 26px var(--shadow-color);
    --shadow--xl: 5px 21px 42px var(--shadow-color);
}

/* ----------------------------------------------
    HTML Base StyleをSet
--------------------------------------------------*/
body {
    color: var(--color--text);
    background-color: var(--color--bg);
    font-size: var(--font-size--base);
    font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
    line-height: 1.5;
}
h1 {
    font-size: var(--font-size--2xl);
}
h2 {
    font-size: var(--font-size--xl);
}
h3 {
    font-size: var(--font-size--lg);
}
h4 {
    font-size: var(--font-size--md);
}

/* フォーカスリングの可視化 */
:focus-visible {
    outline: 2px solid var(--color--focus);
    outline-offset: 2px;
}

/* ----------------------------------------------------
    デモ用ユーティリティclass(本文でも使用) 
------------------------------------------------------*/
._box_ {
    padding: var(--space--4);
    border: solid 1px;
    border-radius: 4px;
}
._flow_ > * + * {
    margin-block-start: 1.5em;
}

/* -----------------------------------------------------
    デモ用ユーティリティclass
------------------------------------------------------- */
/* 版面 */
._demo_ {
    max-inline-size: var(--content-size, 1200px);
    margin-inline: auto;
    padding: var(--space--8);
}
._demo_ hr {
    border-style: dashed;
    border-color: var(--color--border);
}
._spacer_ {
    block-size: var(--space--8);
}
._demo_cluster_ {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
}
._demo_grid_ {
    --column-size: 300px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-size)), 1fr));
    gap: 1rem;
}