@charset "UTF-8";

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

Company PROFILE CSS

・会社案内ページ用CSS「.company-×××」

上記はここに記述する

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



/* ヘッダー
============================================================================= */
.company-header {
  position:relative;
  @media (width > 640px) {
    display:flex;
    flex-direction: column;
    margin-bottom:20.0rem;
    height:calc(100dvh - var(--header-height));
  }
  @media (width <= 640px) {
    padding-block:3.6rem 7.2rem;
    padding-inline:var(--body-pd);
  }
  .img {
    z-index: -1;
    @media (width > 640px) {
      width:calc(50% + 25.6rem);
      height:calc(100% - 22.0rem);
      position:absolute;
      top:22.0rem;
      right:var(--body-pd);
    }
    @media (width <= 640px) {
      position:relative;
    }
  }
  .text {
    margin-top:12.6rem;
    @media (width > 640px) {
      padding-left:var(--body-pd);
    }
    @media (width <= 640px) {
      margin-top:-3.2rem;
    }
  }
  .text-title {
    margin-bottom:4.4rem;
    @media (width <= 640px) {
      margin-bottom:2.4rem;
    }
  }
  .l-tag_text-A {
    margin-bottom:2.0rem;
    @media (width <= 640px) {
    }
  }
  .text-desc {
    font-size:1.5rem;
    letter-spacing: .2em;
    @media (width <= 640px) {
      font-size:1.4rem;
    }
  }

  .l-inpage_navi {
    @media (width > 640px) {
      margin-block:auto;
      padding-left:var(--body-pd);
    }
    @media (width <= 640px) {
      margin-top:5.2rem;
    }
  }
}


/* 代表挨拶
============================================================================= */
.company-outline {
  padding-bottom:19.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-bottom:10.0rem;
  }
  .l-heading-A {
    @media (width > 640px) {
      margin-bottom:6.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:2.8rem;
    }
  }
  .outline-desc {
    font-size:1.5rem;
    line-height:2;
    letter-spacing: .2em;
  }

  .js-accordion-group {
    @media (width <= 640px) {
      position:relative;
      .js-accordion-button {
        display:block;
        margin-block:4.8rem 2.8rem;
        border:1px solid var(--cc-black-A);
        padding-block:.8rem;
        padding-left:.8rem;
        font-size:1.4rem;
        letter-spacing: .2em;
        color:#fff;
        background-color:var(--cc-blue-A);
        width:100%;
        position:relative;
        > span {
          display:none;
          &.-min {
            font-size:1.3rem;
            letter-spacing: 0;
          }
        }
        &[aria-expanded="true"] {
          .m-i-af-select-down {
            &::after {
              transform:scaleY(-1);
            }
          }
        }
        .m-i-af-select-down {
          display:flex;
          justify-content: center;
          align-items: center;
          width:auto;
          height:100%;
          aspect-ratio: 1/1;
          background-color:var(--cc-black-A);
          position:absolute;
          right:0;
          top:0;

          &::after {
            background-color:#fff;
            transition-property: transform;
            transition-duration: var(--duration-hover-A);
          }
        }
      }
      &:has(.js-tab-button[aria-controls="Outline01"][aria-expanded="true"]) .acb-outline01,
      &:has(.js-tab-button[aria-controls="Outline02"][aria-expanded="true"]) .acb-outline02,
      &:has(.js-tab-button[aria-controls="Outline03"][aria-expanded="true"]) .acb-outline03,
      &:has(.js-tab-button[aria-controls="Outline04"][aria-expanded="true"]) .acb-outline04,
      &:has(.js-tab-button[aria-controls="Outline05"][aria-expanded="true"]) .acb-outline05,
      &:has(.js-tab-button[aria-controls="Outline06"][aria-expanded="true"]) .acb-outline06 {
        display:inline;
      }
      .js-accordion-target {
        margin-top:-2.8rem;
        width:100%;
        position:absolute;
        z-index: 10;
      }
      .js-tab-buttons {
        display:grid;
        border-inline:1px solid;
        font-size:1.4rem;
        letter-spacing: .2em;
        background-color:#fff;
      }
      .js-tab-button {
        border-bottom:1px solid;
        padding:.8rem;

        &.-min {
          letter-spacing: 0;
        }

        &[aria-expanded="true"]:not(.is-waiting),
        &[aria-expanded="false"]:is(.is-waiting) {
          display:none;
        }
      }
    }

  }

  .outline-tab {
    @media (width > 640px) {
      --h:4.8rem;
      --b:1px;
      --deg: -32deg;
      --w-inner:calc( (var(--h) - var(--b)) * tan(var(--deg)) * -1);
      --L:calc( (var(--h) - var(--b)) / cos(var(--deg)) );
      margin-top:4.8rem;
      .l-select-A {
        margin-bottom:2.8rem;
        width:100%;
        > select {
          border-color:var(--cc-black-A);
          font-size:1.4rem;
          letter-spacing: .05em;
          width:100%;
        }
        > i {
          background-color:var(--cc-black-A);
        }
      }
      .js-tab-buttons {
        display:flex;
        border-left:var(--b) solid;
        border-bottom:var(--b) solid;
      }
      .js-tab-button {
        flex:1;
        display:flex;
        height:var(--h);
        align-items: center;
        justify-content:center;
        box-sizing: border-box;
        font-weight:700;
        font-size:1.3rem;
        line-height:1.4;
        letter-spacing: .15em;
        background-color:#5d7283;
        border-top:var(--b) solid var(--cc-black-A);
        transition-property: background-color,color;
        transition-duration: var(--duration-hover-A);
        position:relative;

        @media (hover:hover) {
          &:hover {
            color:#fff;
          }
        }

        &::after {
          content:"";
          border-right:var(--b) solid var(--cc-black-A);
          height:var(--L);
          transform:rotate(var(--deg));
          transform-origin:right bottom;
          position:absolute;
          right:0;
          bottom:0;
        }

        &:is(:first-child) {
          width:calc(100% - var(--w-inner));
          clip-path:polygon(0 0, calc(100% - var(--w-inner)) 0, 100% 100%, 0 100%);
          > span {
            padding-right:calc(var(--w-inner) / 2);
          }
        }
        &:not(:first-child) {
          margin-left:calc(var(--w-inner) * -1 - 1px);
          clip-path:polygon(0 0, calc(100% - var(--w-inner)) 0, 100% 100%, var(--w-inner) 100%);
        }

        &[aria-expanded="true"] {
          background-color:var(--cc-blue-A);
          color:#fff;
        }

        &.-min {
          font-size:1.2rem;
          letter-spacing: .04em;
        }
      }
    }
  }
  .outline-table {
    width:100%;
    border-left:1px solid;
    table-layout: fixed;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      border-top:1px solid;
      font-size:1.4rem;
      line-height:1.5;
    }
    :is(th,td) {
      border-right:1px solid;
      border-bottom:1px solid;
      padding-block:2.8rem;
      @media (width <= 640px) {
        padding-block:1.6rem;
      }
    }
    th {
      text-align: center;
      font-weight:700;
      @media (width > 640px) {
        width:12.0rem;
        vertical-align: middle;
      }
      @media (width <= 640px) {
        width:7.0rem;
      }

      &.t2 {
        @media (width > 640px) {
          text-align-last:justify;
          padding-inline:calc(6.0rem - (1.34em * 3 / 2));
        }
        @media (width <= 640px) {
          letter-spacing: .20em;
        }
      }
      &.t3 {
        letter-spacing: .34em;
        @media (width <= 640px) {
          letter-spacing: .20em;
        }
      }
      &.t4 {
        letter-spacing: .20em;
        @media (width <= 640px) {
          letter-spacing: .20em;
        }
      }
      &.t5 {
        letter-spacing: .05em;
        @media (width <= 640px) {
          letter-spacing: .20em;
        }
      }
    }
    .sp_min {
      @media (width <= 640px) {
        font-size:1.3rem;
      }
    }
    td {
      padding-left:3.2rem;
      letter-spacing: .12em;
      &:not(.ls-min) {
        text-align: justify;
      }
      @media (width > 640px) {
        font-weight:600;
        .is-ftest & {
          font-weight:700;
        }
      }
      @media (width <= 640px) {
        padding-inline:1.6rem;
      }
      .sp_min {
      }

      ul {
        li {
          display:flex;
          column-gap:.25rem;
          &::before {
            content:"・";
            flex-shrink: 0;
          }
        }
        @media (width <= 640px) {
          &.sp_nopr {
            margin-right:-1.6rem;
          }
        }
      }

    }
  }
}


