@charset "UTF-8";

@font-face {
font-family: "YuGo";
font-weight: normal;
src: local("YuGo-Medium"), 
local("Yu Gothic Medium"), 
local("YuGo-Regular"); 
}

@font-face {
font-family: "YuGo";
font-weight: bold;
src: local("YuGo-Bold"), 
local("Yu Gothic"); 
}


html {
font-size: 62.5%;
overflow-y: scroll;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",'Hiragino Kaku Gothic ProN', "Original Yu Gothic", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Verdana, "M+ 1p", sans-serif;
color: #333;
width: 100%;
background-color: #fff;
overflow:hidden;
-webkit-font-smoothing: antialiased;
font-feature-settings : "palt";
/*text-align: justify;*/
}

img {
vertical-align: bottom;
outline: none;
}

a:link,
a:visited {
text-decoration: none;
color:#333;
}
a:hover,
a:active {
text-decoration: underline;
color:#333;
}
a img {
border: 0;
-webkit-transition: .3s;
transition: .3s;
}
a:hover img {
opacity: 0.7;
}


body {
height: auto;
}
ul {
list-style:none;
}

.pc_only{display:block;}
.sp_only{display:none!important;}


.header_sp, .menu_sp, .sub_block, #menuBg {display:none;}

a[href^="tel:"] {
pointer-events: none;
}

.hideOnPC {display: none;}
.hideOnSP {display: block;}

strong , b{font-weight: bold!important;}


/*PC*/
/* ---------------------------------------------------------
header
----------------------------------------------------------*/
header {
background-color: #fff;
width: 100%;
}

.header_inner {
width:100%;
max-width:1200px;
height: 95px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
position: relative;
}

/*H1*/
header h1{
font-size: 11px;
font-size: 1.1rem;
line-height: 23px;
color: #999;
width:83%;
position: absolute;
top:0;
left:0;
}

/*ロゴ*/
header .logo {
margin-top: 52px;
width:300px;
}

/*gnavi*/
#gnavi .pdown {
position: absolute;
top:44px;
right:0;
width:30px;
font-size:9px;
text-align:center;
cursor: pointer;
transition: .3s;
}
#gnavi .pdown:hover {
opacity: 0.7;
}
.menu-btn{
position: relative;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background: #006837;
color: #111;
z-index: 500;
border: 0;
padding:0;
cursor: pointer;
}
#gnavi .pdown .bar{
width:18px;
height:2px;
overflow:visible;
display:block;
background:#fff;
-webkit-transition:.3s ease-out;
transition:.3s ease-out;
position:absolute;
top:48%;
left:6px;
z-index:auto;
}
#gnavi .pdown .bar01{margin-top:-20%;}
#gnavi .pdown .bar03{margin-top:20%;}
#gnavi .pdown.opened .bar01{margin-top:0;transform:translate(0,0) rotate(45deg);}
#gnavi .pdown.opened .bar02{opacity:0;}
#gnavi .pdown.opened .bar03{margin-top:0;transform:translate(0,0) rotate(-45deg);}

#nav {
width:100%;
height:0;
background-color:#fff;
position:absolute;
top:95px;
left:0;
z-index:10;
opacity:0;
overflow:hidden;
}
#nav.is-active{
height:auto;
opacity:1;
}
#nav .header_inner{
height:auto;
padding:20px 0 25px;
}
#nav .block01,
#nav .block02,
#nav .block03,
#nav .block04,
#nav .block05 {
padding: 0 25px 0 0;
box-sizing: border-box;
width:20%;
float: left;
}
#nav h3 {
font-size: 16px;
font-size: 1.6rem;
font-weight: bold;
}
#nav ul {
margin-top: 15px;
}
#nav li {
display: flex;
font-size: 15px;
font-size: 1.5rem;
padding: 9px 0;
}
#nav li::before {
content: "－";
padding-right: .5em;
}
#nav li a {
font-weight: 500;
}

/*サイトマップ*/
header .sitemap {
font-size: 11px;
font-size: 1.1rem;
line-height: 23px;
text-align: right;
width:15%;
position: absolute;
top:0;
right:0;
}
header .sitemap a {
color: #999;
}

