@charset "UTF-8";

/* =============================================================================

Company CSS

・企業情報用CSS「.company-×××」

上記はここに記述する

============================================================================= */

.company-section {
  @media (width > 767px) {
    display:grid;
    grid-template-columns:34.0rem 1fr;
    align-items:flex-start;
  }

  & + .company-section {
    margin-top:20.0rem;
    @media (width <= 767px) {
      margin-top:8.0rem;
    }
  }

  .heading {
    font-size:3.6rem;
    line-height:1.8;
    letter-spacing: .05em;
    @media (width > 767px) {
      position:sticky;
      top:calc(var(--header-height) + 4.0rem);
    }
    @media (width <= 767px) {
      margin-bottom:2.0rem;
      font-size:2.2rem;
    }

    > small {
      display:block;
      margin-top:.8rem;
      font-size:1.4rem;
      line-height:1.6;
      @media (width <= 767px) {
        margin-top:.4rem;
        font-size:1.1rem;
      }
    }
  }
}


/* Table
============================================================================= */
.company-table {
  --tc:18.0rem;
  display:grid;
  grid-template-columns:var(--tc) 1fr;
  font-size:1.6rem;
  line-height:2.2;
  letter-spacing: 0;

  @media (width > 767px) {
    margin-top:-1.0rem;
  }
  @media (width <= 767px) {
    --tc:7.2rem;
    font-size:1.1rem;
  }
  > div {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:subgrid;
    align-items: flex-start;
    grid-auto-flow:column;
    border-bottom:1px solid var(--cc-blue-A);
    padding-block:2.0rem;
    position:relative;

    @media (width <= 767px) {
      padding-block:1.2rem;
    }
  }

  :is(dt,dd) {
  }
  dt {
  }
  dd {
    p + p {
    }
    small {
      font-size:1.3rem;
      line-height:1.5;
      @media (width <= 767px) {
        font-size:1.0rem;
      }

      br + & {
        display:block;
        margin-left:-.5em;
      }
    }
  }
}


/* History
============================================================================= */
.company-history {
  --tc:12.8rem;
  display:grid;
  grid-template-columns:var(--tc) 1fr;
  line-height:2.2;
  letter-spacing: 0;
  position:relative;

  @media (width > 767px) {
    margin-top:-1.0rem;
  }
  @media (width <= 767px) {
    --tc:7.2rem;
    font-size:1.2rem;
  }

  &::before {
    content:"";
    width:2px;
    background-color:var(--cc-blue-A);
    position:absolute;
    inset-block:.5lh;
    left:calc(var(--tc) - 1px);
  }
  > div {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:subgrid;
    align-items: flex-start;
    grid-auto-flow:column;
    position:relative;

    @media (width <= 767px) {
    }

    &:not(:last-child) {
      margin-bottom:5.6rem;
      @media (width <= 767px) {
        margin-bottom:2.4rem;
      }
    }

  }

  :is(dt,dd) {
  }
  dt {
    position:relative;
    > span {
      font-size:2.4rem;
      line-height:1.1;
      letter-spacing: .05em;
      background-image:linear-gradient(135deg,var(--cc-blue-A) 0%,var(--cc-green-D) 150%);
      background-clip:text;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      @media (width <= 767px) {
        font-size:1.4rem;
      }
    }
    > i {
      display:flex;
      justify-content: center;
      align-items: center;
      border-radius:50%;
      width:3.0rem;
      height:3.0rem;
      background-image:linear-gradient(120deg,var(--cc-blue-A) 0%,var(--cc-green-D) 200%);
      position:absolute;
      top:calc(.5lh - 1.5rem);
      right:-1.5rem;
      @media (width <= 767px) {
        width:2.4rem;
        height:2.4rem;
        right:-1.2rem;
        top:calc(.5lh - 1.2rem);
      }
      &::after {
        content:"";
        border-radius:50%;
        width:50%;
        height:50%;
        background-color:var(--cc-white-A);
      }
    }
  }
  dd {
    padding-left:4.5rem;
    @media (width <= 767px) {
      padding-left:2.4rem;
    }
    p + p {
    }
  }
}

.company-certification {
  & + .company-certification {
    margin-top:5.2rem;
    @media (width <= 767px) {
      margin-top:2.8rem;
    }
  }
  .certification-heading {
    margin-bottom:2.0rem;
    font-size:2.0rem;
    line-height:1.6;
    letter-spacing: 0;
    @media (width <= 767px) {
      margin-bottom:1.6rem;
      font-size:1.6rem;
    }
  }

  ul {
    display:flex;
    flex-wrap:wrap;
    gap:1.0rem;
    font-size:1.6rem;
    line-height:1.6;
    letter-spacing: 0;
    @media (width <= 767px) {
      gap:.6rem;
      font-size:1.1rem;
    }

    > li {
      background-color:var(--cc-white-B);
      border-radius:var(--radius-A);
      padding:1.0rem 2.0rem;
      @media (width <= 767px) {
        padding:.6rem 1.4rem;
      }
    }
  }
}


.company-access {
  display:grid;
  @media (width > 767px) {
    grid-template-rows:auto auto 1fr;
    grid-template-columns:1fr 25.0rem;
    grid-template-areas:
      "heading img"
      "address img"
      "tel_fax img"
    ;
    align-items:flex-start;
    row-gap: 1.5rem;
  }
  @media (width <= 767px) {
    grid-template-rows:auto auto 1fr;
    grid-template-columns:1fr 14.0rem;
    grid-template-areas:
      "heading heading"
      "address img"
      "tel_fax img"
    ;
    align-items:flex-start;
  }
  .access-heading {
    grid-area:heading;
    font-size:2.4rem;
    line-height:1.6;
    letter-spacing: 0;
    @media (width > 767px) {
      margin-top:calc(.5em - .5lh);
    }
    @media (width <= 767px) {
      margin-bottom:1.6rem;
      font-size:1.4rem;
    }
  }
  .address {
    grid-area:address;
    font-size:1.6rem;
    line-height:1.8;
    @media (width <= 767px) {
      margin-top:calc(.5em - .5lh);
      font-size:1.2rem;
      line-height:1.6;
    }
    > small {
      font-size:1.4rem;
      @media (width <= 767px) {
        font-size:1.1rem;
      }
    }
  }
  .tel_fax {
    grid-area:tel_fax;
    font-size:1.8rem;
    line-height:1.8;
    letter-spacing: .05em;
    @media (width <= 767px) {
      margin-top:.8rem;
      font-size:1.2rem;
      line-height:1.6;
    }
  }
  .img {
    grid-area:img;
  }
}

.company-map {
  margin-top:8.0rem;
  @media (width <= 767px) {
    margin-top:4.0rem;
  }
  iframe {
    width:100%;
    height:47.0rem;
    @media (width <= 767px) {
      height:28.0rem;
    }
  }
}

/* SelectorName
----------------------------------------------------------------------------- */
.top-SelectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}