/*list-grid7
---------------------------------------------------------------------------*/
.list-grid7-parts .list-parts * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック*/
.list-grid7-parts {
	padding-top: 20px;	/*画像が少し上にずれるので適当に余白を確保*/
}

/*ボックス１個あたり*/

.list-grid7-parts .list-parts {
    display: grid;
	position: relative;
	border-radius: 5px;		/*角を少しだけ丸く*/
	background: #fafafa;	/*背景色*/
	color: #2e2c2c;			/*文字色*/
	padding: 2rem;			/*ボックス内の余白。２文字分。*/
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のh4見出し*/

.list-grid7-parts .list-parts h4 {
	text-align: center;	
	font-size: 1.2rem;	/*テキストをセンタリング*/
	color: #2a5ca4;
	margin-bottom: 0.5rem;	/*下に0.5文字分の余白を空ける*/
}

/*ボックス内のp要素*/
.list-grid7-parts .list-parts p {
	text-align: center;	
	font-size: 1rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid7-parts .list-parts figure {
	margin: 0 auto;
	width: 100px;			/*画像サイズ*/
	margin-top: -40px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background-color: rgb(226, 242, 250);
	transition: transform 0.5s ease;
}
.list-grid7-parts .list-parts:hover figure {
	transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  background-color: #b8ecc9;
  }

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid7-parts.square .list-parts figure {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid7-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}


/* 取り扱い商品説明箇所 -------------*/
/* 共通レイアウト */

section.product-section {
	margin-top: 40px;
  }

.product-section {
	padding: 40px 20px;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	background-color: #fff;
	display: block; /* 念のため */
	position: relative; /* これでもキャンセルされにくくなります */
  }
  
  .product-item {
	background-color: #fff;
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 8px;
	scroll-margin-top: 200px; /* ヘッダーの高さに合わせて調整 */
  }
  
  
  .item-title {
	background-color: #0066cc;
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	padding: 6px 10px;        /* 縦の余白を小さくした */
	margin-bottom: 10px;
	border-radius: 4px;
	width: 100%;
	text-align: center;
	box-sizing: border-box;

  }

  
  .item-type {
	display: flex;
	flex-wrap: wrap;       /* 複数行に折り返す */
	justify-content: center; /* 中央揃え */
	font-size: 1.3em;
	font-weight: 700;
	color: #333;
	line-height: 1.2;
	gap: 0.8em;
	text-align: center;     /* 行ごとに中央寄せ */
	max-height: none;       /* 高さ制限なし */
	overflow: visible;      /* 隠さない */
  }
  
  .item-type span::before {
	content: "";
	display: inline-block;
	width: 8px;      /* 四角の横幅 */
	height: 8px;     /* 四角の高さ */
	background-color: #0066cc; /* ← 四角の色（変更しやすい） */
	margin-right: 6px; /* 四角と文字の間隔 */
	vertical-align: middle;
  }
  
  .item-description {
	font-size: 1em;
	color: #333333;
	margin-bottom: 15px;
	margin-top: 10px; /* 上の余白が不要ならリセット */
	line-height: 1.6;
  }
  
  .product-images {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
  }
  
  .product-images img {
	width: 20%;
	margin-bottom: 35px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
/* 画像にカーソルを乗せると拡大する動き */
  .product-images img:hover {
	transform: scale(1.5); /* ← ホバー時に拡大 */
	z-index: 5;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  
/* 画像をクリックすると拡大する 
  .product-images img.active {
	transform: scale(2.5);
	z-index: 10;
	position: relative;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  } */
  

/* 一覧に戻るボタン */
  .back-btn {
	margin-top: 20px;
	text-align: right;
  }

  .back-btn a {
	display: inline-block;
	padding: 5px 10px;
	background: #0066cc;
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	font-size: 14px;
	transition: 0.3s;
  }
  .back-btn a:hover {
	background: #96e5f3;
  }
  
  
  /* レスポンシブ対応 */
  @media (max-width: 768px) {
	.product-section {
	  padding: 15px 10px;
	}
  
	.item-title { font-size: 1.2em; }
	.item-type  { font-size: 0.9em; }
  
	

	
	  .product-images img {
		width: 100%;
	  }
	
	  .product-images img.active {
		transform: scale(1.1);
	  }
	  .tag-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		margin: 20px 0;
	  }
	  
	  .tag-item {
		display: inline-block;
		padding: 4px 10px;
		background: #f4f4f4;
		border-radius: 4px;
		font-size: 1rem;
		word-break: break-word; /* 長い語も折り返す */
		white-space: normal;
		text-align: center;
	  }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
	.item-title { font-size: 1em; }
	.item-type  { font-size: 0.9em; }
  }

  
  
  @media (max-width: 1024px) {
	
	.item-description {
	  font-size: 0.8em;
	  margin-bottom: 15px;
	}
  
	.product-images {
	  gap: 10px;
	  justify-content: center;
	}
  
	.product-images img {
	  width: 28%;
	}
  
	.product-images img.active {
	  transform: scale(1.4);
	}
  }


  
/* 取り扱い商品説明箇所 -------------*/

  
	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-grid7-parts {
		display: grid;
		grid-template-columns: repeat(5, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 2rem	/*ブロックの間に空けるマージン的な指定。２文字分。*/
	}

	/*ボックス内のfigure画像*/
	.list-grid7-parts .list-parts figure {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

	}/*追加指定ここまで*/
	.list-grid7-parts .list-parts {
		max-width: 300px;
		margin: 0 auto;
		width: 100%; /* ← 念のため追加 */
	  }
	  
	  @media screen and (max-width: 768px) {
		.list-grid7-parts {
		  grid-template-columns: repeat(2, 1fr);
		}
	  }
	  
	  @media screen and (max-width: 480px) {
		.list-grid7-parts {
		  grid-template-columns: 1fr;
		}

		
	  }




	  @media screen and (max-width: 1024px) and (min-width: 769px) {
		
		.list-grid7-parts {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
			max-width: 700px;        /* 最大幅を制限 */
			margin: 0 auto;          /* 中央寄せ */
			padding: 0 1rem;         /* スマートな余白 */
		  }
		
	  
		.list-grid7-parts .list-parts {
		  padding: 1.5rem;
		  text-align: center; /* 中央寄せ */
		}
	  
		.list-grid7-parts .list-parts figure {
		  width: 100px;
		  margin: 0 auto 1rem; /* 上部余白と中央配置 */
		}
	  
		.list-grid7-parts .list-parts h4 {
		  font-size: 1.05rem;
		  margin-bottom: 0.5rem;
		}
	  
		.list-grid7-parts .list-parts p {
		  font-size: 0.9rem;
		}

		.product-images img {
			width: 22%;
		  }
		
		  .product-images img.active {
			transform: scale(1.8);
		  }

		  .item-description {
			font-size: 0.8em;
			margin-bottom: 15px;
		  }
	  }