body {
	margin: 0;
	background: #0b192c;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
}
p {
  font-size: 17px;
  line-height: 1.8;
}
.home-page,
.home-page * { box-sizing: border-box; }
.home-page { overflow: hidden; color: #0b192c; font-family: 'Noto Sans JP', sans-serif; }
.home-container { 
	width: min(calc(100% - 80px), 1600px); margin: 0 auto; }
.home-container--narrow { max-width: 800px; }
.home-section { position: relative; padding: 100px 0; }


/* ========================================================================== */

.home-hero {
  position: relative;
  width: 100%;
  height: calc(90vh - 117px);
  min-height: 400px;
  overflow: hidden;
}

/* 2. スライドショー全体のコンテナ（背景として全面に配置） */
.home-hero .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.home-hero .slide ul {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 3. 各スライド画像の設定とフェードアニメーション */
.home-hero .slide li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fadeSlide 15s infinite; /* 全体の1周：3枚 × 各5秒 = 15秒 */
}

.home-hero .slide li img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がコンテナいっぱいに綺麗に収まるようにする */
}

/* 4. 各画像のタイミング（ディレイ）設定 */
.home-hero .slide li:nth-child(1) {
  animation-delay: 0s;
}

.home-hero .slide li:nth-child(2) {
  animation-delay: 5s;
}

.home-hero .slide li:nth-child(3) {
  animation-delay: 10s;
}

/* フェードとズームの動きを定義するアニメーション */
@keyframes fadeSlide {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
   
/* ========================================================================== */


/* 全体に重ねる暗いグラデーション（オーバーレイ） */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(11, 25, 44, 0.3), rgba(11, 25, 44, 0.3));
  z-index: 1; /* 画像よりも手前に置く */
  pointer-events: none;
}

/* <img>タグがなくなったため不要なクラスは削除 */

.home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 25, 44, .58), rgba(11, 25, 44, .04) 68%),
    linear-gradient(0deg, rgba(11, 25, 44, .65), transparent 48%);
}

/* ロゴ・キャッチコピーの共通土台 */
.home-hero__inner {
  position: absolute;
  z-index: 2;
  left: 10%;
  bottom: 25%;
  width: 45%;
  max-width: 500px;
  color: #fff;
}

/* ロゴ：画面幅に応じて最大幅を可変にする */
.hero-logo {
  display: block;
  width: 30vw;
  max-width: 360px; /* PC時の最大幅 */
  height: auto;
}

