@charset "utf-8";

/* ↓↓↓ guide ↓↓↓ */
.guide {
  padding: 12rem 3rem;

  .block {
    +.block {
      margin-top: 9.6rem;
    }
  }

  .about_list {
    margin-top: 3.2rem;
    border-top: 1px solid #F0F0F0;

    .item {
      display: flex;
      gap: 1.6rem;
      padding: 2.4rem 0 2.4rem 0.5rem;
      border-bottom: 1px solid #F0F0F0;

      .heading {
        min-width: 10.6rem;
        font-size: max(10px, 1.5rem);
        font-weight: 700;
        color: var(--cosmos-blue);
      }

      .text {
        font-size: max(10px, 1.5rem);
        color: #222;
      }
    }
  }

  .pdf_btn {
    position: relative;
    display: block;
    max-width: 100%;
    width: max-content;
    background-color: #fff;
    border: 1px solid #D0DEE5;
    border-radius: 8rem;
    font-size: max(10px, 1.3rem);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--cosmos-blue);
    padding: 1.2rem 4.4rem 1.3rem 2rem;
    margin: 2.4rem auto 0;
    transition: border 0.3s ease, color 0.3s ease, background-color 0.3s ease;

    &::after {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 50%;
      right: 2rem;
      width: 1.2rem;
      height: 1.6rem;
      background: url(/wp/wp-content/themes/cosmos-cpo/img/common/pdf_icon.svg) no-repeat;
      background-size: cover;
    }
  }

  @media screen and (min-width: 769px) {
    .pdf_btn:hover {
      border: 1px solid var(--cosmos-blue);
      background-color: var(--cosmos-blue);
      color: #fff;
    }
  }

  .history_list {
    margin-top: 3.2rem;

    .item {
      position: relative;
      display: flex;
      padding: 1.6rem 0;

      &:first-of-type {
        padding-top: 2.4rem;
      }

      &:last-of-type {
        padding-bottom: 2.4rem;
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 12.6rem;
        width: 1px;
        height: 100%;
        background-color: #F0F0F0;
      }
    }

    .year {
      position: relative;
      min-width: 12.6rem;
      font-size: max(10px, 1.5rem);
      font-weight: 700;
      line-height: 2;

      &::after {
        content: '';
        position: absolute;
        translate: 50% 0;
        top: 0.3em;
        right: 0;
        width: 2rem;
        height: 2rem;
        background: url(/wp/wp-content/themes/cosmos-cpo/img/common/cosmos_kirameki.svg) no-repeat;
        background-size: cover;
      }
    }

    .text {
      font-size: max(10px, 1.5rem);
      color: #222;
      padding-left: 2.6rem;

      .attention {
        display: block;
        font-size: max(10px, 1.2rem);
        font-weight: 500;
        line-height: 2;
        color: #646464;
      }
    }
  }

  .office_box {
    margin-top: 3.2rem;
    overflow: hidden;

    +.office_box {
      margin-top: 6.4rem;
    }

    .area {
      position: relative;
      width: max-content;
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
      background-color: var(--cosmos-blue);
      border-radius: 1rem 1rem 0 0;
      margin-left: 2.4rem;
      margin-bottom: 2.4rem;
      padding: 1rem 3.2rem 1rem 3.6rem;

      &::before {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        left: 1.6rem;
        width: 1.6rem;
        height: 1.6rem;
        mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/cosmos_kirameki.svg);
        mask-size: cover;
        background-color: #fff;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: -2.4rem;
        width: 100vw;
        height: 1px;
        background-color: var(--cosmos-blue);
      }
    }

    .text {
      font-size: max(10px, 1.5rem);
      color: #222;
    }

    iframe {
      width: 100%;
      height: 40rem;
      margin-top: 2.4rem;
    }

    .wrap {
      display: flex;
      align-items: center;
      gap: 6.4rem;
      background-color: #F7F9FA;
      border: 1px solid #F0F0F0;
      border-radius: 2rem;
      margin-top: 2.4rem;
      padding: 3.2rem 4rem;

      .heading {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2.4rem;
        font-size: max(10px, 1.5rem);
        font-weight: 700;

        &::before {
          content: '';
          width: 8rem;
          height: 8rem;
          border-radius: 50%;
          background: url(/wp/wp-content/themes/cosmos-cpo/img/company/guide/access_icon.svg) no-repeat;
          background-size: cover;
        }
      }

      .access_list {
        .item {
          position: relative;
          font-size: max(10px, 1.5rem);
          letter-spacing: 0.1em;
          padding-left: 2.4rem;

          &::before {
            content: '';
            position: absolute;
            top: 0.6em;
            left: 0;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            background-color: var(--cosmos-blue);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .guide {
    padding: 6.4rem 2rem 8rem;

    .block {
      +.block {
        margin-top: 8rem;
      }
    }

    .about_list {

      .item {
        flex-direction: column;
        gap: 1.2rem;
        padding: 2.4rem 0;

        .heading {
          min-width: initial;
        }
      }
    }

    .pdf_btn {
      font-size: max(10px, 1.2rem);
      margin: 2.4rem auto 0;
    }

    .history_list {

      .item {
        flex-direction: column;
        padding-left: 2.8rem;

        &::before {
          left: 1rem;
        }
      }

      .year {
        position: relative;
        min-width: 12.6rem;
        font-size: max(10px, 1.5rem);
        font-weight: 700;
        line-height: 2;

        &::after {
          translate: -50% 0;
          right: initial;
          left: -1.7rem;
        }
      }

      .text {
        padding-left: 0;

        .attention {
          margin-top: 0.6rem;
        }
      }
    }

    .office_box {

      +.office_box {
        margin-top: 4.8rem;
      }

      .area {
        margin-left: 0;

        &::after {
          left: 0;
        }
      }

      .text {
        font-size: max(10px, 1.5rem);
        color: #222;
      }

      iframe {
        height: 33.5rem;
      }

      .wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        padding: 1.6rem 2rem 2.4rem;

        .heading {
          gap: 1.6rem;

          &::before {
            width: 7.8rem;
            height: 7.8rem;
          }
        }

        .access_list {
          .item {
            font-size: 1.2rem;
            padding-left: 1.4rem;

            &::before {
              top: 0.5em;
            }
          }
        }
      }
    }
  }
}

/* ↑↑↑ guide ↑↑↑ */