/* はじめての方へ（参考 .home-concept）
   左に縦長の写真、右に見出しと文。淡い黄色の小文字の大きな英字を文の後ろに置き、右端に2枚の写真を重ねてはみ出させる */
.concept {
  position: relative;
  z-index: 0;
  overflow-x: clip;
}
.concept__inner { padding: 80px 25px 0; }
.concept__img { aspect-ratio: 580 / 730; overflow: hidden; }
.concept__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.concept__txt {
  position: relative;
  margin-top: 50px;
  padding-top: 30px;
}
.concept__en {
  position: absolute;
  top: 0;
  right: -35px;
  z-index: -1;
  color: var(--yellow-pale);
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.concept__head {
  margin-bottom: 25px;
  font-size: 21px;
  line-height: 1.57;
  letter-spacing: 0.15em;
}
.concept__p + .concept__p { margin-top: 1em; }

/* 右端の2枚の写真（片方に黄色をかぶせる） */
.concept__deco {
  position: relative;
  width: 280px;
  aspect-ratio: 550 / 640;
  margin: 40px -25px 0 auto;
  pointer-events: none;
}
.concept__deco > div { position: absolute; overflow: hidden; }
.concept__deco img { width: 100%; height: 100%; object-fit: cover; }
.concept__deco-a { top: 0; left: 38%; width: 62%; height: 78%; }
.concept__deco-b { top: 56%; left: 5%; width: 51%; height: 44%; }
.concept__deco-b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow-pale);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .concept__con { display: flex; justify-content: space-between; align-items: flex-start; }
  .concept__img { width: 40%; }
  .concept__txt { width: 54%; margin-top: 0; padding-top: 60px; }
  .concept__en { right: 0; font-size: 80px; }
}

@media (min-width: 1024px) {
  .concept__inner {
    position: relative;
    min-height: 1007px;
    padding: 200px 0 0;
  }
  .concept__con {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 5%;
  }
  .concept__img { width: 40%; max-width: 580px; }
  .concept__txt { position: static; width: 53%; max-width: 578px; margin: 0 0 0 auto; padding: 0; }
  .concept__en { top: -55px; right: 5%; font-size: 120px; }
  .concept__head { margin-bottom: 46px; font-size: 32px; }
  .concept__p + .concept__p { margin-top: 32px; }
  .concept__btn { margin: 46px 0 0; }
  .concept__deco {
    position: absolute;
    top: 722px;
    right: 0;
    z-index: 1;
    width: 366px;
    margin: 0;
  }
}
@media (min-width: 1400px) {
  .concept__inner { max-width: 1080px; min-height: 1245px; margin: 0 auto; }
  .concept__con { position: static; padding: 0; }
  .concept__img { position: absolute; top: 200px; left: -160px; width: 580px; }
  .concept__txt { width: 578px; padding-top: 100px; }
  .concept__en { top: 102px; right: -280px; font-size: 180px; }
  .concept__deco { top: 722px; right: -396px; width: 550px; }
}