body {
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #fafafa;
  margin:0 auto;

  
  width: 980px;/*ページの幅 */
  
}
header {
  position: fixed; /* ヘッダーを固定する */
  top: 0;          /* 画面の上端に配置 */
  background-color: rgb(255, 252, 245); /* ヘッダ色 */
  padding: 4px 300px 0 300px; /*　隙間 上、右、下、左*/
  box-sizing: border-box;
    height: 90px; /* ヘッダーの高さを指定する */
 
}



/* 詳細ページ */
/* 詳細ページのレイアウト */

.detail-container {
  display: flex;
  gap: 3px;
  align-items: flex-start;
}

.detail-image {
margin-top: 5px;
  flex: 1 1 400px;
 text-align: center;
  background: #fafafa;
}
.detail-image img {

  width: auto;

 
  object-fit: contain;
text-align: center;
height: 600px; 
  display: block; /* ブロック要素に変更 */
  margin: 0 auto; 


}

.detail-caption {
  flex: 1;
}

/* キャプションフォーム */
.detail-caption textarea {
   width: 500px; 
 display: block; /* ブロック要素に変更 */
margin: 0 auto;
  margin-top: 10px;
  height: 150px;
  
  font-size: 20px;
  border: 1px solid #ddd;
letter-spacing: 0.05em;
  resize: vertical;

}

  /* file 選択　位置*/
.upload-input {
  display: block;
   margin-top: 10px;
 margin-left: 300px;
  font-size: 20px;
}



.detail-caption button {
  margin-top: 10px;
margin-left: 50px;
  padding: 10px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;

}

/* ボタンの見た目 */
.updateButton {
  background: #4ea1ff;
  color: #fff;
}
.deleteButton {
  background: #ff4e4e;
  color: #fff;
}
.backButton {
  background: #ddd;
  color: #333;
}

.BK-Button {
  background: #ddd;
  color: #333;
    margin-top: 10px;
margin-left: 50px;
  padding: 10px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

.updateButton:hover { background: #2d7be5; }
.deleteButton:hover { background: #d83838; }
.backButton:hover { background: #ccc; }

/* スマホ表示（3列グリッド） */
/* --- スマホ用 --- */
@media (max-width: 768px) {
body { width: 100%;}
   

.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形で統一 */
  object-fit: cover;   /* トリミングして整える */
  display: block;
}
  .detail-container {
    flex-direction: column;
  
  font-size: 20px;
  border: 1px solid #ddd;
  border-radius: 0px;
  resize: vertical;

}


.detail-caption textarea {
 resize: vertical;
width: 360px; 
margin: 0 auto; 
display: block; 
 border: 2px solid #cccccc;
border-radius: 2px;

}

.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

  /* file 選択　位置*/
.upload-input {
  display: block;
  
 margin-left: 20px;
  font-size: 16px;
}

}