@charset "utf-8";
/*-----------------------------------------------------
common
--------------------------------------------------------*/
	.forPC,
	.forTB{display:none;}
	.forSP{display:inherit;}

/*-----------------------------------------------------
sp
-------------------------------------------------------*/
html{font-size:10px;}
img {max-width:100%; height:auto;}
body{font-size:1.4rem;}
@media screen and (max-width: 374px) {
	body{font-size:1.3rem;}
}

/*--------------------------------------------------------------------
   header
---------------------------------------------------------------------*/
header,
.navHdr{height:60px;}
header h1,
header .logo,
#drawernav .logo{
    width:150px;
    height:37px;
	margin: auto auto auto 30px;
}


/*--------------------------------------------------------------------
   footer
---------------------------------------------------------------------*/
#ftrBnr{padding: 50px 0;}
#ftrBnr ul{
	width:100%;
	max-width:234px;
	margin: 0 auto;
	overflow: hidden;
}
#ftrBnr ul li{
	width:auto;
	padding: 0;
	float:none;
}
#ftrBnr ul li + li{margin-top:25px;}

#ftrBtm{padding: 30px 15px;}

#ftrBtm ul.ftrSns{
	width: 130px;
	position:static;
	margin: 0 auto;
}
#ftrBtm .logo{
	width:auto;
	float:none;
	padding-right:15px;
	padding-bottom: 20px;
}
#ftrBtm .logo a{
    width:168px;
    height:42px;
	margin: 0 auto;
}

#ftrBtm p.copy{
	padding-top: 20px;
    font-size:.9rem;
	line-height:1.5;
}

footer p.copy a{ color:#999999 !important;}


/*--------------------------------------------------------------------
   container
---------------------------------------------------------------------*/
/* base
-----------------------*/
div[id="container"] p,
div[id="container"] li,
div[id="container"] dt,
div[id="container"] dd,
div[id="container"] th,
div[id="container"] td{
    font-size:1.6rem;
    line-height:2; }


#container.toppage{
	margin-top: -60px;
}

/*btnOv*/

.btnOv{
	width: 200px;
	height: 54px;
	border-radius: 27px;
}
.btnOv span{
	line-height: 54px;
	font-size:1.4rem;
}

/*--------------------------------------------------------------------
   toppage
---------------------------------------------------------------------*/
/* mainimage
---------------------------------------------------------*/
  #mainImage,
  #mainImage ul {
    padding-top: 0 !important;
  }

  #mainImage {
    top: 0 !important;
  }

  .bxslider img {
    object-fit: cover;
    display: block;
    width: 100%;
  }

/* lead
----------------------------------------------------*/
#lead{
	padding-top: 25px;
	padding-bottom: 70px;
}
#lead .logo{
	width: 162px;
	height: 45px;
	top: -66px;
}

#lead p{
	font-size: 1.4rem;
	line-height: 2.23;
}
#lead p + p{margin-top: 25px;}
 /* service
----------------------------------------------------*/
#service{padding: 0 15px 90px;}
#service h2,
#news h2,
#product h2,
#message h2,
#company h2,
#contact h2{
	font-size: 2.6rem;
	margin-bottom: 30px;
}
#service .inner + .inner{ margin-top: 70px;}
#service .inner#service01 .txtBox,
#service .inner#service02 .imgBox,
#service .inner#service02 .txtBox,
#service .inner#service01 .imgBox{
	width:100%;
	float: none;
}
#service .inner#service02 .imgBox,
#service .inner#service01 .imgBox{
	max-width:345px;
	margin: 0 auto;
}
#service .inner#service01 .txtBox{padding-left: 0;}
#service .inner#service01 .txtBox .txtIn{margin-right: 0;}
#service .inner#service01 .imgBox{padding-right: 0;}
#service .inner#service01 .imgBox .imgIn{margin-left: 0;}

#service .inner#service02 .txtBox{padding-right: 0;}
#service .inner#service02 .txtBox .txtIn{margin-left: 0;}
#service .inner#service02 .imgBox{padding-left: 0;}
#service .inner#service02 .imgBox .imgIn{margin-right: 0;}

