/* 作成者名：平野  */
@charset "utf-8";

/* 一部幅のデザインをemで指定するための定義 */
.header_space {
  /* 表示幅が1280pxを超えても画像表示割合を維持するためfont-sizeを変更 */
  /* 表示幅が1280pxを超えても画像表示割合を維持するためサイズはemを使用 */
  font-size: calc(10 / 1280 * 100vw);
}

/* 各ページのヘッダーとしての表示内容  */
.header_menu_space {
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;

  .header_logo {
    width: 12.3rem;
    height: 7.3rem;
    margin-top: 2.1rem;
    margin-left: 2.1rem;

    &.front_page {
      width: 14.8rem;
      height: 8.8rem;
    }
  }

  .header_menu_btn {
    margin-top: 2.2rem;
    margin-right: 2.6rem;
    background-color: #7AC8D0;
    width: 11.3rem;
    height: 3.5rem;
    border-radius: calc(3.5rem / 2);
    text-align: center;

    &:hover {
      cursor: pointer;
    }

    .header_menu_btn_txt {
      font-family: var(--NotoSans);
      font-weight: 900;
      font-size: 1.4rem;
      letter-spacing: 0;
      line-height: 3.5rem;
      color: #FFFFFF;
      opacity: 1;
      visibility: visible;
    }
  }
}

.header_download_wrap {
  display: flex;
  gap: 1.3rem;
}

.line {
  margin-top: 2.2rem;
}

.line_img {
  width: 11.3rem;
  height: 3.5rem;
}

.download_link {
  display: block;
  width: 21.5rem;
  height: 3.5rem;
  color: white;
  font-size: 1.4rem;
  font-weight: 900;
  padding-top: 0.6rem;
  background-color: #1D4763;
  border-radius: 1.8rem;
  margin-top: 2.2rem;
}

.download_link img {
  width: 1.7rem;
  height: 1.5rem;
  margin-top: 0.2rem;
  margin-left: 3rem;
  margin-right: 0.85rem;
}



/* HOME画面のヘッダー背景画像処理 */
.back_img_list_front {
  display: grid;
  gap: 0.7em;
  height: 79.9rem;
  width: 100%;
  grid-template-columns: 77.2em 13.5em 9.4em auto;
  grid-template-rows: 45.0rem 5.9rem 5.9rem auto;
  border-bottom: 0.7em solid #FFFFFF;
  overflow: hidden;

  .img_box1 {
    grid-column: 1;
    grid-row: 1 / 5;
  }

  .img_box2 {
    grid-column: 2 / 5;
    grid-row: 1;
  }

  .img_box3 {
    grid-column: 2;
    grid-row: 2 / 4;
  }

  .img_box4 {
    grid-column: 3;
    grid-row: 2;
  }

  .img_box5 {
    grid-column: 4;
    grid-row: 2 / 5;
  }

  .img_box6 {
    grid-column: 3;
    grid-row: 3;
  }

  .img_box7 {
    grid-column: 2 / 4;
    grid-row: 4;
  }

  .fade_img_box1 {
    width: 77.2em;
    height: 79.9rem
  }

  .fade_img_box2 {
    width: calc(128em - 77.2em);
    height: 45.0rem;
  }

  .fade_img_box3 {
    width: 13.5em;
    height: 12.5rem;
  }

  .fade_img_box4 {
    width: 9.4em;
    height: 5.9rem;
  }

  .fade_img_box5 {
    width: calc(128em - 77.2em - 13.5em - 9.4em);
    height: calc(79.9rem - 45.7rem);
  }

  .fade_img_box6 {
    width: 9.4em;
    height: 5.9rem;
  }

  .fade_img_box7 {
    width: calc(13.5em + 9.4em + 0.7em);
    height: calc(79.9rem - 45.7rem - 5.9rem - 5.9rem);
  }
}

