hr.dot1 {
height: 1px;
border: none;
border-top: 1px #818181 dotted;
}

hr.dot2 {
height: 2px;
border: none;
border-top: 2px #a3aba0 dotted;
}

/*****************************************************
　テキスト
*****************************************************/
.style1 {
font-size: 14px; font-family: "メイリオ",sans-serif; COLOR: #666666;
}

.style2 {
font-size: 12px; font-family: "メイリオ",sans-serif; COLOR: #ffffff;
}

.style3 {
font-size: 15px; font-family: "メイリオ",sans-serif; COLOR: #ffffff;
}
.style4 {
font-size: 12px; font-family: "メイリオ",sans-serif; COLOR: #666666;
}
.style5 {
font-size: 16px; font-family: "メイリオ",sans-serif; COLOR: #666666;
}
.style6 {
font-size: 17px; font-family: "メイリオ",sans-serif; COLOR: #ffffff;  line-height: 40px;
}
.title1 {
font-size: 20px; font-family: "メイリオ",sans-serif; COLOR: #ffffff; font-weight:bold; line-height: 30px;
}

.title2 {
font-size: 20px; font-family: "メイリオ",sans-serif; COLOR: #000000; font-weight:bold;
}

/*****************************************************
　リンク
*****************************************************/
A:link { COLOR: #666666; TEXT-DECORATION: none}
A:visited { COLOR: #666666; TEXT-DECORATION: none }
A:active { COLOR: #78a66b; TEXT-DECORATION: none }
A:hover { color: #78a66b; TEXT-DECORATION: none}

input#submit_button {
    // 幅と高さを指定
    width: 30px;
    height: 26px;
}

a:hover img{
filter:alpha(opacity=77); 
-moz-opacity: 0.5; 
opacity: 0.5;
}

.btn {
    background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #111;
    -moz-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
    -webkit-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
    width: 100px;
    padding: 1px 7px;
}

/*****************************************************
　看板カテゴリー　ドロップダウンメニュー
*****************************************************/
.nav {
  width: 100%;
  height: 25px;
  margin: 0 auto;
  padding: 0;
  display: flex;
}
.nav li {
  position: relative;
  list-style: none;
}
.nav li a {
  display: block;
  width: 110px;
  height: 25px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 2.0;
  background: #a8adb0;
  transition: 0.5s;
  text-decoration: none;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
.nav > li:hover > a {/*layer-1*/
  color: #666666;
  background: #d5dcd3;
}
.nav > li li a {/*layer-2*/
  color: #fff;
  font-size: 12px;
  background: #a8adb0;
}
.nav > li li:hover > a {/*layer-2*/
  color: #666666;
  background: #d5dcd3;
}
.nav li ul {
  top: 25px;
  left: -40px;
  position: absolute;
}
.nav li ul li {
  overflow: hidden;
  height: 0;
  transition: 0.5s;
}
.nav li ul li a {
  border-top: 1px solid #eee;
}
.nav li:hover > ul > li {
  overflow: visible;
  height: 25px;
}
  .nav li ul li ul {
    top: 0;
    left: 110px;
  }
  .nav li ul li ul:before {/*layer-2?*/
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;
  }

/*****************************************************
　レフトナビカテゴリー　ドロップダウンメニュー
*****************************************************/
ul.sidenav hr {
    border-top: 1px dotted #333333;
    border-right: none;
    border-bottom: none;
    border-left: none;
    height: 0px;
}
ul.sidenav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 304px;
	background-color: #ffffff;
	position: relative;
	overflow: auto;
}
ul.sidenav li a {
	display: block;
	color: #666666;
	padding: 1px 45px;
	text-decoration: none;
	font-size: 12px;
}
ul.sidenav li a.active {
	padding: 0px 26px;
	background-color: #ffffff;
	color: #000000;
	font-size: 16px;
    border: 0px solid transparent;
    line-height: 15px;
}
ul.sidenav li a:hover {
	padding: 0px 30px;
	background-color: #ffffff;
	color: #78a66b;
}
ul.sidenav li a:hover:not(.active) {
	padding: 1px 50px;
	background-color: #a8adb0;
	color: white;
}
div.content {
	margin-left: 25%;
	padding: 1px 16px;
	height: 1000px;
}
@media screen and (max-width: 900px) {
	ul.sidenav {
		width: 100%;
		height: auto;
		position: relative;
	}
	ul.sidenav li a {
		float: left;
		padding: 15px;
	}
	div.content {
		margin-left: 0;
	}
}
@media screen and (max-width: 480px) {
	ul.sidenav li a {
		text-align: center;
		float: none;
	}
}


/*****************************************************
	スライドバナー header
*****************************************************/
.cp_cssslider {
	width: 100%;
	height: 460px;
	overflow: hidden;
	margin: 0em auto;
	border: 0px solid #ffffff;
	box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0);
}
.cp_slide_item {
	width: 1100px;
	height: 460px;
	float: left;
	position: relative;
}
.cp_slidewrapper {
	width: 550%;/* slideの枚数×100% */
	position: relative;
	left: 0;
	animation: slider 20s infinite ease;/* スピード */
}
@-webkit-keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	20% {
	-webkit-transform: translateX(-1100px);
	transform: translateX(-1100px);
	}
	40% {
	-webkit-transform: translateX(-2200px);
	transform: translateX(-2200px);
	}
	60% {
	-webkit-transform: translateX(-3300px);
	transform: translateX(-3300px);
	}
	80% {
	-webkit-transform: translateX(-4400px);
	transform: translateX(-4400px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}
@keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	20% {
	-webkit-transform: translateX(-1100px);
	transform: translateX(-1100px);
	}
	40% {
	-webkit-transform: translateX(-2200px);
	transform: translateX(-2200px);
	}
	60% {
	-webkit-transform: translateX(-3300px);
	transform: translateX(-3300px);
	}
	80% {
	-webkit-transform: translateX(-4400px);
	transform: translateX(-4400px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}


/*****************************************************
	スライドバナーindex
*****************************************************/
#wrap_slide{
	width:100%;
	min-width:1100px;
	height:460px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
#wrap_slide #slide{
	width:1100px;
	height:460px;
}
#wrap_slide #slide div{
	width:1100px;
	height:460px;
}
#wrap_slide .bx-viewport{
	width:1100px !important;
	height:460px !important;
	margin:0 auto;
	overflow:visible !important;
}
#wrap_slide .bx-pager{
	width:1100px;
	position:absolute;
	bottom:18px;
	left:50%;
	margin-left:-60px;
}
#wrap_slide .bx-pager div{
	display:inline-block;
	width:12px;
	height:12px;
	margin:0 6px;
}
#wrap_slide .bx-pager div a{
	display:block;
	width:12px;
	height:12px;
	background:#d5cdc4;
	border-radius:6px;
	text-indent:-9999px;
}
#wrap_slide .bx-pager div a.active{
	background:#675747;
}
#wrap_slide .bx-prev, #wrap_slide .bx-next{
	width:60px;
	height:60px;
	position:absolute;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
	opacity: 1;
	cursor:pointer;
	top:200px;
}
#wrap_slide .bx-prev{
	left:50%;
	margin-left:-610px;
	background:url(//gigaplus.makeshop.jp/plywood/img/slide_prev.png) no-repeat 0 0;	
}
#wrap_slide .bx-next{
	right:50%;
	margin-right:-610px;
	background:url(//gigaplus.makeshop.jp/plywood/img/slide_next.png) no-repeat 0 0;	
}
#wrap_slide .bx-prev:hover, #wrap_slide .bx-next:hover{
	opacity: 0.70;
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
}

