
/*レスポンシブ用*/
$pcl: 1600px; // PC 大サイズ
$pcm: 1440px; // PC 中サイズ
$pc: 1200px; // PC 通常
$pcs: 1027px; // PCS
$tab: 1023px; // タブレット
$spl: 767px; // スマホ横
$sp: 520px;  // スマホ
$sps: 389px; // スマホ SEサイズ

$easing01:cubic-bezier(0.26, 0.06, 0, 1);
$easing02:cubic-bezier(0.18, 0.06, 0.23, 1);

@mixin motionBefore($propaty:all, $sec:0.5s, $easing:$easing01){
    transition: $sec $easing $propaty;
}

@mixin motionAfter($propaty:all, $sec:0.25s, $easing:$easing02){
    transition: $sec $easing $propaty;
}

@mixin max_width(){
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

@mixin sprite_wrap(){
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
    background-repeat: no-repeat;
}


@mixin pcl {
    @media only screen and (max-width: ($pcl)) {
        @content;
    }
}
@mixin pcm {
    @media only screen and (max-width: ($pcm)) {
        @content;
    }
}
@mixin pc {
    @media only screen and (max-width: ($pc)) {
        @content;
    }
}
@mixin pcs {
    @media only screen and (max-width: ($pcs)) {
        @content;
    }
}
@mixin tab {
    @media only screen and (max-width: ($tab)) {
        @content;
    }
}
@mixin spl {
    @media only screen and (max-width: ($spl)) {
        @content;
    }
}
@mixin sp {
    @media only screen and (max-width: ($sp)) {
        @content;
    }
}
@mixin sps {
    @media only screen and (max-width: ($sps)) {
        @content;
    }
}

:root{
    --color-main: #005BAC;
    --color-txt: #000;
    --color-txtBlue: #004989;
    --color-txtGray: #939393;
    --color-bgGray: #e8e8e8;
    --color-lineBlue: #6EA6D7;
    --color-lineGray: #d0d0d0;
    --color-lineRed: #FBB7BC;
    
    --color-blue: #004989;
    --color-paleBlue: #E7F0F8;
    --color-red: #E60012;
    --color-paleRed: #FFE1E1;
    --color-gray: #D9D9D9;
    --color-paleGray: #F5F5F5;
    --color-yellow: #F2FF00;
    --color-orange: #FF8001;
    --color-white: #fff;
    --color-black: #000;

}

// font
:root{
    --font-main: "Noto Sans JP", sans-serif;//semibold=600
    --font-en: "Roboto", sans-serif;
}
:root{
    --weight-thin: 100;
    --weight-reguler: 400;
    --weight-medium: 500;
    --weight-bold: 700;
}