/*オンラインショップボタン*/
header .shop {
width:136px;
position: absolute;
top:23px;
right:0;
}

/*サイト内検索*/
header .search {
width:140px;
height: 20px;
background-color: #faf9f9;
position: absolute;
top:23px;
right:140px;
}
header .search input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #faf9f9;
}
header #search {
width:113px;
height: 16px;
border: none;
}
header .search .fas {
width:22px;
height: 20px;
border: none;
color: #bcbcbc;
font-size: 11px;
font-size: 1.1rem;
cursor: pointer;
}




/* ---------------------------------------------------------
pagetop
----------------------------------------------------------*/
#pagetop {
display: none;
}




/* ---------------------------------------------------------
footer
----------------------------------------------------------*/
#sp_footer {display: none;}
footer {display: block;}

footer {
background-color: #c9c9ca;
color: #000;
padding:50px 0 0;
}
footer a:link,footer a:visited,footer a:hover {
color: #333;
}
.footer_navi {
max-width:1200px;
width:100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.footer_navi .block01,
.footer_navi .block02,
.footer_navi .block03,
.footer_navi .block04,
.footer_navi .block05 {
padding: 0 25px 0 0;
box-sizing: border-box;
width:20%;
float: left;
}
.footer_navi h3 {
font-size: 11px;
font-size: 1.1rem;
font-weight: bold;
padding-left: 12px;
}
.footer_navi ul {
border-left: 1px solid #fff;
padding-left: 23px;
margin-top: 30px;
margin-bottom: 30px;
}
.footer_navi ul.sub {
border-left: none;
padding-left: 1em;
padding-top: 5px;
margin-top: 0px;
margin-bottom: 0px;
}
.footer_navi li {
font-size: 11px;
font-size: 1.1rem;
padding: 6px 0;
}
.footer_navi input{
display:none;
}

footer address {
max-width:1200px;
width:100%;
margin-left: auto;
margin-right: auto;
font-size: 10px;
font-size: 1rem;
margin-top: 8px;
padding: 20px 0;
text-align: center;
border-top: 1px solid #fff;
color: #333;
}
footer address .rcms,footer address .rcms a{
color: #333!important;
}



/* ---------------------------------------------------------
コンテンツ部分　共通
----------------------------------------------------------*/


/*section
---------------------*/
.section_inner {
width:100%;
max-width: 1200px;
margin-left:auto;
margin-right:auto;
position:relative;
}

#contents:not(.style_top) #main_contents{
width:100%;
max-width: 1200px;
margin-left:auto;
margin-right:auto;
}

/*セクションタイトル*/
.section_title {
text-align: center;
padding-bottom: 40px;
}
.section_title .title_jp {
font-size: 14px;
font-size: 1.4rem;
margin-bottom: 2px;
}
.section_title .title_en {
font-size: 11px;
font-size: 1.1rem;
font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
}



/*ボタン
---------------------*/
/*矢印付き*/
.btn_arrow a{
width:100%;
padding: 14px 9px;
display: block;
box-sizing: border-box;
border: 2px solid #999999;
text-align: center;
font-size: 13px;
font-size: 1.3rem;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
.btn_arrow a span {
display: inline-block;
padding: 0 12px 0;
position: relative;
}
.btn_arrow a span:after {
display: inline-block;
position:absolute;
left:0;
top:50%;
margin-top: -3px;
content: "";
width: 0;
height: 0;
border: 3px transparent solid;
border-left: 3px #009944 solid;
}
.btn_arrow a:hover{
border: 2px solid #009944;
background-color: #009944;
color: #fff;
}
.btn_arrow a:hover span:after{
border-left: 3px #fff solid;
}




/*===============================================================
Top Page
================================================================*/

/*slide
------------------------------------------*/
#slider {
text-align: center;
height: 540px;
position: relative;
}

/*メインキャッチ*/
#slide_txt {
background-color: rgba(0,153,0,0.38);
color: #fff;
font-size: 22px;
font-size: 2.2rem;
line-height: 1.5;
text-align: center;
width:548px;
padding: 14px 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.slider-container {
width:100%;
height: 540px;
overflow: hidden;
position: relative;
}

