/* ========================================
   全ページ共通CSS

   このファイルでは，
   ページ全体の背景，文字，画像，
   全ページ共通の左右余白を設定する．
======================================== */


/* ========================================
   全ページ共通の変更用設定

   通常表示では現在の数値を維持し，
   画面幅が狭くなると自動的に縮小する．
======================================== */

:root {
    /* ========================================
       基本色
    ======================================== */

    /*
       ページ全体の基本文字色
    */
    --text-color: #1c2634;

    /*
       ページ全体の背景色

       ドットの下に表示される色である．
    */
    --background-color: #F4F4F4;


    /* ========================================
       全ページ共通の左右余白
    ======================================== */

    /*
       全ページ共通の左右余白

       通常の広いPC画面：
       最大80px

       画面幅が狭くなった場合：
       画面幅に応じて縮小

       最小値：
       24px

       最大値を変更したい場合は，
       最後の80pxを変更する．
    */
    --page-side-space:
        clamp(
            24px,
            5.5vw,
            110px
        );

    /*
       全ページの主要コンテンツ幅．
       ホーム，カード一覧，動画，本文，POINT枠の左右端をそろえる．
       サイト全体を広く・狭くしたい場合は，この86%だけを変更する．
    */
    --page-content-width: 86%;

    /*
       画面を直接基準にする要素（ヘッダーや点線）用の左右余白．
       通常コンテンツの「外側余白の内側で86%」と同じ位置を計算する．
    */
    --page-content-side-space:
        calc(
            7vw
            +
            clamp(20.64px, 4.73vw, 94.6px)
        );

    /* ヘッダーや点線に使う、画面基準の共通幅 */
    --page-content-outer-width:
        calc(
            100%
            -
            var(--page-content-side-space)
            -
            var(--page-content-side-space)
        );

    /*
       ヘッダーだけは本文より少し広い90%幅にする．
       本文との差を小さくし、長すぎる印象を防ぐ．
    */
    --header-content-side-space:
        calc(
            5vw
            +
            clamp(21.6px, 4.95vw, 99px)
        );

    --header-content-outer-width:
        calc(
            100%
            -
            var(--header-content-side-space)
            -
            var(--header-content-side-space)
        );


    /* ========================================
       ページ内リンク
    ======================================== */

    /*
       固定ヘッダーでリンク先が隠れないための距離

       通常時は140pxに近く，
       狭い画面では少し縮小する．
    */
    --page-scroll-padding:
        clamp(
            100px,
            8vw,
            140px
        );
}


/* ========================================
   ブラウザ標準設定の調整
======================================== */

*,
*::before,
*::after {
    /*
       widthやheightの中に，
       paddingとborderを含めて計算する．
    */
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    /*
       ページ内リンクを滑らかに移動する．
    */
    scroll-behavior: smooth;

    /*
       固定ヘッダーで，
       ページ内リンク先の見出しが
       隠れないようにする距離．
    */
    scroll-padding-top: var(--page-scroll-padding);
}


body {
    min-width: 0;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    color: var(--text-color);

    font-family:
        Arial,
        "Helvetica Neue",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;

    /*
       横方向へはみ出した要素によって，
       不要な横スクロールが出ることを防ぐ．
    */
    overflow-x: hidden;

    /*
       文字の輪郭を滑らかに表示する．
    */
    -webkit-font-smoothing: antialiased;
}


/* ========================================
   リンクの共通設定
======================================== */

a {
    color: inherit;

    text-decoration: none;
}


/* ========================================
   画像の共通設定
======================================== */

img {
    display: block;

    /*
       親要素より画像が大きくならないようにする．
    */
    max-width: 100%;
}


/* ========================================
   ページ全体の背景
======================================== */

.bnto-bg-noise {
    /*
       ページの基本背景色

       元の色を変更していない．
    */
    background-color: var(--background-color);

    /*
       2種類のドットを重ねて，
       紙のような質感を作る．

       元の設定を変更していない．
    */
    background-image:
        radial-gradient(
            hsl(35 25% 55% / 0.16) 1.2px,
            transparent 1.3px
        ),
        radial-gradient(
            hsl(35 20% 48% / 0.10) 1px,
            transparent 1.1px
        );

    /*
       ドット同士の間隔

       1層目：18px
       2層目：29px
    */
    background-size:
        18px 18px,
        29px 29px;

    /*
       2層目のドットを少しずらす．
    */
    background-position:
        0 0,
        9px 13px;
}


/* ========================================
   メイン領域
======================================== */

.page-main {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ========================================
   全ページ共通のコンテナ

   通常のページ内容を囲む場合は，
   HTML側でclass="page-container"を付ける．
======================================== */

.page-container {
    width: 100%;
    min-width: 0;

    /*
       固定の最大横幅は設けず，
       左右余白だけで横幅を決める．
    */
    max-width: none;

    margin:
        0
        auto;

    padding-right: var(--page-side-space);
    padding-left: var(--page-side-space);
}


/* ========================================
   全幅セクション内の共通コンテナ

   背景は画面いっぱいに広げ，
   中身だけに共通余白を付ける場合に使う．
======================================== */

.section-container {
    width: 100%;
    min-width: 0;
    max-width: none;

    margin:
        0
        auto;

    padding-right: var(--page-side-space);
    padding-left: var(--page-side-space);
}


/* ========================================
   仮の後続セクション
======================================== */

.temporary-section {
    min-height: 300px;
}


/* ========================================
   PCズーム・狭いウィンドウ時の調整

   スマートフォン用ではなく，
   PC表示の破綻防止を目的とする．
======================================== */

@media (max-width: 1100px) {
    :root {
        /*
           狭い画面では左右余白をさらに抑える．
        */
        --page-side-space:
            clamp(
                24px,
                4vw,
                52px
            );

        /* 狭いPC画面でも、本文とヘッダーの左右端を一致させる */
        --page-content-side-space:
            calc(
                7vw
                +
                clamp(20.64px, 3.44vw, 44.72px)
            );

        /* ヘッダーは本文より4%だけ広い状態を保つ */
        --header-content-side-space:
            calc(
                5vw
                +
                clamp(21.6px, 3.6vw, 46.8px)
            );
    }
}


@media (max-width: 700px) {
    :root {
        /* スマートフォンでは本文を狭くしすぎないよう100%幅に戻す */
        --page-content-width: 100%;

        /* 100%幅へ戻した本文と同じ、通常の左右余白を使用する */
        --page-content-side-space: var(--page-side-space);

        /* スマートフォンでは画面幅を優先し、本文と同じ余白にする */
        --header-content-side-space: var(--page-side-space);
    }
}