@charset "shift_jis";
/* 汎用
--------------------------------------------------------*/
.mb100{margin-bottom: 100px;}
.spcontents{width: 100%;}
.indent{text-indent: -1em; padding-left: 1em;}

/* 見出し
--------------------------------------------------------*/
.heading.item_top {
	padding-bottom: 10px;
	font-size: 26px;
	border-bottom: 1px solid #D6E0E5;
}
.heading.item_top .sub_title {
	display: block;
	font-size: 14px;
}
.heading.item_top .sub_title_right {
	margin-left: 10px;
	font-size: 18px;
}

.heading.md-top {
	background-color: #6a855f;
}
.heading.md-top.md-form {
	background-color:#D73B3B;
}

.heading.item_section_top {
	margin-bottom: 10px;
	padding: 8px;
	color: #111;
	font-size: 18px;
	background-color: #D6E0E5;
}

/* グリッド
--------------------------------------------------------*/
.between{justify-content: space-between;}
.g03_2{width: 24%;}
.g04_2{width: 32%;}
.g06_1{width: 48%;}
.g06_2{width: 48%;}
.koma3:after {
    content: "";
    display: block;
    width: 32%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

/* ボタン
--------------------------------------------------------*/
.btn {
	background-color: #6a855f;
}

/* 参考価格
--------------------------------------------------------*/
.sample_price .heading {
	font-size: 15px;
}
.sample_price .maker {
	color: #666;
	text-decoration: line-through;
}
.sample_price .price {
	color: #CE3A47;
	font-size: 22px;
	font-weight: bold;
}

/* アイコン
--------------------------------------------------------*/
.icons.md-top .el-icon-source {
	background-color: #6a855f;
}

/* メニュー
--------------------------------------------------------*/
.grid.item_menu a {
	display: block;
	padding: 10px 0px;
	margin: 5px;
	color: #6a855f;
	border-radius: 5px;
	border: 1px solid #6a855f;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: #e9e9e4;
}
.grid.item_menu a.to_form {
	color: #f08000;
	border-color: #f08000;
	background-color: #fffad0;
}
.grid.item_menu a:hover {
	background-color: #eee;
}

/* ラベル
--------------------------------------------------------*/
.label_option {
	display: inline-block;
	padding: 2px 5px;
	color: #D24015;
	font-size: 12px;
	border: 1px solid #D24015;
}
.label_set_type {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 5px;
	color: #fff;
	font-size: 12px;
	background-color: #D24015;
}

/* 価格表
--------------------------------------------------------*/
.table .table_item_name .item_thumb,
.table .table_item_name .item_name {
	display: table-cell;
	vertical-align: middle;
}
.table .table_item_name .item_thumb {
	width: 100px;
	padding-right: 10px;
}
.table .table_item_name .item_name {
	text-align: left;
}
.table .table_item_name {
	width: 400px;
}
.table .table_item_price {
	width: 100px;
}

.item_thumb img{padding: 3px 0;}
/* 汎用
--------------------------------------------------------*/
.mb80 { margin-bottom: 80px; }







/*-------------------------------------------
送料
-------------------------------------------*/
#ABOUT_SHIPPING {
	padding: 15px;
	background-color: #FFE9E9;
}


/*-------------------------------------------
カルーセル
-------------------------------------------*/
.bx-wrapper {
	position: relative;
	/*margin-bottom: 30px;*/
	padding: 0;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}
.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/* 左右の矢印 */
.bx-controls .bx-controls-direction {
	position: absolute;
	top: 45%;
	width: 100%;
}
.bx-controls-direction .bx-prev {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 12px;
}
.bx-controls-direction .bx-next {
	position: absolute;
	right: 10px;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 12px;
}
.bx-controls-direction .bx-prev,
.bx-controls-direction .bx-next {
	background-color: #E9E9E9;
}
.bx-controls-direction .bx-prev:hover,
.bx-controls-direction .bx-next:hover {
	background-color: #999;
}
@media screen and (max-width: 480px) { 
	.bx-controls-direction .bx-prev,
	.bx-controls-direction .bx-next {
		display: none;
	}
}

