/* ===========================
   ヒーロー部分（画像＋タイトル）
=========================== */
.services-hero {
  position: relative;
  height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.services-hero.parallax-hero .parallax-bg img {
  width: 100%;
  height: 100%;
  object-position: center 30% !important;
  object-fit: cover !important;
}

.services-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.services-hero-background img {
    width: 100%;
    height: 100%; /* 450pxの高さいっぱいに表示 */
    object-fit: cover; /* 横が切れても高さを優先 */
    object-position: center 30%; /* 画像の上部寄りを表示 */
}

.services-hero-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 2rem;
}

.content-label {
  font-family: var(--font-family-special-2);
  font-size: var(--font-size-label);
  line-height: var(--lh-label);
  color: white;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.content-title {
  font-family: var(--font-family-default);
  font-size: var(--font-size-title);
  line-height: var(--lh-main-title);
  font-weight: bold;
  color: white;
  margin: 0;
  letter-spacing: var(--letter-spacing-sec-title);
}

/* 事業セクションタイトル用の小さめサイズ */
.content-title.business-title {
  font-size: clamp(28px, 3.5vw, 48px);
}

/* モバイル版事業セクションタイトル */
@media (max-width: 768px) {
  .content-title.business-title {
    font-size: clamp(22px, 5vw, 30px);
  }
}

/* ===========================
   本文部分（白背景＋中央寄せ）
=========================== */
.services-body-section {
  background-color: white;
  padding: 7rem 0 5rem 0;
  display: flex;
  justify-content: center;
}

.services-body-container {
  max-width: 800px;
  padding: 0 2rem;
}

.services-description {
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
}

.services-description.start {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.services-description p {
  font-family: var(--font-family-default);
  font-size: var(--font-size-sec-label);
  letter-spacing: var(--letter-spacing-sec-title);
  font-weight: 500;
  margin: 0 0 2rem 0;
  line-height: 1.8;
  color: var(--color-title);
}

.services-description p:last-child {
  margin-bottom: 0;
}

/* ===========================
   事業内容ボタンセクション
=========================== */
.services-buttons-section {
  padding: 0 0 10rem 0;
  background-color: white;
}

.services-buttons-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

.services-buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  opacity: 0;
  transform: translateY(30px);
}

.services-buttons-grid.start {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.service-button-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.service-button-item:hover {
  transform: translateY(10px);
}

.service-button-image {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 2rem;
  position: relative;
}

.service-button-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.7);
  transition: filter 0.3s ease;
}

.service-button-item:hover .service-button-image img {
  filter: brightness(0.5);
}

.service-button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 80%; /* 横幅をより広く */
  height: 70%; /* 高さも指定して縦の配置を調整 */
  padding: 0 10px; /* 少し余白を確保 */
}

.service-text {
  font-family: var(--font-family-default);
  font-size: var(--font-size-sec-label);
  color: white;
  font-weight: bold;
  line-height: 1.4;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  flex: 1;
  display: flex;
  align-items: center; /* 文字を下寄りに配置 */
  justify-content: center;
}

.service-arrow {
  width: 50px;
  height: auto;
  filter: brightness(0) invert(1); /* 白色に変更 */
  align-self: center; /* 矢印を中央に配置 */
  flex-shrink: 0; /* 矢印のサイズを固定 */
}