.slick-box {
width:3600px;
position: absolute;
top:0;
left:50%;
margin-left: -1800px;
}
.slick-box li {
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
height: 540px;
}

/*arrow*/
.slick-prev,
.slick-next
{
width: 32px;
height: 54px;
}
.slider-container .slick-prev
{
left: 50%;
margin-left: -580px;
z-index: 2;
background-image:url(/files/user/img/arrow_l.png?v=1540345111);
background-repeat: no-repeat;
}
.slider-container .slick-next
{
right: 50%;
margin-right: -580px;
background-image:url(/files/user/img/arrow_r.png?v=1540345112);
background-repeat: no-repeat;
}
.slick-prev:before
{
content: '';
}
.slick-next:before
{
content: '';
}


/*ドット*/
.slide-dots {
position: absolute;
bottom:0;
left:0;
z-index:100;
margin-bottom: 20px;
text-align: center;
width:100%;
padding-bottom: 5px;
overflow: hidden;
}
.slide-dots button {
background-color: transparent;
border: 0;
}
/*.slide-dots button {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}*/
.slide-dots li {
display: inline-block;
margin: 0 8px;
width:11px;
height: 11px;
position: relative;
}
.slide-dots li button {
position: relative;
text-indent: -9999px;
}
.slide-dots li button:after {
content: '';
width:11px;
height: 11px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
}
.slide-dots li.slick-active button:after {
content: '';
background-color: #333;
}




@media only screen and (max-width: 1199px) {
.slick-box li {
background-size: cover;
}
.slick-box {
width:100%;
position: absolute;
top:0;
left:0;
margin-left: 0;
}
.slider-container .slick-prev
{
left: 10px;
margin-left: 0;
}
.slider-container .slick-next
{
right: 10px;
margin-right: 0;
}
#slider:before,
#slider:after {
display: none;
}
}



#slider:before {
content: "";
width:calc((100% - 1200px) / 2);
height: 540px;
background-color: rgba(255,255,255,0.5);
position: absolute;
top:0;
left:0;
z-index: 100;
}
#slider:after {
content: "";
width:calc((100% - 1200px) / 2);
height: 540px;
background-color: rgba(255,255,255,0.5);
position: absolute;
top:0;
right:0;
z-index: 100;
}


/*top_lead：リード
------------------------------------------*/
#top_lead {
text-align: center;
padding: 26px 0 50px;
}
#top_lead h2 {
font-size: 24px;
font-size: 2.4rem;
line-height: 1.5;
margin-bottom: 6px;
}
#top_lead p {
font-size: 14px;
font-size: 1.4rem;
line-height: 1.5;
}



/*lineup：製品情報
------------------------------------------*/
#lineup {
padding: 40px 0 55px;
background-color: #f6f7f7;
}
#lineup .lineup_list {
width:calc(100% + 5px);
margin-left: -5px;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
flex-wrap: wrap;
}

/*横幅普通サイズの製品*/
#lineup .lineup_list .lineup_item {
width:33.19444444444444%;
padding-left: 5px;
box-sizing: border-box;
margin-bottom: 8px;
overflow: hidden;
}

#lineup .lineup_list .lineup_item a:hover{
text-decoration:none;
}

/*横幅2倍サイズの製品*/
#lineup .lineup_list .wide_size {
width:66.58888888888888%;
}

/*横幅が少し大きいサイズの製品（2段目中央）*/
#lineup .lineup_list .mid_size {
width:33.61111111111112%;
}

/*製品画像サイズ*/
#lineup .lineup_list .product_ph{
    height: 325px;
    overflow: hidden;
}
#lineup .lineup_list .product_ph img {
width:100%;
height: auto;
-webkit-transition: 0s;
transition: 0s;
}

#lineup .lineup_list .product_info {
padding: 7px 7px 7px 6px;
width:100%;
background-color: rgba(255,255,255,0.8);
height: 75px;
}

