@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");

.recruit-info2 {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: 0.08em;
  color: #2C2C2C;
}

.recruit-apply-title__text .sp-only {
  display: none;
}
.page-recruit-info2 #sec01 .ttl .txt {
  width: 32.35%;
  padding-bottom: 40px;
}

.page-recruit-info2 #sec01 .ttl .txt h2 {
  margin: 0;
  font-weight: normal;
  line-height: 1.5;
}

.page-recruit-info2 #sec01 .ttl .txt h2 small {
  color: #e18f9b;
  font-size: 20px;
  font-weight: normal;
}

.page-recruit-info2 #sec01 .ttl .txt h2 span {
  color: #2c2c2c;
  font-size: 49px;
}

.lead.teachers {
  margin: 0;
  padding: 80px 20px 80px;
  text-align: center;
  background: #fff;
  background-image:
    url(../../images/recruit/bg01.webp), url(../../images/recruit/bg02.webp);
  background-repeat: no-repeat;
  background-position:
    calc(50% - 565px) 500px,
    calc(50% + 565px) 450px;
}

.nav {
  max-width: 620px;
  margin: 45px auto 0;
  font-weight: bold;
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 15px;
}

.nav a {
  color: #515151;
  text-decoration: none;
}

.nav a:hover {
  color: #b52033;
}

.nav .active {
  color: #b52033;
  font-weight: bold;
}
.recruit-section {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.english {
  margin: 0 0 8px;
  color: #e18f9b;
  font-size: 18px;
  letter-spacing: 0.08em;
  font-family: "Abel", sans-serif;
}

.recruit-section h2,
.staff-voice__inner h2,
.recruit-detail__heading h2,
.job-description__heading h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
  color: #b52033;
  font-size: 28px;
  font-weight: bold;
}

.recruit-section h2 img,
.staff-voice__inner h2 img,
.recruit-detail__heading h2 img,
.job-description__heading h2 img {
  height: 1em;
  width: auto;
}

.lead {
  margin: 0 0 60px;
  color: #2c2c2c;
  font-size: 15px;
  text-align: center;
}
.movie-area {
  width: min(800px, 100%);
  margin: 60px auto 0;
}

.movie {
  aspect-ratio: 16 / 9;
  background: #000;
}

.movie iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 600px) {
  .movie p {
    font-size: 20px;
  }

  .recruit-section h2,
  .staff-voice__inner h2,
  .recruit-detail__heading h2,
  .job-description__heading h2 {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .recruit-info2 .english {
    font-size: 16px !important;
  }

  .recruit-apply-title__text .sp-only {
    display: block;
  }

  .page-recruit-info2 #sec01 .ttl .txt {
    width: 100%;
    padding: 20px 0 0;
  }

  .page-recruit-info2 #sec01 .ttl .txt h2 small {
    font-size: 16px;
  }

  .page-recruit-info2 #sec01 .ttl .txt h2 span {
    font-size: 32px;
  }

  .lead.teachers {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .anker {
    padding: 0 20px;
  }

  .anker .nav {
    gap: 12px 18px;
    margin-top: 30px;
    font-size: 13px;
    line-height: 1.7;
  }
}

/* 先生にインタビュー */
.staff-voice {
  padding: 80px 20px;
  background: #fffaf9;
  background-image:
    url(../../images/recruit/bg06.webp), url(../../images/recruit/bg07.webp), 
    url(../../images/recruit/bg03.webp), url(../../images/recruit/bg04.webp),url(../../images/recruit/bg05.webp);
  background-repeat: no-repeat;
  background-position:
    calc(50% - 630px) 465px,calc(50% - 565px) 860px,
    calc(50% + 575px) 100px,calc(50% + 585px) 450px,calc(50% + 600px) 656px;
}

.staff-voice__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.staff-voice__inner > h2 {
  margin-bottom: 80px;
}

.section-en {
  margin: 0 0 8px;
  color: #f3a6b3;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.section-title {
  margin: 0 0 50px;
  color: #B52033;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.section-title img {
  width: 28px;
  margin-right: 6px;
  vertical-align: middle;
}