/* テキストを画像の上に重ねるための調整 */
.service-button-item {
  position: relative;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .services-hero {
    height: 200px;
    margin-top: 80px;
  }
  
  .services-hero-content {
    padding: 1.5rem;
  }
  
  .content-title {
    font-size: var(--mobile-font-size-sec-title);
    line-height: var(--mobile-lh-sec-title);
    letter-spacing: var(--mobile-letter-spacing-title);
  }

  .content-label {
    font-size: var(--mobile-font-size-sec-label);
    line-height: var(--mobile-lh-sub-text);
    letter-spacing: var(--mobile-letter-spacing-label);
  }

  /* 事業紹介ページ専用：セクションタイトルのサイズ調整（改行防止用） */
  .section-header .section-title {
    font-size: clamp(28px, 6.5vw, 40px) !important; /* business-titleより小さくならず、改行を防ぐ */
    line-height: var(--mobile-lh-sec-title) !important;
    letter-spacing: var(--mobile-letter-spacing-title) !important;
  }

  .services-body-section {
    padding: 5rem 0;
  }

  .services-body-container {
    padding: 0 1rem;
  }

  .services-description p {
    font-size: var(--mobile-font-size-main-text);
    line-height: var(--mobile-lh-main-text);
    letter-spacing: var(--mobile-letter-spacing-text);
  }

  .services-buttons-section {
    padding: 0 0 5rem 0;
  }

  .services-buttons-container {
    padding: 0 0.1rem;
    max-width: 100%;
    overflow: hidden;
  }

  .services-buttons-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.1rem;
    width: 100%;
  }

  .service-button-item {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .service-button-image {
    width: clamp(100px, 30vw, 140px);
    height: clamp(100px, 30vw, 140px);
    margin-bottom: 0.3rem;
  }

  .service-button-text {
    font-size: clamp(8px, 2.5vw, 14px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
  }

  .service-text {
    font-size: clamp(8px, 2.5vw, 14px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
  }

  .service-arrow {
    width: 24px;
    height: auto;
    align-self: center;
  }
}

/* システムインテグレーション事業、インフラ/クラウドソリューション、ITサポート業務の背景オーバーレイ */
#system-integration .parallax-bg::after,
#infrastructure-cloud .parallax-bg::after,
#it-support .parallax-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-title);
  opacity: 0.5;
  z-index: 1;
}

/* コンテンツがオーバーレイより前に表示されるようz-indexを調整 */
/* 背景画像の高さを十分に確保したので、テキストの自然な配置を保持 */
#system-integration .parallax-content,
#infrastructure-cloud .parallax-content,
#it-support .parallax-content {
  z-index: 10;
}

/* ===========================
   システムインテグレーション事業ヒーロー
=========================== */
.system-integration-hero {
  position: relative;
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* システムインテグレーション事業の背景位置設定 */
#system-integration {
  --hero-bg-position: center center; /* 元の中央表示を維持 */
}

/* インフラ/クラウドソリューションの背景位置設定 */
#infrastructure-cloud {
  --hero-bg-position: center center; /* 元の中央表示を維持 */
}

/* ITサポート業務の背景位置設定 */
#it-support {
  --hero-bg-position: center center; /* 元の中央表示を維持 */
}

.system-integration-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%; /* 画面幅の80%に調整し、右側に空白を残す */
  height: 100%;
}

.system-integration-hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.system-integration-hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  padding: 2rem;
  margin: 0 auto; /* 中央寄せに変更 */
}

/* インフラ/クラウドソリューション専用の右寄せスタイル */
.infrastructure-hero-right {
  justify-content: center; /* テキストは中央寄せに変更 */
}

.infrastructure-hero-right .system-integration-hero-background {
  left: auto;
  right: 0;
  width: 80%; /* 画面幅の80%に調整し、左側に空白を残す */
}

.infrastructure-hero-right .system-integration-hero-content {
  margin: 0 auto; /* 中央寄せに変更 */
}

/* ===========================
   システムインテグレーション本文部分（白背景＋中央寄せ）
=========================== */
.system-integration-body-section {
  background-color: white;
  padding: 5rem 0;
  display: flex;
  justify-content: center;
}

.system-integration-body-container {
  max-width: 850px;
}

.system-integration-description {
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
}

