@charset "UTF-8";

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

About CSS

・私達についてページ用CSS「.about-×××」

上記はここに記述する

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

/* 冒頭
----------------------------------------------------------------------------- */
.about-intro {
  padding-block:24.8rem 24.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:15.4rem 12.0rem;
  }

  .heading {
    @media (width > 640px) {
      position:sticky;
      top:12.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:4.8rem;
    }

    .p-ff-nhgdp-55 {
      display:block;
      margin-bottom:2.0rem;
      font-size:1.8rem;
      line-height:1.1;
      letter-spacing: .1em;
      @media (width <= 640px) {
        margin-bottom:1.6rem;
        font-size:1.2rem;
      }
    }
  }

  .desc {
    @media (width > 640px) {
      margin-top:50vh;
      margin-left:auto;
      width:fit-content;
    }
    @media (width <= 640px) {
    }
    span {
      display: inline-block;
    }
  }

  .js-infiniteloop {
    --loop-duration:24s;
    padding-top:20.0rem;
    @media (width <= 640px) {
      --loop-duration:16s;
      padding-top:8.0rem;
    }
    .js-infiniteloop-item p {
      padding-right:.5em;
      -webkit-background-clip:text;
      background-image:var(--grad-A);
      background-size:cover;
      color:transparent;
      @media (width <= 640px) {
      }
    }
  }
}


/* 冒頭
----------------------------------------------------------------------------- */
.about-message {
  @media (width > 640px) {
    display:grid;
    grid-template-rows:69.6rem auto;
    grid-template-columns:49.6rem 1fr;
    gap:4.4rem 10.4rem;
  }
  @media (width <= 640px) {
  }

  .img {

  }
  .text {
    @media (width > 640px) {
      grid-column:2;
      grid-row:1/-1;
    }
    @media (width <= 640px) {
      margin-top:4.8rem;
    }
    .heading {
      @media (width > 640px) {
        margin-bottom: 5.5rem;
      }
      @media (width <= 640px) {
        margin-block:4.8rem 4.0rem;
      }
    }
    .desc + .desc {
      margin-top:1lh;
    }
  }
  .name_position {
    width:fit-content;
    margin-left:auto;
    text-align: right;

    .position {
      margin-bottom:.2rem;
      font-size:1.2rem;
      line-height:1.8;
      letter-spacing: .18em;
    }
    .name {
      display:flex;
      align-items: center;
      gap:1.0rem;
      @media (width <= 640px) {
        justify-content: flex-end;
      }
      .ja {
        font-size:2.2rem;
        line-height:1.6;
        letter-spacing: .25em;
        @media (width <= 640px) {
          font-size:1.8rem;
        }
      }
      .en {
        margin-top:.3em;
        font-size:1.2rem;
        line-height:1.1;
        letter-spacing: .12em;
        @media (width <= 640px) {
        }
      }
    }
  }
}


/* 歴史
----------------------------------------------------------------------------- */
.about-history {
  display:grid;
  position:relative;
  @media (width > 640px) {
    grid-template-columns:12.0rem 1fr;
    padding-right:40.0rem;
  }
  @media (width <= 640px) {
  }

  .row {
    border-bottom:1px solid #4A4A4A;
    @media (width > 640px) {
      grid-column:1/-1;
      display:grid;
      grid-template-columns:subgrid;
      padding-block:2.0rem 1.8rem;
      padding-right:1.6rem;
    }
    @media (width <= 640px) {
      padding-block:2.4rem;
    }
    &:first-child {
      border-top:1px solid #4A4A4A;
    }
  }
  .th {
    font-size:1.8rem;
    line-height:2.1;
    letter-spacing: .15em;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      margin-bottom:1.2rem;
      font-size:1.6rem;
    }
  }
  .td {
    font-size:1.5rem;
    line-height:1.8;
    letter-spacing: .25em;
    @media (width > 640px) {
      margin-top:.4rem;
    }
    @media (width <= 640px) {
      font-size:1.4rem;
      letter-spacing: .2em;
    }

    .month {
      display:grid;
      grid-template-columns: 4.8rem 1fr;
      gap:.8rem 2.0rem;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        grid-template-columns: auto 1fr;
        gap:.8rem;
      }
    }
    .mth {
      grid-column:1/2;
      text-align: right;
    }
    .mtd {
      grid-column:2/3;
    }

    .img {
      --my-img-mb:1.2rem;
      color:var(--cc-gray-A);
      @media (width > 640px) {
        --my-gap:7.4rem;
        --my-h:calc(29.6rem * (378 / 592));
        height:var(--my-h);
        width:29.6rem;
        position:absolute;
        top:calc((var(--my-h) + var(--my-img-mb) + 1lh + var(--my-gap)) * (var(--row) - 1));
        right:0;
      }
      @media (width <= 640px) {
        --my-img-mb:.8rem;
        margin-top:3.2rem;
        margin-inline:auto;
        width:26.4rem;
      }

      img {
        margin-bottom:var(--my-img-mb);
      }
    }
  }
}