/*****************************************************
	新商品ブロックグリッド
*****************************************************/

.block-grid {
  width: auto;
  overflow: hidden;
  list-style: none;
  margin: 0 -1% 30px;
  padding: 10px;
}
.block-grid li {
  float: left;
  margin: 0 1% 15px;
  padding: 0;
}
.block-grid a {
  text-decoration: none;
  font-size: 1.6em;
}
@media (min-width: 300px){
  .block-grid-1-2-3 li {
    width: 48%;
  }
}
@media (min-width: 600px){
  .block-grid-1-2-3 li {
    width: 31.3333%;
  }
}
@media (min-width: 800px){
  .block-grid-1-2-3 li {
    width: 22.5%;
  }
}

/*****************************************************
	スマホ　検索窓
*****************************************************/

.box-common.search {
  margin: 8px 0;
}
.box-common.search .search-wrap {
  margin: 0 auto;
  width: 90%;
  padding: 4px;
  border: 1px solid #333;
  display: block;
  overflow: hidden;
}
.box-common.search .search-wrap .text {
  float: left;
  padding: 9px 8px 8px;
  font-size: 14px;
  width: 70%;
  border: none;
  outline: none;
  line-height: 100%;
  vertical-align: middle;
}
.box-common.search .search-wrap .submit {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  float: right;
  border: none;
  background: #333;
  color: #FFF;
  margin: 0 0 -1;
  padding: 9px 16px;
}
.box-common.search .search-wrap .submit::-webkit-search-decoration {
  display: none;
}
.box-common.search .search-wrap .submit::focus {
  outline-offset: -2px;
}

