/* =========================================================
   TOP メインビジュアル
   ========================================================= */
/* 全体 */
.hero {
  width: 100%;
  height: 100svh;

  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-rows: auto 1fr auto; /* ← 上・中・下の3段構成 */
  width: 100%;
  height: 100%;
  position: relative;
}

/* 背景画像（最背面） */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  z-index: 1;
}



.hero__curve {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* ← 見せたい部分（直径の半分） */
  overflow: hidden;
  z-index: 5;
}

.hero__curve::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;      /* 横幅は好きに調整してOK */
  height: 150px;    /* ← 円の直径を大きくする（ここが重要） */
  background: #ffffff;
  border-radius: 100% 100% 0 0;
  bottom: -100px;   /* ← 直径の半分だけ隠す */
}




/* 中央（キャッチコピー群） */
.hero__content {
  grid-row: 2; /* ← 中央段に固定 */
  align-self: center;
  justify-self: start;
  padding-left: 40px;
  z-index: 2;
  color: #fff;
  text-align: left;
}

.hero__catch {
  font-size: 64px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.4;
  margin: 0 0 20px;
  font-family: "Noto Serif JP", serif;
}

.hero__lead {
  font-size: 24px;
  font-size: clamp(0.75rem, 3vw, 1.5rem);
  font-family: "Noto Serif JP", serif;
  line-height: 1.6;
  margin: 0;
}
.hero__area {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1rem;
  font-size: clamp(0.8125rem, 2.5vw, 1rem);

  color: #fff;
  border: 1px solid #fff;
  display: inline-block;
  padding: 1rem 2rem; /* 上下1rem 左右1.5rem */
  margin: 2rem auto 0 auto; 
  border-radius: 40px;
  text-align: center;

}

.hero__cta-sp-position{
  display: none;
  text-align: center;
  margin: 60px auto 100px auto;
 
}


/* 最下部右寄せ（CTA） */
.hero__cta-position {
  grid-row: 3; /* ← 最下段に固定 */
  justify-self: end;
  align-self: end;
  margin: 0 40px 100px 0;
  padding: 0px 24px;
  z-index: 3;
}






/* =========================================================
   LOWER メインビジュアル
   ========================================================= */

/* 背景画像（最背面） */
.lowerHero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  z-index: 1;
}




   
/* 下層ページ共通体 */
.lowerHero {
  width: 100%;
  height: 680px;

  overflow: hidden;
}





.lowerHero__content {
  font-family: "Noto Serif JP", serif;
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  flex-direction: column; /* ← 縦並び */
  color: #fff;            /* ← 全体を白文字に */

}


/*下層タイトル　文字*/
.lowerHero__title {
  font-size:64px;
  font-size: clamp(2rem, 3.333vw, 4rem);
  line-height: 110%
}

.lowerHero__ruby {
  font-size:24px;
}












/* =========================================================
   TOP　ナラティブ
   ========================================================= */
