@charset "UTF-8";
/* jumbotron
++++++++++++++++++++++++++++++++++++++++ */
.jumbotron {
  margin: auto;
  max-width: 960px;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .jumbotron {
    margin-bottom: 15px;
  }
  .jumbotron h1 {
    margin: auto;
  }
  .jumbotron img {
    width: 100%;
  }
}

.attention_box_red {
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ff0000;
  background-color: #fef6f6;
  color: #ff0000;
  font-size: 12px;
  line-height: 18px;
  text-align: left;
}

.attention_box_red a {
  color: inherit;
}

.attention_box_blue {
  max-width: 900px;
  margin: 0 auto 30px auto;
  padding: 10px;
  border: 1px solid #005bac;
  background: #f5faff;
  color: #005bac;
  font-size: 12px;
  line-height: 18px;
}
.attention_box_blue .txt-lg {
  font-size: 14px;
  font-weight: bold;
}

@media (max-width: 767px) {
  .attention_box_blue {
    margin: 0 10px 20px 10px;
  }
}

/* local-nav
++++++++++++++++++++++++++++++++++++++++ */
.four-shocks {
  width: 304px;
  margin: 0 auto;
  display: block;
}
.local-nav {
  max-width: 920px;
  margin: 36px auto;
  padding: 0 10px;
}
.local-nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
}
.local-nav li {
  display: flex;
  flex-grow: 1;
  width: 25%;
  text-align: center;
}
.local-nav li:not(:first-child) {
  margin-left: 4px;
}
@media (max-width: 767px) {
  .four-shocks {
    width: 50%;
    margin: 0 auto;
    display: block;
  }
  .local-nav {
    max-width: 620px;
    margin: 40px auto 20px;
    padding: 0 10px 0 5px;
  }
  .local-nav ul {
    margin-top: 10px;
    display: block;
  }
  .local-nav li {
    float: left;
    width: 50%;
    padding: 5px 0 0 5px;
  }
  .local-nav li:not(:first-child) {
    margin-left: 0;
  }
}
@media (max-width: 639px) {
  .local-nav {
    margin: 20px auto;
  }
}

/* sec01
++++++++++++++++++++++++++++++++++++++++ */
.sec01 {
  margin-top: -60px;
  padding-top: 60px;
}
@media (max-width: 639px) {
  .sec01 {
    margin-top: -33px;
    padding-top: 33px;
  }
}