/*****************************************************
	スマホ　メルマガ登録
*****************************************************/
.box-common.mail-magazine {
  margin: 20px 0 0;
}
.box-common.mail-magazine form {
  margin: 12px auto 0;
  width: 94%;
}
.box-common.mail-magazine .catch {
  position: relative;
  background: #EEE;
  font-size: 13px;
  line-height: 20px;
  padding: 16px;
  margin: 0 0 32px;
}
.box-common.mail-magazine .catch:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #eee transparent transparent transparent;
}
.box-common.mail-magazine .caption {
  display: block;
  font-size: 14px;
}
.box-common.mail-magazine .text {
  width: 100%;
  padding: 8px;
  margin: 0;
  border: 1px solid #333;
  box-sizing: border-box;
  margin: 8px 0 24px;
}
.box-common.mail-magazine .submit {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 0;
  margin: 0;
  display: block;
  border: none;
  background: #333;
  color: #FFF;
}
.box-common.mail-magazine .submit::-webkit-search-decoration {
  display: none;
}
.box-common.mail-magazine .submit::focus {
  outline-offset: -2px;
}

/*****************************************************
	スマホ　インフォメーション
*****************************************************/
.box-common.footer {
  margin: 20px 0 0;
}
.box-common.footer ul {
  margin: 12px auto 0;
  width: 94%;
  border-top: 1px solid #333;
}
.box-common.footer ul li a {
  border-bottom: 1px solid #333;
  display: block;
  padding: 12px 16px;
  position: relative;
}
.box-common.footer ul li a:after {
  position: absolute;
  font-size: 12px;
  top: 16px;
  right: 8px;
  content: "\f054";
  font-family: FontAwesome;
}
.box-common.footer ul li a i {
  padding: 0 8px 0 0;
}
.box-common.footer .disp-mode {
  margin: 16px 0 0;
  padding: 8px 8px;
  line-height: 24px;
  font-size: 12px;
  border: 5px solid #ccc;
  background: #FAFAFA;
  text-align: center;
}
.box-common.footer .disp-mode a {
  font-size: 12px;
  padding: 2px 8px;
}
.box-common.footer .disp-mode span {
  padding: 2px 8px;
  font-size: 12px;
  background: #ddd;
  border-radius: 8px;
}
.box-common.footer .disp-mode i {
  padding: 0 4px 0 0;
}

/*****************************************************
	スマホ　下位カテゴリを強制表示＆コンパクト2列
*****************************************************/
/* カテゴリを絞り込む 強制表示 */
.sCLToggleCont {
	display: block !important;
}
/* カテゴリを絞り込む デザイン変更 */
.sCLToggleTr{
	display: block;
	background: #666666;　/* 背景色変更 */
	border-top: none;
	border-bottom: none;
	color: #ffffff;　/* 文字色変更 */
	font-weight: normal;
}
/* 表示カテゴリを2列表示 */
.sCLToggleCont .ilistnon {
	padding: 10px 4px 5px 4px;
}
.sCLToggleCont .ilistnon li {
	box-sizing: border-box;
	width: 50%;
	float: left;
	border-bottom: none;
	padding: 0 3px 6px;
}
.sCLToggleCont .ilistnon li a {
	display: block;
	width: 100%;
	background : none;
	box-sizing: border-box;
	border: solid 1px #bebebe;
	border-radius: 5px;
	margin: 0;
	padding: 10px 5px;
	color: #333333;
	font-size: 12px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sCLToggleCont .ilistnon ul:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}