.voice-list {
  max-width: 1002px;
  margin: 40px auto;
}

.voice-card {
  position: relative;
  display: grid;
  grid-template-columns: 330px 1fr;
  grid-template-areas:
    ". question1"
    ". text1"
    ". question2"
    ". text2";
  column-gap: 55px;
  row-gap: 10px;
  padding: 30px;
  background: #fff;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 35px;
}

.voice-card img {
  position: absolute;
  top: 30px;
  left: 30px;
  max-width: 100%;
  height: 260px;
  object-fit: cover;
}

.voice-card__meta {
  position: absolute;
  top: 220px;
  left: 190px;
  width: 170px;
  height: 174px;
  margin: 0;
  padding-top: 45px;
  text-align: center;
  background-image: url(../../images/recruit/name-bg.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: 15px;
  z-index: 1;
}

.voice-card__meta span {
  font-size: 20px;
  font-weight: bold;
}

.voice-card__question {
  margin: 0;
  color:#b52033;
  font-weight: bold;
  text-align: left;
}

.voice-card__question:nth-of-type(2) {
  grid-area: question1;
}

.voice-card__question:nth-of-type(4) {
  grid-area: question2;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px dotted #E18F9B;
}

.voice-card__text {
  margin: 0;
  text-align: left;
}

.voice-card__text:nth-of-type(3) {
  grid-area: text1;
}

.voice-card__text:nth-of-type(5) {
  grid-area: text2;
}

.voice-card--reverse {
  grid-template-columns: 1fr 330px;
  grid-template-areas:
    "question1 ."
    "text1 ."
    "question2 ."
    "text2 .";
}

.voice-card--reverse img {
  left: auto;
  right: 30px;
}

.voice-card--reverse .voice-card__meta {
  left: auto;
  right: 30px;
}

@media (max-width: 700px) {
  .voice-card {
    display: block;
    padding: 20px;
  }

  .voice-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 50px;
  }

  .voice-card h3 {
    margin: -85px 0 10px auto;
  }

  .voice-card__meta {
    margin: -35px 0 35px;
    padding: 0 25px 0 0;
    text-align: right;
  }

  .voice-card__question {
    margin-top: 25px;
  }

  .voice-card__question:nth-of-type(3) {
    margin-top: 25px;
  }

  .voice-card--reverse img {
    left: 30px;
    right: auto;
  }

  .voice-card--reverse .voice-card__meta {
    left: 220px;
    right: auto;
  }
}

.voice-button,
.voice-button:link,
.voice-button:visited,
.voice-button:hover,
.voice-button:active {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 13px 34px;
  border-radius: 999px;
  background: #b52033;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
}

.voice-button span {
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .staff-voice {
    padding: 60px 20px 80px;
    background-position:
      left 10px top 300px,left 10px top 760px,
      right 10px top 80px,right 10px top 380px,right 10px top 620px;
  }

  .staff-voice__inner > h2 {
    margin-bottom: 35px;
  }

  .section-title {
    margin-bottom: 35px;
    font-size: 20px;
  }

  .voice-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .voice-card {
    display: block;
    padding: 0 16px 26px;
  }

  .voice-card img {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
    padding: 50px 0 0;
  }

  .voice-card__meta,
  .voice-card--reverse .voice-card__meta {
    position: static;
    width: min(170px, 70%);
    height: auto;
    min-height: 120px;
    margin: -48px 0 24px auto;
    padding: 36px 12px 12px 0;
    box-sizing: border-box;
    background-size: 100% 100%;
    font-size: 13px;
    text-align: center;
  }

  .voice-card__meta span {
    font-size: 17px;
  }

  .voice-card__question,
  .voice-card__question:nth-of-type(2),
  .voice-card__question:nth-of-type(4) {
    margin-top: 24px;
    padding: 0 0 10px 0;
    border-top: 0;
    
  }

  .voice-card__question:nth-of-type(4) {
    padding-top: 18px;
    border-top: 2px dotted #e18f9b;
  }

  .voice-button {
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: 12px 22px;
    font-size: 13px;
  }
}