/* sec02
++++++++++++++++++++++++++++++++++++++++ */
.sec02 {
  margin-top: 60px;
}
.sec02 .c-ttl-01 b {
  padding: 32px 0;
}
.sec02 h2 {
  position: relative;
}
.sec02 .ruby {
  position: absolute;
  top: 12%;
  left: 24%;
  font-size: 2.3rem;
  letter-spacing: 4px;
}
@media (max-width: 900px) {
  .sec02 .ruby {
    left: 29%;
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .sec02 .c-ttl-01 b {
    max-width: 93.8vw;
    padding: 6vw 0;
    padding-left: 18vw;
  }
  .sec02 .ruby {
    top: 19%;
    left: 20%;
    font-size: 3vw;
  }
}
@media (max-width: 639px) {
  .sec02 {
    margin-top: 20px;
  }
}


/* sec03
++++++++++++++++++++++++++++++++++++++++ */
.sec03 {
  margin-top: 60px;
}
/* .sec03 .box01 {
  margin-top: 20px;
  padding: 20px 25px;
  background-color: #fff;
}
.sec03 .box01 dt {
  color: #2272ab;
  font-size: 2.8rem;
  text-align: center;
}
.sec03 .box01 table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
  border-top: 1px solid #c39531;
  line-height: 1.2;
}
.sec03 .box01 th,
.sec03 .box01 td {
  padding: 4px 18px;
  border-bottom: 1px solid #c39531;
  white-space: nowrap;
}
.sec03 .box01 td {
  text-align: right;
}
.sec03 .box01 p {
  max-width: 520px;
  margin: 10px auto 0;
  font-size: 1.2rem;
  text-align: center;
}
.sec03 .box01 p span {
  margin-bottom: 5px;
  display: block;
  text-align: right;
}
.sec03 .box01 {
  margin-top: 40px;
}
.sec03 .box01 table {
  max-width: 520px;
  margin-top: 15px;
  font-size: 2.4rem;
}
.sec03 .box01 th,
.sec03 .box01 td {
  padding: 8px 40px;
} */
.sec03 .box02 {
  width: 100%;
  background: #fff;
  padding: 20px 25px;
}
.sec03 figcaption {
  margin-bottom: 10px;
  color: #2272ab;
  font-size: 2.8rem;
  text-align: center;
}
.sec03 figure {
  width: 544px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .sec03 figure {
    width: 100%;
  }
  /* .sec03 .box01 {
    margin-top: 20px;
  }
  .sec03 .box01 th,
  .sec03 .box01 td {
    font-size: 2.4rem;
    padding: 8px 30px;
  }
  .sec03 .box01 p {
    margin-top: 27px;
    font-size: 2rem;
  } */
}
@media (max-width: 639px) {
  .sec03 {
    margin-top: 20px;
  }
  /* .sec03 .box01 dt {
    font-size: 4.7vw;
  }
  .sec03 .box01 th,
  .sec03 .box01 td {
    font-size: 4.7vw;
    padding: 8px 16px;
  }
  .sec03 .box01 p {
    margin-top: 10px;
    font-size: 4.7vw;
  } */
  .sec03 .box02 figcaption {
    font-size: 4.7vw;
  }
}

/* minimum-maintenance ++++++++++++++++ */
.minimum-maintenance {
  margin-top: 20px;
  padding: 20px 25px;
  background-color: #fff;

  margin-top: 40px;
}

.minimum-maintenance > dt {
  color: #2272ab;
  font-size: 2.8rem;
  text-align: center;
}
.minimum-maintenance table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
  border-top: 1px solid #c39531;
  line-height: 1.2;

  max-width: 520px;
  margin-top: 15px;
  font-size: 2.4rem;
}
.minimum-maintenance th,
.minimum-maintenance td {
  padding: 4px 18px;
  border-bottom: 1px solid #c39531;
  white-space: nowrap;

  padding: 8px 40px;
}
.minimum-maintenance td {
  text-align: right;
}

.minimum-maintenance .notice,
.minimum-maintenance .note {
  max-width: 520px;
  margin: 0 auto;
  font-size: 1.2rem;
  text-align: center;
}
.minimum-maintenance .notice {
  margin: 10px auto 5px;
  display: block;
  text-align: right;
}

@media (max-width: 767px) {
  .minimum-maintenance {
    margin-top: 20px;
  }
  .minimum-maintenance th,
  .minimum-maintenance td {
    font-size: 2.4rem;
    padding: 8px 30px;
  }
  .minimum-maintenance .notice,
  .minimum-maintenance .note {
    margin-top: 27px;
    font-size: 2rem;
  }
}
@media (max-width: 639px) {
  .minimum-maintenance dt {
    font-size: 4.7vw;
  }
  .minimum-maintenance th,
  .minimum-maintenance td {
    font-size: 4.7vw;
    padding: 8px 16px;
  }
  .minimum-maintenance .notice,
  .minimum-maintenance .note {
    margin-top: 10px;
    font-size: 4.7vw;
  }
}

/* sec04
++++++++++++++++++++++++++++++++++++++++ */
.sec04 {
  margin-top: 60px;
}
@media (max-width: 639px) {
  .sec04 {
    margin-top: 20px;
  }
}

/* sec05
++++++++++++++++++++++++++++++++++++++++ */
.sec05 {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .sec05 .c-ttl-01 b {
    padding-left: 0;
  }
}

/* support ++++++++++++++++ */
.support-group {
}

.support-item {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 10px;
  padding: 12px 0;
}
.support-item:not(:last-of-type) {
  border-bottom: 1px dashed #c39531;
}
.support-item-icon {
  flex-shrink: 0;
  width: 30%;
  text-align: center;
  margin-right: 15px;
}

.support-item-ttl {
  overflow: hidden;
  text-align: left;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 4.7vw;
}

.support-item-txt {
  overflow: hidden;
}

/* SP */
@media (max-width: 767px) {
  .support-group {
    margin: 0 -10px;
  }
}

