@charset "UTF-8";

#head_wrapper {
	width: 100%;
	height: auto;
	min-width: 1000px;
	height: 600px;
	background: url(../img/top_header_bg.jpg) no-repeat center top;
	background-size: cover;
}

#toplogo {
	clear: both;
	width: 516px;
	margin: 220px auto 0;
}

@media screen and (max-width:768px) {
#head_wrapper {
	width: 100%;
	height: auto;
	min-width: 100%;
	height: 250px;
	background: url(../img/top_header_bg.jpg) no-repeat center top;
	background-size: cover;
}

#toplogo {
	clear: both;
	width: 258px;
	height: auto;
	margin: 95px auto 0;
}
#toplogo img {
	width: 258px;
}
}
/*コンテンツ------------------------------*/
main {
	
}
#topcopy_first {
	clear: both;
	padding: 30px 0 10px;
	width: 850px;
	margin: 0 auto;
	font-size: 1.4em;
    font-weight: bold;
	line-height: 190%;
	text-align: center;
}
.topcopy {
	clear: both;
	padding: 30px 0 60px;
	width: 1000px;
	margin: 0 auto;
	font-size: 1em;
	line-height: 160%;
	text-align: left;
}
#topbannerbox {
    text-align: center;
    margin: 20px auto 20px;
}
#topbannerbox ul {
    display: flex;
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
}
#topbannerbox li {
    margin-right: 15px;
}
#topbannerbox li:last-child {
    margin: 0;
}
#topbannerbox img {
    width: 320px;
    height: auto;
}
#topproductthumb {
	height: 550px;
	padding: 10px 0;
    background-image: linear-gradient(-45deg, #fff 25%, #e7e7e7 25%, #e7e7e7 50%, #fff 50%, #fff 75%, #e7e7e7 75%, #e7e7e7);
	background-size: 6px 6px;
}
#topproductthumb_inner {
	width: 1000px;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}
.productthumb {
	display: inline-block;
	width: 236px;
	margin: 18px 0 0 18px;
	padding: 0;
}
.productthumb:first-child {
	margin-left: 0;
}
.productthumb:nth-child(5){
	margin-left: 0;
}


.productthumb a {
	margin: 0;
	padding: 0;
}
.titlebar {
	height: 100px;
	width: 100%;
	text-align: center;
	background: #162535;
	padding-top: 24px;
}
.titlebar p {
	font-weight: bold;
	font-size: 1.3em;
	letter-spacing: 0.1em;
	color: #fff;
	margin-bottom: 13px;
}
.titleborder {
	width: 20px;
	height: 1px;
	margin: 0 auto;
	border-bottom: 2px solid #f5e127;
}

#topfeaturebox {
	width: 980px;
	margin: 0 auto 60px;
}
#topfeaturebox:after {
	content:"";
	display: block;
	clear: both;
}
#topfeaturebox li {
	display: block;
	float: left;
	width: 480px;
	margin-bottom: 25px;
	margin-right: 14px;
}
#topfeaturebox li:nth-child(2n) {
	margin-right: 0px;
}
li h4 {
	margin: 0 0 5px;
	padding: 0;
	background: #162535;
	border-bottom: 4px solid #f5e127;
}
li h4 a {
	display: inline-block;
	width: 480px;
	height: 50px;
	color: #fff !important;
	padding: 13px 0px 15px 13px;
	font-size: 1em;
	box-sizing: border-box;
}
#topfeaturebox li a:before {
	content: "";
    display: inline-block;
	width: 18px;
	height: 13px;
	vertical-align: middle;
	background: url(../img/icon_feature.png) no-repeat;
	background-position: 0px 0px;
}
#topfeaturebox p.caption {
	font-size: 0.8em;
	line-height: 160%;
	padding: 5px 5px 0;
}
.topbuttonbox {
	width: 980px;
	margin: 0 auto 60px;
}
.topbuttonbox ul {
	display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}
