@charset "utf-8";

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}


/* FlexBox */
.flex,
.flex_pcOnly,
.flex_spNone,
.flex_tabColumn,
.flex_spColumn,
.flex_spColumn_re {
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
}

.fl_center {
    justify-content: center;
}

.fl_space-between {
    justify-content: space-between;
}

.fl_space-around {
    justify-content: space-around;
}
.fl_end {
    justify-content: flex-end;
}

.fl_wrap {
    flex-wrap: wrap;
}

.fl_column {
    flex-direction: column;
}

.fl_items_center {
    align-items: center;
}

.fl_items_start {
    align-items: flex-start;
}
.fl_1 {
    flex: 1;
}

@media screen and (max-width: 1024px) {
    .flex_pcOnly {
        display: block;
    }
    .flex_tabColumn {
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {
    .flex_spNone {
        display: block;
    }
    .flex_spColumn {
        flex-direction: column;
    }
    .flex_spColumn_re {
        flex-direction: column-reverse;
    }
}

/* レスポンシブ調整 */
.br_sp {
    display: none;
}

.br_pc {
    display: block;
}

.pc_none {
    display: none;
}

.sptab_only {
    display: none;
}

.pc_inline {
    display: inline;
}

.tab_inline {
    display: block;
}

.sp_inline {
    display: block;
}


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

    .br_sp {
        display: block;
    }
    .br_pc {
        display: none;
    }
    .pc_only{
        display: none;
    }
    .sptab_only {
        display: block;
    }
    .sptab_only.flex{
        display: flex;
    }
    .tab_only {
        display: block;
    }
    .tab_none {
        display: none;
    }
    .tab_inline {
        display: inline;
    }
}

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

    .pc_none {
        display: block;
    }
    .pc_inline {
        display: block;
    }
    .tab_only {
        display: none;
    }
    .sp_none {
        display: none;
    }
    .sp_inline {
        display: inline;
    }
}

/* 文字サイズ
---------------------------------------------- */
.fs-xs { font-size: 1.2rem; }
.fs-sm { font-size: 1.4rem; }
.fs-md { font-size: 1.6rem; }
.fs-lg { font-size: 1.8rem; }
.fs-xl { font-size: 2rem; }

@media screen and (max-width: 767px) {
    .fs-xs { font-size: calc(1.2rem * .875); } 
    .fs-sm { font-size: calc(1.4rem * .875); }
    .fs-md { font-size: calc(1.6rem * .875); }
    .fs-lg { font-size: calc(1.8rem * .875); }
    .fs-xl { font-size: calc(2rem * .875); }
}

/* 文字太さ */

.fw_light {
    font-weight: 400;
}
.fw_semibold {
    font-weight: 600;
}
.fw_bold {
    font-weight: 700;
}


/* 文字ぞろえ */

.textR {
    text-align: right;
}
.textC {
    text-align: center;
}
.textE {
    text-align: end;
}

/* 文字インデント */
.text_indent_050em {
    text-indent: 0.5em;
}
.text_indent_010em {
    text-indent: 1em;
}
.text_indent_150em {
    text-indent: 1.5em;
}

/* 色 */

.bg_primary {
    background-color: var(--primary-color);
    color: #fff;
}
.bg_secondary {
    background-color: var(--secondary-color);
}
.bg_blue {
    background-color: var(--deco-blue);
    color: #fff;
}
.bg_green {
    background-color: var(--deco-green);
    color: #fff;
}
.bg_orange {
    background-color: var(--deco-orange);
    color: #fff;
}
.bg_pink {
    background-color: var(--deco-pink);
    color: #fff;
}
.bg_gray {
    background-color: #E6E6E6;
    color: #000;
}
.bg_white {
    background-color: #fff;
}

.font_primary,
.font_primary a {
    color: var(--primary-color);
}
.font_white {
    color: #fff;
}
.font_blue {
    color: var(--deco-blue);
}
.font_green {
    color: var(--deco-green);
}
.font_orange {
    color: var(--deco-orange);
}
.font_pink {
    color: var(--deco-pink);
}