/* 売上推移
----------------------------------------------------------------------------- */
.about-sales_transition {
  @media (width > 640px) {
    margin-top:-5.6rem;
  }
  @media (width <= 640px) {
  }

  img {
    @media (width <= 640px) {
      max-width:unset;
    }
  }
}

/* 組織
----------------------------------------------------------------------------- */
.about-organization {
  @media (width > 640px) {
    margin-top:-5.6rem;
  }
  @media (width <= 640px) {
  }

  .intro {
    margin-bottom:8.0rem;
    @media (width > 640px) {
      display:flex;
      align-items: center;
      justify-content: space-between;
    }
    @media (width <= 640px) {
      margin-bottom:6.4rem;
    }

    .l-button-A {
      @media (width <= 640px) {
        margin-top:4.0rem;;
        margin-left:auto;
      }
    }
  }
}


/* 由来
----------------------------------------------------------------------------- */
.about-origin_of_name {
  @media (width > 640px) {
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  @media (width <= 640px) {
  }

  .img {
    @media (width > 640px) {
      padding-inline:8.0rem;
    }
    @media (width <= 640px) {
      width:fit-content;
      margin-inline:auto;
    }
  }
  .text {
    .heading {
      margin-bottom:6.4rem;
      @media (width <= 640px) {
        margin-block:5.6rem 4.0rem;
      }
    }
  }
}


/* アクセス
----------------------------------------------------------------------------- */
.about-access {
  @media (width > 640px) {
    border-top:1px solid var(--cc-gray-A);
  }
  @media (width <= 640px) {
    display:grid;
    gap:8.0rem;
  }

  .item {
    @media (width > 640px) {
      display:grid;
      align-items: center;
      grid-template-columns: 1fr auto;
      grid-auto-flow: column;
      border-bottom:1px solid var(--cc-gray-A);
      padding-block:4.8rem;
    }
    @media (width <= 640px) {
    }

    .img {
      @media (width > 640px) {
        grid-column: 2/3;
      }
      @media (width <= 640px) {
      }
    }

    .text {
      @media (width > 640px) {
        padding-left:2.4rem;
      }
      @media (width <= 640px) {
      }
      .name {
        margin-bottom:3.2rem;
        @media (width > 640px) {
          font-size:1.9rem;
          line-height: 1.8;
          letter-spacing: .2em;
        }
        @media (width <= 640px) {
          margin-block:3.2rem 1.6rem;
        }
      }
      .address {
        margin-bottom:1.6rem;
        @media (width > 640px) {
          line-height:2;
          letter-spacing: .2em;
        }
      }
      .tel_fax {
        @media (width > 640px) {
          line-height:1.8;
          letter-spacing: .15em;
        }
        @media (width <= 640px) {
        }
      }
      .l-button-A {
        margin-top:6.4rem;
        @media (width <= 640px) {
          margin-top:3.2rem;
        }
      }
    }
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.about-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}