body {
  background-color: #f18ad9;
}
.recruit-section-1 {
  background-color: #f18ad9;
}
.recruit-message {
  background-color: #f18ad9;
  padding: 280px 10px;
  padding-top: 0px;
  padding-bottom: 50px;
}
.recruit-message1 {
  background-color: #b38af1;
  padding: 280px 10px;
  padding-top: 0px;
  padding-bottom: 150px;
}
.width-recruit-text {
  color: #fff;
}
.recruit-about {
  background-color: #ff54bb;
  width: 50%;
  border-radius: 15px;
  position: relative;
}
.recruit-about-coo {
  background-color: #af5fff;
  width: 50%;
  border-radius: 15px;
  position: relative;
}
.recruit-about1 {
  width: 50%;
  position: relative;
}
.company-top {
  width: 100%;
  z-index: 3;
  position: relative;
}
.company-name {
  position: absolute;
  bottom: 0;
  z-index: 3;
}
.company-path {
  position: absolute;
  bottom: 0;
  z-index: 0;
}
.width-text-wrap1 {
  z-index: 1;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  margin: 0;
  top: 80px;
  position: relative;
}
.recruit-company-flex {
  display: flex;
  gap: 100px;
  align-items: end;
}
.recruit-name {
  font-size: 18px;
  color: #fff;
  margin-bottom: 50px;
}
.recruit-name span {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}
.ceo-messeage-title {
  font-size: 42px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 80px;
}
.recruit-icon {
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 150px;
}
.ceo-messeage-box {
  background-color: #fff;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px;
  margin-top: 60px;
  border: solid 3px #ca5fb1;
  box-shadow: 18px 18px 0px #ca5fb1;
  border-radius: 20px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 36px 36px;
  background-repeat: repeat;
  background-position: center center;
}
.coo-messeage-box {
  background-color: #fff;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px;
  margin-top: 60px;
  border: solid 3px #7c62fe;
  box-shadow: 18px 18px 0px #7c62fe;
  border-radius: 20px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 36px 36px;
  background-repeat: repeat;
  background-position: center center;
}
.ceo-messsage {
  font-size: 22px;
  font-weight: 500;
}
.ceo-message-img {
  width: auto;
  height: 112px;
}
@media (max-width: 768px) {
  .ceo-message-img {
    width: 335px;
    height: auto;
  }
}

.career-section {
  background-color: #eaf7fe;
}
.carrer-text {
  color: #b38af1;
}
.carrer-text1 {
  color: #eaf7fe;
  text-shadow: 2px 2px 0 #b38af1, -2px 2px 0 #b38af1, 2px -2px 0 #b38af1, -2px -2px 0 #b38af1;
}
.path-img5 {
  left: -100px;
}
.career-flex {
  display: flex;
  margin-top: 60px;
}
.career-path {
  width: 50%;
}
.career-flex-title {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  font-size: 24px;
  position: relative;
  z-index: 10;
}
.benefits .en {
  font-size: 24px;
  color: #428af5;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  margin: 0;
}
.benefits .jp {
  margin: 15px 0 0;
  font-size: 42px;
  color: #428af5;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
}
.benefits-liner {
  padding: 0px;
  padding-top: 80px;
}

.section-title {
  font-size: 32px;
  font-weight: bold;
  color: #42c6f5;
  margin-bottom: 20px;
}

.healthcare {
  border: 5px solid #42c6f5 !important; /* 枠線カラー */
  border-radius: 20px;
  padding: 30px;
  margin: 40px auto;
  background: #fff;
  overflow: hidden; /* SP時の角丸内に収める */
}

.healthcare-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* スマホで折り返し */
}

.card {
  flex: 1;
  min-width: 250px;
  background: #42c6f5; /* 背景の薄い青 */
  border-radius: 8px;
  padding: 20px;
}

.card h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 15px;
}

.card p {
  font-size: 16px;
  color: #fff;
  line-height: 1.8;
}
.financial .section-title {
  font-size: 32px;
  font-weight: bold;
  color: #918af1;
  margin-bottom: 20px;
}
.financial {
  border: 5px solid #918af1 !important; /* 枠線カラー */
  border-radius: 20px;
  padding: 30px;
  margin: 40px auto;
  background: #fff;
  overflow: hidden; /* SP時の角丸内に収める */
}
.financial .card {
  flex: 1;
  min-width: 250px;
  background: #918af1; /* 背景の薄い青 */
  border-radius: 8px;
  padding: 20px;
}

