@charset "UTF-8";
/* ===================================================================
CSS Document
file name  :products.css
style info :products Style
=================================================================== */
.product-top .main {
margin-bottom: 40px;
}
/*--------------------------
		download
---------------------------*/
.download {
	background: #f9f9f9;
	padding: 15px;
	margin: 0 0 25px;
}
.download.fixed {
position: fixed;
top: 160px;
left: 50%;
transform: translateX(-50%);
width: 1000px;
z-index: 100;
}
.name-box {
background: #FFF;
padding: 15px;
height: 205px;
overflow-y: auto;
margin: 0 0 15px;
}
.name-box__drag-drop-area {
border: 2px dashed #dcdcdc;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.name-box__drag-drop-area.active {
border: none;
display: block;
}
.name-box__drag-drop-info {
color: #ababab;
font-size: 24px;
font-weight: 600;
text-align: center;
}
.name-box__drag-drop-area.active .name-box__drag-drop-info {
display: none;
}
.download__cad {
width: 625px;
border: solid 1px;
padding: 10px 20px 11px;
}
.download__cad-button {
font-size: 15px;
}
.checklist {
margin: 0 0 5px;
}
.checklist__item {
font-size: 18px;
font-weight: 600;
padding-right: 6px;
margin-right: 30px;
}
.checklist__item input[type="checkbox"] {
border-radius: 0;
margin: 0 5px 0 0;
border: 1px solid #000;
color: #555;
clear: none;
cursor: pointer;
display: inline-block;
line-height: 0;
height: 14px;
margin: -4px 4px 0 0;
outline: 0;
padding: 0!important;
text-align: center;
vertical-align: middle;
width: 14px;
min-width: 14px;
-webkit-appearance: none;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
-webkit-transition: .05s border-color ease-in-out;
transition: .05s border-color ease-in-out;
position: relative;
}
.caution_check_disabled {
margin: 0 auto;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #cecece;
width: 140px;
font-weight:bold;
background-color: #cecece;
color: white;
}
.caution_check {
margin: 0 auto;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #555;
width: 140px;
font-weight:bold;
}
.caution_link {
text-decoration: underline
}
.checklist__item input[type="checkbox"]:checked:before {
content: url(../img/common/mark04.png);
position: absolute;
top: -5px;
left: -2px;
}
.radiolist input[type="radio"] {
-webkit-appearance: none;
border: solid 1px #b1b1b1;
width: 18px;
height: 18px;
border-radius: 30px;
cursor: pointer;
top: 3px;
position: relative;
left: -4px;
}
.radiolist input[type="radio"]:checked:before {
content: '';
width: 8px;
height: 8px;
background: #626262;
position: absolute;
top: 4px;
left: 4px;
border-radius: 10px;
}
:placeholder-shown {
color: #898989;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
color: #898989;
}
/* Firefox 18- */
:-moz-placeholder {
color: #898989;
}
/* Firefox 19+ */
::-moz-placeholder {
color: #898989;
}
/* IE 10+ */
:-ms-input-placeholder {
color: #898989;
}
.products__wrap {height: calc(100vh - 150px);overflow-x: auto;margin: -10px auto 20px;padding: 30px 0;min-height: 300px;/* border: solid 1px #ccc; */}
.products__wrap.active {
}
/*--------------------------
		product-search
---------------------------*/
.product-search {
	background: #f9f9f9;
		padding: 12px 30px 2px 15px;
/*   margin: -35px 0 0; */

}
.product-search-pager {
display: flex;
justify-content: flex-end;
}
.product-search__input-txt {
width: 69%;
}
.product-search-results {
font-size: 20px;
}
.product-search-results__info {
color: #e4380a;
margin-left: 20px;
}
.radiolist {
margin: 0 0 10px;
}
.radialist__item {
margin-right: 18px;
}
.product-search__input-txt input[type="text"] {
width: 210px;
font-size: 13px;
}
.product-search__inputnum-txt input[type="text"] {
width: 180px;
font-size: 13px;
margin:0;
}

