body #content {
  background-image: var(--background-image);
  background-position: right top;
  background-size: calc(220px + (max(0px, 100% - 1000px) / 2));
  background-repeat: no-repeat;
  min-width: 768px;
}
body #content .container {
  padding: 80px 0;
}
body #content .container::before {
  content: var(--title);
  position: absolute;
  right: 220px;
  top: 0;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  text-orientation: upright;
  display: block;
  padding: 20px;
  letter-spacing: 10px;
  height: 300px;
  font-weight: 700;
}
body #content .container .page-container {
  width: calc(100% - 220px - 100px);
}
body #content .container .key-visual {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  body #content {
    min-width: unset;
    --background-image: none!important;
  }
  body #content .container::before {
    display: none;
  }
  body #content .container .page-container {
    width: unset;
  }
}
body #content {
  --background-image: url('/images/instructors-header.png');
  --title: '髮型師介紹';
  font-weight: 700;
}
body #content .page-container .instructor-card {
  display: flex;
  height: 300px;
  gap: 30px;
  margin-bottom: 60px;
}
body #content .page-container .instructor-card .instructor-thumbnail {
  flex: 1;
  background-size: cover;
  background-position: center;
}
body #content .page-container .instructor-card .instructor-detail {
  flex: 2;
  display: flex;
  flex-direction: column;
  line-height: 30px;
}
body #content .page-container .instructor-card .instructor-detail .instructor-description {
  margin-top: 20px;
  white-space: pre-line;
  flex: 1;
}
body #content .page-container .instructor-card .instructor-detail .instructor-specialist {
  white-space: pre-line;
}
@media only screen and (max-width: 768px) {
  body #content .page-container .instructor-card {
    flex-direction: column;
    height: unset;
  }
  body #content .page-container .instructor-card .instructor-thumbnail {
    padding-bottom: 75%;
  }
}