/* Bootstrapをインポート */
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');

/* カスタムスタイル */
body {
  padding-left: 20px; /* 左端から20pxの余白 */
  padding-right: 20px; /* 同様に右端にも余白 */
}

.container {
  padding-top: 20px; /* 上下の余白 */
  padding-bottom: 20px; /* 上下の余白 */
}

.card {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card h2 {
  font-size: 1.25rem;
  margin-bottom: 15px;
}

.parameter {
  margin-bottom: 15px;
}

.parameter label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.parameter select {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

/* メモリーカードのレイアウト */
#memory-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -15px; /* カード間の余白を均等にするためにマージンをマイナスに */
}

#memory-cards .col-md-3 {
  flex: 0 0 23%;
  max-width: 23%;
  padding: 15px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767.98px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* メディアクエリ */
@media (max-width: 768px) {
  #memory-cards {
    flex-direction: column;
  }
  #memory-cards .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.table-responsive {
  position: relative;
  max-height: 400px; /* 必要に応じて調整 */
  overflow-y: auto;
}

.sticky-header {
  position: sticky;
  top: 0;
  background-color: white; /* ヘッダーの背景色 */
  z-index: 1000;
}