/* ページャー */
.bx-pager {
	display:block;
	position:relative;
	text-align:center;
}
.bx-pager a img {
	border: 2px solid #fff;
}
.bx-pager a.active img {
	border: 2px solid #D24015;
}
.bx-pager-item {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 10px 2px 0 2px;
	overflow: hidden;
	line-height: 1;
	border-radius: 5px;
	background: #000;
}
.bx-pager-item a {background-color:#ccc; display:block;}
.bx-pager-item a {padding-top:50px; display:block;}
.bx-pager-item a.active {opacity:0.5;}
.bx-pager-item a:hover {opacity:0.3;}

.bx-wrapper .bx-caption {
	width: 100%;
}
.bx-wrapper .bx-caption span {
	padding: 5px 0;
	display: block;
	font-size: 12px;
}

/* カルーセル内のiframe */
.bxslider iframe {
	width: 100%;
}





/*-------------------------------------------
サブフッター
-------------------------------------------*/
.sub-footer {
	font-family:"メイリオ", Meiryo, Osaka, sans-serif;
	padding:10px 10px 0;
	background-color:#EEE;
	clear:both;
	margin:30px 0;
	border-top:1px solid #AAA;
	border-bottom:1px solid #AAA;
}
.sub-footer div,
.subfooter li,
.sub-footer p,
.sub-footer a {
	font-family:"メイリオ", Meiryo, Osaka, sans-serif !important;
}
.sub-footer .heading {
	font-size:16px;
	font-weight:bold;
	color:#515146;
	border:none;
}
.sub-footer .heading.md-first {
	font-size:18px;
	margin:0 0 5px;
}
.sub-footer .heading.md-first i:before {
	margin:-5px 8px 0 3px;
}
.sub-footer .heading.md-second {
	font-size:15px;
	margin:0 0 10px;
	border-bottom:1px dashed #999;
}
.sub-footer .heading.md-third {
	font-size:13px;
	margin:0 0 2px;
}



/* メニュー
-------------------------------------------*/
.cr-knowledge {
	margin-bottom:15px;
}
.cr-knowledge ul.menu {
	margin:0 5px;
}
.cr-knowledge ul.menu .item {
	display:block;
	margin:0 0 5px;
	text-align:center;
}


/* メーカー
-------------------------------------------*/
.sub-footer .el-type-list li {
	padding:2px;
}


/* メーカー
-------------------------------------------*/
.sub-footer .el-maker-list .el-maker-body {
	padding:4px 0;
	border-bottom:1px solid #DDD;
}
.sub-footer .el-maker-list .el-maker-body:first-child {
	padding-top:0;
}
.sub-footer .el-maker-list .el-maker-body:last-child {
	padding-bottom:0;
	border-bottom:none;
}
.sub-footer .el-maker-list .el-maker-body .el-thumb {
	text-align:center;
}
.sub-footer .el-maker-list .el-maker-body .el-body {
	padding:2px 5px;
	text-align:right;
}
.sub-footer .el-maker-list .el-maker-body .el-body a {
	font-size:12px;
	display:inline-block;
	padding:1.5px 0;
}


/* 電源分岐ジョイント
-------------------------------------------*/
.dengen_border{
border: 1px solid #666;
padding: 5px 10px
}


/*コンテンツ（DIYからのコンテンツ移植）
-------------------------------------------*/
h2.add_contents_h2 {
    border-bottom: 2px solid black;
    margin-bottom: 30px;
    font-size: 20px;
}
.diy_heading_blue {
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background: #158894;
}
.diy_heading_brownframe {
    border: 3px #958C80 solid;
    font-size: 16px;
    font-weight: bold;
    color: #158894;
    padding: 5px;
    display: block;
}

.diy_background3 {
    border: 3px #E9E3DE solid;
    background: #FFF;
    box-shadow: 0 0 0 8px #FFF;
    border-radius: 20px;
    position: relative;
    /* width: 950px; */
	/* width: 100%; */
    margin: 0 auto;
    margin-bottom: 60px;
    padding: 20px 30px;
}
.p3_8 {
    padding: 3px 8px;
}

.ai_center {
    align-items: center;
}

.t_pink {
    color: #DB4963;
}
.t_pink_bg {
    background: #DB4963;
    color: #FFF;
}
.pink_square::before {
    content: "■";
    font-size: 16px;
    color: rgb(219, 73, 99);
}
.diy_blue_frame {
    border: 3px #158894 solid;
    padding: 15px 20px 30px 20px;
    margin: 0 20px;
}
.diy_background_blue {
    background: #158894;
    color: #fff;
    font-weight: bold;
}
.diy_list{
	text-align: center;
}
.diy_list li{
    color: #158894;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 2px #158894 dotted;
	display: inline-block;
	margin: 0 10px 0;
}
.diy_point {
    background-color: #DFF7F2;
    margin: 0 20px;
    padding: 30px 20px 20px 20px;
    position: relative;
}
.diy_point_seal {
    margin: auto;
    width: 130px;
    height: 25px;/*幅が狭いので高さ縮小*/
    background: rgba(21, 136, 148);
    transform: rotate(-3deg);
    z-index: 1;
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 20px;
    text-align: center;
}
.diy_attention, .attention_mark {
    text-align: center;
    background: #DB4963;
    border-radius: 20px;
    color: #fff;
}

.comment {
    color: #666;
    line-height: 16px;
    border: 1px dashed #999;
    padding: 10px 10px;
}

.youtube{width: 570px; height: 320px;}