/* 右端まで届く色の面。写真は左に置き、面の下にはみ出す */
.concept__panel {
  margin-left: var(--gut);
  border-radius: var(--r-l) 0 0 var(--r-l);
  background: var(--surface);
}
.concept__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1360px; min-height: 510px; margin-left: auto;
  padding: 80px var(--gut) 0;
}
.concept__text { order: 2; padding: 17px 0 80px 50px; }
.concept__title { font-family: var(--ff-mincho); font-size: 36px; font-weight: 400; line-height: 1.4; letter-spacing: .1em; color: var(--ink-head); }
.concept__body { margin-top: 30px; font-size: 16px; line-height: 2; text-wrap: pretty; }
.concept__photo { order: 1; padding: 25px 40px 0 0; margin-bottom: -135px; }
.concept__photo .ph { width: 100%; max-width: 520px; aspect-ratio: 1; border-radius: 160px var(--r-m) var(--r-m) var(--r-m); }
.concept__photo.fadeup { clip-path: inset(0 100% 0 0 round 160px 20px 20px 20px); }
.concept__photo.fadeup.is-on { clip-path: inset(0 round 160px 20px 20px 20px); }
.linkrow--concept { margin-left: 50%; padding-left: calc(var(--gut) / 2 + 50px); }

@media (max-width: 899px) {
  .concept__panel { margin: 0 var(--gut); border-radius: var(--r-l); }
  .concept__inner { display: block; min-height: 0; padding: 60px 30px 40px; }
  .concept__text { padding: 0 15px 45px; }
  .concept__title { font-size: 28px; }
  .concept__body { font-size: 14px; }
  .concept__photo { padding: 0; margin: 0; }
  .concept__photo .ph { max-width: none; aspect-ratio: 301 / 360; }
  .linkrow--concept { margin-left: 0; padding-left: 45px; }
  .concept__photo .ph { border-radius: 100px var(--r-m) var(--r-m) var(--r-m); }
}