@charset "UTF-8";

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

Company Message CSS

・事業内容ページ用CSS「.message-×××」

上記はここに記述する

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

.l-heading-A {
  @media (width > 640px) {
    margin-bottom:7.2rem;
  }
  @media (width <= 640px) {
    margin-bottom:3.6rem;
  }
}


/* ヘッダー
============================================================================= */
.message-header {
  position:relative;
  @media (width > 640px) {
    display:flex;
    flex-direction: column;
    margin-bottom:22.4rem;
    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;
    }
  }
}


/* 代表挨拶
============================================================================= */
.message-section01 {
  padding-bottom:14.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-bottom:10.0rem;
  }
  >.inner {
    @media (width > 640px) {
      display:grid;
      grid-template-columns:40.9rem 1fr;
      grid-auto-flow: column;
      gap:10.7rem;
    }
  }
  .img {
    @media (width > 640px) {
      grid-column:1/2;
    }
    @media (width <= 640px) {
      margin-top:5.0rem;
    }
    .position_name {
      @media (width > 640px) {
        margin-left:auto;
        width:fit-content;
        margin-top:2.0rem;
      }
      @media (width <= 640px) {
        display:flex;
        align-items: baseline;
        justify-content: flex-end;
        gap:1.2rem;
        margin-top:1.6rem;
      }
      .position {
        margin-bottom:1.0rem;
        font-size:1.1rem;
        letter-spacing: .16em;
        line-height:1;
        @media (width > 640px) {
          text-align-last: justify;
        }
        @media (width <= 640px) {
          font-size:1.1rem;
          letter-spacing: .22em;
        }
      }
      .name {
        font-weight:400;
        font-size:2.6rem;
        line-height:1;
        letter-spacing: .16em;
        @media (width <= 640px) {
          font-weight:700;
          font-size:1.7rem;
        }
      }
    }
  }
  .text {
    @media (width > 640px) {
      grid-column:2/3;
    }
    .text-heading {
      margin-bottom:3.2rem;
      font-weight:400;
      font-size:3.6rem;
      line-height:calc(54/36);
      letter-spacing: .26em;
      @media (width > 640px) {
        white-space: nowrap;
      }
      @media (width <= 640px) {
        margin-bottom:2.8rem;
        font-size:3.1rem;
        line-height:calc(93/62);
      }
    }
    .text-desc {
      @media (width > 640px) {
        line-height:calc(32/14);
        letter-spacing: .2em;
      }
    }
  }
}


/* MVV
============================================================================= */
.message-section02 {
  @media (width > 640px) {
    padding-bottom:19.0rem;
  }
  @media (width <= 640px) {
    padding-bottom:10.0rem;
  }

  .contents {
    display:grid;
    gap:5.0rem;
    @media (width <= 640px) {
      gap:5.6rem;
    }
  }
  .contents-item {
    position:relative;
    @media (width > 640px) {
      min-height:53.5rem;
    }
    @media (width <= 640px) {
    }
    .item-heading {
      margin-bottom:.4rem;
      @media (width <= 640px) {
      }
    }
    .l-line_heading-A {
      margin-bottom:5.2rem;
      font-size:4.9rem;
      line-height:calc(84/49);
      letter-spacing: .22em;
      @media (width <= 640px) {
        margin-right:-2.0rem;
        margin-bottom:2.0rem;
        font-size:2.3rem;
        letter-spacing: .18em;
        line-height:calc(77/40);
      }
    }
    .img {
      @media (width > 640px) {
        position:absolute;
        bottom:0;
        right:0;
        z-index: -1;
      }
      @media (width <= 640px) {
        margin-bottom:2.0rem;
      }
    }
    .desc {
      @media (width > 640px) {
        width:45.5rem;
        line-height:calc(32/14);
      }
      @media (width <= 640px) {
        line-height:calc(60/28);
      }
    }
  }
  .bottom {
    margin-top:14.0rem;
    @media (width <= 640px) {
      margin-top:6.2rem;
    }
  }
}


/* 社是・社訓・ブランドアイデンティティ
============================================================================= */
.message-section03_04 {
  @media (width > 640px) {
    padding-bottom:13.0rem;
  }
  @media (width <= 640px) {
    padding-bottom:10.0rem;
  }
  &:last-child {
    @media (width > 640px) {
      padding-bottom:17.0rem;
    }
  }


  .l-heading-A {
    @media (width > 640px) {
      margin-bottom:4.8rem;
    }
  }
  .contents {
    @media (width > 640px) {
      display:grid;
      align-items: center;
      gap:3.6rem;
      grid-template-columns:47.4rem 1fr;
    }
    @media (width <= 640px) {
      gap:7.0rem;
    }
    .img {
      display:flex;
      justify-content: center;
      @media (width <= 640px) {
        margin-bottom:4.4rem;
      }

      img {
        mix-blend-mode: multiply;
      }
    }
    .desc {
      @media (width > 640px) {
        line-height:calc(32/14);
      }
      @media (width <= 640px) {
        line-height:calc(60/28);
      }
    }
  }
  .movie {
    margin-top:7.2rem;
    @media (width <= 640px) {
      margin-top:4.0rem;
    }
    iframe {
      display:block;
      width:100%;
      height:auto;
      aspect-ratio: 16/9;
    }
  }
}


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