@charset "UTF-8";
/*
編集はscssで行うこと
*/
html {
  overflow: auto; }

body {
  overflow: hidden; }

@media screen and (max-width: 767px) {
  .free-html .container-fluid {
    padding: 0 4px; } }

.contents {
  max-width: 1200px;
  margin: 0 auto; }
  .contents .note {
    font-size: 0.9em; }
  .contents > dl {
    margin-top: 3em; }
  .contents sub {
    bottom: 0;
    margin-left: 2px; }
  .contents h1 {
    margin: 20px 0 0;
    padding: 0; }
  .contents h2 {
    margin-top: 60px;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    line-height: 1.3; }
    @media screen and (min-width: 768px) {
      .contents h2 {
        font-size: 32px; } }
  .contents p {
    text-align: justify; }
  .contents table + .note {
    margin-top: -8px; }
  .contents .table th {
    vertical-align: middle;
    background-color: #f5f5f5; }
  .contents td {
    background-color: #fff;
    text-align: justify;
    vertical-align: middle !important; }
  @media screen and (max-width: 767px) {
    .contents .table th,
    .contents .table td {
      display: block;
      width: 100% !important; } }
  .contents #header {
    background-color: #000;
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%; }
  .contents #navi {
    padding: 40px 0 70px;
    background-color: #e8e8e8;
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%; }
    .contents #navi h3 {
      margin: 0;
      padding: 30px 0 15px;
      font-size: 21px;
      font-weight: normal;
      text-align: center;
      line-height: 1.3; }
      @media screen and (min-width: 768px) {
        .contents #navi h3 {
          font-size: 28px; } }
    .contents #navi > div {
      display: flex;
      flex-wrap: wrap; }
      .contents #navi > div a {
        display: block;
        padding: 20px; }
        @media screen and (max-width: 767px) {
          .contents #navi > div a {
            padding: 10px; } }
        @media screen and (min-width: 768px) {
          .contents #navi > div a:hover img {
            opacity: 0.5;
            transition: .6s; } }
      .contents #navi > div h4 {
        text-align: center; }
      .contents #navi > div img {
        margin: 0 auto;
        transition: .6s; }
    .contents #navi .pickup a {
      width: 50%; }
      @media screen and (max-width: 767px) {
        .contents #navi .pickup a {
          width: 100%; } }
    .contents #navi .info a {
      width: 33%; }
      @media screen and (max-width: 767px) {
        .contents #navi .info a {
          width: 50%; } }
  .contents #exhibition {
    padding: 40px 0 70px; }
    .contents #exhibition > img {
      margin: 20px auto 40px; }
      @media screen and (min-width: 768px) {
        .contents #exhibition > img {
          max-width: 780px; } }
    .contents #exhibition .corners {
      max-width: 820px;
      margin: 0 auto; }
      @media screen and (min-width: 768px) {
        .contents #exhibition .corners {
          display: flex;
          flex-wrap: wrap; } }
      .contents #exhibition .corners > div {
        padding: 20px; }
        @media screen and (min-width: 768px) {
          .contents #exhibition .corners > div {
            width: 50%; } }
      .contents #exhibition .corners h3 {
        margin: 0;
        padding: 0 0 10px;
        text-align: center; }
    .contents #exhibition .present {
      padding: 30px 0;
      text-align: center; }
      .contents #exhibition .present img {
        margin: 0 auto; }
  .contents #features {
    background-color: #000;
    color: #fff;
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%; }
    .contents #features .feature {
      padding: 100px 0;
      background-size: cover;
      background-position: 50% 50%;
      text-shadow: 0 1px 5px black; }
      @media screen and (min-width: 768px) {
        .contents #features .feature {
          padding: 160px 50px; } }
      .contents #features .feature h3 {
        margin: 0;
        padding: 0 0 20px;
        font-size: 1.8em;
        text-align: center; }
        @media screen and (min-width: 768px) {
          .contents #features .feature h3 {
            font-size: 2em; } }
      .contents #features .feature > div {
        padding: 0 10px; }
        @media screen and (min-width: 768px) {
          .contents #features .feature > div {
            display: flex;
            flex-direction: row-reverse;
            padding: 0; } }
      .contents #features .feature .text {
        display: flex;
        flex-direction: column;
        align-items: center; }
        @media screen and (min-width: 768px) {
          .contents #features .feature .text {
            width: 66%;
            padding-right: 20px; } }
        .contents #features .feature .text .note {
          opacity: 0.8; }
        .contents #features .feature .text a {
          color: #fff; }
      .contents #features .feature .image {
        margin-bottom: 20px; }
        @media screen and (min-width: 768px) {
          .contents #features .feature .image {
            width: 33%;
            margin-bottom: 0; } }
  .contents #seminar {
    padding: 40px 0 70px; }
    .contents #seminar h3 {
      margin: 15px 0 5px;
      font-size: 17px;
      line-height: 1.3; }
      @media screen and (min-width: 768px) {
        .contents #seminar h3 {
          margin-top: 7px;
          font-size: 18px; } }
    .contents #seminar h4 {
      margin-top: 2px; }
      @media screen and (max-width: 767px) {
        .contents #seminar h4 {
          font-size: 15.5px; } }
    .contents #seminar p {
      margin: 0; }
    .contents #seminar tr td {
      padding: 10px 15px;
      border-width: 0; }
      @media screen and (min-width: 768px) {
        .contents #seminar tr td {
          padding: 20px; } }
    @media screen and (max-width: 767px) {
      .contents #seminar tr td:last-child {
        padding-top: 0;
        padding-bottom: 20px; } }
    .contents #seminar tr:nth-child(odd) td {
      background-color: #f8f8f8; }
  .contents #overview {
    padding: 5px 0 70px;
    background-color: #e8e8e8;
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%; }
    .contents #overview h3 {
      margin: -20px 0 20px;
      text-align: center; }
    .contents #overview th {
      color: #f8f8f8;
      background-color: #000;
      min-width: 180px;
      text-align: center; }
      .contents #overview th img {
        margin: auto;
        max-width: 200px; }
  @media screen and (min-width: 768px) {
    .contents .logos {
      display: flex; } }
  @media screen and (max-width: 767px) {
    .contents .logos img {
      margin: 0 auto; } }
  .contents .products {
    display: flex;
    justify-content: center;
    margin: 20px 0 10px; }
    .contents .products figure {
      max-width: 300px;
      margin: 0 5px;
      text-align: center; }
      @media screen and (min-width: 768px) {
        .contents .products figure {
          margin: 0 20px; } }
      .contents .products figure img {
        margin-bottom: 5px; }

@media screen and (min-width: 768px) {
  /* to-page-top */
  div#wrap-to-page-top > div > div {
    width: 130px; } }
@media print {
  body {
    -webkit-print-color-adjust: exact; }

  #wrap-to-page-top {
    display: none; }

  .spectable-fixedcol-wrapper {
    display: none !important; } }