@charset "utf-8";

/*=================================================================
  採用情報ページ page_recruit.css
  実測ベース (2026-07-09):
    - キャッチ「きれいな」濃緑 #1C5E33 / 「まち」ピンク #FE8BA7
    - キャッチ「あなた」明緑 #009245 / 「の手で。」黒 #000000
    - 見出し英字 script ピンク #FE8BA7
=================================================================*/

/*=================================================================
  ページタイトル HERO風レイヤー (page-title は共通 CSS 使用)
  Recruit 個別調整のみ
  実測 (2026-07-09):
    高さ ~575px (2x で 1150px)
    キャッチ font-size: 実測 82px (2x で 164px) → 5.5rem 相当
    line-height 1.35
=================================================================*/
.page-title-recruit {
  height: 670px !important;   /* fixedヘッダー約95pxを含む元の総高へ復元 */
}
/* 背景写真は右側に寄せる */
.page-title-recruit .page-title-bg {
  left: 0;
}
.page-title-recruit .page-title-bg img {
  object-position: center center;
}
/* 白グラデーションを強めに (左側は完全に白、右へフェード) */
.page-title-recruit .page-title-gradient {
  display: none;
}
.page-title-recruit .page-title-copy {
  display: block;
  transform: translateY(105px);
}
.page-title-recruit .page-title-copy .content {
  padding-top: 65px;
  padding-left: 0;
}
.page-title-recruit .h2-outer {
  animation: recruit-copy-fade 1.4s ease-out 0.35s both;
}
.page-title-recruit .catch .line {
  animation: recruit-copy-rise 1.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-title-recruit .catch .line:nth-child(1) {
  animation-delay: 0.75s;
}
.page-title-recruit .catch .line:nth-child(2) {
  animation-delay: 1.35s;
}
.page-title-recruit .lead {
  animation: recruit-copy-fade 1.2s ease-out 2.15s both;
}
@keyframes recruit-copy-fade {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes recruit-copy-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
    letter-spacing: 0.18em;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.02em;
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-title-recruit .h2-outer,
  .page-title-recruit .catch .line,
  .page-title-recruit .lead {
    animation: none;
  }
}
/* 採用情報 見出し */
.page-title-recruit .h2-outer {
  margin-bottom: 20px;
}
.page-title-recruit h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.0rem;   /* 見出し「採用情報」小さめ */
  font-weight: 700;
  color: #1C5E33;
}
.page-title-recruit .h2-outer .eng {
  font-size: 2.4rem;
  color: #FE8BA7;
}
/* キャッチコピー */
.page-title-recruit .catch {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 10px 0 25px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 700;
  font-feature-settings: normal;
  font-size: 5.5rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #1C5E33;   /* 濃緑デフォルト (line 1) */
  text-shadow:
    0 0 3px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 0.98),
    0 0 15px rgba(255, 255, 255, 0.88);
}
.page-title-recruit .catch .line {
  display: block;
}
.page-title-recruit .catch .line:nth-child(1) {
  color: #1C5E33;   /* 「きれいな」「を、」= 濃緑 */
}
.page-title-recruit .catch .line:nth-child(2) {
  color: #000000;   /* 「の手で。」= 黒 */
}
.page-title-recruit .catch .ac-pink {
  color: #FE8BA7 !important;
  font-weight: 700;
}
.page-title-recruit .catch .ac-green {
  color: #009245 !important;   /* 明緑 実測 #009245 */
  font-weight: 700;
}
.page-title-recruit .lead {
  font-size: 1.5rem;
  line-height: 1.9;
  color: #231815;
  max-width: 550px;
  font-weight: 500;
}

