/*
Theme Name: f&b
*/

@charset "UTF-8";

/* ――――――――――――――――――――――
clear
―――――――――――――――――――――― */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-table;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
    zoom: 1;
}

/* テキストがwidth指定のある親枠をはみ出した場合に自動的に「…」に置換する */
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ――――――――――――――――――――――
float
―――――――――――――――――――――― */
.flo--l {
    float: left;
}
.flo--r {
    float: right;
}

/* ――――――――――――――――――――――
font
―――――――――――――――――――――― */
.bold {
    font-weight: bold;
}
.fs8 {
    font-size: 8px !important;
}
.fs9 {
    font-size: 9px !important;
}
.fs10 {
    font-size: 10px !important;
}
.fs11 {
    font-size: 11px !important;
}
.fs12 {
    font-size: 12px !important;
}
.fs13 {
    font-size: 13px !important;
}
.fs14 {
    font-size: 14px !important;
}
.fs15 {
    font-size: 15px !important;
}
.fs16 {
    font-size: 16px !important;
}
.fs18 {
    font-size: 18px !important;
}
.fs20 {
    font-size: 20px !important;
}
.fs21 {
    font-size: 21px !important;
}
.fs24 {
    font-size: 24px !important;
}
.fs30 {
    font-size: 30px !important;
}
.fs42 {
    font-size: 42px !important;
}
.fs44 {
    font-size: 44px !important;
}

.txtl {
    text-align: left !important;
}
.txtc {
    text-align: center !important;
}
.txtr {
    text-align: right !important;
}

/* ――――――――――――――――――――――
font-color
―――――――――――――――――――――― */
.fc1 {
    color: #111;
}
.fc2 {
    color: #222;
}
.fc3 {
    color: #333;
}
.fc5 {
    color: #555;
}
.fc6 {
    color: #666;
}
.fc7 {
    color: #777;
}
.fc8 {
    color: #888;
}
.fc9 {
    color: #999;
}
.fca {
    color: #aaa;
}
.fcb {
    color: #bbb;
}
.fcc {
    color: #ccc;
}
.fcd {
    color: #ddd;
}
.fce {
    color: #eee;
}

/* ――――――――――――――――――――――
margin
―――――――――――――――――――――― */
.mgn3 {
    margin: 3px;
}
.mgn5 {
    margin: 5px;
}
.mgn10 {
    margin: 10px;
}
.mgn20 {
    margin: 20px;
}
.mgn30 {
    margin: 30px;
}
.mgn40 {
    margin: 40px;
}
.mgn50 {
    margin: 50px;
}

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

.mr3 {
    margin-right: 3px;
}
.mr5 {
    margin-right: 5px;
}
.mr8 {
    margin-right: 8px;
}
.mr10 {
    margin-right: 10px;
}
.mr20 {
    margin-right: 20px;
}
.mr30 {
    margin-right: 30px;
}
.mr40 {
    margin-right: 40px;
}
.mr50 {
    margin-right: 50px;
}

.mb3 {
    margin-bottom: 3px !important;
}
.mb5 {
    margin-bottom: 5px !important;
}
.mb10 {
    margin-bottom: 10px !important;
}
.mb20 {
    margin-bottom: 20px !important;
}
.mb30 {
    margin-bottom: 30px !important;
}
.mb40 {
    margin-bottom: 40px !important;
}
.mb50 {
    margin-bottom: 50px !important;
}

.ml3 {
    margin-left: 3px;
}
.ml5 {
    margin-left: 5px;
}
.ml10 {
    margin-left: 10px;
}
.ml20 {
    margin-left: 20px;
}
.ml30 {
    margin-left: 30px;
}
.ml40 {
    margin-left: 40px;
}
.ml50 {
    margin-left: 50px;
}

/* ――――――――――――――――――――――
padding
―――――――――――――――――――――― */
.pdg3 {
    padding: 3px;
}
.pdg5 {
    padding: 5px;
}
.pdg10 {
    padding: 10px;
}
.pdg20 {
    padding: 20px;
}
.pdg30 {
    padding: 30px;
}
.pdg40 {
    padding: 40px;
}
.pdg50 {
    padding: 50px;
}

.pt3 {
    padding-top: 3px;
}
.pt5 {
    padding-top: 5px;
}
.pt10 {
    padding-top: 10px;
}
.pt20 {
    padding-top: 20px;
}
.pt30 {
    padding-top: 30px;
}
.pt40 {
    padding-top: 40px;
}
.pt50 {
    padding-top: 50px;
}

.pr3 {
    padding-right: 3px;
}
.pr5 {
    padding-right: 5px;
}
.pr10 {
    padding-right: 10px;
}
.pr20 {
    padding-right: 20px;
}
.pr30 {
    padding-right: 30px;
}
.pr40 {
    padding-right: 40px;
}
.pr50 {
    padding-right: 50px;
}

.pl3 {
    padding-left: 3px;
}
.pl5 {
    padding-left: 5px;
}
.pl10 {
    padding-left: 10px;
}
.pl20 {
    padding-left: 20px;
}
.pl30 {
    padding-left: 30px;
}
.pl40 {
    padding-left: 40px;
}
.pl50 {
    padding-left: 50px;
}

/* ――――――――――――――――――――――
vertical
―――――――――――――――――――――― */
.va--t {
    vertical-align: top;
}
.va--m {
    vertical-align: middle;
}
.va--b {
    vertical-align: bottom;
}

/* ――――――――――――――――――――――
list
―――――――――――――――――――――― */
.list--circle li {
    list-style-type: circle !important;
    list-style-position: outside !important;
    margin-left: 17px;
}
.list--square li {
    list-style-type: square;
    list-style-position: outside;
    margin-left: 24px;
}
.list--disc li {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 2.3em;
}
.list--decimal li {
    list-style-type: decimal;
    list-style-position: outside;
    margin-left: 2.6em;
}
.list--caution li:before {
    content: "※";
    display: block;
    float: left;
    margin-left: -1.1em;
    width: 1em;
    text-align: center;
}
.list--caution li {
    display: block;
    padding-left: 1.1em;
}