@charset "utf-8";

/*CSS変数の宣言*/
:root
{
	--title-flex-grow: 0;
}


/*style.cssの設定を上書き*/
.section_title_w::after,
.section_title_k::after
{
    flex-grow: var(--title-flex-grow);
}


#products-container
{
	padding: 120px 0px 0px;
}

#products-inner-container
{
	/*background:linear-gradient(to bottom, rgba(35, 24, 21, 0.3), rgba(35, 24, 21, 1) 700px ), url(https://data-relations.com/hp_test/wp-content/uploads/archive_products_bg_4.jpg);*/
	background:linear-gradient(to bottom, rgba(35, 24, 21, 0.3), rgba(35, 24, 21, 1) 700px ), url(https://hondakiko.co.jp/cms_wp/wp-content/uploads/archive_products_bg_4.jpg);
	background-repeat: no-repeat;
	/*background-position: center top, center top, center bottom;*/
	background-position: center top;
	background-size: 100% auto;
}

#page-header_products {
	/*background-image: url(https://data-relations.com/hp_test/wp-content/uploads/archive_products_header_bg.jpg);*/
	background-image: url(https://hondakiko.co.jp/cms_wp/wp-content/uploads/archive_products_header_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 53%;
}

#products-search .min-val,
#products-search .max-val
{
	color: #666;
}

#products-search input[type=range] {
    -webkit-appearance:none;
    background:#eee;
    /*height:16px;*/
    height:16px;
    border-radius:20px;
 }

#products-search input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    background:#17a2b8;
    /*height:24px;
    width:24px;*/
	height:16px;
    width:16px;
    border-radius:50%;
  }

#products-search input[type=range]::-moz-range-track{
    height:0;
  }

#products-search input[type=range]::-moz-range-thumb{
    background:#17a2b8;
    /*height:24px;
    width:24px;*/
	height:16px;
    width:16px;
    border:none;
    border-radius:50%;
  }




#products-search input[type=number]{
	width: 5rem;
	-moz-appearance:textfield;
}

#products-search input[type="number"]::-webkit-outer-spin-button, 
#products-search input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.sd-btn
{
    background: #fff;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.0), 0 0 40px rgba(128, 128, 128, 0.0) ;
    transition: all .3s;
}


/*hoverをしたらボックスの影が拡がり色が濃くなる*/
.sd-btn:hover,
.sd-btn:active
{
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
    border-color: transparent;
}

.sd-btn:hover .card-comment,
.sd-btn:active .card-comment
{
	visibility: visible;
	/*display: block;*/
}

.sd-btn:hover .card-comment div,
.sd-btn:active .card-comment div
{
	top: 0;
	opacity: 1;
}

/*製品検索ページのスペック部分で、改行時に字間が広がるのを防ぐ*/
#products-area li
{
	text-align: left !important;
}






/*菊池臨時追加*/
#products-search, #products-area {
	/*background-color: #0211a2;*/
	/*background-color: #fff;*/
	margin-bottom: 0;
	padding-bottom: 30px;
}

#products-search
{
	padding-top: 60px;
}

#products-search input[type=range] {
	height: 6px;
	border-radius: 3px;
}
.prd-card {
	background-color: #fff;
	
	position: relative;
}
.prd-card img {
	display: block;
	float: left;
	max-width: 40%;
}
.card-body {
	box-sizing: border-box;
	width: 60%;
	padding: 0.25rem !important;
	float: right;
}
h6.card-title {
	margin-top: 0;
}

.card-comment {
	box-sizing: border-box;
	font-size: 13px;
	text-align: justify;
	clear: both;
	
	/*visibility: hidden;*/
	position: absolute;
	left: 0;
	top:90%;
	z-index: 1000;
	width: 100%;
	/*background: #ff0;*/
	height: 200px;
	pointer-events: none;
	overflow: hidden;
	
}

.card-comment div
{
	color: #fff;
	background: rgba(0,0,0,0.8);
	padding: 1rem;
	width: 100%;
	position: absolute;
	top:-100%;
	pointer-events: auto;
	opacity: 0;
}

.prd-card:after {
	display: block;
	content: "";
	clear: both;
}

@media (min-width: 992px) {
	
	.siteHeader{
		position: fixed;
		top: 0;
		transition: .5s;
    	z-index: 999;
	}
	
	.siteHeader.hide{
    	transform: translateY(-100%);
	}
	
	.page-header {
		margin-top:140px;
	} 
	
	.sd-btn:hover .card-comment div,
	.sd-btn:active .card-comment div
	{
		transition:opacity 0.8s, top 0.4s;
	}

	.card-comment div
	{
		transition:opacity 0.4s, top 0.8s;
		will-change: opacity, top;
	}
}

@media (min-width: 1200px) {
	.page-header {
		margin-top:120px;
	}
}


/*言語スイッチャー*/
@media (min-width: 1200px) {
	#products-container .lang_box
	{
		top:10px;
		right: calc(50vw - 590px);
	}
}
@media (min-width: 992px) and (max-width: 1200px) {
	#products-container .lang_box
	{
		top:10px;
	}
}