/********
  header
*********/
.upg-header {
  background: url("../img/img_hero_lg.jpg") no-repeat center center;
  height: 260px;
}
@media screen and (max-width: 639px) {
  .upg-header {
    background: url("../img/img_hero_sp.jpg") no-repeat center center;
    background-size: cover;
  }
}

/********
  content
*********/
#content-main {
  padding-top: 0;
  padding-bottom: 50px;
}
.upg-content .upg-content-group {
  padding-bottom: 40px;
}
.upg-content .upg-headline {
  font-size: 15px;
  color: #333;
}
.upg-content .upg-fontgroup-lineup {
  border-top: 1px solid #1fa97d;
}
.upg-content .upg-fontgroup-lineup .upg-font-type span {
  background-color: #1fa97d;
}
.upg-content .upg-font-type {
  text-align: right;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.upg-content .upg-font-type span {
  color: #fff;
  padding: 1px 3px;
}
.upg-content .upg-btn-sample {
  margin-top: 20px;
  width: 200px;
}
.upg-content .upg-btn-sample-fluid {
  margin-top: 20px;
}
.upg-content .btn {
  background-color: #1fa97d;
}
.upg-content .btn:hover {
  background-color: #15c48c;
}
@media screen and (max-width: 639px) {
  .upg-content .upg-font-image {
    height: 36px;
  }
}
.upg-content .upg-font-image img {
  width: 100%;
}
@media screen and (max-width: 639px) {
  .upg-content .col-4 + .col-4 {
    margin-top: 30px;
  }
}
.upg-content .font-title {
  margin-top: 60px;
  margin-bottom: 60px;
}
.upg-content .upg201802-fontexplain .fontmenu {
  overflow: hidden;
}
.upg-content .upg201802-fontexplain .fontmenu dt {
  display: block;
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 0.12em;
  color: #333;
  clear: left;
  float: left;
}
.upg-content .upg201802-fontexplain .fontmenu dd {
  display: block;
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 0.12em;
  color: #333;
  float: left;
  margin-left: 5px;
}
.upg-content .upg201802-fontexplain .fontmenu dd.last {
  width: 73%;
}
.upg-content .upg201802-fontexplain .fontmenu-image {
  margin-top: 20px;
}
.upg-content .upg201802-fontexplain .fontmenu-image img {
  width: 100%;
}
.upg-content .upg201802-fontexplain .fontmenu-title {
  margin-top: 20px;
  margin-bottom: 0;
}
.upg-content .upg201802-fontexplain .fontmenu-title:first-child {
  margin-top: 0;
}
.upg-content .upg201802-fontexplain .fontmenu-text {
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 0.1em;
  color: #000;
}
.upg-content .upg201802-fontexplain .fontmenu-note {
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 0.1em;
  color: #000;
  margin-top: 20px;
}
@media screen and (max-width: 639px) {
  .upg-content .upg201802-fontexplain .fontmenu-text {
    margin-top: 30px;
  }
}

/********
  footer
*********/
.box-gray {
  padding-top: 48px;
  padding-bottom: 48px;
}
@media screen and (max-width: 639px) {
  .box-gray {
    padding-left: 0;
    padding-right: 0;
  }
}

.upg-footer-lineup .link-card .title {
  font-size: 14px;
}

.upg-footer-lineup .link-card .title {
  font-size: 14px;
}

.upg-footer h2 {
  margin: 60px 0 60px;
}
.upg-footer .btn.tw {
  background-color: #0093c4;
}
.upg-footer .btn.tw:hover {
  background-color: #0093c4;
  opacity: 0.8;
}
.upg-footer .btn.tw:active {
  background-color: #3271b9;
  border-color: rgba(0, 0, 0, 0.1);
}
.upg-footer .btn.tw:active:hover {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.upg-footer .btn.fb {
  background-color: #3b5998;
}
.upg-footer .btn.fb:hover {
  background-color: #3b5998;
  opacity: 0.8;
}
.upg-footer .btn.fb:active {
  background-color: #3271b9;
  border-color: rgba(0, 0, 0, 0.1);
}
.upg-footer .btn.fb:active:hover {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.sm-hide {
  display: block !important;
  visibility: visible !important;
}
@media screen and (max-width: 639px) {
  .sm-hide {
    display: none !important;
    visibility: hidden !important;
  }
}

.lg-hide {
  visibility: hidden !important;
  display: none !important;
}
@media screen and (max-width: 639px) {
  .lg-hide {
    display: block !important;
    visibility: visible !important;
  }
}

.products-hero .image img {
  margin-left: -636.48px;
}
@media screen and (max-width: 1300px) {
  .products-hero .image img {
    position: relative;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 639px) {
  .list-accordion .head {
    overflow: hidden;
  }
  .list-accordion .head .toggle {
    position: static;
    margin-top: 0;
    float: right;
  }
}