/* みずほ幼稚園の雰囲気 */

@media (min-width: 500px) and (max-width: 768px) {
  .staff-voice .voice-card__meta,
  .staff-voice .voice-card--reverse .voice-card__meta {
    margin-top: -105px;
    transform: translateX(-90px);
  }
}

@media (max-width: 499px) {
  .staff-voice .voice-card__meta,
  .staff-voice .voice-card--reverse .voice-card__meta {
    z-index: 2;
    display: block;
    margin-top: -48px;
    transform: translateY(-22px);
  }
}

.mizuho-life {
  padding: 80px 20px 160px;
  text-align: center;
   background-image:
    url(../../images/recruit/bg08.webp);
  background-repeat: no-repeat;
  background-position:
    calc(50% - 650px) 120px;
}

.mizuho-gallery {
  z-index: 2;
  width: 100%;
  margin: 0 auto;
}
.mizuho-gallery__main {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
  cursor: pointer;
}

.mizuho-gallery__item {
  width: 100%;
  object-fit: cover;
  margin-bottom: 24px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .mizuho-life .mizuho-gallery__item:hover {
    opacity: 0.7;
  }
}

.mizuho-gallery01 .mizuho-gallery__item,
.mizuho-gallery02 .mizuho-gallery__item {
  display: block;
  height: 100%;
  aspect-ratio: 4 / 3;
}

.mizuho-gallery__item.mizuho-gallery__item--portrait {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: unset;
}

.mizuho-gallery__item.mizuho-gallery__item--portrait-crop {
  height: 100%;
  aspect-ratio: 7 / 10;
  object-fit: cover;
}

.mizuho-gallery__item.mizuho-gallery__item--portrait-crop-23 {
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.mizuho-gallery01 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  margin-bottom: 24px;
}

.mizuho-gallery02 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
  margin-bottom: 24px;
}

.mizuho-gallery02 .mizuho-gallery__item--portrait {
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.mizuho-gallery__item.is-hidden {
  display: none;
}

.mizuho-gallery__item.is-open {
  margin-bottom: 24px;
}

.gallery-more-btn {
  display: block;
  margin: 40px auto 0;
  padding: 14px 48px;
  border: none;
  border-radius: 999px;
  background: #c51f3a;
  color: #fff;
  cursor: pointer;
}

.gallery-more-btn::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

.gallery-more-btn.is-open::after {
  transform: translateY(2px) rotate(225deg);
}

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
}

.gallery-modal.is-active {
  display: flex;
}

.gallery-modal__image {
  max-width: 86vw;
  max-height: 86vh;
  object-fit: contain;
}

.gallery-modal button {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  cursor: pointer;
}

.gallery-modal__close {
  top: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 28px;
}

.gallery-modal__prev,
.gallery-modal__next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  font-size: 42px;
}

.gallery-modal__prev {
  left: 32px;
}

.gallery-modal__next {
  right: 32px;
}

@media (max-width: 768px) {
  .mizuho-life {
    padding: 60px 20px 80px;
    background-position: left 10px top 80px;
  }

  .mizuho-gallery01 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mizuho-gallery02 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mizuho-gallery__main {
    margin-bottom: 12px;
  }
}
.sns-box {
  padding: 30px 20px 42px;
  background: #b52033;
}

/* 教育制度について */
.recruit-detail {
  padding: 90px 30px 110px;
  background-color: #fff;
  scroll-margin-top: 80px;
}

.recruit-detail__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.recruit-detail__heading {
  margin-bottom: 80px;
  text-align: center;
}

.recruit-detail__heading .english {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

.recruit-detail__heading h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.5;
}

.recruit-detail__heading h2 img {
  height: 1em;
  width: auto;
}

.recruit-detail__text {
  margin: 0;
  font-size: 15px;
  line-height: 2.2;
}