.system-integration-description.start {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.system-integration-description p {
  font-family: var(--font-family-default);
  font-size: var(--font-size-sec-label);
  letter-spacing: var(--letter-spacing-sec-title);
  font-weight: 500;
  margin: 0 0 2rem 0;
  line-height: 1.8;
  color: var(--color-title);
}

.system-integration-description p:last-child {
  margin-bottom: 0;
}

/* モバイル対応 - システムインテグレーション事業ヒーロー */
@media (max-width: 768px) {
  .system-integration-hero {
    height: 200px;
    margin-top: 80px;
  }
  
  .system-integration-hero-content {
    padding: 1.5rem;
  }

  .system-integration-description p {
    font-size: var(--mobile-font-size-main-text);
    line-height: var(--mobile-lh-main-text);
    letter-spacing: var(--mobile-letter-spacing-text);
  }
}

/* ===========================
   Winrichの特長セクション
=========================== */
.strength-section {
  position: relative;
  padding: 3rem 0 5rem 0;
  background-color: white;
}

.strength-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.strength-grid {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.strength-item {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

.strength-main-image {
  display: block;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.strength-main-image.start {
  opacity: 1;
  transform: translateY(0);
}

.strength-main-image img {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: block;
  margin: 0 auto;
}

/* モバイル対応 - Winrichの特長セクション */
@media (max-width: 768px) {
  .strength-section {
    padding: 3rem 0;
  }
  
  .strength-container {
    padding: 0 1rem;
  }
  
  .strength-main-image img {
    max-width: 100%;
  }
}

/* ===========================
   Winrichのこだわりセクション
=========================== */
.standards-section {
  padding: 5rem 0;
  background-color: white;
}

.standards-container {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 2rem;
}

.standards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 4rem;
}

.standards-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.standards-item.start {
  opacity: 1;
  transform: translateY(0);
}

.standards-image {
  width: 100%;
}

.standards-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.standards-content {
  width: 100%;
}

.standards-title {
  font-family: var(--font-family-default);
  font-size: var(--font-size-text-m);
  font-weight: bold;
  color: var(--color-title);
  margin: 0 0 1rem 0;
  letter-spacing: var(--letter-spacing-text-m);
  line-height: 1.4;
}

.standards-description {
  font-family: var(--font-family-default);
  font-size: var(--font-size-text-s);
  color: var(--color-text);
  margin: 0;
  line-height: 1.7;
  letter-spacing: var(--letter-spacing-text-s);
}

/* モバイル対応 - Winrichのこだわりセクション */
@media (max-width: 768px) {
  .standards-section {
    padding: 3rem 0;
  }
  
  .standards-container {
    padding: 0 1rem;
  }

  .standards-title {
    font-size: var(--mobile-font-size-sub-title);
    line-height: var(--mobile-lh-sub-text);
    letter-spacing: var(--mobile-letter-spacing-text);
  }

  .standards-description {
    font-size: var(--mobile-font-size-sub-text);
    line-height: var(--mobile-lh-sub-text);
    letter-spacing: var(--mobile-letter-spacing-text);
  }
  
  .standards-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .standards-item {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .standards-image {
    width: 100%;
    text-align: center;
  }
  
  .standards-image img {
    width: 100%;
    height: 200px;
  }
  
  .standards-title {
    font-size: var(--font-size-sec-label);
  }
  
  .standards-description {
    font-size: var(--font-size-text-s);
  }
}

/* ===========================
   フローセクション
=========================== */
.flow-section {
  position: relative;
  padding: 3rem 0 10rem 0;
  background-color: white;
}

.flow-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.flow-grid {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow-item {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

.flow-main-image {
  display: block;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.flow-main-image.start {
  opacity: 1;
  transform: translateY(0);
}

.flow-main-image img {
  width: 100%;
  height: auto;
  max-width: 800px;
  display: block;
  margin: 0 auto;
}

/* モバイル対応 - フローセクション */
@media (max-width: 768px) {
  .flow-section {
    padding: 3rem 0;
  }
  
  .flow-container {
    padding: 0 1rem;
  }
  
  .flow-main-image img {
    max-width: 100%;
  }

  /* PC/モバイル表示切り替え */
  .pc-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
}