/*=================================================================
  Message セクション
=================================================================*/
.message {
  position: relative;
  padding: 100px 0 110px;
  background: #fff;
  overflow: hidden;
}
.message::before {
  content: none;
}
.message::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../images/recruit_message_back_img.jpg") left center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 60%);
  mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 60%);
  pointer-events: none;
}
.message > .wrap {
  position: relative;
  z-index: 1;
}
.recruit-kazari {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  pointer-events: none;
}
.message .recruit-kazari-01 {
  top: 45px;
  left: calc(50% + 180px);
  width: 130px;
}
.message .h2-outer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  margin-bottom: 55px;
}
.message h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #1C5E33;
  letter-spacing: 0.05em;
}
.message .h2-outer .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: left center;
  font-size: 2.4rem;
  color: #FE8BA7;
}
.message-body.box-outer {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 50px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.message .box-text .msg-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #1C5E33;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 30px;
}
.message .box-text .msg-body {
  font-size: 1.5rem;
  line-height: 2.05;
  color: #231815;
  margin-bottom: 25px;
}
.message .box-text .msg-body p {
  margin: 0;
}
/* 会社案内 greeting と同じ .signature スタイルに合わせる */
.message .box-text .signature {
  margin-top: 30px;
  text-align: right;
  font-size: 1.5rem;
  color: #1C5E33;
}
.message .box-text .signature .role {
  margin-right: 15px;
  font-size: 1.5rem;
  color: #231815;
}
.message .box-text .signature .name {
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.message .box-text .signature .name img {
  display: inline-block;
  width: 260px;
  height: auto;
  vertical-align: middle;
}
.message .box-photo {
  width: 100%;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.message .box-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/*=================================================================
  先輩社員インタビュー
=================================================================*/
.interview {
  position: relative;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.interview::before {
  content: none;
}
.interview::after {
  content: none;
}
.interview > .wrap {
  position: relative;
  z-index: 1;
  padding: 200px 0 110px;
  background:
    url('../images/border_back.png') no-repeat top center / 100% auto,
    linear-gradient(#F0F8ED, #F0F8ED) no-repeat 0 calc(100vw / 3 - var(--wave-fill-overlap)) / 100% calc(100% - 100vw / 3 + var(--wave-fill-overlap));
}
.interview > .wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 51%;
  left: -5%;
  width: 110%;
  height: 55%;
  border-radius: 50% 50% 0 0 / 85px 85px 0 0;
  background: #e2f0dc;
}
.interview > .wrap > .content {
  position: relative;
  z-index: 1;
}
.interview > .wrap > .recruit-kazari {
  z-index: 1 !important;
}
.interview > .wrap > .content {
  z-index: 2;
}
.interview .recruit-kazari-02 {
  top: 900px;
  left: calc(50% - 400px);
  width: 110px;
}
.interview .recruit-kazari-03 {
  bottom: 20px;
  left: calc(50% + 220px);
  width: 280px;
}
.interview .h2-outer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.interview h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #1C5E33;
  letter-spacing: 0.05em;
}
.interview .h2-outer .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: left center;
  font-size: 2.4rem;
  color: #FE8BA7;
}
/* 見出しの下のリード文 */
.interview > .wrap > .content > .lead {
  text-align: center;
  font-size: 1.4rem;
  color: #231815;
  line-height: 1.8;
  margin-bottom: 20px;
}
.interview-item {
  display: grid;
  gap: 40px;
  max-width: 1200px;
  margin: 100px auto 0;
  align-items: start;
}
.interview-item.item-photo-left {
  grid-template-columns: 550px 1fr;
}
.interview-item.item-photo-right {
  grid-template-columns: 1fr 550px;
}

/* 写真エリア: メイン + サブが重なる */
.interview-item .box-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
/* Interview 01/02 script 装飾テキスト（HTMLテキスト） */
.interview-item .int-num {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 60px;
  pointer-events: none;
  color: #FE8BA7;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.interview-item .int-num .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: left center;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.interview-item .int-num .num {
  font-family: "Noto Sans JP", Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 4.0rem;
  line-height: 0.95;
  margin-top: 0;
}
.item-photo-right .int-num {
  left: auto;
  right: 60px;
}
/* メイン写真 (大きい方) - 左上 */
.interview-item .photo-main {
  position: absolute;
  top: 40px;
  left: 0;
  width: 460px;
  aspect-ratio: 4 / 3;
  border-radius: 45px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
.item-photo-right .photo-main {
  left: auto;
  right: 0;
}
.interview-item .photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* サブ写真 (小さい方) - 右下に重ねる */
.interview-item .photo-sub {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 275px;
  aspect-ratio: 4 / 3;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.item-photo-right .photo-sub {
  right: auto;
  left: 0;
}
.interview-item .photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト側 */
.interview-item .box-text {
  padding-top: 20px;
}
.interview-item .int-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #1C5E33;
  line-height: 1.55;
  margin-bottom: 25px;
  letter-spacing: 0.02em;
}
.interview-item .int-divider {
  width: 55px;
  height: 3px;
  border: none;
  background: #FE8BA7;
  margin: 0 0 20px;
}
.interview-item .int-person {
  font-size: var(--section-body-font-size);
  color: #231815;
  margin-bottom: 20px;
}
.interview-item .int-qualification {
  margin: -10px 0 20px;
  font-size: var(--section-body-font-size);
  line-height: 1.7;
  color: #1C5E33;
  font-weight: 500;
}
.interview-item .int-person strong {
  font-weight: 700;
  font-size: 2.0rem;
}
.interview-item .int-body {
  font-size: var(--section-body-font-size);
  line-height: 1.95;
  color: #231815;
}

/* PC版：リード文から最初のインタビューへの間隔を30px詰める。 */
@media screen and (min-width: 1200px) {
  .interview > .wrap > .content > .lead + .interview-item {
    margin-top: 70px;
  }
}

/*=================================================================
  福利厚生 Welfare
=================================================================*/
.welfare {
  position: relative;
  padding: 100px 0 110px;
  background: #dff3ff url("../images/recruit_welfare_back_img.jpg") center center / cover no-repeat;
  overflow: hidden;
}
.welfare .h2-outer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.welfare h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #1C5E33;
  letter-spacing: 0.05em;
}
.welfare .h2-outer .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: left center;
  font-size: 2.4rem;
  color: #FE8BA7;
}
.welfare > .wrap > .content > .lead {
  text-align: center;
  font-size: 1.4rem;
  color: #231815;
  margin-bottom: 55px;
  line-height: 1.8;
}
.welfare-cards.box-outer {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 25px;
  row-gap: 40px;
  max-width: 870px;
  margin: 0 auto;
}
/* Row 1: cards 1,2,3 各2カラム */
.welfare-cards li:nth-child(1) { grid-column: 1 / span 2; }
.welfare-cards li:nth-child(2) { grid-column: 3 / span 2; }
.welfare-cards li:nth-child(3) { grid-column: 5 / span 2; }
/* Row 2: cards 4,5 中央寄せ */
.welfare-cards li:nth-child(4) { grid-column: 2 / span 2; }
.welfare-cards li:nth-child(5) { grid-column: 4 / span 2; }
.welfare-cards li {
  list-style: none;
  background: var(--color-white);
  border-radius: 22px;
  padding: 32px 20px 22px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(35, 72, 92, 0.29);
  min-height: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welfare-cards .icon {
  width: 120px;
  height: 100px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welfare-cards .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.welfare-cards h3 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1C5E33;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}
.welfare-cards p {
  font-size: var(--section-body-font-size);
  line-height: 1.7;
  color: #231815;
}

/*=================================================================
  職場風景スライダー
=================================================================*/
.shokuba {
  position: relative;
  z-index: 2;
  margin-top: -170px;
  padding: 130px 0 35px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 28%,
    rgba(255, 255, 255, 0.78) 76%,
    #fff 100%
  );
  overflow: hidden;
}
.shokuba-slider-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.shokuba-slider {
  list-style: none;
  padding: 0;
  margin: 0;
}
.shokuba-slider li {
  list-style: none;
  padding: 0 15px;
  box-sizing: border-box;
}
.shokuba-slider li img {
  width: 100%;
  aspect-ratio: 19 / 12;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
/* slick が生成する list-item のスタイル調整 */
.shokuba-slider .slick-track { display: flex; }
.shokuba-slider .slick-slide { height: auto; }

/*=================================================================
  募集要項 Application
=================================================================*/
.application {
  padding: 100px 0 110px;
  background: #fff url("../images/recruit_application_back_img.jpg") center center / cover no-repeat;
  position: relative;
}
.application .h2-outer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.application h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #1C5E33;
  letter-spacing: 0.05em;
}
.application .h2-outer .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: left center;
  font-size: 2.4rem;
  color: #FE8BA7;
}
.application > .wrap > .content > .lead {
  text-align: center;
  font-size: 1.4rem;
  color: #231815;
  margin-bottom: 45px;
  line-height: 1.8;
}
.app-table {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: var(--section-body-font-size);
}
.app-table th {
  width: 150px;
  padding: 18px 20px;
  background: #1C5E33;
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px 0 0 3px;
}
.app-table td {
  padding: 18px 25px;
  background: transparent;
  border-right: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
  color: #231815;
  line-height: 1.8;
  vertical-align: middle;
  border-radius: 0 3px 3px 0;
}
.app-more {
  text-align: center;
  margin-top: 50px;
}
.btn-pink-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  padding: 20px 40px;
  background: #F04070;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 50px;
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
  position: relative;
}
.btn-pink-pill::after {
  content: "▶";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
}
.btn-pink-pill:hover {
  opacity: 0.85;
}

