@charset "UTF-8";

.content {
  padding: 5.6rem 0 0;
}

.sub .content {
  padding: 5.6rem 0 0;
}

.page-container {
  position: relative;
  z-index: 2;
}

.page-ttl-area .inner {
  z-index: 1;
}

.top .main-header {
  transform: translateY(0);
}

.sec-ttl {
  text-wrap: auto;
}

.marker {
  background-color: #fff;
  /* color: #44515d; */
  /* padding: 0 0.5em; */
  line-height: 1.8;
}

.marker>span {
  padding: 0 0.5em;
}

.marker>span+span {
  padding: 0 0.5em 0 0;
}

.mainvisual {
  /* padding-top: 8rem; */
}

.mv-logo {
  bottom: -1rem;
}

.logo-caps {
  display: block;
  text-align: center;
  font-size: clamp(1.6rem, 1.333rem + 0.667vw, 2.4rem);
  line-height: 1.5;
  margin-top: 0.5em;
  /* color: #44515d; */
}

.mv-ttl {
  top: 2rem;
  left: 0;
  font-size: 5.8vw;
  text-wrap: auto;
  /* font-size: clamp(2.8rem, 2.333rem + 1.458vw, 4.2rem); */
}

.mv-ttl .marker>span {
  padding: 0 0 0 0.5em;
}

.mv-ttl .marker>span+span {
  padding: 0 0.5em 0 0;
}

.service .sec-ttl {
  font-size: clamp(2.4rem, 2.133rem + 0.833vw, 3.2rem);
  letter-spacing: 0.04em;
}

.top .service .img,
.top-test .service .img {
  aspect-ratio: 16 / 9;
}