.radiolist__item {
font-size: 15px;
font-weight: 600;
margin-right: 20px;
}
/*--------------------------
		product-list
---------------------------*/
.product-list__block {margin-bottom: 62px;padding: 0 50px 0 0;}
.product-list__ttl {
font-size: 20px;
font-weight: 800;
position: relative;
line-height: 1.2;
text-indent: -0.6em;
background: rgb(240,240,240); /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(200,200,200,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(200,200,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(200,200,200,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c8c8c8', GradientType=0 ); /* IE6-9 */
padding: 10px 20px 10px 1.1em;
margin: 0 0 11px;
}
.product-list__ttl::after {
content: url(../img/common/mark02.png);
position: absolute;
right: 20px;
top: calc(50% - 12px);
}
.product-list__ttl--small {
font-size: 14px;
}
.product-list__logo {position: absolute;top: -23px;left: 15px;}
.product-list__img {
margin-right: 20px;
}
.product-list__body-col01 {width: 65%;}
.product-list__body-col01 .rich-area {
    width: 70%;
}
.product-list__body-col02 {width: 35%;}
.product-list__body-col02 .btn {
    text-align:right;
    margin: 5px 0 15px;
}
.product-list__body-col02 a {
width: 120px;
}
.product-list__body-col02 a::after {
border-width:2px;
top: calc(50% - 4px);
}
.product-list__format-wrap {
    justify-content:flex-end;
}
.product-list__format {color: #a0a0a0;font-weight: 600;border: solid 1px;width: 75px;text-align: center;padding: 2px 10px;margin: 0 0 0 7px;}
.product-list__pager-wrap {
display: flex;
justify-content: center;
}
/* ライトボックス */
.lbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.lbox__inner {
width: 600px;
background: #FFF;
text-align: center;
padding: 100px 0 150px;
border-radius: 10px;
position: relative;
z-index: 102;
}
.lbox__txt {
font-size: 22px;
margin: 0 0 30px;
font-weight: 500;
}
.lbox input[type="text"] {
width: 420px;
height: 50px;
border-radius: 4px;
border: solid 1px #c9c9c9;
text-align: center;
font-size: 18px;
}
.lbox__txt a {
color: #008aff;
text-decoration: underline
}
.lbox__txt a:hover {
text-decoration: none;
}
.lbox__btn {
background: #e4380a;
color: #FFF;
font-size: 16px;
font-weight: 400;
display: inline-block;
width: 360px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 5px;
}
.lbox__btn02 {
background: #e4850a;
}
.lbox__btn:hover {
opacity: .7;
}
.lbox button {
margin: 40px auto 30px;
}
.lbox #close {
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: #e4380a;
border-radius: 60px;
}
.lbox #close:hover {
cursor: pointer;
}
.lbox #close:before, .lbox #close:after {
content: '';
display: block;
width: 2px;
height: 28px;
background: #fff;
position: absolute;
top: 3px;
left: 17px;
}
.lbox #close:before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.lbox #close:after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.lbox #clickable {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
opacity: .3;
}
/*-------------------------------------
		ここからカテゴリーページ
--------------------------------------*/



