@charset "utf-8";

/* ---------- メインビジュアル ---------- */
#top_mv {
  margin-top: 80px;

  .item {
    position: relative;
  }

  img {
    width: 100%;
    height: auto;
    /* aspect-ratio: 5 / 2;
    object-fit: cover; */
  }

  p.phrase {
    position: absolute;
    padding: 11.333px 22.666px;
    font-size: max(18.286px, 2.36109vw);
    /* SP時のlarger-sizeを最小値とし、775pxから拡大を始める。 */
    color: var(--area-text-color);
    z-index: 2;
    transition: color 0s 0.65s;

    @media(max-width: 767px) {
      max-width: 55vw;
    }

    @media(max-width: 349px) {
      max-width: 60vw;
      font-size: 5.23954vw;
    }
  }

  p.phrase::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #4448;
    z-index: -1;
    transition: width 0.3s, height 0.3s 0.3s ease-out, background-color 0.15s 0.7s linear;
  }

  p.phrase.top {
    top: 5vw;
  }

  p.phrase.middle {
    top: 50%;
    translate: 0 -50%;
  }

  p.phrase.bottom {
    bottom: 5vw;
  }

  p.phrase.left {
    left: 3.54167vw;
  }

  p.phrase.center {
    left: 50%;
    translate: -50%;
  }

  p.phrase.right {
    right: 3.54167vw;
  }

  p.phrase.seal {
    color: transparent;
  }

  p.phrase.middle.center {
    translate: -50% -50%;
  }

  p.phrase.seal::before {
    background-color: var(--area-text-color);
    height: 2px;
    width: 0;
  }

  @media(max-width: 767px) {
    margin-top: 60px;
  }
}

/* ---------- 第1コンテンツ ---------- */
#top_first_content {
  margin-top: 0;

  .area_wrap {
    padding: 0;
  }

  .outer_wrap {
    margin-top: 0;
  }

  .inner_wrap {
    position: relative;
    top: -100px;
    padding: 32px;
    background-color: var(--area-text-color);
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    transition-property: translate, opacity, visibility;
    transition-duration: 0.4s;
  }

  .inner_wrap.seal {
    translate: 0 100px;
    opacity: 0;
    visibility: hidden;
  }

  @media(max-width: 767px) {
    .area_wrap {
      padding-block: 16px;
    }

    .inner_wrap {
      position: static;
      padding: 16px 16px 32px;
    }
  }
}

/* ---------- News ---------- */
#news {

  .loop_wrap {
    gap: 32px;
  }

  .loop_container {
    padding: 32px;
    background-color: var(--bg-color);
  }

  @media(max-width: 767px) {
    .loop_wrap {
      gap: 16px;
    }

    .loop_container {
      padding: 16px;
    }
  }
}

/* ----------  ナビパネル ---------- */
#nav_panel {
  .panel_wrap {
    display: grid;
    grid-template-columns: repeat(4, min(340px, calc((100% - 80px) / 4)));
    justify-content: center;
    align-items: center;
    gap: calc(80px / 3);
  }

  .panel_item {
    max-width: 340px;
    border: 1px solid var(--border-color);

    a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
    }

    img {
      aspect-ratio: 4 / 3;
      object-fit: cover;
      transition: opacity 0.15s linear;
    }

    a:hover img {
      opacity: 0.75;
    }

    p {
      position: relative;
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 1rem;
      border-top: 1px solid var(--border-color);
      font-size: var(--larger-size);
      line-height: 1;
      transition: color 0.15s linear;
    }

    p::before {
      content: "";
      display: block;
      width: 2px;
      height: calc(1em + 2px);
      background-color: var(--main-color);
      transition: background-color 0.15s linear;
    }

    p::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 0;
      height: 100%;
      background-color: var(--main-color);
      transition: width 0.15s linear;
      z-index: -1;
    }

    a:hover p {
      color: var(--area-text-color);
    }

    a:hover p::before {
      background-color: var(--area-text-color);
    }

    a:hover p::after {
      left: 0;
      width: 100%;
    }
  }

  @media(max-width: 1279px) {
    .panel_wrap {
      grid-template-columns: repeat(2, min(340px, calc((100% - 80px) / 2)));
    }
  }

  @media(max-width:767px) {
    .panel_wrap {
      grid-template-columns: clamp(225px, 60vw, 340px);
    }
  }
}

