/* ------------------------
    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;
}

/* sidebarがあるレイアウト */
.content-area {
    display: flex;
    flex-direction: column;
    gap: var(--space--6)
}
.sidebar {
    background: rgb(200, 220, 240);
    padding: 1em;
}

/* 大きい画面size */
@media (min-width: 768px) {
    .content-area {
        flex-direction: row;
    }
    .main-area {
        flex: 1;
    }
    .sidebar {
        width: 300px;
    }
}

/* card共通 */
.card {
    border-radius: var(--radius--md);
    box-shadow: var(--shadow--lg);
    overflow: hidden;
}
.card__content {
    padding: var(--space--6);
}
.card__content > h3 {
    font-size: var(--font-size--md);
}
.card__content > p {
    font-size: var(--font-size--sm);
    margin-top: var(--space--2);
}
.card__image {
    aspect-ratio: 16 / 9;
    align-self: stretch;
}
.card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* media query でlayoutを切り替えるcard */
.card--mediaquery {
    display: flex;
    flex-direction: column;
}

/* 大きい画面size */
@media (min-width: 768px) {
    .card--mediaquery {
        flex-direction: row;
    }
    .card--mediaquery .card__image {
        flex-basis: 40%;
    }
    .card--mediaquery .card__content {
        flex-basis: 60%;
        align-self: center;
    }
}

/*
@media (min-width: 768px) and (max-width: 900px) {
    body.has-sidebar .main-area .card--mediaquery {
        flex-direction: column;
    }
}
*/

/* Flexboxを用いたlayout */
.switch-columns {
    --side-width: 240px;
    --main-width: 50%;
    display: flex;
    flex-wrap: wrap;
}

/* 固定幅のside要素 */
.switch-columns__side {
    flex-basis: var(--side-width);
    flex-grow: 1;
}

/* もう片方のmain area */
.switch-columns__main {
    flex-basis: min(100%, var(--main-width));
    flex-grow: 999999;
}

/* card style */
.card.switch-columns {
    --side-width: 40%;
--main-width: 20em;
}

/* Gridの自動段組み */
.grid-auto-fill {
    display: grid;
    gap: var(--space--4);

    /* 自動段組み */
    --column-size: 240px;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, var(--column-size)), 1fr)
    );
}

/* Gridの自動段組み(auto-fit) */
.grid-auto-fit {
    display: grid;
    gap: var(--space--4);

    /* 自動段組み */
    --column-size: 240px;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, var(--column-size)), 1fr)
    );
}

/* Switcher */
.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    --threshold: 30rem;
}

.switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 9999);
}