/*カテゴリ名*/
#lineup .lineup_list .cat_label {
font-size: 12px;
font-size: 1.2rem;
line-height: 20px;
color: #fff;
padding: 0 15px;
background-color: #999999;
margin-right: 5px;
display: inline-block;
white-space: nowrap;
}

/*NEWマーク*/
#lineup .lineup_list .new_label {
font-family: 'Marcellus', serif;
font-size: 12px;
font-size: 1.2rem;
line-height: 18px;
color: #ff0000;
padding: 0 8px;
border: 1px solid #ff0000;
margin-right: 5px;
display: inline-block;
white-space: nowrap;
}

/*製品名・型番*/
#lineup .lineup_list .product_name {
font-size: 14px;
font-size: 1.4rem;
line-height: 20px;
font-weight: bold;
display: inline-block;
}

/*製品の説明文*/
#lineup .lineup_list .product_desc {
font-size: 14px;
font-size: 1.4rem;
line-height: 1.2;
margin-top: 7px;
}
#lineup .lineup_list .lineup_item a:hover .product_desc{
text-decoration:underline;
}


/*category：製品カテゴリ
------------------------------------------*/
#category {
padding: 40px 0;
}

/*サブタイトル（ブランド製品・法人向け製品）*/
#category .subtitle {
text-align: center;
font-size: 13px;
font-size: 1.3rem;
width:100%;
max-width:994px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
}
#category .subtitle:before {
content: "";
width:100%;
max-width:994px;
height: 2px;
background-color: #ddd;
margin-left: auto;
margin-right: auto;
position: absolute;
left:0;
top:7px;
}
#category .subtitle span {
display: inline-block;
padding: 0 70px;
line-height: 16px;
background-color: #fff;
position: relative;
z-index: 2;
color: #999;
}

/*ブランド製品のブロック*/
#category .block01 {
margin-top: 56px;
width:100%;
overflow: hidden;
padding-bottom: 60px;
}
#category .block01 .movie {
float: left;
max-width: 430px;
width:35.833%;
}
#category .block01 .movie iframe{
    width:100%;
    max-width: 430px;
}
.youtube {
	display: inline-block;
	position: relative;
	overflow: hidden;
	max-width: 430px;
    width:100%;
    height:auto;
}
.youtube::before {
	position: absolute;
	content: "";
	color: #fff;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	line-height: 180px;
	background: rgba(0, 0, 0, 0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: all 0.3s;
}
.youtube:hover::before {
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	transition: all 0.3s;
}
#category .block01 .txt {
float: right;
max-width:740px;
width:61.66666666%;
font-size: 13px;
font-size: 1.3rem;
line-height: 1.75;
}
#category .block01 .subtitle2 {
font-size: 22px;
font-size: 2.2rem;
padding-bottom: 20px;
}
#category .block01 .txt p+p {
padding-top: 20px;
}

/*商品一覧をみるボタン*/
#category .block01 .btn {
clear: both;
width:355px;
margin-left: auto;
margin-right:0;
}

/*法人向け製品のブロック*/
#category .block02 {
width:536px;
margin-top: 14px;
margin-left: auto;
margin-right: auto;
font-size: 13px;
font-size: 1.3rem;
line-height: 1.75;
color: #666;
text-align: center;
}

/*横幅100％に広がる3つの製品画像*/
#category .category_ph {
margin-top: 30px;
width:100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align:stretch;
-moz-box-align:stretch;
-ms-flex-align:stretch;
-webkit-align-items:stretch;
-moz-align-items:stretch;
align-items:stretch;
}
#category .category_ph li {
width:33.33333333%;
}
#category .category_ph img {
width:100%;
height: auto;
}



/*news : 新着情報
------------------------------------------*/
#news {
margin-top:60px;
}
#top #news .section_inner {
border-top: 1px solid #e7e7e7;
padding: 48px 0 40px;
}

