/* 画面幅が480pxまでの時 ========================================================================================== 画面幅が480pxまでの時 */

@media screen and (max-width: 480px) {

    body {
        min-width: 99svw;
        min-height: 99svh;
        max-width: 480px;
        font-size: 16pt;
        line-height: 24pt;
    }

    /* 文章DIV */
    .text_r,
    .text_c,
    .text_l,
    .footer {
        width: auto;
    }

    /* タイトルロゴ */
    .title {
        width: 50svw;
        text-align: center;
    }

    /* コンテンツボタン */
    .c_button {
        width: 100px;
        box-sizing: border-box;
    }

    /* 枠内余白 */
    .padding {
        padding: 10px 10px 10px 10px;
    }

    /* 枠外余白 */
    .margin {
        margin: 10px 10px 10px 10px;
    }

    /* 引用 */
    .indent {
        padding: 0 10px 0 10px;
    }

    /* フッター */
    .md-flex,
    .copyright {
        text-align: center;
    }

    .none_s {
        display: none;
    }
}

/* 画面幅が481～750pxまでの時 ===================================================================================== 画面幅が481～750pxまでの時 */

@media screen and (min-width: 481px) and (max-width: 750px) {

    body {
        min-width: 99svw;
        min-height: 99svh;
        max-width: 750px;
        font-size: 14pt;
        line-height: 21pt;
    }

    /* 文章DIV */
    .text_r,
    .text_c,
    .text_l,
    .footer {
        width: auto;
        box-sizing: border-box;
        /* ボーダーとpaddingを含める */
    }

    /* タイトルロゴ */
    .title {
        width: 70svw;
    }

    /* コンテンツボタン */
    .c_button {
        width: 125px;
        box-sizing: border-box;
    }

    /* 枠内余白 */
    .padding {
        padding: 30px 30px 30px 30px;
    }

    /* 枠外余白 */
    .margin {
        margin: 30px 30px 30px 30px;
    }

    /* 引用 */
    .indent {
        padding: 0 30px 0 30px;
    }

    /* フッター */
    .md-flex,
    .copyright {
        text-align: center;
    }

    .none_m {
        display: none;
    }
}

/* 画面幅が751px以上の時 ========================================================================================== 画面幅が751px以上の時 */

@media screen and (min-width: 751px) {

    body {
        min-width: 99svw;
        min-height: 99svh;
        max-width: 1200px;
        font-size: 12pt;
        line-height: 18pt;
    }

    /* 文章DIV */
    .text_r,
    .text_c,
    .text_l,
    .footer {
        width: auto;
        box-sizing: border-box;
        /* ボーダーとpaddingを含める */
    }

    /* タイトルロゴ */
    .title {
        width: 50svw;
    }

    /* コンテンツボタン */
    .c_button {
        width: 150px;
        box-sizing: border-box;

    }

    /* 非表示 */
    .h_l {
        display: none;
    }

    /* 枠内余白 */
    .padding {
        padding: 50px 50px 50px 50px;
    }

    /* 枠外余白 */
    .margin {
        margin: 50px 50px 50px 50px;
    }

    /* 引用 */
    .indent {
        padding: 0 50px 0 50px;
    }

    /* フッター */
    .footer {
        display: flex;
        justify-content: space-between;
    }

    .md-flex {
        display: flex;
        text-align: left;
    }

    .copyright {
        display: flex;
        justify-content: right;
        align-items: right;
    }

    .none_l {
        display: none;
    }

}

/* 全てに適用する設定 ============================================================================================= 全てに適用する設定 */

body {
    box-sizing: border-box;
}