@charset "utf-8";

----------------------------------------------------------- */
/* コンテンツ
----------------------------------------------------------- */
#contents {
height: 100%;
margin:0 auto;
padding: 0;
}

.contentsbox {
height: 100%;
margin: 0 auto ;
padding: 0;
}

/* -----------------------------------------------------------
メイン
----------------------------------------------------------- */
.main {
width: 1100px;
margin: 0 auto ;
padding: 3.5em 5em 3em 5em;
}

.main h2 {
font-size: 36px;
font-weight: normal;
line-height:1.4;
display: inline-block;
/*
padding: 0 0 0.7em 0;
background-image: url(../images/line2.jpg);
background-repeat: repeat-x;
background-position: center bottom;*/
}

.main h3 {
clear: both;
font-size: 24px;
color: #008cdb;
position: relative;
padding-bottom: .3em;
margin: 3em 0 1em 0;
border-bottom: 4px solid #008cdb;
}

.main h3:first-child{
margin: 0 0 1em 0;
}

.main h3::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #008cdb;
}

.product-information h3:first-letter{
color: #FFF;
background-color: #008cdb;
padding: 0 0.3em;
margin: 0 0.2em 0 0;
}

.mainbox {
text-align:left;
padding: 2em 0 2em 0;
}

.mainbox h4 {
clear: both;
min-width: 50%;
display: inline-block;
font-size: 18px;
margin: 2em 0 1em 0;
padding: 0 1em;
border: 2px solid #008cdb;
background-image:url(../images/img_bg03.png);
}

.mainbox h3 + h4 {
margin: 0 0 1em 0;
}

.mainbox h5 {
font-size:16px;
color: #008cdb;
margin: 2em 0 1em 0;
}

.mainbox h4 + h5 {
margin: 0 0 1em 0;
}

blockquote {
border:1px solid #CCC;
background-color:#FFF;
padding:1em 1.5em 0 1.5em;
margin: 2em 0 2em 0;
}

.mainbox blockquote h4:first-child {
margin:0 0 1em 0;
}

.textcenter { text-align:center;}

