@charset "utf-8";

/*----- フォント設定 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');



/*-------------------------------
    変数設定
-------------------------------*/

:root{

    /*----- 文字 */
    /* 書体 */
    --jp: "Zen Kaku Gothic New", 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    --mincho: "Noto Serif JP", serif;
    --en: "Josefin Sans", sans-serif;
    
    /* 文字サイズ */
    --font-size: calc(var(--font-size-number) * 1rem);

    /* 行間 */
    /* --line-height: calc(var(--line-height-number) / var(--font-size-number)); */

    /*----- 色設定 */
    --maincolor: #0070B8;
    --blueblack:#164472;
    --subcolor: #faa;
    --blackcolor: #343638;
    --black-ordermade: #1D2126;
    --yellowcolor:#FFFFE8;
    --graycolor: #ddd;
    --whitecolor:#fff;
    /* --gradcolor: linear-gradient(90deg, var(--maincolor) 0%, var(--subcolor) 100%); */

    /*----- アニメーション設定 */
    --transition: .3s all cubic-bezier(0.1, 0.7, 0.4, 1);
    --opacity: .6;

    /*----- その他設定 */

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

    :root{

        /*----- コンテンツ幅 */
        --maxwidth-number: 110rem;
        --maxwidth: calc(var(--maxwidth-number) + (var(--padding-leftright) * 2));

        /*----- 余白 */
        --padding-topbottom: 15rem;
        --padding-leftright: 5rem;

        /*----- 文字 */
        /* 文字サイズ */
        --root-font-size: 62.5%;
        --font-size-number: 1.6;

        /* 行間 */
        /* --line-height-number: 3.6; */

    }

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

    :root{
        
        /*----- スマホカンプサイズ */
        --sp-design-width: 750;

        /*----- コンテンツ幅 */
        --maxwidth-number: 100%;
        --maxwidth: var(--maxwidth-number);

        /*----- 余白 */
        --padding-topbottom: 15rem;
        --padding-leftright: 6rem;

        /*----- 文字 */
        /* 文字サイズ */
        --root-font-size: calc((10 / var(--sp-design-width)) * 100vw);
        --font-size-number: 2.8;

        /* 行間 */
        /* --line-height-number: 6; */

    }

}