/* ---------- about us CEO, Team ---------- */
#aboutus_members {
  .area_wrap {
    padding-bottom: 300px;
  }

  .outer_wrap {
    position: relative;
    z-index: 2;
  }

  .area_wrap_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(auto auto auto auto);
  }

  .area_wrap_img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
  }

  #leadership {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 148px;

    .right_side {
      width: 720px;
    }
  }

  #team {
    .loop_wrap {
      gap: 64px;
    }

    .loop_container {
      display: flex;
      flex-direction: column;
      justify-content: start;
      gap: 32px;
    }

    .left_side {
      align-self: flex-start;
    }

    .right_side {
      align-self: flex-end;
      max-width: 720px;
    }

    p {
      margin: 0;
    }
  }

  .members_photo {
    position: relative;
    margin: -200px auto 0;
  }

  @media(max-width: 991px) {
    margin-top: 64px;

    .area_wrap {
      padding-block: 64px;
    }

    .outer_wrap:not(:first-of-type) {
      margin-top: 64px;
    }

    #leadership {
      flex-direction: column-reverse;
      gap: 64px;

      .right_side {
        width: 100%;
      }
    }

    hr {
      margin-top: 64px;
    }

    .members_photo {
      margin-top: 0;
    }
  }

  @media(max-width: 767px) {
    margin-top: 32px;

    .area_wrap {
      padding-block: 32px;
    }

    .outer_wrap:not(:first-of-type) {
      margin-top: 32px;
    }

    hr {
      margin-top: 32px;
    }

    #team {
      .loop_wrap {
        gap: 32px;
      }

      .loop_container {
        gap: 16px;
      }

      .right_side {
        max-width: 100%;
      }
    }
  }
}

/* ---------- about us Location ---------- */
#aboutus_location {

  .flex_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(32px, 3.22581vw, 128px);
    margin-top: 64px;
  }

  .left_side {
    width: min(50vw, 512px);
    padding: 32px;
    background-color: var(--bg-color);
    white-space: nowrap;
    flex-shrink: 0.5;
  }

  .right_side {
    flex-shrink: 2.5;
  }

  img {
    width: clamp(0px, 100%, 800px);
  }

  @media(max-width: 991px) {
    margin-top: 64px;

    .flex_wrap {
      flex-direction: column;
      justify-content: start;
      gap: 32px;
    }

    .left_side {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 800px;
      white-space: unset;
    }
  }

  @media(max-width: 767px) {
    margin-top: 32px;

    .flex_wrap {
      margin-top: 32px;
    }

    .left_side {
      padding: 16px;
    }
  }
}

/* ---------- Technology, Discovery Service ---------- */
#technology_content,
#discovery_service_content {

  .loop_wrap {
    gap: 200px;
  }

  td,
  th {
    font-weight: 700;
  }

  @media(max-width: 767px) {
    .loop_wrap {
      gap: 64px;
    }
  }
}

/* ---------- Pipeline ---------- */
#pipeline_our_pipeline {

  td,
  th {
    text-align: start;
  }
}

#pipeline_description {
  .loop_wrap {
    gap: 64px;
  }

  .editable_inner {
    margin-top: 32px;
  }
}

