23-less共通スタイル

/*//スタイルリセット*/

/* //   */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, 
form, fieldset, legend, button, input, textarea, th, td {
    margin:0;
    padding:0;
    line-height: 1;
  }
  /* //  */
  body, button, input, select, textarea {
               font:12px/1.5tahoma, arial, #666666; 
}
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  /* // */
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }
  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: #333;
  }
  /* //   */
  html, body {
  /* //   */
  -webkit-user-select: none;
  user-select: none;
  }
  .bd {
    border: 1px solid;
  }
  /* // (1)   */
  .mw-980 {
    max-width: 980px;
    margin: 0 auto;
  }
  .h100pc {
    height: 100%;
  }
  .w100pc {
    width: 100%;
  }
  /* // (2) bfc */
  .ovh {
  overflow: hidden;
 }
  .ova {
  overflow: auto;
  }
  /* // (3) display */
  .inb {
  display: inline-block;
  }
  .dsn {
  display: none;
  }
  /* // (4)   */
  .fixed {
  position: fixed;
  }
  .rel {
  position: relative;
  }
  .abs {
  position: absolute;
  }
  /* // (5)   */
  .fl {
  float: left;
  }
  .fr {
  float: right;
  }
  .clear:after {
    content: "";
    display: block;
    clear: both;
  }
  /* // (6)  */
  .fw400 {
    font-weight: 400;
  }
  .bold {
    font-weight: bold;
    /* // 900 */
  }
  /* // (7)  */
  .tac {
  text-align: center;
  }
  /* // (8)   */
  .lh15 {
  line-height: 1.5;
  }
  /* // (9)   */
  .bzb {
    box-sizing: border-box;
  }
  /* // (10)   */
  .cp {
    cursor: pointer;
  }body {
  background: #f4f4f4;
  }
  /* //   */
  .orange {
    color: #ff5f16;
  }
  .fff {
    color: #ffffff;
  }
  /* // (11)   */
  .bg-green {
    background: green;
  }
  .bg-gray {
    background: gray;
  }
  .bg-fff {
    background: #ffffff;
  }
  .bg-black {
    background: #222426;
  }
  /* // (12)   */
  .f0 {
  font-size: 0;
  }
  /* //   */
  @0px: 0px;
  /* // margin-left */
  .font(@n, @i: 12) when (@i =< @n) {
  .f@{i} {
    font-size: @i+@0px;
  }
  .font(@n, (@i + 2));
  /* // +2 1,3,5,7 */
  /* // .mg-l(@n, (@i + 2)); */
  }
  .font(36);
  /* //  
  // @0px: 0px;
  // .ml-loop(@list, @i: 1, @val: extract(@list, @i)) when (length(@list)>=@i) {
  //  .ml@{val} {
  //    margin-left: @val + @0px;
  //  }
  //  .ml-loop(@list, (@i+1));
  // }
 // @marginLeft: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 
14, 15, 16, 17, 18, 19, 20, 24, 30, 40, 48, 50, 75;
  // .ml-loop(@marginLeft); */
  /* // (13) margin-left */
  @0px: 0px;
  /* // margin-left */
  .mg-l(@n, @i: 1) when (@i =< @n) {
  .mg-l-@{i} {
    margin-left: @i+@0px;
  }
  .mg-l(@n, (@i + 1));
  /* // +2 1,3,5,7 */
  /* // .mg-l(@n, (@i + 2)); */
  }
  .mg-l(30);
  /* // (14) margin-top */
  .mg-t(@n, @i: 1) when (@i =< @n) {
  .mg-t-@{i} {
    margin-top: @i+@0px;
  }
  .mg-t(@n, (@i + 1));
  /* // +2 1,3,5,7
  // .mg-l(@n, (@i + 2)); */
  }
 .mg-t(60);
  .mg-t-90 {
    margin-top: 90px;
  }
  /* // (15) padding-left */
  .pd-l(@n, @i: 1) when (@i =< @n) {
    .pd-l-@{i} {
      padding-left: @i+@0px;
    }
    .pd-l(@n, (@i + 1));
    /* // +2 1,3,5,7
    // .mg-l(@n, (@i + 2)); */
  }
  .pd-l(30);
  /* // (16) padding-top */
  .pd-t(@n, @i: 1) when (@i =< @n) {
    .pd-t-@{i} {
      padding-left: @i+@0px;
    }
    .pd-t(@n, (@i + 1));
    /* // +2 1,3,5,7
    // .mg-l(@n, (@i + 2)); */
  }
  .pd-t(30);