.baby .section-title {
  font-size: 32px;
  font-weight: bold;
  color: #f18a8a;
  margin-bottom: 20px;
}
.baby {
  border: 5px solid #f18a8a !important; /* 枠線カラー */
  border-radius: 20px;
  padding: 30px;
  margin: 40px auto;
  background: #fff;
  overflow: hidden; /* SP時の角丸内に収める */
}
.baby .card {
  flex: 1;
  min-width: 250px;
  background: #f18a8a; /* 背景の薄い青 */
  border-radius: 8px;
  padding: 20px;
}

.teach {
  border: 5px solid #fba4e7 !important; /* 枠線カラー */
  border-radius: 20px;
  padding: 30px;
  margin: 40px auto;
  background: #fff;
  overflow: hidden; /* SP時の角丸内に収める */
}
.teach .section-title {
  font-size: 32px;
  font-weight: bold;
  color: #fba4e7;
  margin-bottom: 20px;
}

.healthcare-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* スマホで折り返し */
}

.teach .card {
  flex: 1;
  min-width: 250px;
  background: #fba4e7; /* 背景の薄い青 */
  border-radius: 8px;
  padding: 20px;
}

.teach .card h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.teach .card p {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
}

.event .section-title {
  font-size: 32px;
  font-weight: bold;
  color: #f49e02;
  margin-bottom: 20px;
}

.event {
  border: 5px solid #f49e02 !important; /* 枠線カラー */
  border-radius: 20px;
  padding: 30px;
  margin: 40px auto;
  background: #fff;
  overflow: hidden; /* SP時の角丸内に収める */
}

.healthcare-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* スマホで折り返し */
}

.event .card {
  flex: 1;
  min-width: 300px;
  background: #f49e02; /* 背景の薄い青 */
  border-radius: 8px;
  padding: 20px;
}

.card h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 15px;
}

.card p {
  font-size: 16px;
  color: #fff;
  line-height: 1.8;
}

.sonota .section-title {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}

.sonota {
  border: 5px solid #eaf18a !important; /* 枠線カラー */
  border-radius: 20px;
  padding: 30px;
  margin: 40px auto;
  background: #fff;
  overflow: hidden; /* SP時の角丸内に収める */
}

.healthcare-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* スマホで折り返し */
}

.sonota .card {
  flex: 1;
  min-width: 300px;
  background: #eaf18a; /* 背景の薄い青 */
  border-radius: 8px;
  padding: 20px;
}

.sonota .card h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.sonota .card p {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
}

.career-section {
  padding-bottom: 250px;
}

@media (max-width: 969px) {
  .recruit-company-flex {
    display: block;
  }
  img.step-img {
    width: 100%;
    margin-top: 50px;
  }
  .recruit-name {
    font-size: 18px;
    color: #fff;
    margin-bottom: 30px;
  }
  .recruit-icon {
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 100px;
  }
  .ceo-messeage-box {
    font-size: 15px;
    padding: 40px 15px;
  }
  .ceo-messeage-title {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 80px;
  }
  .recruit-about {
    width: 100%;
    border-radius: 15px;
    position: relative;
  }
  .recruit-about1 {
    width: 100%;
    position: relative;
  }
  .career-section {
    padding-bottom: 100px;
  }

  .benefits-liner {
    padding: 20px;
    padding-top: 80px;
  }
  .career-flex {
    display: block;
  }
  .career-path {
    width: 100%;
  }
  .path-img5 {
    left: 0px;
  }
}
@media (min-width: 969px) {
  .healthcare-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
  }

  .card {
    flex: 0 0 32.333%; /* ← 幅を固定、伸縮させない */
    max-width: 33.333%;
    border-radius: 6px;
    padding: 15px;
    box-sizing: border-box;
  }
}