/*-------------------------------------
		product-unit
--------------------------------------*/
.product-unit-wrap{
float:left;
}
.product-unit {
width: 310px;
margin: 0 35px 60px 0;
position: relative;
padding: 0 0 40px;
}
.product-unit:nth-child(3n) {
margin-right: 0;
}
.product-unit__img {
margin: 10px 0 10px;
}
.product-unit__btn-wrap {
margin: 15px 0 0;
position: absolute;
width: 100%;
bottom: -10px;
}
.name-unit {
border-bottom: solid 1px #e5e5e5;
padding: 13px 0;
}
.name-unit__ttl {
width: 80%;
margin-right: 30px;
font-size: 15px;
line-height: 1.1;
}
.name-unit__btn {
color: #FFF;
background: #434343;
font-weight: 200;
font-size: 16px;
padding: 3px 40px;

letter-spacing: 0.2em;
}
/*-------------------------------------
		ここから製品詳細ページ
--------------------------------------*/
.summary__txt-block {
width: 460px;
}
.summary__txt-block .download-btn-wrap {width: auto;padding: 20px 17px;}
.spec {
margin: 10px 0 40px;
}
.spec__item {
border: solid 1px;
padding: 0px 10px;
margin-right: 10px;
font-size: 14px;
}
.spec__item:last-of-type {
margin-right: 0;
}
.gallery {
text-align: center;
}
.gallery__main-img {
display: inline-block;
margin: 0 0 30px;
}
.gallery__txt {
display: block;
text-align: left;
}
.gallery__change-img-item {
width: 100px;
max-height: 100px;
border: solid 1px #dcdcdc;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
cursor: pointer;
}
.gallery__change-img-item:nth-child(4n) {
margin-right: 0;
}
.gallery__change-img-item img {
  width: 94px;
}
/* 特長 */
.section--feature {
background: #f9f9f9;
padding: 80px 0;
margin-top: 80px;
}
/* アコーディオン */
.accordion-trigger {
cursor: pointer;
position: relative;
}
.accordion-trigger:after {
content: url(../img/common/plus.png);
position: absolute;
right: 20px;
top: 4px;
}
.accordion-trigger.open:after {
content: url(../img/common/minus.png);
top: -3px;
}
.accordion-contents {
display: none;
}
/* 画像リスト */
.product-img__list {
/* margin: 0 0 -26px; */
}
.product-img__list--col02 .product-img__item {
width: 48%;
margin: 0 0 40px;
}
.product-img__list--col03 .product-img__item {
width: 32%;
margin-right: 20px;
}
.product-img__list--col02 {
justify-content: space-between;
}
.product-img__list--col04 .product-img__item {
width: 23%;
}
.product-img__item {
margin: 0 26px 26px 0;
line-height: 1.5;
}
.product-img__item img {
margin: 0 0 5px;
width: 100%;
max-width: 100%;
}
.product-img__list--col03 .product-img__item:nth-of-type(3n), .product-img__list--col04 .product-img__item:nth-of-type(4n), .product-img__item:last-of-type {
margin-right: 0;
}
/* モジュール */
.module {
/* margin: 0 0 -80px; */
}
.module__block {
width: 280px;
border: solid 1px;
padding: 15px 15px 0px;
margin: 0 80px 80px 0;
}
.module__block:nth-of-type(3n) {
margin-right: 0;
}
.module__unit {
margin: 0 0 20px;
}
.module__ttl {
border-top: solid 1px #b5b5b5;
border-bottom: solid 1px #b5b5b5;
padding: 9px 0;
line-height: 1;
}
.module__ttl span {
display: block;
font-size: 24px;
font-family: 'Oswald', sans-serif;
color: #e4380a;
font-weight: 600;
letter-spacing: .08em;
margin-top: 3px;
}
.module__img {
text-align: center;
margin: 10px 0;
}
.module__btn {
margin: 0 0 15px;
}
.module .download-btn__link--ts {
background: #000;
padding: 8px 60px 8px 10px;
}
/* 資料ダウンロード */
.data-download__item {
margin: 0 0 15px;
}
.data-download__link {
color: #000;
font-size: 20px;
font-weight: 600;
background: url(../img/common/mark06.png) no-repeat right 0px top 0px;
padding: 0 40px 0 0;
}
.data-download__link:hover {
text-decoration: underline;
}
/* CONTACT */
.section--contact {
background: #eeeeee;
margin: 70px 0 -70px;
padding: 50px 0 60px;
}
.section__inner--contact {
width: 600px;
}