@charset "UTF-8";
/*!
 * 2023.03.28 MEE
 */

 /*ページ見出し背景*/
.page_header {background-image: url("../img/product_headline_pc.jpg");}
	@media only screen and (max-width:767px){
	/*ページ見出し背景*/
	.page_header {  background-image: url("../img/product_headline_sp.jpg");}
	}
/*ページtop テキスト*/
.product_top{max-width: calc(1100px - 30px);margin: 2.5em auto 0;text-align: left; padding: 0 15px;}
/*ページトップ サブメニュー*/
#page_menu{max-width: 1100px;margin: 0 auto;}

 /*製品リスト*/


.product_list {
	display: flex;
	justify-content: left;
	width: 100%;
	margin: 0 auto;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	border-bottom: 1px solid #A9A9A9;
  }
  .product_list .item {display: flex;flex-direction: column;width: calc((100% / 3) );padding: 15px;  }
  .product_list .union {flex-grow: 3;  }
  .product_list .item_photo {background-color: #F9F9F9;margin: 0 auto;width: 100%;  }
  .product_list .photo_union2{width: calc((100% /3) * 2);display: flex;margin: 0 auto;}
  .product_list .photo_union3{width: calc((100% /3) * 3);display: flex;margin: 0 auto;}
  .product_list .item_photo img{min-width:0;max-width: 100%; }
  .product_list .photo_union2 img{width: 100%;padding: 15px;}
  .product_list .item_title {margin-top: 5px;font-weight: 500;font-size: 16px;}
  .product_list .item_text-wrap {padding: 0;flex-grow: 1;}
  .product_list .item_text {margin-top: 15px;font-size: 14px;}

/*DB君*/
.product_person{
	max-width: 810px;
	display: flex;
	align-items: center;
	margin-left: auto;
	margin: 50px 0 50px auto;
}

.product_person .db_icon{
	width: 29.63%;height: auto;}
.product_person .comment{
	width: 70.37%;
	background: #c8faaf;
	display: flex;
	align-items: center;
	padding: 25px 60px 30px 20px;
	border-radius: 15px;
	margin-right: 50px;
	box-shadow: 10px 10px 0px 0 #eefde7;
	position: relative;
}

.product_person .comment::after{
	content: "";
	background: url(../img/hukidasi.svg) no-repeat;
	position: absolute;
	right: -47px;
	width: 30px;
    height: 65px;
	transform:rotate(-90deg);
}

.product_person .comment span{
	padding: 10px;
	background:#fff;
	border-radius: 10px;
	margin-right: 10px;
	display: block;
 }

 .product_person .comment span img{
	width: 160px !important;
 }



  @media only screen and (max-width:767px){
	.product_top{margin: 2.5em auto 0;text-align: left; padding: 0 15px;}
	.product_list {display:block; }
	.product_list .item {display: block;width: 100%; }
	.product_list .item_photo img{min-width:0;max-width: 100%; margin: 0 auto; text-align: center; display: block; }
	.product_list .photo_union2{width:100% ;display: block;margin: 0 auto;	}
	.product_list .photo_union3{width:100%;display: block;margin: 0 auto;}
	.product_list .photo_union3 img,
	.product_list .photo_union2 img{margin: 0 auto; display: block;width: auto;}

	
/*製品リスト　コメント*/
.product_comment{
	display: block;
	margin-left: 0;
	width: 100%;
	padding: 20px;
	background: url(../img/person_comment_sp.svg) no-repeat center 50%;
	align-items: center;
	background-size:100%;
 }
 .product_comment span{
	padding: 10px;
	background:#fff;
	border-radius: 10px;
	margin-right: 10px;
	display: block;
	width: 100%;
 }
 .product_comment span img{
	width: 51.43% !important;
	margin: 0 auto;
 }

 
/*DB君 sp*/
.product_person{
	width: 100%;
	display: block;
	margin: 50px 0 50px auto;
}

.product_person .db_icon{
	width: 44%;height: auto;
	margin-left: auto;
	margin-right: 20px;	
}
.product_person .comment{
	width: 100%;
	background: #c8faaf;
	display: block;
	align-items: center;
	padding: 20px;
	border-radius: 15px;
	margin-right: 0;
	margin-bottom: 30px;
	box-shadow: 10px 10px 0px 0 #eefde7;
	position: relative;
}

.product_person .comment::after{
	content: "";
	background: url(../img/hukidasi.svg) no-repeat;
	position: absolute;
	right: 60%;
	width: 30px;
	bottom: -65px;
    height: 65px;
	transform:rotate(0deg);
}


.product_person .comment span{
	padding: 10px;
	background:#fff;
	border-radius: 10px;
	margin: 0 auto 10px;
	display: block;
	width:100%;
 }

 .product_person .comment span img{
	width: 180px !important;
	margin: 0 auto;
	text-align: center;
	display: block;
 }


}