/* 1,フォント設定 */
/* 2,色設定 */
/* 3,ボタン設定 */
/* 4,フロート設定 */
/* 5,幅設定 */
/* 6,コロンをつける設定 */

/* 1,フォント設定 */

.fsize15{
    font-size: 15px;
}
.fsize20{
    font-size: 20px;
}
.fsize25{
    font-size: 25px;
}
.fsize30{
    font-size: 30px;
}
.fsize40{
    font-size: 40px;
}


/* 2,色設定 */
/* ボタン用背景色 */
.bl {
    background: #4EB0B0;
    color: #FFF;
}

.mbl{
    background: #D2EBEB;
}
.lbl{
    background: #E4F3F3;
}

.gr {
    background: #EDEDED;
    color: #6A6A6A;
}
.wh {
    background: #FFF;
    color: #6A6A6A;
}
.pnk {
    background: #EB6E7D;
    color: #FFF;
}
/* フォントカラー */
.fgr {
    color: #6A6A6A;
}
.fbl {
    color: #4EB0B0;
}
.fpk {
    color: #EB6E7D;
}

/* 3,ボタン設定 */

/* ボタン外観設定 */
.btn {
    margin: 5px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
    padding: 3px 10px;
}
.btn_s {
    margin:  0 5px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
    padding: 0 10px;
}
.btn_l {
    margin: 5px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    line-height: 25px;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 25px;
}
.btn_xl {
    margin: 5px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    line-height: 28px;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 25px; 
}
.btn:hover, .btn_s:hover {
    opacity:0.8;
}

/* 4,右寄せ左寄せ設定 */
.fl{
    float: left;
}
.fr{
    float: right;
}
.tl{
    text-align: left;
}
.tr{
    text-align: right;
}

.tc{
    text-align: center;
}

/* 5,幅設定 */
.w50{
    width: 50px;
}
.w80{
    width: 80px;
}
.w90{
    width: 90px;
}
.w100{
    width: 100px;
}
.w110{
    width: 110px;
}
.w120{
    width: 120px;
}
.w130{
    width: 130px;
}
.w140{
    width: 140px;
}
.w150{
    width: 150px;
}
.w170{
    width: 170px;
}
.w200{
    width: 200px;
}
.w230{
    width: 230px;
}
.w250{
    width: 250px;
}
.w270{
    width: 270px;
}
.w300{
    width: 300px;
}
.w310{
    width: 310px;
}
.w320{
    width: 320px;
}
.w350{
    width: 350px;
}

.w90p{
    width: 90%;
}
.w100p{
    width: 100%;
}





/* 6,コロンをつける設定 */
.acl::after{
    content: '：';
}
.bcl::before{
    content: '：';
}


/* 7,マージン設定 */
.ml5{
    margin-left: 5px;
}
.ml10{
    margin-left: 10px;
}
.ml15{
    margin-left: 15px;
}
.ml20{
    margin-left: 20px;
}
.ml30{
    margin-left: 30px;
}
.ml40{
    margin-left: 40px;
}
.ml50{
    margin-left: 50px;
}

.mr5{
    margin-right: 5px;
}
.mr10{
    margin-right: 10px;
}
.mr15{
    margin-right: 15px;
}
.mr20{
    margin-right: 20px;
}
.mr30{
    margin-right: 30px;
}
.mr40{
    margin-right: 40px;
}
.mr50{
    margin-right: 50px;
}

.mt5{
    margin-top: 5px;
}
.mt10{
    margin-top: 10px;
}
.mt15{
    margin-top: 15px;
}
.mt20{
    margin-top: 20px;
}
.mt30{
    margin-top: 30px;
}
.mt40{
    margin-top: 40px;
}
.mt50{
    margin-top: 50px;
}