/*=================================================================
  SP 対応 (max-width: 768px)
=================================================================*/
@media screen and (max-width: 768px) {

.recruit-kazari {
  display: none;
}

/* page-title */
.page-title-recruit .catch {
  font-size: 3.4rem;
  gap: 4px;
  margin: 15px 0 20px;
}
.page-title-recruit .lead {
  font-size: 1.25rem;
  max-width: 100%;
}

/* Message */
.message {
  padding: 50px 15px 60px;
}
.message::before {
  top: 110px;
  width: 100%;
  height: 360px;
  background-size: 1310px auto;
}
.message .h2-outer {
  display: block;
  text-align: center;
  margin-bottom: 30px;
}
.message h2 {
  font-size: 2.4rem;
  display: inline-block;
  margin-right: 8px;
}
.message .h2-outer .eng {
  font-size: 1.8rem;
  display: inline-block;
}
.message-body.box-outer {
  grid-template-columns: 1fr;
  gap: 25px;
}
.message .box-text .msg-title {
  font-size: 1.8rem;
  margin-bottom: 15px;
}
.message .box-text .msg-body {
  font-size: 1.25rem;
  line-height: 1.9;
}
.message .box-photo {
  order: -1;
}

/* Interview */
.interview {
  padding: 0;
}
.interview > .wrap {
  padding: 110px 15px 60px;
  background:
    url('../images/border_back.png') no-repeat top center / 100% auto,
    linear-gradient(#F0F8ED, #F0F8ED) no-repeat 0 calc(100vw / 3 - var(--wave-fill-overlap)) / 100% calc(100% - 100vw / 3 + var(--wave-fill-overlap));
}
.interview > .wrap::after {
  top: calc(51% + 60px);
  height: calc(55% - 60px);
}
.interview .h2-outer {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}
.interview h2 {
  font-size: 2.4rem;
  display: inline-block;
  margin-right: 8px;
}
.interview .h2-outer .eng {
  font-size: 1.8rem;
  display: inline-block;
}
.interview-item,
.interview-item.item-photo-left,
.interview-item.item-photo-right {
  grid-template-columns: 1fr;
  gap: 25px;
  margin-top: 55px;
}
.interview-item + .interview-item {
  margin-top: 100px;
}
.interview-item .box-text {
  padding-top: 0;
}
.interview-item .box-photo {
  aspect-ratio: auto;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.interview-item .photo-main {
  position: relative;
  top: auto;
  left: 0;
  width: 90%;
  margin-top: -20px;
}
.interview-item .photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-photo-right .photo-main {
  right: auto;
  left: 0;
}
.interview-item .photo-sub {
  position: relative;
  right: auto;
  bottom: auto;
  width: 65%;
  margin-top: -40px;
  margin-left: auto;
}
.interview-item .photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interview-item .int-num {
  top: -35px;
  right: 5%;
  left: auto;
  text-shadow: 0 0 3px #fff, 0 0 6px rgba(255, 255, 255, 0.9);
}
.item-photo-right .int-num {
  right: 5%;
  left: auto;
}
.item-photo-right .photo-sub {
  right: auto;
  left: auto;
}
.item-photo-right .box-photo {
  order: -1;
}
.item-photo-right .box-text {
  order: 2;
}
.interview-item .int-title {
  font-size: 1.8rem;
  margin-bottom: 15px;
}
.interview-item .int-title br {
  display: none;
}
.interview-item .int-num .num {
  font-size: 3.2rem;
}
.interview-item .int-num .eng {
  font-size: 1.4rem;
}
.interview-item .category,
.interview-item .int-body,
.interview-item .int-person {
  font-size: 1.2rem;
}

/* Welfare */
.welfare {
  padding: 50px 15px 60px;
}
.welfare .h2-outer {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}
.welfare h2 {
  font-size: 2.4rem;
  display: inline-block;
  margin-right: 8px;
}
.welfare .h2-outer .eng {
  font-size: 1.8rem;
  display: inline-block;
}
.welfare > .wrap > .content > .lead {
  font-size: 1.2rem;
  margin-bottom: 30px;
}
.welfare-cards.box-outer {
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.welfare-cards li:nth-child(1),
.welfare-cards li:nth-child(2),
.welfare-cards li:nth-child(3),
.welfare-cards li:nth-child(4),
.welfare-cards li:nth-child(5) {
  grid-column: auto;
}
.welfare-cards li:nth-child(4),
.welfare-cards li:nth-child(5) {
  margin-left: 0;
}
.welfare-cards li:nth-child(5) {
  max-width: none;
  margin: 0;
}
.welfare-cards li {
  padding: 20px 15px;
  min-height: 160px;
}
.welfare-cards .icon {
  width: 55px;
  height: 55px;
  margin-bottom: 10px;
}
.welfare-cards h3 {
  font-size: 1.35rem;
}
.welfare-cards p {
  font-size: 1.1rem;
}

/* Slider */
.shokuba {
  margin-top: -90px;
  padding: 90px 0 20px;
}
.shokuba.section-fade > .shokuba-slider-wrap {
  opacity: 1;
  transform: none;
}
.shokuba-slider:not(.slick-initialized) {
  display: flex;
  gap: 15px;
  width: max-content;
}
.shokuba-slider:not(.slick-initialized) li {
  display: block;
  flex: 0 0 70vw;
  padding: 0;
}
.shokuba-slider li {
  padding: 0 7.5px;
}
.shokuba-slider li img {
  aspect-ratio: 19 / 12;
  border-radius: 12px;
}

/* Application */
.application {
  padding: 30px 15px 60px;
}
.application .h2-outer {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}
.application h2 {
  font-size: 2.4rem;
  display: inline-block;
  margin-right: 8px;
}
.application .h2-outer .eng {
  font-size: 1.8rem;
  display: inline-block;
}
.app-table {
  display: block;
  font-size: 1.2rem;
}
.app-table tbody, .app-table tr {
  display: block;
}
.app-table th {
  display: block;
  width: 100%;
  padding: 8px 15px;
  border-radius: 3px 3px 0 0;
  text-align: left;
  font-size: 1.2rem;
}
.app-table td {
  display: block;
  padding: 12px 15px;
  border-radius: 0 0 3px 3px;
  margin-bottom: 8px;
}
.btn-pink-pill {
  min-width: 240px;
  padding: 16px 30px;
  font-size: 1.35rem;
}
.btn-pink-pill::after {
  right: 20px;
}

/* SP typography / spacing alignment */
.page-title-recruit .catch {
  font-size: 30px;
  margin: 12px 0 16px;
}
.page-title-recruit .lead { font-size: 15px; }

/* TOP Hero と同じSP構成：60svh / 下寄せコピー / 下からの白グラデ */
.page-title-recruit {
  height: 60svh !important;
  min-height: 0;
}
.page-title-recruit .page-title-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  object-position: center center;
}
.page-title-recruit .page-title-gradient {
  display: block;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.82) 26%,
    rgba(255, 255, 255, 0.42) 52%,
    rgba(255, 255, 255, 0) 78%
  );
}
.page-title-recruit .page-title-copy {
  position: absolute;
  inset: 0;
  display: block;
  height: auto;
  transform: none;
}
.page-title-recruit .page-title-copy .content {
  position: absolute;
  right: 0;
  bottom: 50px;
  left: 0;
  padding: 0 15px;
}
.page-title-recruit .page-title-petals { display: none; }
.message .h2-outer {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}
.message-body.box-outer {
  position: relative;
  z-index: 1;
  margin-top: -20px;
}
.message::after {
  background-size: 200% auto;
  background-position: center calc(55% + 100px);
  -webkit-mask-image: none;
  mask-image: none;
}
.message > .wrap > .content,
.welfare > .wrap > .content,
.application > .wrap > .content,
.interview > .wrap > .content { padding-left: 0; padding-right: 0; }
main .section-fade > .wrap > .content > .lead {
  text-align: left;
}
.message h2,
.interview h2,
.welfare h2,
.application h2 { font-size: 26px; }
.message .h2-outer .eng,
.interview .h2-outer .eng,
.welfare .h2-outer .eng,
.application .h2-outer .eng { font-size: 19px; }
.message .box-text .msg-title { font-size: 22px; line-height: 1.55; margin-bottom: 20px; }
.message .box-text .msg-body { font-size: 15px; line-height: 1.8; }
.message .box-text .signature .name img { width: 190px; }
.interview .h2-outer h2 {
  display: block;
  margin: 0;
  line-height: 1.3;
}
.interview .h2-outer .eng {
  display: block;
  width: max-content;
  margin: 5px auto 0;
  line-height: 1;
  transform-origin: center;
}
.interview > .wrap > .content > .lead,
.welfare > .wrap > .content > .lead { font-size: 16px; line-height: 1.75; text-align: left; }
.interview > .wrap > .content > .lead { margin-bottom: 30px; }
.interview-item .int-title { font-size: 20px; margin-bottom: 18px; }
.interview-item .int-num .num { font-size: 36px; }
.interview-item .int-num .eng { font-size: 16px; }
.interview-item .category,
.interview-item .int-body,
.interview-item .int-person { font-size: 15px; line-height: 1.75; }
.interview-item .int-person strong {
  font-size: 20px;
  line-height: 1;
}
.welfare > .wrap > .content > .lead { margin-bottom: 35px; }
.welfare-cards li { min-height: 150px; }
.welfare-cards .icon { width: 75px; height: 75px; }
.welfare-cards h3 { font-size: 15px; }
.welfare-cards p {
  width: 100%;
  font-size: 12px;
  line-height: 1.65;
  text-align: left;
}
.welfare-cards p br {
  display: none;
}
.app-table,
.app-table th { font-size: 15px; }
.btn-pink-pill { font-size: 15px; }
/* 共通ボタンの border 三角と、このページ固有の文字矢印を重ねない */
.application .btn-pink-pill::after {
  width: auto;
  height: auto;
  border: 0;
}

}  /* @media (max-width: 768px) */