/* ======================
   SPデザイン
====================== */
@media screen and (max-width: 969px) {
  .healthcare {
    border: 2px solid #42c6f5;
    border-radius: 6px;
    padding: 00px;
  }

  .section-title {
    margin: 0;
    background: #42c6f5;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    margin-bottom: 0px;
  }

  .healthcare-grid {
    display: block;
    padding: 0;
  }

  .card {
    background: #fff;
    border-radius: 0;
    padding: 16px;
    border-bottom: 1px solid #42c6f5;
  }

  .card:last-child {
    border-bottom: none;
  }

  .card h3 {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
  }

  .card p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
  }

  .financial .section-title {
    font-weight: bold;
    background: #918af1;
    color: #fff;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    margin-bottom: 0px;
  }
  .financial {
    border: 2px solid #918af1; /* 枠線カラー */
    border-radius: 6px;
    padding: 0px;
    margin: 40px auto;
    background: #fff;
    overflow: hidden; /* SP時の角丸内に収める */
  }
  .financial .card {
    flex: 1;
    min-width: 250px;
    background: #fff; /* 背景の薄い青 */
    border-radius: 0px;
    padding: 20px;
    border-bottom: 1px solid #918af1;
  }

  .baby .section-title {
    font-weight: bold;
    color: #fff;
    background-color: #f18a8a;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    margin-bottom: 0px;
  }
  .baby {
    border: 2px solid #f18a8a; /* 枠線カラー */
    border-radius: 6px;
    padding: 0px;
    margin: 40px auto;
    background: #fff;
    overflow: hidden; /* SP時の角丸内に収める */
  }
  .baby .card {
    flex: 1;
    min-width: 250px;
    background: #fff; /* 背景の薄い青 */
    border-radius: 0px;
    padding: 20px;
    border-bottom: 1px solid #f18a8a;
  }

  .teach .section-title {
    font-weight: bold;
    color: #fff;
    background-color: #fba4e7;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    margin-bottom: 0px;
  }
  .teach {
    border: 2px solid #fba4e7; /* 枠線カラー */
    border-radius: 6px;
    padding: 0px;
    margin: 40px auto;
    background: #fff;
    overflow: hidden; /* SP時の角丸内に収める */
  }
  .teach .card {
    flex: 1;
    min-width: 250px;
    background: #fff; /* 背景の薄い青 */
    border-radius: 0px;
    padding: 20px;
    border-bottom: 1px solid #fba4e7;
  }

  .event .section-title {
    font-weight: bold;
    color: #fff;
    background-color: #f49e02;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    margin-bottom: 0px;
  }
  .event {
    border: 2px solid #f49e02; /* 枠線カラー */
    border-radius: 6px;
    padding: 0px;
    margin: 40px auto;
    background: #fff;
    overflow: hidden; /* SP時の角丸内に収める */
  }
  .event .card {
    flex: 1;
    min-width: 250px;
    background: #fff; /* 背景の薄い青 */
    border-radius: 0px;
    padding: 20px;
    border-bottom: 1px solid #f49e02;
  }

  .sonota .section-title {
    font-weight: bold;
    color: #000;
    background-color: #eaf18a;
    color: #000;
    font-size: 24px;
    padding: 12px 16px;
    margin-bottom: 0px;
  }
  .sonota {
    border: 2px solid #eaf18a; /* 枠線カラー */
    border-radius: 6px;
    padding: 0px;
    margin: 40px auto;
    background: #fff;
    overflow: hidden; /* SP時の角丸内に収める */
  }
  .sonota .card {
    flex: 1;
    min-width: 250px;
    background: #fff; /* 背景の薄い青 */
    border-radius: 0px;
    padding: 20px;
    border-bottom: 1px solid #eaf18a;
  }

  .baby .section-title {
    font-weight: bold;
    color: #fff;
    background-color: #f18a8a;
    color: #fff;
    font-size: 24px;
    padding: 12px 16px;
    margin-bottom: 0px;
  }
  .baby {
    border: 2px solid #f18a8a; /* 枠線カラー */
    border-radius: 6px;
    padding: 0px;
    margin: 40px auto;
    background: #fff;
    overflow: hidden; /* SP時の角丸内に収める */
  }
  .baby .card {
    flex: 1;
    min-width: 250px;
    background: #fff; /* 背景の薄い青 */
    border-radius: 0px;
    padding: 20px;
    border-bottom: 1px solid #f18a8a;
  }
}