@charset "UTF-8";
#temp-header {
  position: relative;
  height: 400px;
  background: url("../img/key.jpg") center center no-repeat;
  background-size: cover;
  color: #fff; }
  #temp-header::before {
    top: 0;
    left: 0;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); }
  #temp-header h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 56px;
    text-align: center;
    line-height: 1.8; }
    #temp-header h1 span {
      display: block;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-size: 16px; }
  #temp-header .info-head {
    position: relative;
    display: flex;
    padding-top: 80px;
    width: 1000px;
    margin: 0 auto; }
    #temp-header .info-head figure {
      border: 3px solid #fff;
      width: 400px;
      height: 300px;
      background-size: cover;
      background-position: center; }
      #temp-header .info-head figure img {
        display: none; }
    #temp-header .info-head .txt {
      text-align: left;
      width: 600px;
      padding-left: 50px; }
      #temp-header .info-head .txt time {
        display: inline-block;
        background: #f00;
        padding: 5px 20px;
        margin-bottom: 20px; }
      #temp-header .info-head .txt h1 {
        text-align: left;
        position: static;
        transform: none;
        line-height: 1.4;
        font-size: 32px; }

.infomation-wrap {
  background: #f3f4f6 !important;
  margin-bottom: 150px;
  padding: 50px 0; }
  .infomation-wrap .news-list._column {
    width: 990px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; }
    .infomation-wrap .news-list._column li {
      width: 100%;
      margin: 15px;
      background: #fff; }
    .infomation-wrap .news-list._column article {
      position: relative;
      height: 100%;
      padding-left: 190px;
      min-height: 100px; }
      .infomation-wrap .news-list._column article time {
        display: block;
        font-size: 14px;
        padding: 10px 0; }
      .infomation-wrap .news-list._column article figure {
        position: absolute;
        top: 5px;
        left: 5px;
        height: 90px;
        width: 160px;
        background-size: cover;
        background-position: center; }
        .infomation-wrap .news-list._column article figure img {
          display: none; }
      .infomation-wrap .news-list._column article h3 {
        font-size: 16px;
        padding: 0 10px 20px 0; }
  .infomation-wrap .document {
    background: #fff;
    width: 1000px;
    margin: 0 auto;
    padding: 50px 50px 20px 50px; }
    .infomation-wrap .document p {
      margin-bottom: 50px;
      font-size: 16px;
      line-height: 1.8; }
    .infomation-wrap .document h2 {
      font-size: 24px;
      font-weight: bold;
      border-bottom: 2px solid #555;
      padding: 10px 15px;
      margin-bottom: 30px;
      clear: both; }
    .infomation-wrap .document h3 {
      border-left: 10px solid #555;
      padding-left: 20px;
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 30px;
      clear: both; }
    .infomation-wrap .document h4 {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      clear: both; }
    .infomation-wrap .document ul + h2,
    .infomation-wrap .document p + h2 {
      margin-top: 70px; }
    .infomation-wrap .document .download {
      border-radius: 4px;
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .infomation-wrap .document .download h3 {
        margin-bottom: 10px;
        border: none;
        padding: 0; }
      .infomation-wrap .document .download a {
        display: block;
        width: 70%;
        border: 1px solid #ddd;
        padding: 5px;
        margin-bottom: 10px; }
        .infomation-wrap .document .download a.txt {
          border: none;
          padding: 0;
          font-size: 14px;
          text-align: center; }
      .infomation-wrap .document .download img {
        display: block;
        width: 100%; }
    .infomation-wrap .document .download-list {
      display: flex; }
      .infomation-wrap .document .download-list li {
        width: 50%; }
    .infomation-wrap .document ul.normal {
      margin-left: 20px;
      margin-top: 15px; }
      .infomation-wrap .document ul.normal li {
        position: relative;
        margin-bottom: 10px;
        font-size: 16px;
        padding-left: 20px;
        line-height: 1.5; }
        .infomation-wrap .document ul.normal li::before {
          position: absolute;
          content: "・";
          left: 0; }
    .infomation-wrap .document .img-left {
      float: left; }
    .infomation-wrap .document .flex {
      clear: both;
      display: flex;
      margin-bottom: 30px; }
      .infomation-wrap .document .flex figcaption {
        font-size: 14px;
        margin-top: 10px; }
      .infomation-wrap .document .flex.img-left figure {
        margin-right: 50px; }
      .infomation-wrap .document .flex.img-right {
        justify-content: space-between; }
        .infomation-wrap .document .flex.img-right .text {
          margin-right: 50px; }

@media screen and (max-width: 660px) {
  .sp-clear {
    display: block; }

  #temp-header {
    height: 80vw; }
    #temp-header h1 {
      font-size: 8vw;
      width: 100%; }
      #temp-header h1 span {
        font-size: 4vw; }
      #temp-header h1.steam {
        font-size: 10vw;
        white-space: nowrap; }
    #temp-header.Hauto {
      height: auto;
      padding-bottom: 5vw; }
    #temp-header .info-head {
      flex-direction: column;
      padding-top: 60px;
      width: 100%;
      align-items: center; }
      #temp-header .info-head figure {
        width: 90vw;
        height: 60vw;
        background-size: cover;
        background-position: center; }
        #temp-header .info-head figure img {
          display: none; }
      #temp-header .info-head .txt {
        width: 90vw;
        padding-left: 0px;
        margin-top: 3vw; }
        #temp-header .info-head .txt time {
          font-size: 3.6vw;
          padding: 1vw 4vw;
          margin-bottom: 3vw; }
        #temp-header .info-head .txt h1 {
          font-size: 5vw; }

  .infomation-wrap {
    background: #f3f4f6 !important;
    margin-bottom: 150px;
    padding: 5vw 0; }
    .infomation-wrap .news-list._column {
      flex-direction: column;
      margin: 5vw auto 0;
      width: 90%;
      justify-content: space-between; }
      .infomation-wrap .news-list._column li {
        margin: 0;
        width: auto; }
      .infomation-wrap .news-list._column article {
        padding-left: 30vw; }
        .infomation-wrap .news-list._column article time {
          font-size: 3vw;
          padding: 10px 0;
          font-weight: bold; }
        .infomation-wrap .news-list._column article figure {
          position: absolute;
          top: 1vw;
          left: 1vw;
          height: 25vw;
          width: 25vw; }
          .infomation-wrap .news-list._column article figure img {
            display: none; }
        .infomation-wrap .news-list._column article h3 {
          font-size: 3.6vw;
          padding: 0 3vw 3vw 0; }
    .infomation-wrap .document {
      background: #fff;
      width: 90vw;
      margin: 0 auto;
      padding: 7vw 7vw 1px 7vw; }
      .infomation-wrap .document p {
        margin-bottom: 10vw; }
      .infomation-wrap .document h2 {
        margin-bottom: 10vw; }
      .infomation-wrap .document h3, .infomation-wrap .document h4 {
        margin-bottom: 5vw; }
      .infomation-wrap .document ul + h2,
      .infomation-wrap .document p + h2 {
        margin-top: 15vw; }
      .infomation-wrap .document .download-list {
        flex-direction: column; }
        .infomation-wrap .document .download-list li {
          width: 100%; }
      .infomation-wrap .document ul.normal {
        margin-left: 0vw;
        margin-top: 3vw; }
        .infomation-wrap .document ul.normal li {
          margin-bottom: 2vw;
          font-size: 3.4vw;
          padding-left: 4vw; }
      .infomation-wrap .document .flex {
        margin-bottom: 10vw;
        flex-direction: column; }
        .infomation-wrap .document .flex figcaption {
          margin-top: 2vw; }
        .infomation-wrap .document .flex figure img {
          width: 100%; }
        .infomation-wrap .document .flex.img-left figure {
          margin-right: 0;
          margin-bottom: 5vw; }
        .infomation-wrap .document .flex.img-right .text {
          margin-right: 0;
          margin-bottom: 5vw; } }