@charset "UTF-8";
/*------------------------------
  採用担当メッセージ（/message/）
------------------------------*/

.page-message {
  .subpage-mv{
    position: relative;
    padding-bottom: 0;
    @media screen and (max-width: 768px) {
      display: grid;
    }
    .image{
      position: absolute;
      right: 10rem;
      top: 25rem;
      width: 95rem;
      @media screen and (max-width: 768px) {
        position: static;
        width: 100%;
        grid-row: 2/3;
        margin-top: 3rem;
        isolation: isolate;
      }
    }
    .copy{
      margin-top: 25rem;
      isolation: isolate;
      p{
        background-color: var(--white);
        padding: 1rem 2rem 1.5rem 1.5rem;
        width: fit-content;
        &+ p{
          margin-top: 2rem;
        }
        span{
          font-size: max(3.8rem, 30px);
          font-weight: 600;
          color: var(--main);
          font-style: italic;
        }
      }
    }
    .copy-sp{
      margin-top: -2rem;
      isolation: isolate;
      p{
        background-color: var(--white);
        padding: 0.5rem 0.6rem 0.7rem 0.7rem;
        width: fit-content;
        &+ p{
          margin-top: 1rem;
        }
        span{
          font-size: 2.1rem;
          font-weight: 600;
          color: var(--main);
          font-style: italic;
        }
      }
    }
  }
  .profile{
    padding-top: 4rem;
    padding-bottom: 14rem;
    padding-inline: 10rem;
    background-color: var(--white-through);
    @media screen and (max-width: 768px) {
      padding-top: 5rem;
      padding-bottom: 4rem;
      padding-inline: 1.5rem;
    }
    .title{
      font-size: max(1.2rem, 12px);
      font-weight: 600;
      text-align: right;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
      }
    }
    .name{
      font-size: max(2.1rem, 21px);
      font-weight: 600;
      color: var(--main);
      text-align: right;
      margin-top: 0.5em;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
      }
    }
    .en{
      font-size: max(1.4rem, 14px);
      font-weight: 600;
      font-family: var(--font-roboto);
      color: var(--main);
      text-align: right;
      margin-top: 0.5em;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
      }
      span{
        display: inline-block;
        letter-spacing: 0.05em;
        &::first-letter{
          color: var(--accent);
        }
      }
    }
    .readText{
      width: 40%;
      margin-inline: auto 0;
      margin-top: 2rem;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
        width: 100%;
      }
    }
  }
  .message{
    h2{
      font-size: max(2.6rem, 20px);
      color: var(--main);
      line-height: 1.8;
      border-bottom: max(0.1rem,1px) solid var(--gray);
      padding-bottom: 2rem;
      font-weight: 600;
      @media screen and (max-width: 768px) {
        font-size: 1.8rem;
        line-height: 1.5;
      }
    }
    .readText{
      margin-top: 1lh;
    }
    &.sec01{
      background-color: var(--white-through);
      .message-wrap{
        padding-inline: 0 10rem;
        display: flex;
        gap: 10rem;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          padding-inline: 1.5rem;
          gap: 4rem;

        }
        .text-wrap{
          width: 60rem;
          flex-shrink: 0;
          @media screen and (max-width: 768px) {
            width: 100%;
          }
        }
        h2{
          text-align: right;
          @media screen and (max-width: 768px) {
            text-align: left;
          }
        }
        .image{
          margin-top: -12rem;
          @media screen and (max-width: 768px) {
            margin-top: 0;
          }
        }
      }
      .wide{
        margin-top: 15rem;
        @media screen and (max-width: 768px) {
          margin-top: 4rem;
        }
      }
    }
    &.sec02{
      padding-top: 15rem;
      background-color: var(--white-through);
      position: relative;
      @media screen and (max-width: 768px) {
        padding-top: 4rem;
      }
      .message-wrap{
        padding-inline: 10rem 0;
        display: flex;
        flex-direction: row-reverse;
        gap: 10rem;
        @media screen and (max-width: 768px) {
          flex-direction: column-reverse;
          padding-inline: 1.5rem;
          gap: 4rem;

        }
        .text-wrap{
          width: 60rem;
          flex-shrink: 0;
          @media screen and (max-width: 768px) {
            width: 100%;
          }
        }
        .image{
          margin-top: 11rem;
          @media screen and (max-width: 768px) {
            margin-top: 0;
          }
        }
      }
    }
    &.sec03{
      padding-block: 10rem 15rem;
      position: relative;
      @media screen and (max-width: 768px) {
        padding-block: 4rem 5rem;
      }
      &::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50rem;
        background-image: linear-gradient(to bottom, var(--white-through) 40%, transparent 100%);
      }
      .inner{
        isolation: isolate;
      }
    }
  }
}