/* 画像のフェード処理 */
/* 各ページヘッダーとも共通に使えるよう外だし */
.img_fead {
  position: relative;

  li {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: fade 15s infinite;



    &:nth-of-type(1) {
      animation-delay: 0s;
    }

    &:nth-of-type(2) {
      animation-delay: 5s;
    }

    &:nth-of-type(3) {
      animation-delay: 10s;
    }
  }
}

/* SP版でのみ表示する画像 */
.back_img_sp {
  opacity: 0;
  visibility: hidden;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.back_pink {
  background-color: #F9CEBF;
  width: 100%;
  height: 100%;
}

.back_red {
  background-color: #B40019;
  width: 100%;
  height: 100%;
}

.back_green {
  background-color: #BFE2DB;
  width: 100%;
  height: 100%;
}

/* 各画面のヘッダー背景画像処理 */
.back_img_list {
  display: grid;
  gap: 0.7em;
  height: 51.9rem;
  width: 100%;
  grid-template-columns: 76.9em 10.1em 12.1em auto;
  grid-template-rows: 20.8rem 13.1rem auto;
  border-bottom: 0.7em solid #FFFFFF;
  overflow: hidden;
  background-color: #fff;









  .img_box1 {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .img_box2 {
    grid-column: 2 / 5;
    grid-row: 1;
  }

  .img_box3 {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .img_box4 {
    grid-column: 4;
    grid-row: 2 / 4;
  }

  .img_box5 {
    grid-column: 2;
    grid-row: 3;
  }

  .img_box6 {
    grid-column: 3;
    grid-row: 3;
  }

  .fade_img_box1 {
    width: 76.9em;
    height: 51.9rem;
  }

  .fade_img_box2 {
    width: calc(128.0em - 77.6em);
    height: 20.8rem;
  }

  .fade_img_box3 {
    width: calc(10.1em + 12.1em + 0.7em);
    height: 13.1rem;
  }

  .fade_img_box4 {
    width: calc(128.0em - 77.6em - 10.1em - 12.1em);
    height: calc(51.9rem - 20.8rem);
  }

  .fade_img_box5 {
    width: 10.1em;
    height: calc(51.9rem - 20.8rem - 13.1rem);
  }

  .fade_img_box6 {
    width: 12.1em;
    height: calc(51.9rem - 20.8rem - 13.1rem);
  }
}

/* メニューが開かれたときの内容 */
.header_nav {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  background-color: #7AC8D0;
  display: flex;

  &.active {
    opacity: 1;
    visibility: visible;
  }

  .nav_back_img {
    width: 50.1em;
  }

  .nav_logo {
    width: 20.4em;
    height: 12.1em;
    position: absolute;
    top: 34.0em;
    left: 14.9em;
  }

  .menu_close_btn {
    width: 5.9em;
    height: 5.9em;
    border-radius: 50%;
    background-color: #B40019;
    margin: 2.8em auto 0 auto;
    position: relative;

    &:hover {
      cursor: pointer;
    }

    .close_btn_line {
      position: absolute;
      /* 線の長さは幅(23px)×ルート2 ※三平方の定理 */
      width: calc(2.3em * sqrt(2));
      height: 0.3em;
      background-color: #FFFFFF;
      top: calc((5.9em - 0.3em) / 2);
      left: calc((5.9em - calc(2.3em * sqrt(2))) / 2);

      &.up_line {
        transform: rotate(45deg);
      }

      &.down_line {
        transform: rotate(-45deg);
      }
    }
  }

  .link_list {
    padding-top: calc(6.9rem + ((5.1rem - 3.5rem) / 2));
    width: calc(128.0em - 50.1em - 10.4em);
    background-color: #7AC8D0;
    text-align: right;
    border-left: #FFFFFF solid 0.9em;
    border-right: #FFFFFF solid 0.3em;

    li {
      padding-right: 1.7rem;
      font-family: var(--NotoSans);
      font-weight: 500;
      font-size: 3.5rem;
      letter-spacing: 0;
      line-height: 5.1rem;
      margin-bottom: 1.9rem;

      &:last-of-type {
        margin-bottom: 0;
      }

      .navi_link {
        color: #FFFFFF;
      }
    }
  }
}

/* 各ページタイトル */
.page_title_space {
  padding-top: 12.2rem;
  background-color: #FFFFFF;
  /* max-width: 128rem; */
  margin: auto;














  .page_title_en {
    margin-left: 8.3rem;
    font-family: var(--NotoSans);
    font-weight: 500;
    font-size: 8.5rem;
    letter-spacing: 0;
    line-height: calc(77 / 85);
    color: #1D4763;
    /* max-width: 128rem; */
    /* margin: auto; */
  }

  .page_title_ja {
    margin-left: 9rem;
    font-family: var(--NotoSans);
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: 0;
    line-height: 1.5;
    color: #1D4763;
  }

  .head_news_title_en {
    margin-left: 5.7rem;
  }

  .head_news_title_ja {
    margin-left: 6.6rem;
  }

  .device_title_en {
    margin-left: 5.7rem;
  }

  .device_title_ja {
    margin-left: 6.6rem;
  }

  &.devicd_back {
    padding-top: 7.5rem;
    background-color: #BFE2DB;
  }

  &.news_back {
    background-color: #FDF7F2;
  }

  &.mashine_back {
    background-color: #F9CEBF;
  }
}

/* フロントページキャッチコピー */
.catchphrase_space_txt {
  margin-left: 2.1rem;
  font-family: var(--NotoSans);
  font-weight: 900;
  font-size: 4.4rem;
  letter-spacing: 0;
  line-height: 5.9rem;
  color: #FFFFFF;
  position: absolute;
  top: auto;
  left: 0;
  z-index: 10;
  bottom: 7rem;
}

/* スマホ版デザイン */
@media screen and (max-width: 699.98px) {

  .header_space {
    font-size: calc(10 / 375 * 100vw);
  }

  /* 各ページのヘッダーとしての表示内容  */
  .header_menu_space {
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;

    .header_logo {
      margin-top: 2.1rem;
      margin-left: 1.5rem;
      width: 13.5rem;
      height: 8.0rem;

      &.front_page {
        width: 13.5rem;
        height: 8.0rem;
      }
    }

    .header_menu_btn {
      background-color: transparent;
      width: 5.0rem;
      height: 3.4rem;
      margin: 4.7rem 1.8rem 0 0;
      position: relative;

      &:hover {
        cursor: pointer;
      }

      .header_menu_btn_txt {
        opacity: 0;
        visibility: hidden;
      }

      .header_menu_line {
        position: absolute;
        display: block;
        width: 5.6rem;
        height: 0.6rem;
        background-color: #B40019;
        border-radius: 0.3rem;

        &.line_top {
          top: -0.3rem;
          left: -0.3rem;
        }

        &.line_middle {
          top: 1.7rem;
          left: 0;
        }

        &.line_bottom {
          top: 1.7rem;
          left: 0;
        }
      }
    }
  }

  /* HOME画面のヘッダー背景画像処理 */
  .back_img_list_front {
    display: block;
    width: 100%;
    height: 66.7em;
    border-bottom: 0;
  }

  /* 各画面のヘッダー背景画像処理 */
  .back_img_list {
    display: block;
    width: 100%;
    height: 39.1em;
    border-bottom: 0;
  }

  /* SP版でのみ表示する画像 */
  .back_img_sp {
    opacity: 1;
    visibility: visible;
  }

  /* メニューが開かれたときの内容 */
  .header_nav {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    background-color: #7AC8D0;
    display: block;

    &.active {
      opacity: 1;
      visibility: visible;
    }

    .nav_back_color {
      position: absolute;
      width: 100%;
      height: 12.2rem;
      top: 0;
      left: 0;
      background-color: #FFFFFF;
    }

    .nav_logo {
      position: absolute;
      width: 13.5rem;
      height: 8.0rem;
      top: 2.1rem;
      left: 1.5rem;
    }

    .menu_close_btn {
      width: 5.0rem;
      height: 5.0rem;
      border-radius: 50%;
      background-color: #B40019;
      margin: 0;
      top: 4.7rem;
      right: 1.8rem;
      position: absolute;

      &:hover {
        cursor: pointer;
      }

      .close_btn_line {
        position: absolute;
        /* 線の長さは幅(23px)×ルート2 ※三平方の定理 */
        width: calc(2.3rem * sqrt(2));
        height: 0.3rem;
        background-color: #FFFFFF;
        top: calc((5.0rem - 0.3rem) / 2);
        left: calc((5.0rem - calc(2.3rem * sqrt(2))) / 2);

        &.up_line {
          transform: rotate(45deg);
        }

        &.down_line {
          transform: rotate(-45deg);
        }
      }
    }

    .link_list {
      margin-top: 12.2rem;
      padding-top: 5.8rem;
      margin-left: 5.7rem;
      width: 100%;
      height: 100vh;
      background-color: #7AC8D0;
      text-align: left;
      border-left: #FFFFFF solid 0.4rem;
      border-right: 0;

      li {
        padding-right: 0;
        padding-left: 2.3rem;
        font-family: var(--NotoSans);
        font-weight: 900;
        font-size: 2.0rem;
        letter-spacing: 0;
        line-height: 2.9rem;
        margin-bottom: 3.2rem;

        &:last-of-type {
          margin-bottom: 0;
        }

        .navi_link {
          color: #FFFFFF;
        }
      }
    }
  }

  /* 各ページタイトル */
  .page_title_space {
    padding-top: 3.9rem;
    background-color: #FFFFFF;

    .page_title_en {
      margin-left: 1.5rem;
      font-family: var(--NotoSans);
      font-weight: 500;
      font-size: 7.0rem;
      /* font-size: 6.5rem; */
      /* font-size: 6.3rem; */
      letter-spacing: 0;
      line-height: 0.98;
      color: #1D4763;

    }

    .page_title_ja {
      margin-left: 1.5rem;
      font-family: var(--NotoSans);
      font-weight: 500;
      font-size: 1.4rem;
      letter-spacing: 0;
      line-height: 4.2rem;
      color: #1D4763;
      margin-top: -0.4rem;
    }

    .company_title_ja {
      font-size: 1.8rem;
      margin-top: 0;
    }

    .body_green_title_ja {
      font-size: 1.8rem;
      margin-top: 0.2rem;
    }

    .device_title_en {
      width: 17.2rem;
      font-size: 5rem;
      line-height: calc(55 / 50);
      margin-bottom: 9.6rem;
    }

    .device_title_ja {
      font-size: 1.8rem;
    }

    &.body_green_space {
      padding-top: 4.4rem;
    }

    &.devicd_back {
      padding-top: 1.5rem;
      background-color: #BFE2DB;
    }

    &.news_back {
      background-color: #FDF7F2;
    }

    &.mashine_back {
      background-color: #F9CEBF;
    }
  }

  /* HOMEページキャッチコピー */
  .catchphrase_space_txt {
    font-family: var(--NotoSans);
    font-weight: 900;
    font-size: 3.6rem;
    letter-spacing: 0;
    line-height: 5.9rem;
    color: #FFFFFF;
    position: absolute;
    /* top: 39.1rem; */
    left: 0;
    margin: 0 1.5rem;
    z-index: 10;
  }

  .line {
    position: fixed;
    right: 1.5rem;
    bottom: 0.7rem;
  }

  .line_img {
    width: 12.4rem;
    height: 3.8rem;
  }

  .download_link {
    position: fixed;
    bottom: 1rem;
    left: 1.5rem;
    width: 21.7rem;
    height: 3.8rem;
    font-size: 1.4rem;
    padding-top: 0.4rem;
    border-radius: 0.4rem;
  }

  .download_link img {
    margin-top: 0.4rem;
    margin-left: 3.1rem;
    margin-right: 1.3rem;
    width: 1.9rem;
    height: 1.7rem;
    position: relative;
    top: 0.3rem;
  }
}