/* ==========================================
   ヒーローエリア全体のスタイル
   ========================================== */
.ap-hero-section {
  width: 100%;
  background-color: #ffffff;
  padding: 60px 20px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 最大幅1200pxのインナーコンテナ */
.ap-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* 左側テキスト */
.ap-hero-content {
  flex: 1;
  min-width: 300px;
}

.ap-hero-sub {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.ap-hero-title {
  font-size: 42px;
  font-weight: 900;
  color: #0b2d72; /* アプライド様のベース群青色 */
  line-height: 1.6; /* 複数行にまたがった際、下線が上の文字と被らないよう広めに設定 */
  margin: 0;
}

.ap-text-large {
  font-size: 56px;
  line-height: 1.2;
}

/* 複数行に対応した右消えグラデーション下線 */
.ap-text-underline-gold {
  display: inline; /* インラインにすることで改行されたすべての行に適用 */
  /* 左から右へ流れるグラデーションを各行に配置 */
  background-image: linear-gradient(to right, #f1c40f 0%, rgba(241, 196, 15, 0.7) 60%, rgba(241, 196, 15, 0) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%; /* 各行の最下部に配置 */
  background-size: 100% 6px; /* 6pxの細い上品な下線に設定 */
  padding-bottom: 4px; /* 文字と線の間のクッション */
}

/* 右側画像 */
.ap-hero-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.ap-hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* 画像の角丸 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* レスポンシブ対応（スマホ表示） */
@media (max-width: 768px) {
  .ap-hero-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  
  .ap-hero-image {
    justify-content: center;
  }
  
  .ap-hero-sub {
    font-size: 18px;
  }
  
  .ap-hero-title {
    font-size: 32px;
  }
  
  .ap-text-large {
    font-size: 40px;
  }
}

/* ==========================================
   ワンストップセクションのスタイル
   ========================================== */
.ap-step-section {
  width: 100%;
  /* 上から下へ、明るい青から深い群青色へのグラデーション */
  background: linear-gradient(to bottom, #4a90e2 0%, #0b2d72 100%); 
  padding: 60px 20px 80px 20px;
  box-sizing: border-box;
}

/* 最大幅1200pxのインナーコンテナ */
.ap-step-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 3カラムの並び（上部） */
.ap-step-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

/* 各画像ブロック */
.ap-step-card {
  flex: 1;
  text-align: center;
}

/* 画像の上の白文字タイトル */
.ap-step-card-title {
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 20px 0;
  letter-spacing: 1px;
}

/* 画像エリア */
.ap-step-card-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ap-step-card-image img {
  width: 100%;
  display: block;
  height: auto;
}

/* 下部の白い角丸ボックス */
.ap-step-footer-box {
  background-color: #ffffff;
  border-radius: 30px; /* 大きめの角丸 */
  padding: 40px 50px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ボックス内のメインタイトル */
.ap-step-main-title {
  font-size: 28px;
  font-weight: 900;
  color: #0b2d72;
  margin: 0 0 20px 0;
}

/* ボックス内の説明文 */
.ap-step-sub-title {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
  margin: 0;
  text-align: justify; /* 両端揃えで綺麗に */
}

/* レスポンシブ対応（スマホ・タブレット表示） */
@media (max-width: 768px) {
  .ap-step-grid {
    flex-direction: column;
    gap: 40px;
  }
  
  .ap-step-card-title {
    font-size: 22px;
    margin-bottom: 10px;
  }
  
  .ap-step-footer-box {
    padding: 30px 20px;
    border-radius: 20px;
  }
  
  .ap-step-main-title {
    font-size: 20px;
  }
  
  .ap-step-sub-title {
    font-size: 14px;
  }
}

/* ==========================================
   サーバーラック紹介セクションのスタイル
   ========================================== */
.ap-rack-section {
  width: 100%;
  background-color: #ffffff;
  padding: 40px 20px 80px 20px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.ap-rack-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 上部：背景画像付きのヘッダーブロック */
.ap-rack-header {
  width: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('images-new/infrastructure_05.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-bottom: 50px;
  border-radius: 4px;
}

/* 1行目：白文字 */
.ap-rack-target {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

/* 2行目：白文字 */
.ap-rack-main-title {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

/* 3・4行目：ご指定の黄色（#ffff00） */
.ap-rack-lead {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: #ffff00;
  margin: 0;
}

/* 中央：キャッチコピー */
.ap-rack-catch {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin: 0 0 40px 0;
}

/* 下部：左右2カラムレイアウト */
.ap-rack-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* 左側：メリットリスト */
.ap-rack-features {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 各メリットの1行のまとまり */
.ap-feature-item {
  display: flex;
  align-items: stretch; /* ラベルとテキストボックスの高さを揃える */
}

/* 紺色の正方形ラベル（画像通りに統一） */
.ap-feature-label {
  width: 80px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff00; /* 文字色は画像と同じく黄色 */
  font-weight: bold;
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
  text-align: center;
}
.ap-bg-navy { background-color: #000c3a; } /* 濃い紺色 */

/* テキストを囲む外枠（グレーの境界線と薄い背景） */
.ap-feature-text-box {
  flex: 1;
  border: 1px solid #cccccc;
  background-color: #f9f9f9;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  border-left: none; /* ラベルと繋がって見えるよう左線を消す */
}

/* メリットの説明文 */
.ap-feature-text {
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
  margin: 0;
}

/* 右側：イラスト画像 */
.ap-rack-image-box {
  flex: 0.9;
  display: flex;
  justify-content: center;
}

.ap-rack-image-box img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* レスポンシブ対応 */
@media (max-width: 992px) {
  .ap-rack-header {
    padding: 30px 15px;
  }
  .ap-rack-target { font-size: 16px; }
  .ap-rack-main-title { font-size: 24px; }
  .ap-rack-lead { font-size: 16px; }
  .ap-rack-catch { font-size: 18px; }
  
  .ap-rack-content {
    flex-direction: column;
    gap: 30px;
  }
  .ap-rack-image-box {
    max-width: 350px;
  }
  .ap-feature-text {
    font-size: 14px;
  }
  .ap-feature-label {
    width: 65px;
    font-size: 16px;
  }
}
/* ==========================================
   周辺機器セクションのスタイル
   ========================================== */
.ap-device-section {
  width: 100%;
  background-color: #ffffff; /* ベース背景は白に */
  padding: 60px 20px 80px 20px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.ap-device-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 上部のリード文 */
.ap-device-lead {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin: 0 0 40px 0;
}

/* 3カラムのレイアウト（横並び） */
.ap-device-grid {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

/* 各機器カード（全体を画像通りのグレーボックスにし、しっかり影付け） */
.ap-device-card {
  flex: 1;
  background-color: #d1d5db; /* 画像のような落ち着いたグレー背景 */
  border-radius: 4px;
  padding: 20px;
  box-sizing: border-box;
  /* ボックスを立体的に見せるドロップシャドウ */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1); 
  display: flex;
  flex-direction: column;
}

/* カード内のタイトル（左上の大きな太字テキスト） */
.ap-device-card-title {
  font-size: 32px;
  font-weight: 900;
  color: #111111;
  margin: 0 0 15px 0;
  letter-spacing: 0.5px;
}

/* 各機器の画像枠 */
.ap-device-card-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* 画像自体にもうっすら影を追加 */
}

.ap-device-card-image img {
  width: 100%;
  display: block;
  height: auto;
}

/* 各機器の説明文（太字で読みやすく） */
.ap-device-card-text {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: #111111;
  margin: 0;
}

/* レスポンシブ対応（スマホ・タブレット表示） */
@media (max-width: 768px) {
  .ap-device-lead {
    font-size: 18px;
    line-height: 1.4;
  }
  
  .ap-device-grid {
    flex-direction: column;
    gap: 40px;
  }
  
  .ap-device-card {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }
}

/* ==========================================
   サイズ選定・実績・お問合せセクションのスタイル
   ========================================== */
.ap-contact-section {
  width: 100%;
  background-color: #ffffff;
  padding: 40px 20px 80px 20px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.ap-contact-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* 上段：指定画像を横幅いっぱいに綺麗に表示 */
.ap-contact-image-area {
  width: 100%;
  margin-bottom: 40px;
}

.ap-contact-image-area img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 中段：実績テキスト（太字で大きく） */
.ap-contact-achievement-box {
  margin-bottom: 40px;
  padding: 0 10px;
}

.ap-contact-achievement-text {
  font-size: 24px;
  font-weight: 900;
  color: #111111;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.5px;
}

/* 下段：サイズ別リンクボタン（画像通りのシャープな青い角丸） */
.ap-contact-cta-area {
  display: flex;
  justify-content: center;
}

.ap-size-link-button {
  display: inline-block;
  background-color: #1e50a2; /* 画像と同じ鮮やかな青色 */
  color: #ffffff !important;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
  padding: 15px 60px;
  border-radius: 8px; /* シャープな角丸 */
  box-shadow: 0 4px 12px rgba(30, 80, 162, 0.3); /* 爽やかな青い影 */
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

/* ホバー時に少し明るく、沈むエフェクト */
.ap-size-link-button:hover {
  background-color: #2563c4;
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(30, 80, 162, 0.2);
}

/* レスポンシブ対応（スマホ表示） */
@media (max-width: 768px) {
  .ap-contact-section {
    padding: 30px 15px 50px 15px;
  }
  
  .ap-contact-image-area {
    margin-bottom: 25px;
  }
  
  .ap-contact-achievement-text {
    font-size: 16px;
    line-height: 1.5;
  }
  
  .ap-size-link-button {
    font-size: 16px;
    padding: 12px 20px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
  }
}

/* ==========================================
   撤去・メンテナンスセクションのスタイル
   ========================================== */
.ap-maintenance-section {
  width: 100%;
  background-color: #dae7f6; /* ご指定の薄いブルー背景 */
  padding: 60px 20px 80px 20px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.ap-maintenance-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 上部キャッチコピーヘッダー */
.ap-maintenance-header {
  text-align: center;
  margin-bottom: 50px;
  color: #111111;
}

.ap-maintenance-title {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.ap-maintenance-subtitle {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

/* リスト全体のコンテナ */
.ap-maintenance-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 50px;
}

/* 各段のダークグレー背景ブロック */
.ap-maint-block {
  background-color: #222a35; /* 画像通りの濃い暗めグレー背景 */
  border-radius: 4px;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 2段目のように、画像とテキストの左右を入れ替えるクラス */
.ap-maint-block.ap-reverse {
  flex-direction: row-reverse;
}

/* ブロック内テキストエリア */
.ap-maint-content {
  flex: 1.2;
}

/* 黄色の見出しテキスト */
.ap-maint-heading {
  font-size: 24px;
  font-weight: 900;
  color: #ffff00; /* 画像通りの鮮やかな黄色 */
  margin: 0 0 15px 0;
  line-height: 1.4;
}

/* 白の説明文 */
.ap-maint-text {
  font-size: 15px;
  line-height: 1.6;
  color: #ffffff; /* 白文字 */
  margin: 0;
}

/* ブロック内画像エリア（2枚横並び） */
.ap-maint-images {
  flex: 0.8;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.ap-maint-images img {
  width: calc(50% - 7.5px); /* 2枚が綺麗に半分ずつ収まる計算 */
  height: auto;
  border-radius: 2px;
  object-fit: cover;
}

/* 最下部お問合せボタン（画像通りのシャープな青い角丸） */
.ap-maintenance-cta {
  display: flex;
  justify-content: center;
}

.ap-maint-link-button {
  display: inline-block;
  background-color: #1e50a2; /* 鮮やかなアプライドブルー */
  color: #ffffff !important;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
  padding: 18px 50px;
  border-radius: 40px; /* 画像通りの長丸丸み */
  box-shadow: 0 5px 15px rgba(30, 80, 162, 0.4);
  transition: all 0.2s ease;
}

.ap-maint-link-button:hover {
  background-color: #2563c4;
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(30, 80, 162, 0.2);
}

/* レスポンシブ対応（スマホ・タブレット表示） */
@media (max-width: 992px) {
  .ap-maintenance-title { font-size: 18px; }
  .ap-maintenance-subtitle { font-size: 16px; }
  
  .ap-maint-block, 
  .ap-maint-block.ap-reverse {
    flex-direction: column; /* スマホ時はすべて縦並び */
    gap: 25px;
    padding: 20px;
  }
  
  .ap-maint-heading { font-size: 18px; }
  .ap-maint-text { font-size: 14px; }
  
  .ap-maint-images {
    width: 100%;
  }
  
  .ap-maint-link-button {
    font-size: 15px;
    padding: 12px 20px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ==========================================
   サイズ選定・実績セクションのスタイル
   ========================================== */
.ap-contact-section {
  width: 100%;
  background-color: #ffffff;
  padding: 40px 20px 60px 20px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.ap-contact-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* 上段：指定画像を横幅いっぱいに綺麗に表示 */
.ap-contact-image-area {
  width: 100%;
  margin-bottom: 40px;
}

.ap-contact-image-area img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 中段：実績テキスト（太字で大きく） */
.ap-contact-achievement-box {
  margin-bottom: 40px;
  padding: 0 10px;
}

.ap-contact-achievement-text {
  font-size: 24px;
  font-weight: 900;
  color: #111111;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.5px;
}

/* 下段：サイズ別リンクボタン（画像通りのきれいな角丸長丸） */
.ap-contact-cta-area {
  display: flex;
  justify-content: center;
}

.ap-size-link-button {
  display: inline-block;
  background-color: #1e50a2; /* 鮮やかなアプライドブルー */
  color: #ffffff !important;
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
  padding: 15px 60px;
  border-radius: 40px; /* 画像と同じく綺麗な長丸に調整 */
  box-shadow: 0 5px 15px rgba(30, 80, 162, 0.3); /* 爽やかな青い影 */
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

/* ホバー時に沈むエフェクト */
.ap-size-link-button:hover {
  background-color: #2563c4;
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(30, 80, 162, 0.2);
}

/* レスポンシブ対応（スマホ表示） */
@media (max-width: 768px) {
  .ap-contact-section {
    padding: 30px 15px 40px 15px;
  }
  
  .ap-contact-image-area {
    margin-bottom: 25px;
  }
  
  .ap-contact-achievement-text {
    font-size: 16px;
    line-height: 1.5;
  }
  
  .ap-size-link-button {
    font-size: 15px;
    padding: 12px 20px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
  }
}

/* ==========================================
   ふたつめの修正：最下部ボタンとフッターの間の余白調整
   ========================================== */
.ap-maintenance-section {
  /* 下側のパディングを広げて、フッターとの間にしっかり余白を確保 */
  padding-bottom: 120px !important; 
  /* テーマのフッターとの間に強制的に外側余白（隙間）を作る設定 */
  margin-bottom: 40px; 
}

/* レスポンシブ対応（スマホ表示時も詰まりすぎないよう調整） */
@media (max-width: 992px) {
  .ap-maintenance-section {
    padding-bottom: 80px !important;
    margin-bottom: 20px;
  }
}
/* ==========================================
   再修正：ヘッダー下にさらに上品な余白を追加
   ========================================== */
.ap-lp-main-wrapper {
  padding-top: 0 !important;
  
  /* 余裕を持たせた数値に変更して、文字の上にさらに余白を作ります */
  margin-top: 230px !important; 
  display: block;
  width: 100%;
  position: relative;
  z-index: 1; 
}

/* ヒーローエリアのインナー余白を微調整 */
.ap-hero-section {
  padding: 50px 20px !important;
}

/* レスポンシブ対応（スマホ表示時） */
@media (max-width: 768px) {
  .ap-lp-main-wrapper {
    /* スマホ時も少し余白を広げてバランスを整えます */
    margin-top: 130px !important; 
  }
  .ap-hero-section {
    padding: 30px 20px !important;
  }
}