#service .inner#service01{position: relative; padding-top: 75px;}
#service .inner#service02{position: relative; padding-top: 90px;}
#service .inner .txtBox .txtIn{width:auto;}
#service .inner .txtBox .txtIn h3{ 
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#service .inner#service01 .txtBox .txtIn h3{font-size: 2.2rem;}
#service .inner#service01 .txtBox .txtIn h3 span{font-size:1.5rem;}
#service .inner#service02 .txtBox .txtIn h3{font-size: 2rem;}
#service .inner .txtBox .txtIn p{ padding-bottom: 15px;}
#service .inner#service01 .imgBox .imgIn span.txt{
	width: 81%;
	height: 38%;
	left:auto;
	right: 0;
	bottom: -26%;
}
#service .inner#service01 .txtBox{ padding-top: 100px;}
#service .inner#service02 .txtBox{ padding-top: 30px;}

 /* news
----------------------------------------------------*/
#news{padding:0 0 80px;}
#news ul{padding-bottom: 60px;}
#news ul{margin-top: -25px;}
#news ul li{
	width:auto;
	float:none;
	padding: 25px 0;
}
#news ul li.odd{float: none;}
#news ul li .txt .date{font-size:1.2rem;}
#news ul li .txt p{font-size: 1.3rem;}

 /* product
----------------------------------------------------*/
#product{
	padding-top: 100px;
}
#contact .bgBox{padding-left: 15px; padding-right: 15px;}

#product .wrapBox .item{
    flex: 0 0 calc(50% - 15px);
	margin: 0 auto;
	height: auto !important;
}
#product .wrapBox .item:nth-last-child(1):nth-child(odd) {
  flex: 0 0 calc(50% - 15px);
}

 /* message
----------------------------------------------------*/
#message{
	padding:70px 15px 100px;
}
#message h2 {
	line-height: 1.8;
}



 /* company
----------------------------------------------------*/
#company{padding:100px 0 0; margin-top: -60px;}
#company .wrapBox .companyOutline{
	width:100%;
	float: none;
	padding: 45px 15px;
}
#company .wrapBox .companyOutline h3{
	font-size: 	1.8rem;
	margin-bottom: 15px;
}
#company .wrapBox .companyOutline dl{overflow: hidden;}
#company .wrapBox .companyOutline dl dt{font-size: 1.4rem; padding-bottom: 15px;}
#company .wrapBox .companyOutline dl dt::after{content: "：";}
#company .wrapBox .companyOutline dl dd::before{ display: none;}
#company .wrapBox .companyOutline dl dd{
	padding-left:0;
	padding-bottom: 15px;
	font-size: 1.4rem;
}
#company .wrapBox .companyOutline dl dt.n1,
#company .wrapBox .companyOutline dl dt.n2,
#company .wrapBox .companyOutline dl dt.n4,
#company .wrapBox .companyOutline dl dt.n5{width: 3em;}

#company .wrapBox .companyOutline dl dt.n1 + dd,
#company .wrapBox .companyOutline dl dt.n2 + dd,
#company .wrapBox .companyOutline dl dt.n5 + dd{margin-left: 3em;}
#company .wrapBox .companyOutline dl dt.n3 + dd{margin-left: 5em;}
#company .wrapBox .companyOutline dl dt.n4,
#company .wrapBox .companyOutline dl dt.n6{padding-bottom: 0;}
#company .wrapBox .companyOutline dl dt.n4 + dd,
#company .wrapBox .companyOutline dl dt.n6 + dd{
	width: auto;
	margin-left: 0;
	clear: both;
}

#company .wrapBox #map {
	width:100%;
	height: 290px;
	float: none;
 }

 /* contact
----------------------------------------------------*/
#contact{
	padding-top: 60px;
	margin-top: -60px;
}
#contact .bgBox,
.second.contact #contact{padding-top: 90px; padding-bottom: 90px;}

#contact #form .clearfix{padding-bottom: 50px;}
#contact #form .clearfix > ul,
#contact #form .clearfix .formIn{
	width:auto;
	float:none;	
}
#contact #form .clearfix > ul{padding-bottom: 25px;}
#contact #form .clearfix > ul li + li{margin-top: 25px;}

#contact #form .clearfix .formIn textarea{
	height: 10em;
}
.second.contact #contact{padding: 90px 0;}
.second.contact #contact .thanks{padding: 40px 0;}

/*--------------------------------------------------------------------
   maintitle
---------------------------------------------------------------------*/
#mainTitle{	padding-top: 46.6%;}