/* 1200px基準の飾りを中間幅では画面比率に合わせる。 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .page-title-recruit { height: 55.8333vw !important; }
  .page-title-recruit h2 { font-size: 3.3333vw; }
  .page-title-recruit .h2-outer .eng { font-size: 2.5vw; }
  .page-title-recruit .catch { font-size: 4.5833vw; }
  .message { padding: 8.3333vw 0 9.1667vw; }
  .message > .wrap > .content {
    width: calc(100% - 3.3333vw);
    margin-right: 0;
    margin-left: 3.3333vw;
  }
  .message .h2-outer,
  .interview .h2-outer,
  .welfare .h2-outer,
  .application .h2-outer { gap: 1.6667vw; }
  .message h2,
  .interview h2,
  .welfare h2,
  .application h2 { font-size: 2.6667vw; }
  .message-body.box-outer { grid-template-columns: 1fr 41.6667vw; gap: 4.1667vw; max-width: 100%; }
  /* メッセージコピーは35px / 1200px を基準に、画面幅へ比例させる。 */
  .message .box-text .msg-title { font-size: 2.9167vw; }
  .message-body .lead { font-size: 2.3333vw; }
  .message-body p:not(.lead) { font-size: calc(12px + 0.1667vw); }
  .message .box-text .signature { margin-top: 2.5vw; }
  .message .box-text .signature .role { margin-right: 1.25vw; font-size: calc(10px + 0.4167vw); }
  /* 署名はメッセージ本文カラムに対する比率で縮小する。 */
  .message .box-text .signature .name img { width: 40%; }
  .interview > .wrap { padding: 16.6667vw 0 9.1667vw; }
  .interview-item { margin-top: 8.3333vw; gap: 3.3333vw; }
  .interview-item + .interview-item { margin-top: 10vw; }
  .interview-item.item-photo-left { grid-template-columns: 45.8333vw 1fr; }
  .interview-item.item-photo-right { grid-template-columns: 1fr 45.8333vw; }
  /* 写真ボックス（550px基準）に対する比率で、大・小写真を追従させる。 */
  .interview-item .photo-main {
    top: 7.2727%;
    width: 83.6364%;
    border-radius: 9.7826%;
  }
  .interview-item .photo-sub {
    width: 50%;
    border-radius: 10.9091%;
  }
  .interview-item .int-num { top: 0.9091%; left: 10.9091%; }
  .interview-item.item-photo-right .int-num { left: auto; right: 10.9091%; }
  .interview-item .int-num .eng { font-size: 1.25vw; }
  .interview-item .int-num .num { font-size: 3.3333vw; }
  .interview-item .int-title { font-size: 2.1667vw; margin-bottom: 2.0833vw; }
  .interview-item .int-divider { width: 4.5833vw; margin-bottom: 1.6667vw; }
  .interview-item .int-person,
  .interview-item .int-qualification,
  .interview-item .int-body { font-size: calc(12px + 0.1667vw); }
  .interview-item .int-person strong { font-size: 1.6667vw; }
  .welfare { padding: 8.3333vw 0 9.1667vw; }
  .welfare-cards { column-gap: 2.0833vw; row-gap: 3.3333vw; max-width: 72.5vw; }
  .welfare-cards li { min-height: 22.9167vw; padding: 2.6667vw 1.6667vw 1.8333vw; }
  .welfare-cards .icon { width: 10vw; height: 8.3333vw; margin-bottom: 1vw; }
  .welfare-cards h3 { font-size: 1.5vw; margin-bottom: 1vw; }
  .welfare-cards p { font-size: calc(11px + 0.1667vw); }
  .application { padding: 8.3333vw 0 9.1667vw; }
  .app-table { width: 83.3333vw; font-size: calc(12px + 0.1667vw); }
  .app-table th { width: 12.5vw; padding: 1.5vw 1.6667vw; }
  .app-table td { padding: 1.5vw 1.6667vw; }
  .message .recruit-kazari-01 {
    left: 65%;
    width: 8.125vw;
  }
  .interview .recruit-kazari-02 {
    top: 75vw;
    left: 16.6667%;
    width: 6.875vw;
  }
  .interview .recruit-kazari-03 {
    bottom: 1.6667vw;
    left: 60%;
    width: 17.5vw;
  }
}