.topbuttonbox li {
	background: #162535;
	width: auto;
	height: auto;
	border-bottom: 4px solid #f5e127;
	margin-bottom: 14px;
	margin-right: 14px;
}
.topbuttonbox li a {
	display: block;
	width: auto;
	height: auto;
	color: #fff;
	padding: 13px 20px 15px 14px;
	font-size: 0.9em;
	box-sizing: border-box;
}
.topbuttonbox li a:before {
	content: "";
    display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	background: url(../img/icon_feature.png) no-repeat;
	background-position: 0px 3px;
}




#longimgbox1 {
	width: 100%;
	height: 300px;
	background: url(../img/featureimg.jpg) no-repeat center;
}
#longimgbox2 {
	width: 100%;
	height: 300px;
	background: url(../img/makeimg.jpg) no-repeat center;
}




#slider {
    overflow:hidden;
    position:relative;
    width:100%;
	background-image: linear-gradient(-45deg, #fff 25%, #e7e7e7 25%, #e7e7e7 50%, #fff 50%, #fff 75%, #e7e7e7 75%, #e7e7e7);
	background-size: 6px 6px;

}

#sliderInner {
    position:relative;
    left:50%;
    width:3040px;
    margin-left:-1520px;
}
#sliderInner li {
    width:300px;
}
#sliderInner li img{
 display: block;
 margin-left: auto;
 margin-right: auto;
}
#slideFilterL, #slideFilterR {
    position:absolute;
    top:0;
    width:1000px;
    height:320px;
    opacity:0.6;
    filter:alpha(opacity=60);
    -ms-filter:"alpha( opacity=60 )";
    background: #fff;
}
}
#slideFilterL {
    left:0;
}
#slideFilterR {
    right:0;
}

.bx-wrapper {
    margin:0 auto;
    position:relative;
    padding-top: 20px;
}
.bx-wrapper .bx-pager {
    margin:0 auto;
    width:500px;
}

/* コントローラー */

.bx-wrapper .bx-prev {
    left:93px;
    background:url(../img/controls.png) no-repeat 0 -32px;
    opacity:0.5;
    filter:alpha(opacity=50);
    -ms-filter:"alpha( opacity=50 )";
}

.bx-wrapper .bx-next {
    right:93px;
    background:url(../img/controls.png) no-repeat -43px -32px;
    opacity:0.5;
    filter:alpha(opacity=50);
    -ms-filter:"alpha( opacity=50 )";
}

.bx-wrapper .bx-prev:hover {
    background-position:0 0;
}

.bx-wrapper .bx-next:hover {
    background-position:-43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position:absolute;
    top:120px;
    outline:0;
    width:32px;
    height:32px;
    text-indent:-9999px;
    z-index:9999;
}

/* ページャー */
.bx-wrapper .bx-pager {
    padding-top:20px;
    padding-bottom: 40px;;
    text-align:center;
    font-size:.85em;
    font-family:Arial;
    font-weight:bold;
    color:#666;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display:inline-block;
    *zoom:1;
    *display:inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    display:block;
    width:10px;
    height:10px;
    margin:0 5px;
    outline:0;
    text-indent:-9999px;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;;
    background:#666;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background:#000;
}
.topcopy_first{

}
.materialbuttonbox {
	width: 920px;
	margin: 0 auto 60px;
}
.materialbuttonbox li {
	display: inline-block;
	background: #162535;
	width: 270px;
	height: 50px;
	border-bottom: 4px solid #f5e127;
	margin-bottom: 14px;
	margin-right: 14px;
}
.materialbuttonbox li:nth-child(3n) {
	margin-right: 0px;
}
.materialbuttonbox li a {
	display: inline-block;
	width: 270px;
	height: 50px;
	color: #fff;
	padding: 13px 0px 15px 14px;
	font-size: 1em;
	box-sizing: border-box;
}
.materialbuttonbox li a:before {
	content: "";
    display: inline-block;
	width: 24px;
	height: 13px;
	vertical-align: middle;
	background: url(../img/icon_feature.png) no-repeat;
	background-position: 0px 0px;
}
#sliderInner li{
	height:235px;
	background: #fff;
	border:1px solid #ddd;
}
#sliderInner li div{
	width:233px;height:170px;
}
#sliderInner li img{
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;margin:0 auto;
    padding-top: 10px;
}
#sliderInner li p{
	font-weight:bold;text-align:center;
}
#sliderInner li p:nth-child(2n) {
	margin:0 auto;
	font-size:0.8em;
	color:#333;
	font-weight:normal;
	padding-top:1px;
	padding-bottom:1px;
	text-align:center;
}