/* キャッチコピー */
.home-hero__lead {
  margin: 14px 0 0 4px;
  font-size: clamp(15px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.08em;
}


.home-heading { margin-bottom: 50px; text-align: center; }
.home-heading__en { margin: 0 0 4px; color: #f59a00; font-size: 16px; font-weight: 700; letter-spacing: 0.18em; }
.home-heading--light .home-heading__en { color: #90cee8; }
.home-heading__title { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; }
.home-heading--light .home-heading__title { color: #fff; }
.home-heading__dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.home-heading__dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #f59a00; }
.home-reasons, .home-services { background: #003E92;; } 

.cta-contact { 
	box-sizing: border-box;
	width: 100%;
	padding: 48px 20px;
	background: #003E92;
}

.home-news, .home-company { background: #fff; }
.reasons-grid, .services-grid { display: grid; gap: 20px; }
.reasons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.reason-card {
  padding: 32px 24px 24px;
  background-color: #0b192c;
  border: 1px solid;
  border-image: linear-gradient(135deg, #e0e0e0 0%, #4a5568 50%, #ffffff 100%) 1;
  color: #fff;
}

.reason-card__number {
  display: inline-block;
  color: #2b6cb0;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-right: 16px;
  vertical-align: middle;
}

.reason-card__title {
  display: inline-block;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
}

.reason-card__text {
  min-height: 48px;
  margin: 20px 10px 24px;
  color: #d9e1ea;
  line-height: 1.8;
  font-size: 16px;
}

.reason-card__image {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-list {
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  /*border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 30px rgba(11, 25, 44, 0.1);*/
}

.news-list__item {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
  padding: 20px 32px;
  border-bottom: 1px dotted #ccc;
  color: #0b192c;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.news-list__item:hover {
  background-color: #f8fafc;
}

.news-list__item:hover .news-list__title {
  color: #f59a00;
}

.news-list__date {
  flex: 0 0 100px;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.news-list__category {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 4px;
  background: #f59a00;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.news-list__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  transition: color 0.2s ease;
  font-size: 16px;
}

.home-section__lead { margin: -20px 0 40px; line-height: 1.8; text-align: center; }
.home-section__lead--light { color: #fff; }
.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-card { position: relative; display: block; height: 400px; overflow: hidden; color: #fff; text-decoration: none; }
.service-card__image, .service-card__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.service-card__image { object-fit: cover; }
.service-card__shade {
    position: absolute;
    top: auto;     
    bottom: 0 !important;   
    left: 0;
    width: 100%;
    height: 140px;          
    background: rgba(12, 20, 36, 0.85);
}
.service-card__body { 
	position: absolute; 
	bottom: 0; left: 0; 
	display: flex; width: 100%; 
	flex-direction: column; gap: 0; 
	padding: 10px 40px; 
	color: #fff; 
	margin-bottom: 15px;
}
.service-card__body strong { display: block; margin-bottom: 12px; font-size: 23px; font-weight: 500; }
.service-card__body small { display: block; font-size: 16px; line-height: 1.6; opacity: 0.9; }

.company-layout__visual img { display: block; width: 100%; height: 320px; object-fit: cover; }

#company-btn {
  display: flex;          
  margin-top: 50px;    
  align-self: center;     
}

.home-button {
	display: inline-flex;
	align-items: center;
  justify-content: center;
	gap: 16px;
	min-width: 190px;
	height: 70px;
	padding: 0 20px;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
  margin: 40px auto 0;
  width: 300px;
  border: solid 2px #3e6bab;
}
.home-button--navy { background: #0b192c url('../images/link-arrow.svg') no-repeat right 20px center;background-size: 12px auto; color: #fff; }
.home-button--cta { background: #f59a00 url('../images/link-arrow-wh.svg') no-repeat right 20px center;background-size: 12px auto; color: #fff;border: solid 2px #f56e00; }
.home-button--outline { border: 1px solid rgba(255, 255, 255, .8); color: #fff; }
.home-recruit { min-height: 420px; color: #fff; background: #0b192c; }
.home-recruit__background { position: absolute; inset: 0; background: linear-gradient(rgba(11, 25, 44, .86), rgba(11, 25, 44, .86)), url('../../assets/images/top-image.jpg') center / cover no-repeat; }
.home-recruit__inner { position: relative; text-align: center; }
.home-recruit__message { margin: -16px 0 32px; font-size: 18px; line-height: 1.8; }

.page-fv,
.page-fv * {
	box-sizing: border-box;
}
.page-fv {
	position: relative;
	height: 280px; /* PC時の高さ */
	background: url('../images/page-header.webp') no-repeat center center;
  background-size: cover;
	
	/* ★追加：これだけで中の要素が上下左右の真ん中に配置されます */
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-fv__title-box {
	/* ★ absolute や top、transform はすべて削除します */
	width: 100%;
	text-align: center;
	padding: 0 20px;
}

.page-fv__title {
	margin: 0;
	color: #fff;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.4;
  letter-spacing: .2em;
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background-color: #e2e8f0;
  color: #0b192c;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.pagination .page-numbers.current {
  background-color: #0b192c;
  color: #ffffff;
}

.pagination a.page-numbers:hover {
  background-color: #0b192c;
  color: #ffffff;
}

.single-pagination {
  max-width: 800px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.single-pagination__prev { justify-self: start; }
.single-pagination__top { justify-self: center; }
.single-pagination__next { justify-self: end; }

.single-pagination__prev a,
.single-pagination__next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  background-color: #ffffff;
  color: #0b192c;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.single-pagination__prev a:hover,
.single-pagination__next a:hover {
  background-color: #0b192c;
  color: #ffffff;
}

.single-pagination__top .home-button {
  margin: 0 !important;
  width: auto !important;
  min-width: 230px;
  height: 60px;
  font-size: 16px;
}

.single-pagination__bottom {
  text-align: center;
  margin-top: 48px;
}

/* ==================================================
   指定メディアクエリ & ブレイクポイント設定
   ================================================== */

/* PC（標準）：992px 以上 */
@media screen and (min-width: 992px) {
	.home-container,
	.container {
		width: 100%;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* PC（小）：768px 〜 991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.home-hero {
    height: 60vh;
    min-height: 450px;
  }
  .home-hero__inner {
    left: 5%;
    bottom: 15%;
    width: 45%;
  }
  .hero-logo {
    max-width: 280px !important;
  }
  .home-hero__lead {
    font-size: clamp(14px, 1.9vw, 18px);
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  /* 統合されたロゴ設定 */
  .hero-logo {
    max-width: 280px !important;
  }

  .home-hero__lead {
    font-size: clamp(14px, 1.9vw, 18px);
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
	.reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.reason-card__text { min-height: 0; }

  .page-fv {
    height: 220px;
  }
  .page-fv__title {
    font-size: 38px;
  }
}

/* タブレット (TB)：576px 〜 767px */
@media screen and (min-width: 576px) and (max-width: 767px) {
	.home-container,
	.container {
		max-width: 540px;
	}

  .home-heading { margin-bottom: 50px; text-align: center; }

	.home-hero {
    height: 500px;
  }
  .home-hero__inner {
    left: 5%;
    bottom: 12%;
    width: 60%;
  }
  .hero-logo {
    max-width: 240px !important;
  }

  .home-hero__lead {
    font-size: clamp(13px, 3vw, 18px);
    line-height: 1.6;
  }

	.home-hero__title {
		font-size: 48px;
		margin-bottom: 16px;
	}
	.reasons-grid { grid-template-columns: 1fr; }
	.reason-card__text { min-height: 0; }

	#company-btn {
    align-self: center;
  }

  .home-heading__title {
    font-size: 28px;
  }

  .page-fv {
    height: 200px;
  }
  .page-fv__title {
    font-size: 32px;
  }

	.service-card__body { 
	position: absolute; 
	bottom: 0; left: 0; 
	display: flex; width: 100%; 
	flex-direction: column; gap: 0; 
	padding: 0px 24px; 
	color: #fff; 
	margin: 0 0 5px;
}
.service-card__body strong { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.service-card__body small { display: block; font-size: 15px; line-height: 1.6; opacity: 0.9; }
}

/* スマホ (SP)：max-width: 575px */
@media screen and (max-width: 575px) {
	p {
    font-size: 16px;
    line-height: 1.7;
  }
	.home-container,
	.container {
		width: 100%;
	}

  .page-fv {
    height: 160px; /* スマホでは高さを低くする */
  }
  .page-fv__title {
    font-size: 26px; /* スマホでも文字が折り返さない大きさに調整 */
  }

  .home-heading { margin-bottom: 20px; text-align: center; }
  .home-section {padding: 60px 0; }

  .home-hero {
    height: 420px; /* スマホ時の固定高さ、または適宜変更してください */
    min-height: 380px;
  }
  .home-hero__inner {
    left: 5%;
    bottom: 12%;
    width: 75%;
  }
  .hero-logo {
    width: clamp(140px, 38vw, 180px);
    max-width: 100%;
    height: auto;
  }

  .home-hero__lead {
    margin-top: 10px;
    font-size: clamp(12px, 3.8vw, 16px);
    line-height: 1.6;
    letter-spacing: 0.04em;
  }
  .home-hero__title {
    font-size: 44px;
  }
  .home-heading__title {
    font-size: 24px;
  }

	.reasons-grid { grid-template-columns: 1fr; }
	.news-list__item { align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; }
	.news-list__title { flex-basis: 100%; }
	.services-grid, .company-layout { grid-template-columns: 1fr; }
	.service-card { height: 280px; }
	.company-layout { gap: 32px; }
	.company-layout__visual img { height: 240px; }
	#company-btn {
    align-self: center;
  }

	.service-card__body { 
	position: absolute; 
	bottom: 0; left: 0; 
	display: flex; width: 100%; 
	flex-direction: column; gap: 0; 
	color: #fff; 
	margin: 0 0 5px;
}
.service-card__body strong { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.service-card__body small { display: block; font-size: 15px; line-height: 1.6; opacity: 0.9; }
}

.contact-form__privacy {
  font-size: 14px;
  line-height: 1.7;
}