/*新着リスト*/
#top #news .news_list {
max-width:978px;
border-top: 2px solid #ddd;
padding-top: 48px;
padding-left: 60px;
}
#news .news_list {
width:100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
margin-bottom: 42px;
}
#news .news_list li.nolink {
width:100%;
font-size: 13px;
font-size: 1.3rem;
color: #333;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 12px 0;
-webkit-box-align:center;
-moz-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-align-items:center;
align-items:center;
}
#news .news_list li a {
width:100%;
font-size: 13px;
font-size: 1.3rem;
color: #130d0d;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 12px 0;
-webkit-box-align:center;
-moz-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
-moz-align-items:center;
align-items:center;
}

/*日付*/
#news .news_list li .date {
width:89px;
}

/*ラベル*/
#news .news_list li .label {
width:122px;
border: 1px solid #a6a2a0;
text-align: center;
line-height: 28px;
}

/*情報内容*/
#news .news_list li .desc {
padding: 0 0 0 30px;
width:calc(100% - 211px);
box-sizing: border-box;
}
#news .news_list a:hover {text-decoration: none;}
#news .news_list a:hover .desc {text-decoration:underline !important;}

/*新着情報の一覧をみるボタン*/
#news .btn {
width:265px;
margin-left: auto;
margin-right: auto;
}
#news .btn a {
background-color: #ddd;
border-color: #ddd;
}
#news .btn a:hover {
background-color: #00881d;
border-color: #00881d;
}



/*banners
------------------------------------------*/
#banners {
background-color: #f1f2f2;
margin:80px 0 0!important;
}
#banners ul {
width:calc(100% + 13px);
margin-left: -13px;
overflow: hidden;
padding: 32px 0 12px;
}
#banners li {
float: left;
padding-left: 13px;
margin-bottom: 18px;
width:25%;
box-sizing: border-box;
}
#banners li:nth-child(4n+1){clear:both;}
#banners li a {
display: block;
width:100%;
}
#banners li img {
width:100%;
height: auto;
}
#banners li a img{
    -webkit-transition: 0s;
    transition: 0s;
}


/*===============================================================
Sub Page
================================================================*/
#contents:not(.style_top) {
font-size: 14px;
font-size: 1.4rem;
}

/*パンくず*/
#footpath{
border-top: 1px solid #009d3c;
margin:0!important;
padding:0!important;
}
#footpath ul.footpath{
width:100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 12px;
font-size: 1.2rem;
line-height: 20px;
}
#footpath ul.footpath li{
line-height: 20px;
}

#page_title {
width:100%;
max-width: 1200px;
margin: 50px auto 30px;
font-size: 32px;
font-size: 3.2rem;
color: #666;
font-weight: bold;
}


.section_subtitle,#contents:not(.style_top) #main_contents h3,#main_contents h2.module_title{
font-size: 22px;
font-size: 2.2rem;
color: #666;
font-weight: bold;
border-bottom: 1px solid #009d3c;
padding-bottom: 5px;
margin-bottom: 20px;
}


.imgCenter {
text-align: center;
}
.imgRight {
float: right;
margin: 0 0 0 30px;
}
.imgLeft {
float: left;
margin: 0 30px 0 0;
}


#contents:not(.style_top) .txt_indent {
padding: 1em;
}


#contents:not(.style_top) section {
margin-bottom: 50px;
}


#contents:not(.style_top) .block {
overflow: hidden;
}


.img_list01,
.img_list02 {
margin-left: 20px;
margin-right: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.img_list01 li,
.img_list02 li {
width:175px;
}
.img_list01 li img,
.img_list02 li img {
margin-bottom: 5px;
}


.column_box {
background-color: #f2f2f2;
padding: 17px;
}
.column_box .section_subtitle {
border-bottom: none;
border-left: 5px solid #009d3c;
padding-left: 11px;
}


table.des{
width:100%!important;
box-sizing: border-box;
}
table.des th{
padding:24px!important;
box-sizing: border-box;
border: 1px solid #c9c9cb!important;
background-color: #f2f2f2!important;
font-size: 20px;
font-size: 2rem;
font-weight: bold;
text-align: left;
vertical-align: top;
}
table.des td{
padding: 24px!important;
box-sizing: border-box;
border: 1px solid #c9c9cb!important;
background-color: #fff!important;
font-size: 20px;
font-size: 2rem;
text-align: left;
vertical-align: top;
}

/* category */
#main_contents ul.category li{
float:left;
width:30%;
margin:0 5% 5% 0;
}
#main_contents ul.category li:nth-child(3n){margin-right:0;}
#main_contents ul.category li:nth-child(3n+1){clear:both;}