.red { color: #C00;}
.red14 { font-size: 14px;  color: #C00;}

.mainbox img {
vertical-align: bottom;
}

.aligncenter{
    max-width:100%;
    margin:0 auto 1em auto;
    vertical-align: bottom;
    display:block;
}

.alignright {
    float:right;
    max-width:400px;
    padding: 5px;
    margin:0 0 2em 2em;
    vertical-align: bottom;
}

.alignleft {
    float:left;
    max-width:400px;
    padding: 5px;
    margin:0 2em 2em 0;
    vertical-align: bottom;
    }
	
.img {
display: inline-block;
width: 48%;
margin: 1em 1% 1em 1%;
}

.img4 {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.imgbox {
width: 25%;
padding: 0 0.5%;
display: inline-block;
margin: 1em 0;
font-size: 12px;
}

.imgbox img {
width: 100%;
}

.mainbox p.name {
text-align: right;
margin: 3em 0 1em 0;
line-height: 1.7;
}

.mainbox p.name span {
font-size: 24px;
font-weight: 700;
}

.mainbox p.more {
text-align: right;
}
.mainbox p.more a {
font-size: 14px;
display: inline-block;
color :#FFF;
padding: 0.8em 5em 0.6em 5em;
margin:0 auto;
text-align:center;
text-decoration:none;
transition: 1.0s ;
background-color: #008cdb;
}

.mainbox p.more a:hover {
color:#FFF;
background-color:#666;
}

@media screen and (max-width: 768px) {
	.main {
	width: 100%;
	top:0;
	padding: 3em 0 2em 0;
	margin: 0 auto;
	}
	.main h2 {
	font-size: 26px;
	}
	.main h3 {
	font-size: 22px;
	line-height: 1.4;
	}
	.mainbox {
	width: 90%;
	margin: 0 auto;
	padding: 2em 0 1em 0;
	}
	.mainbox h4 {
	min-width: 100%;
	font-size: 16px;
	}
	.mainbox p.more a {
	display: block;
	}
	.mainbox p.name span {
	display: block;
	font-size: 20px;
	}
	.alignright {
	float:none;
	max-width:100%;
	margin: 0 auto 1em auto;
	display: block;
	text-align: center;
	}
	.alignleft {
	float: none;
	max-width: 100%;
	margin: 0 auto 1em auto;
	display: block;
	}
	.imgbox {
	margin: 2em 0.5% 1em 0.5%;
	width: 48%;
	}
	.imgbox img {
	max-height: inherit;
	}
}


/*　リスト系
-------------------------------------------------*/

.mainbox ul {
padding:0 0 0 26px;
margin:0 0 1em 0;
overflow:hidden;
}

.mainbox ul li {
list-style-type:disc;
}

.mainbox ul.ullist {
padding:0;
margin:0 0 1em 0;
text-align: center;
overflow:hidden;
}

.mainbox ul.ullist li {
list-style-type:none;
display: inline-block;
margin: 0 1em 0 0 ;
font-size: 13px;
}

.mainbox ol {
padding:0 0 0 26px;
margin:0 0 2em 0;
}

.mainbox ol li {
list-style-type:decimal;
padding: 0 0 0.5em 0;
margin: 0 0 0.5em 0;
border-bottom: 1px solid #CCC;
}

.mainbox dl {
overflow: hidden;
}

.mainbox dl.dl_greeting {
margin: 1em 0 0 0;
}

.mainbox dt {
width: 30%;
float:right;
}

.mainbox dt img {
vertical-align: bottom;
margin: 4px 0 1em 0;
}

.mainbox dd {
width: 65%;
float: left;
text-align: left;
}

.mainbox dl.dl_factory {
margin: 3em 0 0 0;
}

.mainbox dl.dl_factory dt {
width: 25%;
float:left;
}

.mainbox dl.dl_factory dd {
width: 70%;
float: right;
}

.mainbox dl.dl_factory2 {
margin:0;
}

.mainbox dl.dl_factory2 dt {
width: 30%;
float:left;
}

.mainbox dl.dl_factory2 dd {
width: 68%;
float: right;
}


@media screen and (max-width: 768px) {
	.mainbox dt {
	width:100%;
	float:none;
	text-align: center;
	margin: 0 0 1em 0;
	}
	.mainbox dd {
	width:100%;
	float:none;
	}
	.mainbox ul.ullist {
	text-align:left;
	}
	.mainbox dl.dl_factory dt {
	width: 100%;
	display:block;
	margin: 0 auto;
	}
	.mainbox dl.dl_factory dd {
	width: 100%;
	display:block;
	margin: 0 auto;
	}
	.mainbox dl.dl_factory2 dt {
	width:100%;
	float:none;
	text-align: center;
	margin: 0 0 1em 0;
	}
	.mainbox dl.dl_factory2 dd {
	width:100%;
	float:none;
	margin: 0 0 1em 0;
	}
}


/* テーブル------------------------------ */

.mainbox table {
width: 100%;
}

.mainbox th {
width:20%;
text-align:left;
font-weight:normal;
padding:12px 20px;
border-bottom:1px solid #CCC;
vertical-align: top;
}

.mainbox td {
width:80%;
text-align:left;
padding:12px 20px;
border-bottom:1px solid #CCC;
}

/* 会社概要 */

.profilebox table {
width: inherit;
}

.profilebox th {
width: 26%;
}

.profilebox td {
width: 74%;
}

.profilebox td ul {
margin: 0;
}

/* 沿革 */

.historybox table {
width: inherit;
}

.historybox th {
width: 16%;
text-align: center;
background-image:url(../images/img_bg02.png);
}

.historybox td {
width: 84%;
font-size: 15px;
}

@media screen and (max-width: 768px) {
	.mainbox table {
	width: 100%;
	}
	.mainbox th {
	display:block;
	width:100%;
	padding: 12px 0;
	text-align: center;
	border-top: 3px solid #666;
	background-color: #F4F4F4;
	}
	.mainbox td {
	display:block;
	width:100%;
	padding: 12px 0 2em 0;
	border: none;
	}
	.profilebox table {
	width: 100%;
	}
}


/* 地図------------------------------ */

.mapbox {
    position: relative;
    width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
    padding-bottom: 56.25%;    /* padding-topでもOK */
    overflow: hidden;
	margin: 0 0 -70px 0;
}
 
.mapbox iframe,
.mapbox object,
.mapbox embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    /* 必要であれば!importantを付けてください */
    height: 100%;    /* 必要であれば!importantを付けてください */
}

/* 物流------------------------------ */

.map {
margin: 2em 0;
}

/* --------------------------------------------------------------------

お問い合わせフォーム

--------------------------------------------------------------------*/
.mainbox table.t_form {
width:100%;
margin: 0 0 2em 0;
}

.mainbox table.t_form th {
width: 30%;
text-align: left;
}

.mainbox table.t_form th span.hissu {
display: block;
float: right;
color:#FFF;
padding: 0 1em;
background-color: #C00;
}

.mainbox table.t_form td {
width: 70%;
}

textarea {
width: 100%!important;
height: 150px!important;
}

.formbt button {
display: block;
width: 260px;
height: 60px;
margin: 0 auto;
text-align: center;
}

@media screen and (max-width: 768px) {
	.mapbox {
	margin: 0;
	}
	.mainbox table.t_form th {
	width: 100%;
	display: block;
	}
	.mainbox table.t_form td {
	width: 100%;
	display: block;
	}
	input {
	width:100%!important;
	}
	.mfp_element_all {
	max-width: 100%!important;
	}
	form#mailformpro label {
	white-space:inherit!important;
	}
}

/* --------------------------------------------------------------------

商品紹介 

--------------------------------------------------------------------*/
.product_zu {
text-align: center;
padding: 1em 1em;
border:1px dotted #008cdb;
}

.product_zu p.catch {
font-size: 24px;
color: #008cdb;
}

.product_detail {
width: 100%;
margin: 0 0 2em 0;
overflow: hidden;
}

.product_detail_l {
width: 49%;
float: left;
margin: 0 1% 0 0 ;
}

.product_detail_r {
width: 49%;
float: right;
margin: 0 0 0 1%;
}

.product_detail_l h4,
.product_detail_r h4 {
min-width: 100%;
margin: 0 0 1em 0;
}

@media screen and (max-width: 768px) {
	.product_detail_l {
	width: 100%;
	margin: 0 0 1em 0;
	}
	.product_detail_r {
	width: 100%;
	margin: 0 0 1em 0;
	}
}

.product_detail h5 {
width: 100%;
margin: 0 0 1em 0;
}


.productbox table {
width: 100%;
}

.productbox th {
width: inherit;
text-align:center;
font-size: 14px;
font-weight:700;
padding:8px 6px;
color: #FFF;
border-right: 1px solid #FFF;
background-color: #008cdb;
vertical-align: top;
}

.productbox th span.red,
.productbox td span.red{
font-size: 12px;
font-weight: bold;
line-height: 12px;
display: inline-block;
padding: 0.3em;
margin: 0 0 0 0.6em;
background-color: #FFF;
border-radius: 50% 50%;
}

.productbox td {
width: inherit;
width: 25%;
text-align:center;
font-size: 14px;
padding:8px 6px;
border-right:1px solid #FFF;
border-bottom:1px solid #FFF;
background-color: #F2F2F2;
}

.productbox td:first-child {
background-color: #CCC;
background-color: rgba(0,140,219,0.3);
}

.productbox table.t50 th {
width: 50%;
}

.productbox table.t50 td {
width: 50%;
}

.productbox table.t33 th {
width: 33.33%;
}

.productbox table.t33 td {
width: 33.33%;
}

@media screen and (max-width: 768px) {
	.productbox table {
	width: 100%;
	}
	.productbox th {
	display:table-cell;
	border-top:none;
	}
	.productbox th:last-child {
	border-right:none;
	}
	.productbox td {
	display:table-cell;
	}
}