/* 事業拠点
============================================================================= */
.company-access {
  padding-bottom:19.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-bottom:10.0rem;
  }
  .l-heading-A {
    @media (width > 640px) {
      margin-bottom:6.0rem;
    }
  }
  .heading.p-bg-white-A {
    background-color:#fff;
  }
}


/* 沿革
============================================================================= */
.company-history {
  padding-bottom:19.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-bottom:10.0rem;
  }

  .l-heading-A {
    margin-bottom:0;
    @media (width > 640px) {
    }
  }
  .history-table {
    width:100%;
    border-left:1px solid;
    table-layout: fixed;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      border-top:1px solid;
      font-size:1.3rem;
      line-height:1.5;
      letter-spacing: .12em;
    }
    :is(th,td) {
      border-right:1px solid;
      border-bottom:1px solid;
      padding-block:2.4rem;
      @media (width <= 640px) {
        padding-block:1.6rem;
      }
    }
    th {
      @media (width > 640px) {
        padding-left:3.2rem;
        width:21.2rem;
        font-weight:700;
      }
      @media (width <= 640px) {
        padding-left:.8rem;
        width:8.6rem;

        > span {
          font-size:1.2rem;
          letter-spacing: .05em;
        }
      }

    }
    td {
      padding-left:3.2rem;
      letter-spacing: .12em;
      @media (width > 640px) {
        font-weight:700;
      }
      @media (width <= 640px) {
        padding-inline:1.6rem;
      }

      ul {
        li {
          display:flex;
          column-gap:.25rem;
          &::before {
            content:"・";
            flex-shrink: 0;
          }
        }
        @media (width <= 640px) {
          &.sp_nopr {
            margin-right:-1.6rem;
          }
        }
      }

    }
  }
}


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