/* =========================================================
   prdt_styl.css : product style
   ========================================================= */

/* ------------------------------
   ���i�{�^�����X�g�̊�{�ݒ�
   ------------------------------ */
.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;
}

/* ------------------------------
   �e���i�{�^���̔w�i�摜
   ------------------------------ */
.btn-cs{
	background-image: url(../img/icons/icon1_png/bnr_cs01.png);
} /* CS �� */
.btn-fd{
	background-image : url(../21_SubCS_Product/bnr_fd01.png);
} /* FD �� */
.btn-pp{
	background-image : url(../21_SubCS_Product/bnr_pp01.png);
} /* PP �� */
.btn-ms{
	background-image : url(../21_SubCS_Product/bnr_ms01.png);
} /* MS �� */

/* ------------------------------
   ���i�{�^�����ʃX�^�C��
   ------------------------------ */
.btn-product{
  display: inline-block;
  width: 160px;				/* 204px �� ? */
  height: 50px !important;		/* 40px  �� ? */
  line-height: 0px !important;	 	/* 40px  �� ��margin ? */
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-size: cover;
  background-position: left;
  text-decoration: none;
  border-radius: 5px;
  border: 2px solid green;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

/* hover�� */
.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);
  cursor: pointer;
}

/* =========================================================
   �o�i�[�̈�iaside�p�j
   ========================================================= */
#hpb-aside #banner ul.product-button-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; 		/* �c���� */
  gap: 6px !important;              	/* 6px �{�^���Ԋu(�㉺) �� */
  align-items: flex-end;  		/* �E�� */
}

/* �{�^�������� */
#hpb-aside .btn-product{
  display: inline-block;
  width: 192px;           		/* 192px �o�i�[�g�ɍ��킹�� �� */
  text-align: left;       		/* ���� */
}

/* �X�N���[���Ǐ]�isticky�z�u�j */
#hpb-aside{
  position: sticky;
  top: 16px;              		/* �ォ��̋��� */
}

/* =========================================================
   �T�u���i�y�[�W�p�X�^�C������Z�b�g
   2025-10-07 TCS
   ========================================================= */

/* ---- �S�̃��C�A�E�g ---- */
#hpb-wrapper{
  padding-top: 30px;
  padding-bottom: 60px;
  background-color: #fefefe;
}

/* ---- ���i�r�̈� ---- */
#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);
}

/* ---- �i�r�����T�C�Y���� ---- */
#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;
}

/* ---- �{���G���A ---- */
#hpb-main{
  line-height: 1.8;
  font-size: 15px;
  color: #333;
  padding: 10px 20px;
}

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

/* ---- ���i�o�i�[���� ---- */
#banner{
  margin-top: 40px;
  text-align: center;
}

/* �y�[�W�����ȂǑ��p�r�̃o�i�[�z�u�iwrap�j */
.product-button-list.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.product-button-list li a{
  display: flex;
  align-items: left;			// 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);
}

/* ---- �y�[�W�^�C�g�����̗]�� ---- */
#hpb-title{
  margin-bottom: 25px;
}