@charset "UTF-8";
/**
 * General
 */
/* ============================================================= */
/**
 * General
 */
/* ============================================================= */
/**
 * Variables
 */
/* ============================================================= */
/**
 * Functions
 */
/* ============================================================= */
/**
 * Mixins
 */
/* ============================================================= */
/* ---------------- Font --------------------------------------- */
/**
 * Typography rules
 */
/* ============================================================= */
@font-face {
  font-family: "M+ 2c Regular";
  src: url("../fonts/mplus-2c-regular.ttf"); }

@font-face {
  font-family: "M+ 2c Light";
  src: url("../fonts/mplus-2c-light.ttf"); }

@font-face {
  font-family: "M+ 2c Bold";
  src: url("../fonts/mplus-2c-bold.ttf"); }

@font-face {
  font-family: "M+ 2c Medium";
  src: url("../fonts/mplus-2c-medium.ttf"); }

@font-face {
  font-family: "M+ 2c Heavy";
  src: url("../fonts/mplus-2c-heavy.ttf"); }

a {
  color: #ffffff;
  text-decoration: none; }

/**
 * Header

 */
/* ============================================================= */
.header {
  background-color: #13b2b2;
  height: 99px; }
  .header-main {
    width: 1280px;
    margin: 0 auto;
    width: 1280px;
    padding-top: 34px;
    box-sizing: border-box; }
  .header .logo img {
    margin-top: -1px; }
  .header-links {
    line-height: 34px; }

.link {
  float: left; }
  .link .fa {
    float: left;
    font-size: 16px;
    letter-spacing: -0.06em;
    line-height: 33px; }
  .link span {
    float: left;
    font-size: 12px;
    font-family: "M+ 2c Bold"; }
  .link-account {
    margin-right: 44px; }
    .link-account .fa {
      margin-right: 8px; }
    .link-account span {
      letter-spacing: -0.06em; }
  .link-help {
    margin-right: 39px; }
    .link-help .fa {
      margin-right: 8px; }
  .link-logout .fa {
    margin-right: 5px; }

/**
 * Main
 */
/* ============================================================= */
body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  font-family: "M+ 2c Light", "メイリオ", Meiryo, Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: lighter;
  letter-spacing: 0;
  outline: none;
  color: #ffffff;
  font-size: 14px; }

.wrapper {
  min-width: 1280px;
  min-height: 768px;
  width: auto;
  height: auto;
  margin: 0 auto;
  background-color: #ffffff; }

.wrap {
  width: 100%;
  float: left; }

.left {
  float: left; }

.right {
  float: right; }

.content-main {
  width: 1280px;
  margin: 0 auto;
  width: 1280px;
  box-sizing: border-box; }

.round-top {
  border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0; }

.round-bottom {
  border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -webkit-border-radius: 0 0 6px 6px; }

.clear-fix {
  clear: both;
  content: "";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden; }

.clickable {
  cursor: pointer; }
  .clickable:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80); }

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default; }

/**
 * Buttons
 */
/* ============================================================= */
.button {
  text-align: center;
  border: none;
  box-sizing: border-box; }
  .button:hover {
    opacity: 0.8;
    cursor: pointer; }

.btn {
  display: inline-block;
  padding: 9px 26px;
  margin-bottom: 0;
  font-family: "M+ 2c Bold";
  font-size: 14px;
  font-weight: normal;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  color: #ffffff;
  box-sizing: border-box;
  height: 39px;
  min-width: 147px; }
  .btn:hover {
    opacity: 0.8;
    cursor: pointer; }