.recruit-detail .recruit-detail__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 50px;
  min-width: 300px;
  max-width: 100%;
  padding: 12px 28px;
  border-radius: 999px;
  background: #b52033;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  word-break: keep-all;
}

.recruit-detail__button span {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.recruit-detail__button:focus-visible {
  outline: 3px solid #b52033;
  outline-offset: 4px;
}

.recruit-education {
  background-image:
    url(../../images/recruit/bg09.webp), url(../../images/recruit/bg010.webp);
  background-repeat: no-repeat;
  background-position:
    calc(50% - 565px) 75px,
    calc(50% + 520px) bottom;
}

.recruit-education__photos {
  display: grid;
  grid-template-columns: 226fr 243fr 226fr 243fr;
  align-items: start;
  gap: 20px;
}

.recruit-education__photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.recruit-education__body {
  display: grid;
  grid-template-columns: 480fr 500fr;
  gap: 20px;
  margin-top: 90px;
}

.recruit-education__intro {
  padding-top: 20px;
  text-align: center;
}

.recruit-education__intro h3 {
  margin: 0 0 40px;
  font-size: 27px;
  font-weight: bold;
  line-height: 1.6;
}
/* 園見学説明会のご案内 */
.recruit-tour {
  padding-top: 60px;
  padding-bottom: 140px;
  background-image: url(../../images/recruit/bg11.webp);
  background-repeat: no-repeat;
  background-position: calc(50% - 620px) top;
}

.recruit-tour__body {
  display: grid;
  grid-template-columns: 450fr 500fr;
  gap: 50px;
  align-items: start;
}

.recruit-tour__intro h3 {
  margin: 10px 0 26px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
}

.recruit-tour__intro .recruit-detail__text {
  line-height: 1.8;
}

.recruit-tour__intro .recruit-detail__button {
  margin-top: 40px;
}

.recruit-tour__photo {
  margin: 0;
}

.recruit-tour__photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* 採用までの流れ */
.recruit-flow {
  padding-top: 85px;
  padding-bottom: 115px;
  background: #fffaf9 url(../../images/recruit/bg12.webp) no-repeat
    calc(50% - 560px) 55px / 336px auto;
}

/* common.cssの#flow指定による負のマージンをページ側で解除 */
.page-recruit-info2 #flow {
  margin-top: 0 !important;
  padding-top: 85px !important;
}

.recruit-flow .recruit-detail__heading {
  margin-bottom: 60px;
}

.recruit-flow__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recruit-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 35px;
  align-items: center;
  min-height: 100px;
  margin: 0 0 32px;
  padding: 24px 35px;
  border-radius: 4px;
  background: #fff;
}

.recruit-flow__step:last-child {
  margin-bottom: 0;
}

.recruit-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: 32px;
  border-left: 2px dashed #e6dfe0;
}

.recruit-flow__number {
  position: absolute;
  top: -25px;
  left: 0;
  color: #B52033;
  font-family: "Abel", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
}

.recruit-flow__step h3 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
}

.recruit-flow__step:nth-child(n + 3) h3 {
  padding-left: 32px;
}

