// 縲・prdt_styl.css 縲・product style)

.product-button-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;}

.product-button-list li{
	margin: 0;
}

.btn-cs{
	background-image : url(bnr_cs01.png);
}
.btn-fd{
	background-image : url(bnr_fd01.png);
}
.btn-pp{
	background-image : url(bnr_pp01.png);
}
.btn-ms{
	background-image : url(bnr_ms01.png);
}

// hover effect

.btn-product:hover {
  transform: scale(1.1);		// (1.1) 笆ｲ竭､
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);cursor: pointer;}

.btn-product{
  display: inline-block;
  width: 204px;				// 204px 笆ｲ竭｢
  height: 40px;				// 40px  笆ｲ竭｡
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-size: cover;
  background-position: left;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  overflow: hidden;
  border: 2px solid green;		// 2px green(譫) 笆ｲ竭｣
  transition: transform 0.5s ease, box-shadow 0.3s ease; // 0.3s 笆ｲ竭
  overflow: hidden;
}

.btn-product:hover{
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 255, 0, 0.2);
}

/* ================================================= */
/* 蜿ｳ繧ｵ繧､繝峨・繝懊ち繝ｳ邵ｦ荳ｦ縺ｳ繝ｬ繧､繧｢繧ｦ繝・*/
#hpb-aside #banner ul.product-button-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;              /* 邵ｦ荳ｦ縺ｳ */
  flex-direction: column;
  gap: 26px;                  /* 12px 繝懊ち繝ｳ縺ｮ荳贋ｸ矩俣髫・*/
  align-items: flex-end;      /* 蜿ｳ蟇・○(繝懊ち繝ｳ蟷・′蜿ｯ螟峨〒繧ょ承縺ｫ豐ｿ縺・ */
}

/* 繝懊ち繝ｳ縺ｮ隕九◆逶ｮ繝ｻ蟷・ｒ謠・∴繧具ｼ域里蟄・.btn-product 縺後≠繧後・縺昴ｌ繧呈ｴｻ縺九☆・・*/
#hpb-aside .btn-product{
  display: inline-block;
  width: 240px;               /* 260px 繧ｵ繧､繝牙ｹ・↓蜷医ｏ縺帙※隱ｿ謨ｴ */
  text-align: left;           /* 繝ｩ繝吶Ν蟾ｦ蟇・○(縺雁･ｽ縺ｿ縺ｧ) */
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ荳ｭ繧ゅし繧､繝我ｸ企Κ縺ｫ蝗ｺ螳壹＠縺溘＞蝣ｴ蜷茨ｼ井ｻｻ諢擾ｼ・*/
#hpb-aside{
  position: sticky;
  top: 16px;                  /* 荳翫°繧峨・蝗ｺ螳壻ｽ咲ｽｮ */
}

/* ================================
   サブ製品ページ用スタイル統一セット
   2025-10-07 TCS
   ================================ */

/* ---- 全体レイアウト ---- */
#hpb-wrapper{
  padding-top: 30px;
  padding-bottom: 60px;
  background-color: #fefefe;
}

/* ---- 左ナビ領域 ---- */
#hpb-nav{
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

/* ---- ナビ文字サイズ調整 ---- */
#hpb-nav ul li a{
  display: block;
  padding: 6px 10px;
  font-size: 15px;
  font-weight: bold;
  color: #006633;
  text-decoration: none;
  transition: background-color 0.2s;
}

#hpb-nav ul li a:hover{
  background-color: #ccf5cc;
  border-radius: 6px;
}

/* ---- 本文エリア ---- */
#hpb-main{
  line-height: 1.8;
  font-size: 15px;
  color: #333;
  padding: 10px 20px;
}

/* ---- TOPICS枠 ---- */
#toppage-topics{
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fafafa;
}

/* ---- 下段バナー（LPT）共通 ---- */
#banner{
  margin-top: 40px;
  text-align: center;
}

.product-button-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.product-button-list li a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 220px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s ease-in-out;
}

.product-button-list li a:hover{
  transform: translateY(-3px);
  box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
}

/* ---- ページタイトル下の余白 ---- */
#hpb-title{
  margin-bottom: 25px;
}