/* PC */
@media (min-width: 768px) {
  .support-group {
  }

  .support-item {
    display: flex;
  }
  .support-item + .support-item {
    margin-top: 20px;
  }

  .support-item-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 30px;
  }

  .support-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto;
    padding: 0;
    text-align: center;
  }

  .support-item-ttl {
    font-size: 3.2rem;
  }

  .support-item-txt {
    font-size: 1.8rem;
  }
}


/* support-demo ++++++++++++++++ */
/* SP */
@media (max-width: 767px) {
  .support-demo {
    display: block;
  }
  .support-demo-sp .ttl-01 {
    font-size: 1.6rem;
  }
  .support-demo-sp {
    display: flex;
    align-items: center;
    position: relative;
  }

}

/* PC */
@media (min-width: 768px) {
  .support-demo {
    display: flex;
    align-items: center;
  }
  .support-demo-box {
    padding-left: 30px;
  }

  .support-demo-pc {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 15px;
  }

  .support-demo-pc .devices {
    display: flex;
    width: 100%;
  }
  .support-demo-pc .devices > li {
    width: 82px;
    margin-bottom: 10px;
    border-radius: 13px;
    background-color: #0392d5;
    color: #fff;
    font-size: 1.4rem;
    line-height: 2.6rem;
    text-align: center;
  }
  .support-demo-pc .devices > li:not(:first-child) {
    margin-left: 6px;
  }
  .support-demo-pc .ttl-01 {
    width: 54.28%;
    width: 56%;
    font-size: 4rem;
    -webkit-font-feature-settings : "palt";
    font-feature-settings : "palt";
  }
  .support-demo-pc .btn {
    width: 37.15%;
    width: 40%;
    margin-top: -5px;
    margin-left: auto;
  }
}

/* dldemo ++++++++++++++++ */
.dldemo {
  overflow: hidden;
  background-color: #fff;
  text-align: center;
}
.dldemo ul {
  display: flex;
}
.dldemo li a {
  display: block;
}

/* SP */
@media (max-width: 767px) {
  .dldemo {
    margin: 10px 0 0;
    padding: 0 15px 10px;
    border-radius: 3px;
  }
  .dldemo ul {
    margin: 10px -5px 0;
  }
  .dldemo li {
    padding: 0 5px;
  }
}

/* PC */
@media (min-width: 768px) {
  .dldemo {
    display: flex;
    justify-content: space-between;;
    margin-left: -10px;
    margin-right: -10px;
    padding: 20px 30px 15px;
    border-radius: 6px;
  }
  .dldemo-ttl {
    width: 45.46%;
    max-width: 300px;
  }
  .dldemo ul {
    max-width: 340px;
    margin-right: -10px;
  }
  .dldemo li {
    padding: 0 10px;
  }
  .dldemo .qr {
    display: block;
    margin: 0 auto 20px;
  }
}


/* sec06
++++++++++++++++++++++++++++++++++++++++ */
.sec06 {
  margin-top: 30px;
}
.sec06 .c-ttl-01 {
  height: 140px;
  line-height: 63px;
}
.sec06 .c-ttl-01 b {
  padding: 5px 0;
}
.video-box {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
.video-box li {
  width: 45%;
}
.video-box h3 {
  width: 240px;
  display: block;
  margin: 0 auto;
  font-size: 3.2rem;
  color: #fff;
  background: #c39531;
  text-align: center;
  border-radius: 24px;
}
.movie-wrap {
  margin-top: 20px;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background-color: #282828;
}
/* .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
} */
.movie-wrap::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 14px;
  text-align: center;
  content: "公開終了しました";
}