.recruit-flow__step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .recruit-detail {
    padding: 60px 20px 80px;
  }

  .recruit-detail__heading,
  .recruit-flow .recruit-detail__heading {
    margin-bottom: 42px;
  }

  .recruit-detail__heading .english {
    font-size: 12px;
  }

  .recruit-detail__heading h2 {
    font-size: 20px;
    gap: 3px;
  }


  .recruit-detail .recruit-detail__button {
    gap: 16px;
    padding: 12px 24px;
    font-size: 13px;
  }

  .recruit-education {
    background-position:
      -20px 35px,
      right -35px bottom;
    background-size:
      110px auto,
      130px auto;
  }

  .recruit-education__photos {
    gap: 12px;
  }

  .recruit-education__body,
  .recruit-tour__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .recruit-tour__body {
    display: flex;
    flex-direction: column;
  }

  .recruit-tour__photo {
    order: -1;
  }

  .recruit-education__body {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
  }

  .recruit-education__intro {
    display: contents;
  }

  .recruit-detail__text {
    text-align: left;
  }

  .recruit-education__body .recruit-detail__text {
    order: 1;
  }

  .recruit-education__intro h3 {
    margin-bottom: 0;
    font-size: 20px;
  }

  .recruit-education__intro .recruit-detail__button {
    order: 2;
    margin: 0 auto;
  }

  .recruit-tour {
    padding:60px 20px 80px;
    background-position: 12px top;
    background-size: 65px auto;
  }

  .recruit-tour__intro h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
  }

  .recruit-tour__intro {
    text-align: center;
  }

  .recruit-tour__intro .recruit-detail__button {
    display: flex;
    width: fit-content;
    min-width: 300px;
    max-width: 100%;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
  }

  .recruit-tour__photo {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .recruit-flow {
    padding-top: 60px !important;
    background-position: -45px 25px;
    background-size: 190px auto;
  }

  .recruit-flow__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 30px 22px 24px;
  }

  .recruit-flow__number {
    top: -20px;
    font-size: 32px;
  }

  .recruit-flow__step h3 {
    font-size: 18px;
  }

  .recruit-flow__step:nth-child(n + 3) h3 {
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .recruit-education__photos {
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
  }

  .recruit-education__intro h3 {
    font-size: 18px;
  }
}

.sns-box__inner {
  width: 100%;
  max-width: 956px;
  margin: 0 auto;
  padding: 30px 40px;
  border: 1px dotted #e18f9b;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 0.08em;
}

.sns-box__text {
  margin: 0 0 18px;
  color: #2c2c2c;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}

.sns-box__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 95px;
}

.sns-box .sns-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: #c51f3a;
  font-size: 16px;
  text-decoration: none;
}

.sns-link img {
  width: auto;
  height: 70px;
  object-fit: contain;
}

.sns-link + .sns-link img {
  width: 73px;
  height: 65px;
}

.sns-link span {
  position: relative;
  padding-left: 18px;
  text-decoration: underline;
  text-decoration-color: #e18f9b;
  text-underline-offset: 8px;
}

.sns-link span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 768px) {
  .sns-box {
    padding: 24px 20px;
  }

  .sns-box__inner {
    padding: 20px;
  }

  .sns-box__text {
    font-size: 14px;
    line-height: 1.8;
  }

  .sns-box__links {
    justify-content: center;
    gap: 24px 32px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    margin: 0 auto;
  }

  .sns-box .sns-link {
    gap: 12px;
    font-size: 13px;
  }

  .sns-link img,
  .sns-link + .sns-link img {
    width: 44px;
    height: 44px;
  }
}