#mainTitle h1{font-size:3.3rem;}
/*topicPath*/
#mainTitle #topicPath{
	left: 15px;
	top: 15px;
}
#mainTitle #topicPath li{
	margin-right: 0.3em;
	font-size: 	.9rem;
}
#mainTitle #topicPath li + li::before{margin-right: 0.6em;}

/*----------------------------------------------------
local 
-------------------------------------------------------*/
 /* service
----------------------------------------------------*/
#container.service{
	padding-top:0;
	padding-bottom: 110px;
}
#serviceLead{
	padding-top:60px;
	margin-top: -60px;	
}
#serviceLead .bgBox{
	background: url("../images/bg_service_sp.jpg") center center no-repeat;
	background-size: cover;
}
#serviceLead .wrapBox .txtBox{
	width:auto;
	margin-left:0;
	padding:60px 0 35px;
}

#serviceLead .wrapBox .txtBox h2{font-size: 2.6rem;}
#serviceLead .wrapBox .txtBox h2 span{font-size:1.5rem;}
#serviceLead .wrapBox .imgBox{
	width: 100%;
	padding-top: 390px;
	position:relative;
	left: 0;
	right: 0;
	top:0;
  transform:none;
	margin-left: auto;
	margin-right: auto;
}
#serviceLead .wrapBox .imgBox img{
	width: 100%;
	max-width: 345px;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 374px) {
    #serviceLead .wrapBox .imgBox{padding-top: 110%;}
}


#serviceOutline{
	padding-top: 80px;
	padding-bottom: 10px;
}
#serviceOutline h2{
	font-size: 2.3rem;
	line-height: 1.7;
	margin-bottom: 45px;
}
#serviceOutline .inner{	padding: 0 15px 60px;}
#serviceOutline .inner .txtBox,
#serviceOutline .inner#wholesale{padding-left:0;}
#serviceOutline .inner h3{
	font-size: 	2.3rem;
	margin-bottom: 25px;
}
#serviceOutline .inner h3:first-letter{font-size: 3rem;}

#serviceOutline .inner .txtBox p + p{margin-top: 20px;}
#serviceOutline .inner .txtBox p + dl{margin-top: 30px;}
#serviceOutline .inner dl dt{font-weight: bold;}
#serviceOutline .inner dl dd + dt{margin-top: 10px;}

/*ecommerce*/
#serviceOutline .inner#ecommerce .txtBox,
#serviceOutline .inner#ecommerce .imgBox{
	width:auto;
	float:none;
	padding-bottom: 35px;
}
#serviceOutline .inner#ecommerce .imgBox ul{
	width: 270px;
	margin-right: auto;	
	margin-left: auto;
}
#serviceOutline .inner#ecommerce .imgBox ul li + li{margin-top: 25px;}
#serviceOutline .inner#ecommerce .txtBox dl{display: none;}

/*realcommerce*/
/*catalog*/
#serviceOutline .inner#realcommerce .txtBox,
#serviceOutline .inner#realcommerce .imgBox,
#serviceOutline .inner#catalog .txtBox,
#serviceOutline .inner#catalog .imgBox{
	width:auto;
	float:none;
}
#serviceOutline .inner#realcommerce .imgBox,
#serviceOutline .inner#catalog .imgBox{
	padding-top: 35px;
	max-width: 345px;
	margin: 0 auto;	
}
#serviceOutline .inner#wholesale{
	padding-left: 15px;
	padding-right: 15px;
}

#container.service #produce{
	padding-top: 60px;
	margin-top: -60px;	
}
#container.service #produce .bgBox{
	background: url("../images/bg_service2_sp.jpg") center center no-repeat;
	background-size: cover;
}
#container.service #produce .wrapBox .txtBox{
	width:auto;
	margin-left:0;
	padding:60px 0 35px;
}

#container.service #produce .wrapBox .txtBox h2{font-size: 2rem; line-height: 1.5;}
#container.service #produce .wrapBox .imgBox{
	width: 100%;
	padding-top: 335px;
	position:relative;
	left: 0;
	right: 0;
	top:0;
  transform:none;
	margin-left: auto;
	margin-right: auto;
}
#container.service #produce .wrapBox .imgBox img{
	width: 100%;
	max-width: 345px;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}


@media screen and (max-width: 374px) {
    #container.service #produce .wrapBox .imgBox{padding-top: 100%;}
}








/* pager
--------------*/
.pagination{padding-top:0; padding-bottom: 60px;}



@media screen and (max-width: 374px) {
    /*iphone5*/
}