.narrative {
  width: 100%;
  background-image: url(../img/top/contentBg_1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 4vw 0;

} 

.narrative__inner {
  display: flex;
  gap: 40px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.narrative__img {
  flex: 0 1 36.1%;
}

.narrative__img img {
  width: 100%;
  height: auto;
  display: block;
}

.narrative__content {
  flex: 1;
}

/*キャッチコピーの位置情報*/
.narrative__copy-position{
  margin-bottom: 1rem;
}
/*キャッチコピーの位置情報*/
.narrative__copy-sp-position{
  display: none;
}

/*テキストの位置情報*/
.narrative__text-position {
   margin-bottom: 100px;

}
/*ボタンの位置情報*/
.narrative__btn-position {
  width: 100%;
  text-align: right;
}




/*ナラティブボタンの位置情報SP*/
.narrative__btn-position-sp{
  display: none;
}




/* =========================================================
  トップ  サービス内容
   ========================================================= */
.service {
  display: flex;
  gap: 3.906vw; /* カラム間 */
}

/* 左カラム：幅 450px 固定 */
.service__left {
  flex: 0 1 450px;
  
}

.service__right {
  flex: 1;        /* ← 残り全部を使う */
  width: 100%;    /* ← 念のため100% */
}



/* タイトルの位置情報 */
.serviceTitle-position{
  margin-bottom: 3rem;

  
}



/* 画像 */
.service__img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem; /* 画像 → テキストの間 */
}



/* テキストの位置情報 */
.service__text-position {
  margin: 0 0 2rem; /* テキスト → ボタンの間 2rem */
}

/* ボタンの位置情報 */
.service__btn-position {
  text-align: right;
}

/*右カラム*/
.serviceList {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* ★ 横幅100% */
}

.serviceList__item {
  padding: 1rem 0;
}



/* リスト全体 */
.serviceList {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* 各アイテム */
.serviceList__item {
  margin: 0;
  padding: clamp(0.8125rem, 1.25vw, 1.5rem) 0;
  border-bottom: 1px solid #D9D9D9;
}
.serviceList__item {
  padding: clamp(0.6875rem, 1.25vw, 1.375rem) 0;
  border-bottom: 1px solid #D9D9D9;
}

.serviceList__item:first-child {
  padding-top:0;
  border-bottom: 1px solid #D9D9D9;
}


/* 2カラム（画像＋テキスト） */
.serviceList__inner {
  display: flex;
  align-items: center; /* ★ 画像の中央にテキストを揃える */
  gap: clamp(1.75rem, 2.5vw, 3rem);
}

/* 画像 */

.serviceList__img {

  max-width: 200px;
  width: 100%;
  height:auto;
  line-height: 0;/*下部余白を消す*/

}

/* テキスト */
.serviceList__text {
  font-family: "Noto Sans JP", sans-serif;
  color:#38393E;
  font-size: 1.5rem; /* 24px */
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  margin: 0;
  line-height: 1.6;
 
}




/* =========================================================
   トップ VISION
   ========================================================= */

.vision {

  padding: 6rem 0 4rem 0;
  text-align: center;
}

.vision__inner {
  max-width: 991px;
  margin: 0 auto;
  background-image: url("../img/top/contentBg_2.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size:contain;
  padding: 1rem;
}

.vision__title-position {
    margin-bottom: 2rem;
}

/* 位置情報：キャッチコピー　*/
.vision__catchCopy-position {
  margin-bottom: 70px;
  margin-bottom: clamp(37px, 3.65vw, 70px);
}

/* 位置情報：テキスト　*/
.vision__text-position {
  margin-bottom: 100px;
  margin-bottom: clamp(70px, 3.65vw, 100px);
}
/* 特殊タイプ　*/
.vision__text-position p{
  line-height: 240%;
}


/* 位置情報：2カラムボタン */
.vision__buttons-position {
  margin:0 auto;
  display: flex;
  justify-content: space-between; 
  gap: 2rem;
  max-width:650px;
}




/* =========================================================
   トップ 事業所を探す
   ========================================================= */

.station{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 6vw;
  flex-direction: row-reverse;

}

.station__img {
  max-width: 100%;
  width:600px;
  height: auto;

}


/* タイトルの位置情報 */
.station__title-position{
  margin-bottom: 3rem;
}

/* キャチコピーの位置情報 */
.station__catchCopy-position{
  margin-bottom: 30px;
  margin-bottom: clamp(22px, 1.56vw, 30px);

}



/* =========================================================
   トップ：採用情報 
   ========================================================= */

.recruit {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3.13vw;
  gap: clamp(2rem, 3.13vw, 60px);
  margin-top: 40px;
}

.recruit__left {
  flex: 1 1 40%;
}

.recruit__right {
  flex: 1 1 60%;
}

.recruit__catchCopy-position{
  margin-bottom: 30px;
  margin-bottom: clamp(22px, 1.56vw, 30px);

}
.recruit__text-position{
  margin-bottom: 120px;
  margin-bottom:clamp(50px, 6.25vw, 120px);

}

.recruit__btn-position{
  text-align: right;
}

.recruit__img {
  width: 400px;
  height: auto;
  display: block;
}




/* =========================================================
   下層：ページ見出し
   ========================================================= */

.pageHeading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}


.pageHeading__image {
  width: 100%;
  height: auto;
  display: block;
}


.pageHeading__title-position{
  margin-bottom: 2.5rem;
}





/* =========================================================
   下層：職種紹介 
   ========================================================= */
.job-type {
  display: flex;
  gap: 3.906vw; /* カラム間 */
}

/* 左カラム：幅 50% */
.job-type__left {
  flex: 0 1 50%;
  
}

.job-type__right {
  flex: 1;        /* ← 残り全部を使う */
  width: 100%;    /* ← 念のため100% */
}


.job-type__image {
  display: block;
  width: 100%;
  height: auto;
}

.job-type__subtitle-position{
  margin-top: 4rem;
  margin-bottom: 2rem;

}



/* =========================================================
   下層：職場について
   ========================================================= */
.work-place__list{
  padding: 60px;
  border-radius: 20px;
  background: #fff;
}
.work-place__item{
  margin-bottom: 150px;
}
.work-place__item:last-child{
  margin-bottom: 1rem;
}



.work-place__readText-position{
  margin-bottom: 2rem;

}
.work-place__text-position{
  margin-bottom: 2rem;

}

.work-place__btn-position {
  display: flex;
  justify-content: flex-end; /* 横方向：右寄せ */
  align-items: flex-end;     /* 縦方向：下寄せ */
  height: 100%;              /* 親の高さに合わせる */
}
.two-column--reverse .work-place__btn-position {

  justify-content: flex-start; /* 横方向：右寄せ */

}

/* =========================================================
   下層：FAQ
   ========================================================= */
.faqTitle-position{
  margin-bottom:1rem;

}

.faq__list{
  margin: 6rem auto 2rem auto;
  max-width: 1000px;
  width:100%;
}

.faq__item{
  width: 100%;
  margin-bottom: 2rem;
}

.faq__btn-position{
  width: 100%;
  text-align: center;
  padding-top: 2rem;
}

/* =========================================================
   下層：働くスタッフの声
   ========================================================= */
.servicevoiceTitle-position{
  margin-bottom: 1rem;

}   
.servicevoice__read-position{
  margin-bottom: 4rem;
}
   




/* =========================================================
   下層：求人票
   ========================================================= */
/*レイアウト*/
.job-listing {
  display: flex;
  gap: 2rem; /* 必要に応じて調整 */
  margin-bottom: 6rem;
}

.job-listing:last-child{
  margin-bottom: 2rem;
}

/* 左カラム：固定幅460px */
.job-listing__left {
  max-width: 460px;
}

.job-listing__img {
  max-width: 100%;
  width: 100%;
}


/* 右カラム：残り全部 */
.job-listing__right {
  flex: 1;
  min-width: 0; /* 長文でのはみ出し防止 */
}


.job-listing__name{
  font-size:1.3rem;
  color: #FF7B88;;
}


.job-listingTitle-position{
  margin-bottom: 3rem;
}

.job-listing__subTitle{
  font-size:24px;
  margin:3rem 0 1rem 0;
}



/* =========================================================
   下層：404
   ========================================================= */
.error-404{
  width: 100%;
  text-align: center;
  margin: 6rem 0;

}
.error-404__link-position{
  margin-top:3rem;
}



/* =========================================================
   スマホ向けのスタイル
   ========================================================= */
@media (max-width: 767px) {


/* =========================================================
   TOP　メインビジュアル
   ========================================================= */

.hero__catch {
  line-height: 180%;
  text-align: center;
}

/*キャッチコピーレイアウト*/
.hero__content {
  grid-row: 3; /* ← 中央段に固定 */
  justify-self:center;
  padding-left: 0px;
  color: #fff;
  text-align: center;
}
.hero__area {
  padding: .8rem 1.8rem; /* 上下1rem 左右1.5rem */
  display: block;

}
/*メインビジュアルCTAボタンの切り替え*/
.hero__cta-sp-position{
 display: block;
}
.hero__cta-position{
  display: none;
}

/* =========================================================
   下層　メインビジュアル
   ========================================================= */

/*下層タイトル　文字*/
.lowerHero__title {
  font-size:2rem;
  line-height: 110%
}

.lowerHero__ruby {
  font-size:1.125rem;
}



.lowerHero {
  height: 300px;
}










/* =========================================================
   TOP　ナラティブ
   ========================================================= */

.narrative {

  padding:  0;
 
} 




.narrative__inner {
  align-items: stretch;
  /* ★ これが必須！高さを親と揃える */
  height: 100%;
}


/*表示比率を半分にする*/
 .narrative__img,
  .narrative__content {
    flex: 0 0 50%;
  }







/*キャッチコピーの位置情報*/
.narrative__copy-position{
  display: none;
}
/*キャッチコピーの位置情報*/
.narrative__copy-sp-position{
  display:block;
  text-align: center;
  margin-bottom: 35px;
}


/*テキストの位置情報*/
.narrative__text-position {
   margin-bottom: 1rem;

}

/*ナラティブボタンの位置情報PC*/
.narrative__btn-position{
  display:none;
}


/*ナラティブボタンの位置情報SP*/
.narrative__btn-position-sp{
  text-align: right;
  display: block;
}



.narrative__img {
  flex: 0 1 55%;

}



/* =========================================================
    トップ  サービス内容
   ========================================================= */  
  .service {
    flex-direction: column;
    gap: 1.75rem; /* 28px など最小値に寄せると綺麗 */
  }

  .service__left {
    flex: none;   /* ← 固定幅を解除 */
    width: 100%;  /* ← 1カラム用に全幅 */
  }

  .service__right {
    width: 100%;
  }

.serviceList__img {
  max-width: 100px;
  width: 100%;
  height:auto;
  object-fit:none;
}

/* ボタンの位置情報 */
.service__btn-position {
  margin-bottom: 1rem;
}



/* =========================================================
   トップ VISION
   ========================================================= */

.vision {
  padding: 20px 0 ;
  text-align: center;
}

s.vision__inner {
  max-width: 991px;
  width: 100%;
  padding: 1rem;
}


/* 2カラム → 1カラム */
  .vision__buttons-position {
    flex-direction: column;  
    align-items: flex-end;  
    gap: 1.5rem;              
  }


/* 位置情報：テキスト　*/
.vision__text-position {
  margin-bottom: 40px;
  
}


/* =========================================================
   トップ 事業所を探す
   ========================================================= */
   
  .station {
    flex-direction: column;   /* 1カラムにする */
    align-items: flex-start; 
    gap: 1.5rem;             
  }

.station__left{
  width: 100%;
  text-align: center;
}
.station__img {
  width: 100%;
}




/* =========================================================
   トップ：採用情報 
   ========================================================= */
  .recruit {
    flex-direction: column;
  }

  .recruit__left{
    width: 100%;
    text-align: center;
  }

  .recruit__img {
    width: 100%;
    height: auto;

  }




/* =========================================================
   下層：ページ見出し
   ========================================================= */

  .pageHeading {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

.pageHeading__title-position{
  text-align: center;
  margin-bottom: 1.5rem;
}






/* =========================================================
   下層：職種紹介 
   ========================================================= */

  .job-type {
    flex-direction: column;  
    gap: 1rem;                
  }

  .job-type__left,
  .job-type__right {
    flex: none;             
    width: 100%;             
  }

  .job-type__subtitle-position {
    margin-top: 1rem;        
    margin-bottom: 1rem;
  }


/* =========================================================
   下層：職場について
   ========================================================= */



.two-column--reverse .work-place__btn-position {

  justify-content:flex-end; /* 横方向：右寄せ */

}

.work-place__list{
  padding: 2rem 1.5rem;
  border-radius: 20px;
  background: #fff;
}



.work-place__item{
  margin-bottom: 3.5rem;
}
.work-place__item:last-child{
  margin-bottom: 1rem;
}



.work-place__readText-position{
  margin-bottom: 1rem;

}
.work-place__text-position{
  margin-bottom: 2rem;

}


.two-column--reverse .work-place__btn-position {
  justify-content: flex-end; /* 横方向：右寄せ */

}











/* =========================================================
   下層：FAQ
   ========================================================= */

.faq__list{
  margin: 3.5rem auto 2rem auto;
 width: 100%;
}



/* =========================================================
   下層：働くスタッフの声
   ========================================================= */
.servicevoice__read-position{
  margin-bottom: 2rem;
}

/* =========================================================
   下層：求人票
   ========================================================= */

/*レイアウト*/
  .job-listing {
    flex-direction: column;
  }

/* 左カラム：固定幅460px */
.job-listing__left {
  max-width:100%;
}


  .job-listing__left,
  .job-listing__right {
    width: 100%;
  }

.job-listingTitle-position{
  margin-bottom: 2rem;
}

.job-listing__subTitle{
  font-size:24px;
  margin:2rem 0 1rem 0;
}














}