.webmovie-img-box figcaption {
  margin-top: 60px;
  font-size: 3.5rem;
  text-align: center;
  color: #c39531;
  font-weight: bold;
  letter-spacing: 2.5px;
  /* font-family: 'Hiragino Kaku Gothic W5 JIS2004', sans-serif; */
}
@media (max-width: 767px) {
  .sec06 .c-ttl-01 {
    height: 21.9vw;
    line-height: 6.5vw;
    font-size: 5.9vw;
  }
  .sec06 .c-ttl-01 b {
    padding: 4vw 0;
  }
  .video-box {
    margin-top: 40px;
    display: block;
  }
  .video-box li {
    width: 100%;
  }
  .video-box li:last-child {
    margin-top: 40px;
  }
  .webmovie-img-box figcaption {
    margin-top: 55px;
    font-size: 3.6rem;
  }
}
@media (max-width: 639px) {
  .sec06 {
    margin-top: 0;
  }
  .video-box {
    margin-top: 20px;
  }
  .video-box h3 {
    font-size: 5vw;
  }
  .video-box li:last-child {
    margin-top: 20px;
  }
  .webmovie-img-box figcaption {
    margin-top: 20px;
    font-size: 6.3vw;
  }
}

/* sec07
++++++++++++++++++++++++++++++++++++++++ */
.sec07 {
  margin-top: 60px;
}
.sec07 .c-ttl-01 b {
  max-width: 100%;
}
.account-box {
  margin-top: 40px;
  display: flex;
}
.account-box li {
  width: 409px;
}
.account-box li:first-child {
  margin: 0 82px 0 0;
}
.account-box h3 {
  width: 100%;
  background: #c39531;
  text-align: center;
  border-radius: 23px;
  font-size: 2.8rem;
  color: #fff;
  padding-bottom: 4px;
}
.account-box p {
  font-size: 2.4rem;
  margin-top: 20px;
  margin-bottom: 60px;
  letter-spacing: -0.5px;
}
@media (max-width: 980px) {
  .sec07 .c-ttl-01 {
    font-size: 4.8vw;
  }
  .account-box h3 {
    font-size: 2.4rem;
  }
}
@media (max-width: 767px) {
  .sec07 {
    margin-top: 50px;
  }
  .sec07 .c-ttl-01 {
    height: 21.9vw;
    line-height: 6.5vw;
    font-size: 5.6vw;
  }
  .sec07 .c-ttl-01 b {
    padding: 4.6vw 0;
  }
  .account-box {
    display: block;
    margin-top: 40px;
  }
  .account-box li {
    width: 100%;
  }
  .account-box li:first-child {
    margin: 0 auto 40px;
  }
  .account-box h3 {
    width: 87%;
    margin: 0 auto;
    font-size: 5vw;
    padding-bottom: 0;
  }
  .account-box p {
    font-size: 2.4rem;
    margin-bottom: 20px;
  }
}
@media (max-width: 639px) {
  .sec07 {
    margin-top: 20px;
  }
  .account-box {
    margin-top: 20px;
  }
  .account-box li:first-child {
    margin: 0 auto 20px;
  }
  .account-box p {
    font-size: 4.7vw;
  }
}

/* sec08
++++++++++++++++++++++++++++++++++++++++ */
.sec08 {
  margin-top: 60px;
}
.sec08 .c-ttl-01 {
  height: 140px;
  line-height: 63px;
}
.sec08 .c-ttl-01 b {
  padding: 5px 0;
  max-width: 100%;
}

.sec08 .logo {
  text-align: center;
}
.tool-summary {
  padding: 10px;
  background-color: #fff;
}
.tool-summary li {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
}
.tool-summary li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-image: url(/corp/lp/sns/campaign/cfd_2107/images/icon-check.png);
  background-size: 100% auto;
  content: "";
}

.detail-arrow {
  margin-top: 12px;
  text-align: right;
}
.detail-arrow a {
  position: relative;
}
.detail-arrow::before {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 3px;
  border: solid 3.5px transparent;
  border-left: solid 5px #1c325c;
  vertical-align: middle;
  content: "";
}