#pipeline_publication {

  .editable_inner+.publication_list_wrap {
    margin-top: 64px;

    @media(max-width: 767px) {
      margin-top: 32px;
    }
  }

  .publication_list_wrap {
    ul {
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
      padding: 0;
      list-style-type: none;
    }

    li {
      width: 100%;
      padding: 32px 20px;
      border-bottom: 1px solid var(--border-color);
    }

    li:first-of-type {
      padding-top: 0;
    }

    li:last-of-type {
      padding-bottom: 0;
      border-bottom: none;
    }

    a {
      font-size: var(--larger-size);
      box-decoration-break: clone;
      transition-duration: 0.45s;
      animation-duration: 0.45s;

      @media(max-width: 991px) {
        transition-duration: 0.4s;
        animation-duration: 0.4s;
      }

      @media(max-width: 767px) {
        transition-duration: 0.25s;
        animation-duration: 0.25s;
      }
    }
  }
}

/* ---------- Contact ---------- */
#contact_information {
  p.contact_intro {
    width: fit-content;
    margin: 0 auto 64px;
  }

  .bg {
    display: flex;
    justify-content: space-around;
    align-items: start;
    background-color: var(--bg-color);
    width: 100%;
    padding: 32px;
  }

  @media(max-width: 767px) {
    p {
      margin: 0 auto 32px;
    }

    .bg {
      flex-direction: column;
      justify-content: start;
      gap: 16px;
      padding: 16px;
    }
  }
}

#contact_form {
  form {
    p {
      font-size: var(--smaller-size);
    }

    .flex_wrap {
      display: flex;
      justify-content: space-between;
      align-items: start;
    }

    .name {
      gap: 60px;
    }

    .confirm label {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 32px;
    }

    .confirm label p {
      margin-top: 0;
      line-height: 1.5;
    }

    label {
      display: block;
      flex: 1;
      margin-top: 32px;
      font-size: var(--smaller-size);
    }

    input:not([type=checkbox]) {
      width: stretch;
      height: 48px;
      margin-top: 8px;
      padding-inline: 9.7145px;
      font-size: var(--text-size);
    }

    input[type=checkbox] {
      scale: 1.5;
    }

    textarea {
      display: block;
      width: stretch;
      height: 192px;
      margin-top: 8px;
      padding: 14.2855px 9.7145px;
      font-size: var(--text-size);
      line-height: 1.35;
      resize: none;
    }

    button[type=submit] {
      position: relative;
      display: block;
      width: fit-content;
      margin: 64px auto 0;
      padding: 19px 57px;
      border: solid 1px var(--border-color);
      background: none;
      font-size: var(--larger-size);
      text-decoration: none;
      transition: 0.15s linear;
    }

    button[type=submit]::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 100%;
      background-color: var(--main-color);
      transition: width 0.13s linear;
      z-index: -1;
    }

    button[type=submit]:hover {
      color: var(--area-text-color);
    }

    button[type=submit]:hover::after {
      left: 0;
      width: 100%;
    }
  }

  form:has(input[type=checkbox]:not(:checked)) button {
    color: var(--border-color);
    background-color: #ddd;
    pointer-events: none;
  }

  @media(max-width: 767px) {
    h2 {
      margin-block: 64px 8px;
    }

    form {
      .flex_wrap.name {
        flex-direction: column;
        justify-content: start;
        gap: 0;
      }

      confirm label {
        gap: 16px;
      }

      label {
        width: 100%;
        margin-top: 24px;
      }

      input:not([type=checkbox]) {
        height: 32px;
        margin-top: 4px;
        padding-inline: 9.143px;
      }

      textarea {
        height: 128px;
        margin-top: 4px;
        padding: 6.857px 9.143px;
      }

      button[type=submit] {
        margin: 32px auto 0;
        padding: 18.5px 36.5px;
      }
    }
  }
}

/* ---------- 送信完了画面 ---------- */
#submission_complete {
  p {
    text-align: center;
  }

  a.button {
    margin-top: 100px;
    transition-duration: 0.175s;
  }

  @media(max-width: 767px) {
    a.button {
      margin-top: 64px;
    }
  }
}

/* ---------- Not Found ---------- */

#not_found {

  a.button {
    margin-top: 100px;
    transition-duration: 0.175s;
  }

  @media(max-width: 767px) {
    a.button {
      margin-top: 64px;
    }
  }
}