/* 共通スタイルは外に書く */
.message__heading {
  text-align: center;
}
.message__history {
  background-color: #efefef;
}
.message__scroll {
  margin: 0 auto;
  border: 1px solid #000;
  padding: 5px 0;
  text-align: center;
}
.message__box {
  color: #fff;
}
.message__career {
  background-image: url(../../image/career.jpg);
  background-size: cover;
  background-position: center;
  box-shadow: 20px 20px 4px #ccc;
}
.message__thought {
  margin-top: 50px;
  margin-left: auto;
  background-image: url(../../image/keepMoving.jpg);
  background-size: cover;
  background-position: center;
  box-shadow: -20px 20px 4px #ccc;
}
.history-hidden {
  display: none;
}
.text-hidden {
  display: none;
}

@media screen and (min-width: 796px) { /* pc用スタイル */
  .p-header__imageBox {
    filter: invert(1);
  }
  .main__imageBox {
    display: none;
  }
  .message__headingContainer {
    position: relative;
  }
  .message__imageBox {
    display: flex;
  }
  .message__image {
    width: 55%;
    height: 60%;
  }
  .message__headingBox {
    margin: 30vh auto 0;
  }
  .font-big {
    font-size: 28px;
  }
  .message__leader {
    margin-top: 50px;
  }
  .message__imageBoxSp {
    display: none;
  }
  .message__history {
    position: absolute;
    top: 85%;
    right: 5%;
    width: 65%;
    padding: 3%;
    font-size: min(1.5vw,20px);
  }
  .message__scroll {
    width: 10%;
  }
  .message__subContainer {
    margin: 30% 0 10%;
  }
  .message__subContainer::before {
    content: "";
    display: block;
    z-index: -50;
    position: absolute;
    left: 53%;
    height: 60%;
    border-right: 1px solid #000;
  }
  .message__career {
    margin-top: 30px;
    padding: 30px 50px;
    width: 65%;
    min-height: 300px;
  }
  .message__title {
    font-size: 24px;
  }
  .message__text {
    margin-top: 20px;
    font-size: min(1.8vw,20px);
  }
  .message__thought {
    padding: 30px 50px;
    width: 70%;
  }
}

@media screen and (max-width: 795px) { /* sp用スタイル */
  .main__imageBox {
    height: 200px;
  }
  .main__image {
    width: 100%;
    height: 100%;
  }
  .message__imageBox {
    display: none;
  }
  .message__imageBoxSp {
    position: relative;
  }
  .message__heading {
    padding: 5%;
    font-size: max(4vw,20px);
  }
  .message__image {
    margin: 0 auto;
    width: max(75%,300px);
  }
  .message__history {
    margin-top: -10%;
    padding: 20% 10%;
    font-size: max(2vw,10px)
  }
  .message__scroll {
    width: 150px;
  }
  .font-big {
    font-size: 24px;
  }
  .message__subContainer {
    margin: 10% 0;
  }
  .message__career {
    margin-top: 20px;
    padding: 15px 25px;
    width: max(65%, 290px);
  }
  .message__subContainer::before {
    content: "";
    display: block;
    z-index: -50;
    position: absolute;
    left: 58%;
    height: 50%;
    border-right: 1px solid #000;
  }
  .message__title {
    font-size: 18px;
  }
  .message__text {
    margin-top: 10px;
    font-size: max(2vw,12px);
  }
  .message__thought {
    padding: 15px 25px;
    width: max(70%, 290px);
  }
}
@media screen and (max-width:500px) {
  .message__text {
    margin-top: 5px;
  }
  .message__career {
    padding: 10px 0 10px 5px;
  }
  .message__thought {
    padding: 10px 0 10px 5px;
  }
}
@media screen and (max-width: 475px) {
  .message__history {
    padding: 20% 3%;
  }
  .history-hidden {
    display: block;
  }
  .history-none {
    display: none;
  }
  .text-hidden {
    display: block;
  }
}