/* 募集要項 */
.job-description {
  padding: 90px 20px 100px;
  text-align: center;
  background-image:url(../../images/recruit/jobdescription-bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.job-description__inner {
  margin: 0 auto;
}

.job-description__heading h2 {
  color: #fff;
}

.job-description__text {
  margin: 0 0 40px;
  color: #fff;
  font-size: 15px;
  line-height: 1.9;
}

.job-description__link,
.job-description__link:link,
.job-description__link:visited,
.job-description__link:hover,
.job-description__link:active {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 24px 40px;
  border: 1px dashed #b52033;
  border-radius: 8px;
  background: #fff;
  color: #b52033;
  font-size: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.job-description__link-text {
  text-decoration: underline;
  text-underline-offset: 7px;
}

.job-description__link-arrow {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .job-description {
    padding: 60px 20px 70px;
  }

  .job-description__text {
    margin-bottom: 30px;
    font-size: 14px;
  }

  .job-description__link {
    width: 100%;
    padding: 18px 20px;
    font-size: 13px;
  }
}

/* 園見学のお申込み */
.required {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.recruit-apply__note {
  margin: 0 0 40px;
  text-align: center;
  font-size: 15px;
  color: #2c2c2c;
}

.recruit-apply__form {
  max-width: 720px;
  margin: 0 auto;
}

.recruit-apply__form table {
  width: 100%;
  border-collapse: collapse;
}

.recruit-apply__form th {
  padding: 16px 20px;
  color: #B52033;
  font-size: 15px;
  text-align: left;
  vertical-align: middle;
}

.recruit-apply__form th .required-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  background: #b52033;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  vertical-align: middle;
}

.recruit-apply__form td {
  padding: 16px 20px;
  background: #fff;
  font-size: 15px;
  text-align: left;
  vertical-align: middle;
}

.recruit-apply__form td:has(.wpcf7-form-control-wrap:nth-of-type(2)) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
  white-space: nowrap;
  word-break: keep-all;
  /* 「年」「月」のテキストが入力欄と高さを合わせて中央に見えるようにする */
  line-height: 48px;
}

.recruit-apply__form td:has(.wpcf7-form-control-wrap:nth-of-type(2)) .wpcf7-form-control-wrap,
.recruit-apply__form td:has(.wpcf7-form-control-wrap:nth-of-type(2)) .wpcf7-not-valid-tip {
  line-height: normal;
}

.recruit-apply__form td:has(.wpcf7-form-control-wrap:nth-of-type(2)) .wpcf7-form-control-wrap {
  display: inline-block;
  width: 120px;
}

.recruit-apply__form td:has(.wpcf7-form-control-wrap:nth-of-type(2)) .wpcf7-form-control {
  width: 120px;
}

/* エラーメッセージは欄の幅(120px)に収まるよう折り返す(通常の流れのままにして、高さは自動確保) */
.recruit-apply__form td:has(.wpcf7-form-control-wrap:nth-of-type(2)) .wpcf7-not-valid-tip {
  white-space: normal;
}

.recruit-apply__form td:has(.wpcf7-submit) {
  text-align: center;
}

.recruit-apply__form tr:has(.wpcf7-submit) th {
  display: none;
}

.recruit-apply__form tr:has(.wpcf7-submit) {
  display: block;
}

.recruit-apply__form tr:has(.wpcf7-submit) td {
  width: 100%;
  text-align: center;
  display: block;
  box-sizing: border-box;
}

/* --- field rows ------------------------------------------------ */
/* Works with the CF7 default markup (label text + <br> + field),
   and also with the recommended .apply-row markup (see project notes)
   for pixel-accurate label/badge placement. */
.recruit-apply__form .wpcf7-form > p,
.recruit-apply__form .apply-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  column-gap: 28px;
  row-gap: 8px;
  margin: 0 0 24px;
}

.recruit-apply__form .wpcf7-form > p br {
  display: none;
}

.recruit-apply__form .apply-row__label {
  font-size: 14px;
  font-weight: bold;
  color: #2c2c2c;
}

.recruit-apply__form .apply-row__field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
}

.recruit-apply__form .apply-unit {
  font-size: 14px;
  color: #2c2c2c;
}

/* required badge */
.recruit-apply__form .hissu,
.recruit-apply__form .wpcf7-form-control-wrap.wpcf7-validates-as-required::before {
  content: "必須";
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 3px;
  background: #b52033;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
}

.recruit-apply__form .apply-row__label .hissu {
  margin-left: 8px;
}

/* --- inputs / select / textarea --------------------------------- */
.recruit-apply__form .wpcf7-form-control:not([type="submit"]) {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #f0c7cd;
  border-radius: 4px;
  background-color: #fff;
  color: #2c2c2c;
  font-size: 14px;
  font-family: inherit;
}

.recruit-apply__form .wpcf7-form-control::placeholder {
  color: #c9b3b7;
}

.recruit-apply__form .wpcf7-form-control:not([type="submit"]):focus {
  outline: none;
  border-color: #b52033;
}

.recruit-apply__form select.wpcf7-form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7L8.5 3.5' fill='none' stroke='%23B52033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 10px 10px;
}

.recruit-apply__form .wpcf7-form-control-wrap:has(select) {
  display: block;
}

.recruit-apply__form input[type="number"].wpcf7-form-control {
  width: 110px;
}