.top .service .img img,
.top-test .service .img img {
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.top .staff .inner {
  max-width: calc(960px + clamp(1.6rem, .511rem + 3.404vw, 4rem) * 2);
}

.top .media-list-item .thumb {
  aspect-ratio: 354 / 430;
  max-height: 40rem;
  /* max-width: 72%; */
  margin-inline: auto;
}

.top .media-list-item .item-ttl {
  margin-bottom: 1.6rem;
  /* min-height: 5.8rem; */
  font-size: clamp(1.8rem, 1.709rem + 0.284vw, 2rem);
  display: grid;
  place-content: center;
}

.media-list-item .desc {
  margin-bottom: auto;
  font-size: clamp(1.4rem, 1.309rem + .284vw, 1.6rem);
}

.message .flex {
  max-width: 90rem;
  margin: 6.4rem auto 4rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.message .flex .profile {
  margin: 0;
  flex-basis: 100% !important;
}

.message .flex .img {
  flex-basis: 100% !important;
  max-height: 40rem;
}

.contact .sec-ttl {
  font-size: clamp(2.2rem, 1.733rem + 1.458vw, 3.6rem);
}

.contact .flex {
  row-gap: 0;
  align-items: center;
}

.contact .flex-item.mail {
  display: flex;
  flex-direction: column;
  margin-top: 4em;
}

:where(.content) .contact .tel {
  margin-top: 3em;
}

:where(.content) .contact .btns {
  margin-bottom: 0;
  min-height: auto;
}

.contact .flex-item.mail .btns {
  margin-top: auto;
}

.contact .contact-link .icon a {
  border: none;
  border-radius: 0;
  background: none;
}

:where(.content) .contact .contact-link {
  justify-content: center;
  padding: 0;
  margin-block: 3rem;
}

:where(.content) .contact .contact-link .icon {
  width: 6.4rem;
  height: 6.4rem;
  margin-inline: 0.8rem;
}

:where(.content) .contact .contact-link .icon .svgicon {
  width: 4rem;
  height: 4rem;
}

:where(.content) .contact .contact-link .icon .svgicon.line {
  width: 3.6rem;
  height: 3.6rem;
}

.editor-area .program-box h2,
.editor-area .program-box h3 {
  background-color: transparent;
}

.single .pagination {
  width: 90%;
  justify-content: center;
}

body.single .pagination .page-numbers.prev {
  margin-left: 1em;
  margin-right: 0;
}

body.single .pagination .page-numbers.next {
  margin-right: 1em;
  margin-left: 0;
}

body.single .pagination .page-numbers.prev:hover,
body.single .pagination .page-numbers.next:hover {
  background: none;
  color: #33aee5;
  opacity: 0.72;
}

.policy-box {
  margin-bottom: 4em;
}

.policy-box .has-background {
  background: none !important;
}

.about .editor-area .outline .wp-block-table,
.about-test .editor-area .outline .wp-block-table {
  margin-block: 0;
}

.about .editor-area .outline .wp-block-table table,
.about-test .editor-area .outline .wp-block-table table {
  margin-bottom: 0;
}

.about .editor-area .outline h3+.wp-block-table table,
.about-test .editor-area .outline h3+.wp-block-table table {
  margin-bottom: 8rem;
}

@media screen and (min-width:480px) {
  .mainvisual {
    padding-top: 2rem;
  }

  .mv-logo {
    bottom: -1rem;
  }

  .mv-ttl {
    top: 3rem;
  }

  .top .media-list-item {
    height: 100%;
  }

  .top .media-list-item .thumb {
    max-height: 32rem;
  }

  .message .flex .img {
    flex-basis: 50% !important;
    margin: 0 auto;
    max-height: 32rem;
  }

}

@media screen and (min-width:768px) {
  .mv-logo {
    bottom: 3rem;
  }


  /* .marker>span {
    padding: 0 0.5em 0 1em;
  } */

  .mv-ttl {
    top: 50%;
    font-size: clamp(2.8rem, 2.333rem + 1.458vw, 4.2rem);
  }

  .mv-ttl .marker>span {
    padding: 0 0.5em 0 1em;
  }

  .mv-ttl .marker>span+span {
    padding: 0 0.5em 0 1em;
  }

  .top .media-list-item .item-ttl {
    min-height: 6rem;
  }

  .message .flex .profile {
    flex-basis: 70% !important;
    width: 100%;
    padding-right: 1.5em;
  }

  .message .flex .img {
    flex-basis: 30% !important;
    margin: 0;
  }

  .contact .flex-item.mail {
    margin-top: 2em;
  }

}

@media screen and (min-width:1025px) {
  .mv-logo {
    bottom: 0;
  }

  .mv-ttl {
    top: 54%;
  }

  .content {
    padding: 7.2rem 0 0;
  }

  .service {
    grid-template-columns: 45% 55%;
  }

  .service .desc {
    max-width: 52rem;
    margin-inline: auto;
  }

  .service .btns {
    margin-inline: auto;
  }

  .top .service .sec-ttl,
  .top-test .service .sec-ttl {
    padding-left: 2rem;
    margin-left: 0;
  }

  .top .service .desc,
  .top-test .service .desc {
    max-width: inherit;
    margin-inline: auto;
    padding-left: 2rem;
    margin-left: 0;
  }

  .top .service .btns,
  .top-test .service .btns {
    margin-left: 0;
    padding-left: 2rem;
  }

  .top .service .img,
  .top-test .service .img {
    grid-row: 1 / 3;
    top: 0;
    overflow: hidden;
    aspect-ratio: auto;
  }

  .top .service .img img,
  .top-test .service .img img {
    width: auto;
    max-width: inherit;
    height: 100%;
    left: -6rem;
    position: relative;
  }

  .staff .media-list {
    gap: 6.4rem;
  }

  .staff .media-list-item {
    width: calc((100% - 6.4rem * 2) / 3);
  }

  :where(.content) .contact .flex {
    justify-content: center;
  }

  :where(.content) .contact .flex-item {
    flex-basis: 44rem;
  }

  /* .contact .flex-item.mail {
    flex-basis: 40rem;
  } */

  :where(.content) .contact .tel {
    flex-direction: column;
  }

  :where(.content) .contact .tel .main-ttl {
    margin: 0 0 .85em;
  }

  :where(.content) .contact .phone {
    width: 100%;
  }

  :where(.content) .contact .openhour {
    margin: 2.4rem 0 0;
  }
}

@media screen and (min-width:1040px) {

  .top .mv-ttl,
  .top-test .mv-ttl {
    top: 64%;
  }

  .top .mv-ttl .sp-hidden,
  .top-test .mv-ttl .sp-hidden {
    display: none;
  }

  .top .mv-ttl .marker>span,
  .top-test .mv-ttl .marker>span {
    padding: 0 0 0 1em;
  }

  .top .mv-ttl .marker>span+span,
  .top-test .mv-ttl .marker>span+span {
    padding: 0 0.5em 0 0;
  }

  .top .media-list-item .item-ttl {
    min-height: auto;
  }
}

@media screen and (min-width:1080px) {

  .top .service .sec-ttl,
  .top-test .service .sec-ttl {
    padding-left: 4rem;
  }

  .top .service .desc,
  .top-test .service .desc {
    padding-inline: 4rem;
    /* max-width: calc(52rem + 12rem); */
  }

  .top .service .btns,
  .top-test .service .btns {
    padding-left: 4rem;
  }

  .top .service .img img,
  .top-test .service .img img {
    /* left: 0; */
    left: 50%;
    transform: translateX(-50%);

  }
}

@media screen and (min-width:1260px) {

  .top .service .sec-ttl,
  .top-test .service .sec-ttl {
    padding-left: 6rem;
    width: 100%;
    justify-content: flex-start;
  }

  .top .service .desc,
  .top-test .service .desc {
    padding-inline: 6rem;
    max-width: calc(52rem + 12rem);
  }

  .top .service .btns,
  .top-test .service .btns {
    padding-left: 6rem;
  }

  .top .service .img,
  .top-test .service .img {
    left: 0;
    width: calc(50vw - 12rem);
    height: calc(100% + 12rem);
  }

  .top .service .img img,
  .top-test .service .img img {
    left: 50%;
    transform: translateX(-50%);
  }

}

@media screen and (min-width:1366px) {

  .top .service,
  .top-test .service {
    padding-inline: 7.2vw;
  }

  .top .service .sec-ttl,
  .top-test .service .sec-ttl {
    padding-left: 8rem;
    margin-inline: auto;
    max-width: calc(56rem + 8rem);
  }

  .top .service .desc,
  .top-test .service .desc {
    padding-left: 8rem;
    padding-right: 0;
    margin-inline: auto;
    max-width: calc(56rem + 8rem);
  }

  .top .service .btns,
  .top-test .service .btns {
    padding-left: 8rem;
    padding-right: 28rem;
    margin-left: auto;
    width: 100%;
    max-width: calc(56rem + 8rem);
  }

  .top .service .img,
  .top-test .service .img {
    left: 0;
    width: calc(50vw - 12rem);
    height: calc(100% + 12rem);
  }

  .top .service .img img,
  .top-test .service .img img {
    left: 50%;
    transform: translateX(-50%);
  }

}

@media (prefers-color-scheme: dark) {

  /* このなかにダークモード時のスタイルを記述します */
  body {
    background: #fff;
  }
}

@media (orientation: landscape) and (max-width: 767px) {
  /* デバイスが横向き、画面の横幅が 767px 以下の場合の記述 */
}