@charset "utf-8";

:root {
    /* 基本サイズ */
    --base-width-pc: 1320;
    --base-width-break: 768;
    --base-width-sp: 375;
    --section-padding-inline: 110;
    --section-padding-inline2: 120;
    --section-padding-inline3: 378;

    /* 共通レイアウト */
    --header-height: clamp(50px, calc(100/1320*100vw), 100px);
    --margin-between-header: 20px;
    --margin-bottom1: clamp(50px, calc(120 / var(--base-width-pc) * 100vw), 120px);

    /* カラー */
    --color-main: #2FAA9E;
    --color-sub1: #BB2431;
    --color-sub2: #324473;
    --color-text: #1A1311;

    /* タイポグラフィー */
    --font-main: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-main2: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-sub1: "AvenirNext", "Noto Sans", "Noto Sans JP", sans-serif;
    --font-sub2: "BaronNeue", "Noto Sans", "Noto Sans JP", sans-serif;
    --font-sub3: "Josefin Sans", "Noto Sans", "Noto Sans JP", sans-serif;

    /* セクション内パディング（安全領域） */
    --section-padding-pc: clamp(20px, calc(var(--section-padding-inline) / var(--base-width-pc) * 100vw), var(--section-padding-inline) * 1px);
    --section-padding-pc2: clamp(20px, calc(var(--section-padding-inline2) / var(--base-width-pc) * 100vw), var(--section-padding-inline2) * 1px);
    --section-padding-pc4: clamp(20px, calc(var(--section-padding-inline4) / var(--base-width-pc) * 100vw), var(--section-padding-inline4) * 1px);
    --section-padding-sp: clamp(20px, calc(50 / var(--base-width-break) * 100vw), 50px);

    /* 画面が広い時の左右センタリング余白 */
    /* 最大幅 --base-width-pc としたい場合*/
    /* --side-gap: calc((100vw - var(--base-width-pc) * 1px) / 2); */
    /* 最大幅 --base-width-pc - --section-padding-inline としたい場合*/
    --side-gap: calc((100vw - (var(--base-width-pc) - var(--section-padding-inline)) * 1px) / 2);
    --side-gap2: calc((100vw - (var(--base-width-pc) - var(--section-padding-inline)) * 1.2px) / 2);
    --side-gap3: calc((100vw - (var(--base-width-pc) - var(--section-padding-inline3)) * 1.2px) / 2);

    /* 実際に使うインラインパディング（安全領域 or 余白の大きい方） */
    --section-padding-pc-maxWidth: max(var(--section-padding-pc), var(--side-gap));
    --section-padding-pc2-maxWidth: max(var(--section-padding-pc2), var(--side-gap));
    --section-padding-pc3-maxWidth: max(var(--section-padding-pc), var(--side-gap2));
    --section-padding-pc4-maxWidth: max(var(--section-padding-pc4), var(--side-gap3));
}