.recruit-apply__form textarea.wpcf7-form-control {
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
}

.recruit-apply__form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #b52033;
  font-size: 12px;
}

/* ご年齢:「満」「歳」を入力欄の左右に並べて表示する */
/* class:age は wrap ではなく input 自体に付くため :has(.age) で判定する */
.recruit-apply__form td:has(.age) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.recruit-apply__form .wpcf7-form-control-wrap:has(.age) {
  display: inline-block;
  width: 190px;
  vertical-align: middle;
}

/* エラーメッセージ「必須項目に入力してください。」が1行に収まる幅にしてあるため、折り返さない */
.recruit-apply__form .wpcf7-form-control-wrap:has(.age) .wpcf7-not-valid-tip {
  white-space: nowrap;
}

/* PC表示: 枠幅は入力欄(110px)に戻し、「歳」との間の空白をなくす。
   エラーメッセージは浮かせて1行表示にし、欄の幅には影響させない */
@media (min-width: 769px) {
  .recruit-apply__form .wpcf7-form-control-wrap:has(.age) {
    width: 110px;
    position: relative;
  }

  .recruit-apply__form .wpcf7-form-control-wrap:has(.age) .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
  }

  .recruit-apply__form td:has(.age):has(.wpcf7-not-valid-tip) {
    padding-bottom: 40px;
  }
}

.recruit-apply__form .wpcf7-response-output {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 14px 20px;
  border-radius: 4px;
  font-size: 14px;
}

/* --- submit ------------------------------------------------------ */
.recruit-apply__form .apply-submit,
.recruit-apply__form .wpcf7-form > p:last-child:has(.wpcf7-submit) {
  display: block;
  margin-top: 20px;
  text-align: center;
}

.recruit-apply__form .apply-submit,
.recruit-apply__form .wpcf7-form > p:last-child:has(.wpcf7-submit),
.recruit-apply__form td:has(.wpcf7-submit) {
  text-align: center !important;
}

.recruit-apply__form .apply-submit,
.recruit-apply__form .wpcf7-form > p:last-child:has(.wpcf7-submit) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 送信行は入力項目用の2列グリッドを解除して中央配置する */
.recruit-apply__form .wpcf7-form > p:has(.wpcf7-submit) {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.recruit-apply__form .wpcf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: fit-content;
  margin: 0 auto;
  float: none;
  min-width: 260px;
  padding: 15px 40px;
  border: none;
  border-radius: 999px;
  background: #b52033;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.recruit-apply__form .wpcf7-submit::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.recruit-apply__form .wpcf7-spinner {
  margin-left: 10px;
}

@media (max-width: 600px) {
  .recruit-apply__form .wpcf7-form > p,
  .recruit-apply__form .apply-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .recruit-apply {
    padding: 60px 20px 0;
  }

  .recruit-apply__form .wpcf7-form > p,
  .recruit-apply__form .apply-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
    margin-bottom: 20px;
  }

  .recruit-apply__form .wpcf7-form > p:has(.wpcf7-submit),
  .recruit-apply__form .apply-submit {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .recruit-apply__form .wpcf7-form > p:has(.wpcf7-submit) .wpcf7-form-control-wrap:has(.wpcf7-submit) {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .recruit-apply__form .wpcf7-form-control:not([type="submit"]),
  .recruit-apply__form input[type="number"].wpcf7-form-control {
    width: 100%;
    max-width: 100%;
  }

  .recruit-apply__form td,
  .recruit-apply__form th {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .recruit-apply__form .wpcf7-submit {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding: 14px 24px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .recruit-apply__form .wpcf7-form > p:has(.wpcf7-submit) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }

  .recruit-apply__form .wpcf7-form > p:has(.wpcf7-submit) .wpcf7-form-control-wrap:has(.wpcf7-submit) {
    justify-self: center;
    width: min(100%, 300px);
  }

  .recruit-apply__form .wpcf7-form > p:has(.wpcf7-submit) .wpcf7-submit {
    justify-self: center;
    margin-inline: auto !important;
  }
}