@charset "utf-8";
/* ****************************************************************************
MEMO -記載方法確認用メモ

__初期設定__
_WebFont初期設定
_フォントサイズ変数初期設定
_フォントサイズ初期設定_
_フォントサイズ_
_使用色初期設定_
_画像初期設定 ※box内最大に
_リンク初期設定_
_画面レイアウト初期設定_

@media screen and (min-width: 769px) { } 【タブレット縦以上】※breakpoint
**************************************************************************** */
/*____MEMO____*/


/*__初期設定__*/
/*_WebFont初期設定_*/
@import url("https://fonts.googleapis.com/css?family=Oswald:400,600");
/*ゴシック系*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400&display=swap");
/*明朝系*/
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP");
/*筆記体敬*/
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Reggae+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");
/*アイコン*/
/* @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); */
/* @import url("https://use.fontawesome.com/releases/v5.10.1/css/all.css"); */



/*_使用色初期設定_*/
:root {
    /* --c_red: #fa514b; */
    --c_red: rgb(250,81,75);
    /* --c_ble: #080059; */
    --c_ble: rgb(8,0,89);
    /* --c_org: #fe8400; */
    --c_org: rgb(254,132,0);
    /* --c_yel: #effd28; */
    --c_yel: rgb(239,253,40);
    /* --c_white: #ffffff; */
    --c_white: rgb(255,255,255);
    /* --c_blk: #000000; */
    --c_blk: rgb(0,0,0);
    /* --c_grey: #bebebe; */
    --c_grey: rgb(190,190,190);
    /* --c_grey02: #f6f6f6; */
    --c_grey02: rgb(246,246,246);
    /* --c_grey03: #767676; */
    --c_grey03: rgb(118,118,118);
    /* --c_pink: #fd6d9e; */
    --c_pink: rgb(253,109,158);
}

/*_フォントカラー_*/
.fc_red {
    color: var(--c_red);
}
.fc_ble {
    color: var(--c_ble);
}
.fc_org {
    color: var(--c_org);
}
.fc_yel {
    color: var(--c_yel);
}
.fc_white {
    color: var(--c_white);
}
.fc_blk {
    color: var(--c_blk);
}
.fc_grey {
    color: var(--c_grey);
}

/*_フォントサイズ変数初期設定_*/
:root {
    --fs_ttl: 2.25rem;
    --fs_lx: 1.5rem;
    --fs_lb: 1.25rem;
    --fs_l: 1rem;
    --fs_n: 0.9rem;
    --fs_s: 0.6rem;
    --fs_ss: 0.6rem;
}

@media screen and (min-width: 769px) {
    :root {
        --fs_ttl: 3rem;
        --fs_lx: 2rem;
        --fs_lb: 1.5rem;
        --fs_l: 1.25rem;
        --fs_n: 1rem;
        --fs_s: 0.8rem;
        --fs_ss: 0.6rem;
    }
}

/*_フォントサイズ_*/
.fs_ttl {
    font-size: var(--fs_ttl);
}

.fs_lx {
    font-size: var(--fs_lx);
}

.fs_lb {
    font-size: var(--fs_lb);
}

.fs_l {
    font-size: var(--fs_l);
}

.fs_n {
    font-size: var(--fs_n);
}

.fs_s {
    font-size: var(--fs_s);
}

.fs_ss {
    font-size: var(--fs_ss);
}

/*_画像初期設定 ※box内最大に_*/
img {
    /* width:auto; */
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/*_追加初期リセット設定_*/
dd {
    margin-bottom: 0;
}


/*_リンク初期設定_*/
a {
    text-decoration: none;
}

a:hover {
    opacity: 0.8;
    text-decoration: none;
}

/*スマホタップカラー*/
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}
*:focus {
    outline: none;
}