/* 余白
---------------------------------------------- */
.ma0 {margin: 0 !important;}
.ma0_auto {margin: 0 auto !important;}
.mt0 {margin-top: 0 !important;}
.mb0 {margin-bottom: 0 !important;}

.mt1rem {margin-top: 1rem !important;}
.mt2rem {margin-top: 2rem !important;}
.mt3rem {margin-top: 3rem !important;}
.mt4rem {margin-top: 4rem !important;}
.mt5rem {margin-top: 5rem !important;}
.mt6rem {margin-top: 6rem !important;}
.mt7rem {margin-top: 7rem !important;}
.mt8rem {margin-top: 8rem !important;}
.mt9rem {margin-top: 9rem !important;}
.mt10rem {margin-top: 10rem !important;}

.mb1rem {margin-bottom: 1rem !important;}
.mb2rem {margin-bottom: 2rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb4rem {margin-bottom: 4rem !important;}
.mb5rem {margin-bottom: 5rem !important;}
.mb6rem {margin-bottom: 6rem !important;}
.mb7rem {margin-bottom: 7rem !important;}
.mb8rem {margin-bottom: 8rem !important;}
.mb9rem {margin-bottom: 9rem !important;}
.mb10rem {margin-bottom: 10rem !important;}

.mt025em {margin-top: .25em !important;}
.mt050em {margin-top: .5em !important;}
.mt075em {margin-top: .75em !important;}
.mt100em {margin-top: 1.0em !important;}
.mt125em {margin-top: 1.25em !important;}
.mt150em {margin-top: 1.5em !important;}
.mt175em {margin-top: 1.75em !important;}
.mt200em {margin-top: 2.0em !important;}

.mb025em {margin-bottom: .25em !important;}
.mb050em {margin-bottom: .5em !important;}
.mb075em {margin-bottom: .75em !important;}
.mb100em {margin-bottom: 1.0em !important;}
.mb125em {margin-bottom: 1.25em !important;}
.mb150em {margin-bottom: 1.5em !important;}
.mb175em {margin-bottom: 1.75em !important;}
.mb200em {margin-bottom: 2.0em !important;}

@media screen and (max-width: 767px) {
    .mt1rem {margin-top: calc(1rem * .5) !important;}
    .mt2rem {margin-top: calc(2rem * .5) !important;}
    .mt3rem {margin-top: calc(3rem * .5) !important;}
    .mt4rem {margin-top: calc(4rem * .5) !important;}
    .mt5rem {margin-top: calc(5rem * .5) !important;}
    .mt6rem {margin-top: calc(6rem * .5) !important;}
    .mt7rem {margin-top: calc(7rem * .5) !important;}
    .mt8rem {margin-top: calc(8rem * .5) !important;}
    .mt9rem {margin-top: calc(9rem * .5) !important;}
    .mt10rem {margin-top: calc(10rem * .5) !important;}

    .mb1rem {margin-bottom: calc(1rem * .5) !important;}
    .mb2rem {margin-bottom: calc(2rem * .5) !important;}
    .mb3rem {margin-bottom: calc(3rem * .5) !important;}
    .mb4rem {margin-bottom: calc(4rem * .5) !important;}
    .mb5rem {margin-bottom: calc(5rem * .5) !important;}
    .mb6rem {margin-bottom: calc(6rem * .5) !important;}
    .mb7rem {margin-bottom: calc(7rem * .5) !important;}
    .mb8rem {margin-bottom: calc(8rem * .5) !important;}
    .mb9rem {margin-bottom: calc(9rem * .5) !important;}
    .mb10rem {margin-bottom: calc(10rem * .5) !important;}

    .sp_mt0 {margin-top: 0 !important;}
    .sp_mb0 {margin-bottom: 0 !important;}
}