.grid {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  text-rendering: optimizespeed; }
  .grid.nowrap {
    flex-flow: row; }

.contain {
  width: 75rem;
  margin: 0 auto;
  padding: 0; }
@media only all and (min-width: 60rem) and (max-width: 74.99rem) {
  .contain {
    width: 60rem; } }
@media only all and (min-width: 48rem) and (max-width: 59.99rem) {
  .contain {
    width: 48rem; } }
@media only all and (min-width: 30.01rem) and (max-width: 47.99rem) {
  .contain {
    width: 30rem; } }
@media only all and (max-width: 30rem) {
  .contain {
    width: 100%; } }
.contain.g-flushed {
  width: 100%; }

.block {
  flex: 1;
  min-width: 0;
  min-height: 0; }
@media only all and (max-width: 47.99rem) {
  .block {
    flex-grow: 0;
    flex-basis: 100%; } }
.block.first {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1; }
.block .last {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1; }
.size-20 {
  flex: 0 20%;
  width: 20%; }
.size-30 {
  flex: 0 30%;
  width: 30%; }
.size-40 {
  flex: 0 40%;
  width: 40%; }
.size-50 {
  flex: 0 50%;
  width: 50%; }
.size-60 {
  flex: 0 60%;
  width: 60%; }
.size-70 {
  flex: 0 70%;
  width: 70%; }
.size-80 {
  flex: 0 80%;
  width: 80%; }
.size-100 {
  flex: 0 100%;
  width: 100%; }

@media only all and (max-width: 47.99rem) {
  body [class*="size-"] {
    flex-grow: 0;
    flex-basis: 100%;
    max-width: 100%; } }

@media only all and (max-width: 47.99rem) {
  @supports not (flex-wrap: wrap) {
    .grid {
      display: block;
      flex-wrap: inherit; }
    .block {
      display: block;
      flex: inherit; } } }
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 400;
  src: local("OpenSans"), local("Open Sans"), url("../font/OpenSans-Regular.woff2") format("woff2"), url("../font/OpenSans-Regular.woff") format("woff"); }
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 600;
  src: local("OpenSans"), local("Open Sans"), url("../font/OpenSans-Bold.woff2") format("woff2"), url("../font/OpenSans-Bold.woff") format("woff"); }

body {
  margin: 0;
  font-family: "OpenSans";
  font-size: 1.2rem; }

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

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0; }

*, div {
  box-sizing: border-box; }

.right {
  text-align: right; }

.center {
  text-align: center; }

p {
  margin: 0 0 1rem; }

.nav-main {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center; }
  .nav-main .active a {
    color: #e95420; }
  .nav-main a {
    padding: 1rem;
    display: block;
    color: #000000; }
    .nav-main a:hover {
      color: #e95420; }

#nav .grid {
  align-items: center; }

#show {
  height: 80vh;
  background: url(/images/tpl/show.jpg) 50% no-repeat;
  background-size: cover; }

.headbox {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  margin: 3rem 0; }

#intro .banner {
  height: 70vh;
  background: url(/images/tpl/intro.jpg) 50% no-repeat;
  background-size: cover;
  margin: 5rem 0; }
  #intro .info .note {
    margin-bottom: 2rem; }
  #intro .info .img-block {
    margin: 0 -3rem; }
    #intro .info .img-block img {
      width: 27rem; }
    #intro .info .img-block .block {
      padding: 3rem;
      text-align: center; }
#intro .concept .images {
  align-items: center; }
  #intro .concept .images .block {
    margin: 3rem 0; }
#intro .concept .note {
  padding: 2rem; }

#feature {
  background-color: #000000;
  color: #ffffff;
  overflow: auto;
  margin-top: 5rem; }
  #feature .banner {
    height: 70vh;
    background: url(/images/tpl/feature.jpg) 50% no-repeat;
    background-size: cover;
    margin-bottom: 5rem; }
  #feature .note {
    padding: 0 5rem;
    text-align: center; }
    #feature .note.over {
      margin-bottom: 3rem; }
    #feature .note.under {
      margin: 5rem 0; }
  #feature .imgages {
    margin: 0 -2rem;
    align-items: center; }
    #feature .imgages img {
      max-width: 27rem;
      max-height: 27rem; }
    #feature .imgages .block {
      padding: 2rem;
      text-align: center; }

.slogan {
  margin: 0 -2rem;
  align-items: center; }
  .slogan .note strong {
    display: block;
    margin-top: 2rem;
    text-align: right; }
  .slogan .block {
    padding: 0 2rem; }

.catalog .item .img {
  position: relative; }
  .catalog .item .img .note {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 3rem;
    background-color: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    opacity: 0;
    transition: 0.4s ease; }
  .catalog .item .img:hover .note {
    opacity: 1; }
.catalog .item .title {
  margin-top: 1rem;
  text-align: center;
  font-weight: 600; }
.catalog .block {
  padding: 0 5rem; }
.catalog .items {
  margin: 0 -5rem; }

#main .contain {
  padding-bottom: 3rem; }

#footer {
  background-color: #000000;
  color: #ffffff; }
  #footer .contain {
    padding: 2rem 0; }
  #footer .grid {
    align-items: center; }