@media screen and (max-width:768px) {
main {
	
}
.topcopy {
	padding: 10px 10px;
	width: 100%;
	font-size: 0.8em;
	line-height: 160%;
}
#topcopy_first {
	clear: both;
	padding: 35px 0 15px;
	width: 100%;
	margin: 0 auto;
	font-size: 1em;
    font-weight: bold;
	line-height: 170%;
	text-align: left;
}
#topbannerbox {
    text-align: center;
    margin: 10px auto 10px;
}
#topbannerbox ul {
    display: block;
}
#topbannerbox li {
    margin-right: 0px;
    margin-bottom: 10px;
}
#topbannerbox img {
    width: 80%;
    height: auto;
}
#topproductthumb {
	height: auto;
	padding: 30px 0;
}
#topproductthumb_inner {
	width: 100%;
}
.productthumb {
	display: inline-block;
	width: 118px;
	margin: 0 9px 9px 0px;
	padding: 0;
}
.productthumb img {
	width: 118px;
	height: auto;
}
.productthumb:nth-child(2n) {
	margin-left: 0;
}
.productthumb a {
	margin: 0;
	padding: 0;
}
.titlebar {
	height: 70px;
	padding-top: 14px;
}
.titlebar p {
	font-size: 1.1em;
	margin-bottom: 8px;
}
.titleborder {
	width: 20px;
}	
#topfeaturebox {
	width: 95%;
	margin: 0 auto 30px;
}
#topfeaturebox li {
	float: none;
	width: 100%;
	margin-bottom: 15px;
	box-sizing: border-box;
}
#topfeaturebox li:nth-child(2n) {
	margin-right: 0px;
}
li h4 {
	margin: 0 0 5px;
	padding: 0;
}
li h4 a {
	display: inline-block;
	width: 100%;
	height: auto;
	padding: 8px 0px 10px 10px;
	font-size: 0.9em;
	box-sizing: border-box;
}
#topfeaturebox p.caption {
	font-size: 0.8em;
	line-height: 140%;
	padding: 0px 5px 0;
	margin-bottom: 0;
}
.topbuttonbox {
	width: 100%;
	margin: 0 auto 30px;
	padding-left: 2%;
}
.topbuttonbox ul {
	flex-wrap:wrap;
}
.topbuttonbox li {
	height: auto;
	border-bottom: 4px solid #f5e127;
	margin-bottom: 10px;
	box-sizing: border-box;
}
.topbuttonbox li a {
	width: 100%;
	height: auto;
	color: #fff;
	padding: 9px 12px 10px 12px;
	font-size: 0.8em;
	box-sizing: border-box;
}
.topbuttonbox li a:before {
	content: "";
    display: inline-block;
	width: 18px;
	height: 13px;
	vertical-align: middle;
	background: url(../img/icon_feature.png) no-repeat;
	background-position: 0px 0px;
}
#longimgbox1 {
	width: 100%;
	height: 100px;
	background: url(../img/featureimg.jpg) no-repeat center;
	background-size: cover;
}
#longimgbox2 {
	width: 100%;
	height: 100px;
	background: url(../img/makeimg.jpg) no-repeat center;
	background-size: cover;
}

	.bx-wrapper .bx-prev {
	    left:405px;
	}
	.bx-wrapper .bx-next {
	    right:405px;
	}

}