.btn-red {
  background-color: #9d7174; }

.btn-blue {
  background-color: #13b2b2; }

/**
 * Input
 */
/* ============================================================= */
.input {
  font-size: 12px;
  font-family: "M+ 2c Regular";
  overflow: hidden;
  box-sizing: border-box;
  width: 100%; }
  .input::-webkit-input-placeholder {
    color: #b6b6b6; }
  .input:-moz-placeholder {
    /* Firefox 18- */
    color: #b6b6b6; }
  .input::-moz-placeholder {
    /* Firefox 19+ */
    color: #b6b6b6; }
  .input:-ms-input-placeholder {
    color: #b6b6b6; }

.select--wrap {
  width: 80px;
  height: 25px;
  position: relative;
  -webkit-box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1); }
  .select--wrap .select {
    color: #13b2b2;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    opacity: 0;
    float: left; }
    .select--wrap .select--label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ffffff; }
      .select--wrap .select--label span {
        display: block;
        height: 100%;
        line-height: 24px;
        font-size: 14px; }
      .select--wrap .select--label-value {
        float: left;
        width: 100%;
        padding-right: 24px;
        box-sizing: border-box;
        text-align: left;
        overflow: hidden;
        letter-spacing: -0.05em; }
      .select--wrap .select--label-bkg {
        color: #ffffff;
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        text-align: center;
        background-color: #13b2b2; }

/**
 * UI List
 */
/* ============================================================= */
.ui-list {
  width: 100%;
  min-height: 590px; }
  .ui-list--title {
    box-sizing: border-box;
    font-size: 12px;
    font-family: "M+ 2c Medium";
    width: 100%;
    background-color: #13b2b2;
    color: #ffffff;
    height: 40px;
    border-bottom: 1px solid #ffffff;
    position: relative; }
    .ui-list--title .list--sort {
      position: absolute;
      top: 1px;
      left: 96px;
      height: 10px;
      width: 20px;
      text-align: center;
      z-index: 1; }
      .ui-list--title .list--sort .fa {
        display: none;
        font-size: 12px; }
      .ui-list--title .list--sort:hover {
        opacity: 0.8;
        cursor: pointer; }
        .ui-list--title .list--sort:hover .fa {
          font-size: 20px;
          line-height: 12px; }
  .ui-list--add-more {
    width: 100%;
    background-color: #13b2b2;
    color: #ffffff;
    height: 40px;
    border-top: 1px solid #ffffff; }
  .ui-list--content {
    height: 510px;
    box-sizing: border-box;
    border-bottom: 1px solid #ffffff; }
  .ui-list--row {
    font-size: 12px;
    font-family: "M+ 2c Bold";
    letter-spacing: -0.05em;
    box-sizing: border-box;
    border-bottom: 1px solid #ffffff;
    color: #333333; }
    .ui-list--row:last-of-type {
      border-bottom: none; }
    .ui-list--row-main {
      height: 39px;
      line-height: 39px;
      background-color: #eeeeee; }
      .active .ui-list--row-main {
        background-color: #13b2b2;
        color: #ffffff; }
      .ui-list--row-main:hover {
        cursor: pointer; }
  .ui-list--col {
    height: 100%;
    line-height: 40px;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #ffffff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .ui-list--col:last-of-type {
      border-right: none; }
    .ui-list--title .ui-list--col:hover {
      cursor: pointer;
      background-color: #84ccc9; }
    .ui-list--col.up .fa-angle-up {
      display: block; }
    .ui-list--col.down .fa-angle-down {
      display: block; }
    .ui-list--col.down .list--sort {
      top: 26px; }

/**
 * Form
 */
/* ============================================================= */
.modal-body .form--head {
  margin-bottom: 12px; }

.modal-body .form--content {
  background-color: #eee;
  box-sizing: border-box;
  padding: 0 26px;
  width: 100%;
  float: left; }

.modal-body .form--row {
  width: 100%;
  float: left; }
  .modal-body .form--row .row--label, .modal-body .form--row .row--content {
    float: left; }
  .modal-body .form--row .row--label {
    width: 124px;
    font-family: "M+ 2c Bold";
    font-size: 14px;
    letter-spacing: -0.05em;
    color: #13b2b2; }

body, .wrapper {
  background-color: #13b2b4; }

.login {
  text-align: center; }
  .login .label {
    width: 100%;
    display: block;
    height: 40px;
    line-height: 41px;
    font-size: 12px;
    margin-top: 14px;
    letter-spacing: 0.21em;
    font-family: "M+ 2c Regular"; }
  .login-password .label {
    height: 30px;
    line-height: 31px;
    margin-top: 19px; }
  .login .input {
    height: 39px;
    width: 317px;
    box-sizing: border-box;
    line-height: 38px;
    font-size: 18px;
    background-color: #ffffff;
    border-left: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    border-bottom: none;
    border-right: none;
    padding: 0 10px;
    overflow: hidden; }
    .login .input-wrap {
      width: 100%;
      float: left; }
  .login .button {
    background-color: #f2fbb9;
    width: 196px;
    height: 39px;
    line-height: 38px;
    color: #13b2b3;
    margin-top: 41px; }
    .login .button .fa {
      margin-right: 7px; }

.logo {
  background-color: #ffffff;
  text-align: center;
  padding: 116px 0 36px 0; }