#main_contents ul.category li a{
display:block;
padding:15px 0;
border:3px solid #999999;
text-align: center;
font-size: 13px;
font-size: 1.3rem;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
#main_contents ul.category li a:hover{
border: 3px solid #009944;
background-color: #009944;
color: #fff;
}


/* soldout */
#main_contents ul.soldout{
    width: 20%;
    margin: 0 0 0 auto;
}
#main_contents ul.soldout li a{
display:block;
padding:15px 0;
border:3px solid #999999;
text-align: center;
font-size: 13px;
font-size: 1.3rem;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
#main_contents ul.soldout li a:hover{
border: 3px solid #009944;
background-color: #009944;
color: #fff;
}


/* support */
#main_contents ul.support li{
float:left;
width:18%;
margin:0 2.5% 3% 0;
text-align:center;
}
#main_contents ul.support li:nth-child(5n){margin-right:0;}
#main_contents ul.support li:nth-child(5n+1){clear:both;}

#main_contents ul.support li img{
margin-bottom:10px;
max-width:100%!important;
}


/* download */
#main_contents ul.download{
background-color:#f5f5f5;
padding:0 25px;
margin-bottom:30px;
}
#main_contents ul.download li{
float:left;
width:23%;
margin:2% 2.5% 2% 0;
}
#main_contents ul.download li:nth-child(4n){margin-right:0;}
#main_contents ul.download li:nth-child(4n+1){clear:both;}


/* staff */
#main_contents ul.staff li{
float:left;
width:30%;
margin:0 5% 5% 0;
}
#main_contents ul.staff li:nth-child(3n){margin-right:0;}
#main_contents ul.staff li:nth-child(3n+1){clear:both;}

#main_contents ul.staff li .more a{
display:block;
padding:15px 0;
border:3px solid #999999;
text-align: center;
font-size: 13px;
font-size: 1.3rem;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
#main_contents ul.staff li .more a:hover{
border: 3px solid #009944;
background-color: #009944;
color: #fff;
}

#main_contents ul.staff li p,#main_contents ul.staff li img{
margin-bottom:10px;
}

#main_contents ul.staff li img{
max-width:100%;
}



/* products */
#main_contents ul.category2{
text-align:center;
}
#main_contents ul.category2 li{
display:inline-block;
width:35%;
max-width:370px;
margin:0 5% 5%;
}
#main_contents ul.category2 li img{
max-width:100%;
}

#main_contents ul.products_list li{
float:left;
width:31.667%;
margin:0 30px 30px 0;
}
#main_contents ul.products_list li:nth-child(3n){margin-right:0;}
#main_contents ul.products_list li:nth-child(3n+1){clear:both;}

#main_contents ul.products_list li img{
margin-bottom:8px;
max-width:380px;
}

#main_contents .tbox img{max-width:1200px!important;}

/* company */
#main_contents ul.company_topics li{
float:left;
width:30%;
margin:0 5% 5% 0;
}
#main_contents ul.company_topics li:nth-child(3n){margin-right:0;}
#main_contents ul.company_topics li:nth-child(3n+1){clear:both;}

#main_contents ul.company_topics li a img{
margin-bottom:15px;
max-width:100%;
}

#main_contents ul.company_topics li a p{
display:block;
padding:15px 0;
border:3px solid #999999;
text-align: center;
font-size: 13px;
font-size: 1.3rem;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
#main_contents ul.company_topics li a:hover p{
border: 3px solid #009944;
background-color: #009944;
color: #fff;
}

.top_bnr{
padding:80px 0;
background-color:#F6F7F7;
}
.top_bnr ul{
display:flex;
justify-content:space-between;
}
.top_bnr li, .top_bnr li img{
width:550px;
}