@media (max-width: 1080px) {
  .sec08 .c-ttl-01 {
    font-size: 4.8vw;
  }
}
@media (max-width: 767px) {
  .sec08 {
    margin-top: 40px;
  }
  .sec08 .c-ttl-01 {
    height: 21.9vw;
    line-height: 6.5vw;
    font-size: 5.6vw;
  }
  .sec08 .c-ttl-01 b {
    padding: 4.6vw 0;
  }
  .sec08 .logo {
    margin-top: 20px;
  }
  .tool-summary {
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .tool-summary li {
    padding-left: 22px;
    line-height: 1.2;
  }
  .tool-summary li::before {
    width: 16px;
    height: 16px;
  }
  .tool-summary li:not(:first-child) {
    margin-top: 8px;
  }
}
@media (max-width: 639px) {
  .sec08 {
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .sec08 .logo {
    margin-top: 30px;
  }
  .tool-summary {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .tool-summary li {
    flex-grow: 1;
    margin: 0;
    padding: 0 10px 0 52px;
    line-height: 1.25;
  }
  .tool-summary li::before {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    font-size: 2rem;
  }
}


/* cfd convenivence appli
++++++++++++++++++++++++++++++++++++++++ */
.appli-download {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 30px;
}
.appli-download-bg {
  background: #fff;
  border-radius:  0 0 5px 5px;
}
.appli-download-heading {
  background: url("/corp/lp/sns/campaign/cfd_2107/images/bg-applidownload-title.png");
  text-align: center;
  border-radius: 5px 5px 0 0;
  color: #fff;
  font-size: 3.0rem;
  padding: 2px 0;
}
.appli-download-text {
  margin-top: 10px;
  text-align: center;
  font-size: 1.2rem;
}
.appli-download-btn {
  border-radius: 0 0 5px 5px;
  display: flex;
  width: 540px;
  margin: 0 auto;
  padding: 20px 0;
}
.applestore {
  display: block;
  margin-right: 21px;
}
.googleplay {
  display: block;
}
.applestore img {
  width: 259px;
}
.googleplay img {
  width: 260px;
}
@media (max-width: 767px) {
  .appli-download {
    max-width: 640px;
    padding: 5px 10px 0;
  }
  .appli-download-heading {
    font-size: 4.6vw;
  }
  .appli-download-btn {
    width: 90%;
  }
  .applestore {
    width: 48%;
    margin-right: 3.8%;
  }
  .googleplay {
    width: 48.1%;
  }
  .applestore img {
    width: 100%;
  }
  .googleplay img {
    width: 100%;
  }
}

/*  utility
++++++++++++++++++++++++++++++++++++++++ */
/* margin +++++++++++++++++++ */
.u-mg-auto { margin: auto !important;}
.u-mg0 { margin: 0 !important;}
.u-mg4 { margin: 4px !important;}
.u-mg8 { margin: 8px !important;}
.u-mg16 { margin: 16px !important;}
.u-mg24 { margin: 24px !important;}
.u-mg32 { margin: 32px !important;}
.u-mg40 { margin: 40px !important;}
.u-mg48 { margin: 48px !important;}
.u-mg56 { margin: 56px !important;}
.u-mg64 { margin: 64px !important;}
.u-mg72 { margin: 72px !important;}
.u-mg80 { margin: 80px !important;}
/* top */
.u-mgt-auto { margin-top: auto !important;}
.u-mgt0 { margin-top: 0 !important;}
.u-mgt4 { margin-top: 4px !important;}
.u-mgt8 { margin-top: 8px !important;}
.u-mgt16 { margin-top: 16px !important;}
.u-mgt24 { margin-top: 24px !important;}
.u-mgt32 { margin-top: 32px !important;}
.u-mgt40 { margin-top: 40px !important;}
.u-mgt48 { margin-top: 48px !important;}
.u-mgt56 { margin-top: 56px !important;}
.u-mgt64 { margin-top: 64px !important;}
.u-mgt72 { margin-top: 72px !important;}
.u-mgt80 { margin-top: 80px !important;}
/* right */
.u-mgr-auto { margin-right: auto !important;}
.u-mgr0 { margin-right: 0 !important;}
.u-mgr4 { margin-right: 4px !important;}
.u-mgr8 { margin-right: 8px !important;}
.u-mgr16 { margin-right: 16px !important;}
.u-mgr24 { margin-right: 24px !important;}
.u-mgr32 { margin-right: 32px !important;}
.u-mgr40 { margin-right: 40px !important;}
.u-mgr48 { margin-right: 48px !important;}
.u-mgr56 { margin-right: 56px !important;}
.u-mgr64 { margin-right: 64px !important;}
.u-mgr72 { margin-right: 72px !important;}
.u-mgr80 { margin-right: 80px !important;}
/* bottom */
.u-mgb-auto { margin-bottom: auto !important;}
.u-mgb0 { margin-bottom: 0 !important;}
.u-mgb4 { margin-bottom: 4px !important;}
.u-mgb8 { margin-bottom: 8px !important;}
.u-mgb16 { margin-bottom: 16px !important;}
.u-mgb24 { margin-bottom: 24px !important;}
.u-mgb32 { margin-bottom: 32px !important;}
.u-mgb40 { margin-bottom: 40px !important;}
.u-mgb48 { margin-bottom: 48px !important;}
.u-mgb56 { margin-bottom: 56px !important;}
.u-mgb64 { margin-bottom: 64px !important;}
.u-mgb72 { margin-bottom: 72px !important;}
.u-mgb80 { margin-bottom: 80px !important;}
/* left */
.u-mgl-auto { margin-left: auto !important;}
.u-mgl0 { margin-left: 0 !important;}
.u-mgl4 { margin-left: 4px !important;}
.u-mgl8 { margin-left: 8px !important;}
.u-mgl16 { margin-left: 16px !important;}
.u-mgl24 { margin-left: 24px !important;}
.u-mgl32 { margin-left: 32px !important;}
.u-mgl40 { margin-left: 40px !important;}
.u-mgl48 { margin-left: 48px !important;}
.u-mgl56 { margin-left: 56px !important;}
.u-mgl64 { margin-left: 64px !important;}
.u-mgl72 { margin-left: 72px !important;}
.u-mgl80 { margin-left: 80px !important;}
/* X axis */
.u-mgx-auto { margin-right: auto !important; margin-left: auto !important;}
.u-mgx0 { margin-right: 0 !important; margin-left: 0 !important;}
.u-mgx4 { margin-right: 4px !important; margin-left: 4px !important;}
.u-mgx8 { margin-right: 8px !important; margin-left: 8px !important;}
.u-mgx16 { margin-right: 16px !important; margin-left: 16px !important;}
.u-mgx24 { margin-right: 24px !important; margin-left: 24px !important;}
.u-mgx32 { margin-right: 32px !important; margin-left: 32px !important;}
.u-mgx40 { margin-right: 40px !important; margin-left: 40px !important;}
.u-mgx48 { margin-right: 48px !important; margin-left: 48px !important;}
.u-mgx56 { margin-right: 56px !important; margin-left: 56px !important;}
.u-mgx64 { margin-right: 64px !important; margin-left: 64px !important;}
.u-mgx72 { margin-right: 72px !important; margin-left: 72px !important;}
.u-mgx80 { margin-right: 80px !important; margin-left: 80px !important;}
/* Y axis */
.u-mgy-auto { margin-top: auto !important; margin-bottom: auto !important;}
.u-mgy0 { margin-top: 0 !important; margin-bottom: 0 !important;}
.u-mgy4 { margin-top: 4px !important; margin-bottom: 4px !important;}
.u-mgy8 { margin-top: 8px !important; margin-bottom: 8px !important;}
.u-mgy16 { margin-top: 16px !important; margin-bottom: 16px !important;}
.u-mgy24 { margin-top: 24px !important; margin-bottom: 24px !important;}
.u-mgy32 { margin-top: 32px !important; margin-bottom: 32px !important;}
.u-mgy40 { margin-top: 40px !important; margin-bottom: 40px !important;}
.u-mgy48 { margin-top: 48px !important; margin-bottom: 48px !important;}
.u-mgy56 { margin-top: 56px !important; margin-bottom: 56px !important;}
.u-mgy64 { margin-top: 64px !important; margin-bottom: 64px !important;}
.u-mgy72 { margin-top: 72px !important; margin-bottom: 72px !important;}
.u-mgy80 { margin-top: 80px !important; margin-bottom: 80px !important;}
/* padding +++++++++++++++++++ */
.u-pd-auto { padding: auto !important;}
.u-pd0 { padding: 0 !important;}
.u-pd4 { padding: 4px !important;}
.u-pd8 { padding: 8px !important;}
.u-pd16 { padding: 16px !important;}
.u-pd24 { padding: 24px !important;}
.u-pd32 { padding: 32px !important;}
.u-pd40 { padding: 40px !important;}
.u-pd48 { padding: 48px !important;}
.u-pd56 { padding: 56px !important;}
.u-pd64 { padding: 64px !important;}
.u-pd72 { padding: 72px !important;}
.u-pd80 { padding: 80px !important;}
/* top */
.u-pdt-auto { padding-top: auto !important;}
.u-pdt0 { padding-top: 0 !important;}
.u-pdt4 { padding-top: 4px !important;}
.u-pdt8 { padding-top: 8px !important;}
.u-pdt16 { padding-top: 16px !important;}
.u-pdt24 { padding-top: 24px !important;}
.u-pdt32 { padding-top: 32px !important;}
.u-pdt40 { padding-top: 40px !important;}
.u-pdt48 { padding-top: 48px !important;}
.u-pdt56 { padding-top: 56px !important;}
.u-pdt64 { padding-top: 64px !important;}
.u-pdt72 { padding-top: 72px !important;}
.u-pdt80 { padding-top: 80px !important;}
/* right */
.u-pdr-auto { padding-right: auto !important;}
.u-pdr0 { padding-right: 0 !important;}
.u-pdr4 { padding-right: 4px !important;}
.u-pdr8 { padding-right: 8px !important;}
.u-pdr16 { padding-right: 16px !important;}
.u-pdr24 { padding-right: 24px !important;}
.u-pdr32 { padding-right: 32px !important;}
.u-pdr40 { padding-right: 40px !important;}
.u-pdr48 { padding-right: 48px !important;}
.u-pdr56 { padding-right: 56px !important;}
.u-pdr64 { padding-right: 64px !important;}
.u-pdr72 { padding-right: 72px !important;}
.u-pdr80 { padding-right: 80px !important;}
/* bottom */
.u-pdb-auto { padding-bottom: auto !important;}
.u-pdb0 { padding-bottom: 0 !important;}
.u-pdb4 { padding-bottom: 4px !important;}
.u-pdb8 { padding-bottom: 8px !important;}
.u-pdb16 { padding-bottom: 16px !important;}
.u-pdb24 { padding-bottom: 24px !important;}
.u-pdb32 { padding-bottom: 32px !important;}
.u-pdb40 { padding-bottom: 40px !important;}
.u-pdb48 { padding-bottom: 48px !important;}
.u-pdb56 { padding-bottom: 56px !important;}
.u-pdb64 { padding-bottom: 64px !important;}
.u-pdb72 { padding-bottom: 72px !important;}
.u-pdb80 { padding-bottom: 80px !important;}
/* left */
.u-pdl-auto { padding-left: auto !important;}
.u-pdl0 { padding-left: 0 !important;}
.u-pdl4 { padding-left: 4px !important;}
.u-pdl8 { padding-left: 8px !important;}
.u-pdl16 { padding-left: 16px !important;}
.u-pdl24 { padding-left: 24px !important;}
.u-pdl32 { padding-left: 32px !important;}
.u-pdl40 { padding-left: 40px !important;}
.u-pdl48 { padding-left: 48px !important;}
.u-pdl56 { padding-left: 56px !important;}
.u-pdl64 { padding-left: 64px !important;}
.u-pdl72 { padding-left: 72px !important;}
.u-pdl80 { padding-left: 80px !important;}
/* X axis */
.u-pdx-auto { padding-right: auto !important; padding-left: auto !important;}
.u-pdx0 { padding-right: 0 !important; padding-left: 0 !important;}
.u-pdx4 { padding-right: 4px !important; padding-left: 4px !important;}
.u-pdx8 { padding-right: 8px !important; padding-left: 8px !important;}
.u-pdx16 { padding-right: 16px !important; padding-left: 16px !important;}
.u-pdx24 { padding-right: 24px !important; padding-left: 24px !important;}
.u-pdx32 { padding-right: 32px !important; padding-left: 32px !important;}
.u-pdx40 { padding-right: 40px !important; padding-left: 40px !important;}
.u-pdx48 { padding-right: 48px !important; padding-left: 48px !important;}
.u-pdx56 { padding-right: 56px !important; padding-left: 56px !important;}
.u-pdx64 { padding-right: 64px !important; padding-left: 64px !important;}
.u-pdx72 { padding-right: 72px !important; padding-left: 72px !important;}
.u-pdx80 { padding-right: 80px !important; padding-left: 80px !important;}
/* Y axis */
.u-pdy-auto { padding-top: auto !important; padding-bottom: auto !important;}
.u-pdy0 { padding-top: 0 !important; padding-bottom: 0 !important;}
.u-pdy4 { padding-top: 4px !important; padding-bottom: 4px !important;}
.u-pdy8 { padding-top: 8px !important; padding-bottom: 8px !important;}
.u-pdy16 { padding-top: 16px !important; padding-bottom: 16px !important;}
.u-pdy24 { padding-top: 24px !important; padding-bottom: 24px !important;}
.u-pdy32 { padding-top: 32px !important; padding-bottom: 32px !important;}
.u-pdy40 { padding-top: 40px !important; padding-bottom: 40px !important;}
.u-pdy48 { padding-top: 48px !important; padding-bottom: 48px !important;}
.u-pdy56 { padding-top: 56px !important; padding-bottom: 56px !important;}
.u-pdy64 { padding-top: 64px !important; padding-bottom: 64px !important;}
.u-pdy72 { padding-top: 72px !important; padding-bottom: 72px !important;}
.u-pdy80 { padding-top: 80px !important; padding-bottom: 80px !important;}

/* width +++++++++++++++++++ */
/* pixel */
.u-w808 { width: 808px !important;}
/* percent */
.u-w5p { width: 5% !important;}
.u-w10p { width: 10% !important;}
.u-w15p { width: 15% !important;}
.u-w20p { width: 20% !important;}
.u-w25p { width: 25% !important;}
.u-w30p { width: 30% !important;}
.u-w35p { width: 35% !important;}
.u-w40p { width: 40% !important;}
.u-w45p { width: 45% !important;}
.u-w50p { width: 50% !important;}
.u-w55p { width: 55% !important;}
.u-w60p { width: 60% !important;}
.u-w65p { width: 65% !important;}
.u-w70p { width: 70% !important;}
.u-w75p { width: 75% !important;}
.u-w80p { width: 80% !important;}
.u-w85p { width: 85% !important;}
.u-w90p { width: 90% !important;}
.u-w95p { width: 95% !important;}
.u-w100p { width: 100% !important;}

/* text +++++++++++++++++++ */
/* font size */
.u-txt-xs { font-size: 1.2rem !important;}
.u-txt-sm { font-size: 1.3rem !important;}
.u-txt-md { font-size: 1.4rem !important;}
.u-txt-lg { font-size: 1.6rem !important;}
.u-txt-xl { font-size: 1.8rem !important;}
.u-txt-xxl { font-size: 2rem !important;}
.u-txt-3xl { font-size: 2.2rem !important;}
.u-txt-4xl { font-size: 2.4rem !important;}
/* weight */
.u-txt-normal { font-weight: normal !important;}
.u-txt-bold { font-weight: bold !important;}
/* text align */
.u-txt-left { text-align: left !important;}
.u-txt-center { text-align: center !important;}
.u-txt-right { text-align: right !important;}
/* text align */
.u-valign-top { vertical-align: top !important;}
.u-valign-middle { vertical-align: middle !important;}
.u-valign-bottom { vertical-align: bottom !important;}
.u-valign-baseline { vertical-align: baseline !important;}
/* various */
.u-txt-narrow {
  display: inline-block;
  font-size: 0.9285em;
  transform: scale(1, 1.0769);
}
.u-txt-spacing2 { letter-spacing: 2px;}
.u-txt-spacing1 { letter-spacing: 1px;}
.u-txt-spacing0 { letter-spacing: normal;}
.u-txt-spacing1n { letter-spacing: -1px;}
.u-txt-spacing2n { letter-spacing: -2px;}
.u-txt-nowrap { white-space: nowrap;}
.u-txt-ellipsis {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* color */
.u-color-primary { color: #005bac !important;}
.u-color-gray { color: #666 !important;}

/* color ------------- */
.u-col-red {
  color: #f6717b;
}
.u-col-blue {
  color: #01529e;
}
.u-color-blue-light {
  color: #10a6d1;;
}
.u-col-black {
  color: #333;
}
.u-col-dark-blue {
  color: #2c3248;
}