@charset "utf-8";

@import url("colorbox.css");

/* CSS Document */

/*=====================
１．全体  
=====================*/
*{margin:0;padding:0;}

.img-l {
	float: left;
}
.img-r {
	float: right;
}
address .img-l {
	float: left;
	margin-right: 0.5em;
	box-shadow: 0px 0px 10px #ccc;
}

.clear {
	clear: both;
}
p.hosoku {
	clear: both;
	font-size: 0.95em;
	margin: 0 0 0 1em!important;
}
p.kikaku {
	clear: both;
	font-size: 0.9em;
	line-height: 2em;
	margin-top:10px;
	border-bottom: 1px dotted #aaa;
}
.box-att {
	background-color: #B4045F;
    border: 2px dashed #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px #B4045F;
    margin: 2em 0;
    padding: 0.5em 0.5em 0 0.5em;
}
#main p.top-att {
        color: #fff;
  font-size: 2.7em;
	font-weight: bold;
  position: relative;
  padding: 0 0 0px 45px;
	margin:0 0 0 2.1em;
}
#main p.top-att:before, #main p.top-att:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  margin: auto;
}
#main p.top-att:before {
  top: -6px;
  left: 0px;
  animation: spin 4s linear infinite;
}
#main p.top-att:after {
  top: 6px;
  left: 6px;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.large-text {
	font-size: 1.4em;
	font-weight: bold;
	color: #333;
}
ul.kikaku {
	clear: both;
}
ul.kikaku li {
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px dotted #ccc;
	padding-left: 10px;
	line-height: 2em;
	padding:0 1em;
	float: left;
}
ul.kikaku li.wide {
	width:250px;
}

.box-product ul.kikaku li,.box-product ul.kikaku li.wide {
	width:90%;
}

p.blank-line {
	clear: both;
	height: 2em;
}
/*不要なCSS　.box*/
.box p {
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.box p.move {
  -webkit-transform: translate(-10px, 0);
  opacity: 0;
}
.sp-text {
	display: none;
}
/*=====================
２．タイトル  
=====================*/
h1 {
	color: #fff;
	font-size: 0.9em;
	font-weight: normal;
	line-height: 24px;
	margin:0 0 0 10px;
}

h2.h2-title-light,h3.h3-title-light {
	height: 36px;
	font-size: 1.8em;
	font-weight: normal;
	color:#0063ff ;
	border-bottom: 6px solid #1319c7;
	line-height: 1.5em;
	padding:44px 0.3em 0 50px;
	margin: 0.5em 0 1em 0;
	clear:both;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	background:url(../images/light-icon.png) no-repeat left center;
}

h2.h2-title,h3.h3-title {
	font-size: 1.4em;
	font-weight: normal;
	color:#0063ff ;
	border-bottom: 6px solid #1319c7;
	line-height: 1.5em;
	padding:0.5em 0.3em 0 0.3em;
	margin: 0.5em 0 1em 0;
	clear:both;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

h2.h2-title-02 {
	font-size: 1.6em;
	font-weight: normal;
	color:#333 ;
	border-bottom: 6px solid #777;
	line-height: 1.5em;
	padding:0.5em 0.3em 0 0.3em;
	margin: 0.5em 0 0.5em 0;
	clear:both;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

h3.h3-title-products {
	font-size: 1.4em;
	font-weight: normal;
	color:#0063ff ;
	border-bottom: 6px solid #0063ff;
	line-height: 1.5em;
	padding:2.5em 0.3em 0 0.3em;
	margin: 0em 0 1em 0;
	clear:both;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

h3.h3-title-02 {
	font-size: 1.3em;
	font-weight: normal;
	color:#333 ;
	border-bottom: 6px solid #ddd;
	line-height: 1.5em;
	padding:0.5em 0.3em 0 0.3em;
	margin: 0.5em 0 0.3em 0;
	clear:both;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
h4.h4-product,h4.h4-product-small {
	font-size: 1.0em;
	color: #333;
	border-bottom: 1px dashed #ccc;
}



/*=====================
３．header-area  
=====================*/

#header-upper {
	height: 24px;
	background-color: #202340;
	border-bottom: 3px solid #3A4A98;
	box-shadow: 0px 5px 5px #FFFFEA;
}

#header-upper-in {
	width: 1100px;
	margin:0 auto;
}

#header-innner {
	width: 1100px;
	height: 110px;
	margin: 0 auto;
	padding: 0.5em 0 0 0;
	position:relative;
	background-color: #fff;
}

.header-image {
	clear: both;
	width:100%;
	height: 550px;
	background: url(../images/header-led-img-pc-type7.jpg) no-repeat center;
}

#products .header-image {
	clear: both;
	width:100%;
	height: 400px;
	background: url(../images/header-led-img-products.jpg) no-repeat center;
}
#hanbaiten .header-image {
	clear: both;
	width:100%;
	height: 400px;
	background: url(../images/header-led-img-hanbaiten.jpg) no-repeat center;
}
#contact .header-image {
	clear: both;
	width:100%;
	height: 400px;
	background: url(../images/header-led-img-contact.jpg) no-repeat center;
}
#company .header-image {
	clear: both;
	width:100%;
	height: 400px;
	background: url(../images/header-led-img-company.jpg) no-repeat center;
}
#policy .header-image {
	clear: both;
	width:100%;
	height: 400px;
	background: url(../images/header-led-img-policy.jpg) no-repeat center;
}
#sitepolicy .header-image {
	clear: both;
	width:100%;
	height: 400px;
	background: url(../images/header-led-img-sitepolicy.jpg) no-repeat center;
}
.shamei {
	position:absolute;
	top:10px;
	left: 100px;
}
.sp-text-shamei {
	display:none;
}
/*=====================
3-1．ナビゲーションメニュー  
=====================*/
#sp-menu {
	display:none;
}
.header-right {
	float: right;
}
.tel-number {
	text-align: right;
}
ul#topnav {
	float: right;
}
ul#topnav li {
	list-style: none;
	float: left;
	margin:0.1em 0.3em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
ul#topnav li a:link,ul#topnav li a:visited {
	text-decoration: none;
	width: 190px;
	height: 43px;
	display: block;
	box-sizing: border-box;
	border:1px solid #ccc;
	border-left: 2px solid #ccc;
	border-right: 2px solid #ccc;
	border-radius: 5px;
	line-height: 43px;
	text-align: center;
	color: #555;
	padding:0px 0 0 0;
	-webkit-transition: 0.7s;
	   -moz-transition: 0.7s;
	-o-transition: 0.7s;
	transition: 0.7s;
}

ul#topnav li a:hover {
	background-color:#2992d6;
	color: #fff;
	opacity:0.80;
	filter: alpha(opacity=70);
}

/*=====================
4．main-area  
=====================*/
#main {
	clear: both;
	width: 1100px;
	margin:0 auto;
	padding:0 0 0em 0;
}

#main p {
	line-height: 2em;
	color: #333;
	letter-spacing: 0.1em;
	margin:0 1em 1em 1em;;
}

ul.gyoumu {
	margin:0 0 0 1em;	
}

ul.gyoumu li {
	color: #333;
	list-style-type: square;
	list-style-position: inside;
	line-height: 2.0em;
	letter-spacing: 0.1em;
	padding:0 0 0 0.5em;
	border-bottom: 1px dotted #ccc;
}
ul.kanren {
	margin:0 0 0 1em;
}
ul.kanren li {
	list-style: none;
	height: 2.2em;
	line-height: 2.2em;
}

ul.kanren li a:link,ul.kanren li a:visited {
	padding:0 0 0 20px;
	background:url(../images/arrow01.gif) no-repeat left center;
}
ul.kanren li a:hover {
	color: #448eaf;
}


#products-area img {
	display: none;
}
.left-box {
	clear: both;
	width: 535px;
	height: 199px;
	padding:0.3em 0.3em;
	margin-bottom:10px; 
	border: 1px solid #ccc;
	float: left;
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.right-box {
	width: 535px;
	height: 199px;
	padding:0.3em 0.3em;
	border: 1px solid #ccc;
	float: right;
}

.left-box .move {
  -webkit-transform: translate(-10px, 0);
  opacity: 0;
}
.product-img {
	width: 300px;
	float: left;
}
.product-info {
	width: 225px;
	float: right;
}
.product-info ul li {
	list-style: none;
	font-size: 0.95em;
}
li.hosoku {
	font-size: 0.85em;
	color: #555;
}
.shousai,.shousai-r {
	position:relative;
	width: 90%;
	height: 30px;
	line-height: 30px;
	bottom:-10px;
}
.shousai a:link,.shousai a:visited,
.shousai-r a:link,.shousai-r a:visited{
	width: 90%;
	height: 30px;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 0.9em;
	letter-spacing: 0em;
	text-decoration: none;
	box-sizing: border-box;
	border:1px solid #ccc;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
	-webkit-transition: 0.5s;
	   -moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.shousai a:hover {
	color: #fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
background: #b7deed; /* Old browsers */
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
	opacity:0.80;
	filter: alpha(opacity=70);
}
.shousai-page {
	width: 70%;
	height: 45px;
	line-height: 45px;
	text-align: center;
	margin:1em auto;
}
.shousai-page a:link,.shousai-page a:visited {
	width: 100%;
	height: 45px;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0em;
	text-decoration: none;
	box-sizing: border-box;
	border:1px solid #ccc;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
	-webkit-transition: 0.5s;
	   -moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.shousai-page a:hover {
	color: #fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
background: #b7deed; /* Old browsers */
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
	opacity:0.80;
	filter: alpha(opacity=70);
}
.contact {
	width: 300px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	text-align: center;
	margin: 1em auto;
	padding: 0 0;
	border-radius: 10px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bfd255+0,8eb92a+50,72aa00+51,9ecb2d+100;Green+Gloss */
background: #bfd255; /* Old browsers */
background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
}

.contact a:link,.contact a:visited {
	width: 300px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size: 1.2em;
	display: block;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.1em;
	-webkit-transition: 0.3s;
	   -moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.contact a:hover {
	opacity:0.70;
	filter: alpha(opacity=70);
}

/*=====================
4-2．pan-nav  
=====================*/
.pan-nav {
	height: 30px;
	margin-top:10px;
}

.pan-nav ul {
	margin-left: 10px;
}

.pan-nav ul li {
	list-style: none;
	height: 30px;
	line-height: 30px;
	letter-spacing: 0.1em;
	font-size: 0.9em;
	float: left;
	padding-right: 15px;
}
.pan-nav ul li a:link,.pan-nav ul li a:visited {
	text-decoration: none;
	color:#2269D7;
}
.pan-nav ul li a:hover {
	text-decoration: none;
	color:#2660FF;
}
/*=====================
4-3．製品一覧  
=====================*/

/*=====================
5．footer-area  
=====================*/
footer {
	clear: both;
	background-color: #202340;
	padding: 1em 0 0 0;
}

#footer-inner {
	width: 1100px;
	margin: 0 auto;
	color: #fff;
}

#footer-inner ul.footer-menu {
	float: left;
	margin-left: 10px;
}
#footer-inner ul li {
	list-style: none;
	font-size:0.9em;
	letter-spacing: 0.1em;
	line-height: 2.0em;
}
#footer-inner ul li::before {
	content: ">";
}
#footer-inner ul li a:link,#footer-inner ul li a:visited {
	color:#fff;
	padding:0 0 0 0.5em;
	text-decoration: none;
	-webkit-transition: 0.3s;
	   -moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
#footer-inner ul li a:hover {
	opacity:0.70;
	filter: alpha(opacity=70);
}

.footer-banner {
	width: 414px;
	height: ;
	float: left;
	margin:0 0 0 75px;
}

address {
	width:380px;
	height:110px;
	float: right;
	margin-bottom: 1em;
}

.copyright {
	height: 1.5em;
	line-height: 1.5em;
	clear: both;
	font-size: 0.9em;
	color: #fff;
	padding:0.5em 0;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, "serif";
	background-color: #353a6d;
	box-shadow: 0px -5px 7px #aaa;
}

/*=====================
6．table  
=====================*/
table.table-campany {
	width: 100%;
	border-collapse:collapse;
}
table.table-campany td {
	border-collapse:collapse;
	border-bottom: 1px solid #aaa;
	padding:0.4em 0 0.4em 1.0em;
	letter-spacing: 0.1em;
	color: #333;
}

/*=====================
7．light-box

製品一覧ページ  
=====================*/
.box-product {
	width:320px;
	float: left;
	margin-right:25px;
}
ul.ul-products {
	
}
.box-three {
	clear: both;
	width: 100%;
	height: auto;
}

ul.ul-products li {
	list-style: none;
	float: left;
	width: 300px;
	height: 199px;
	padding:3px;
	margin:0 5px;
	border:1px solid #ccc;
	box-shadow:4px 4px 5px #ccc;
}

ul.ul-products li a:link {
	-webkit-transition: 0.01s ease-in-out;
	   -moz-transition: 0.01s ease-in-out;
	     -o-transition: 0.01s ease-in-out;
	        transition: 0.01s ease-in-out;
}
			
ul.ul-products li a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}




.line{
	width: 300px;
	margin: 20px auto 30px;
	padding: 20px;
	position: relative;
}

.line.grad:before{
	background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
	width: 4px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: -3px;
	content: "";
}

/*=====================
8．ページトップへ戻る
=====================*/

.pageTop {
	clear: both;
	display:none;
	position:relative;
	width:90%;
	max-width:900px;
	height:0;
	margin:0 auto;
}
.pageTop a {
	position: fixed;
	bottom: 0px;
	left:auto;
	display: block;
	width: 70px;
	hegiht:66px;
	margin-left:1000px;
	padding:1em 0 1em 2px;
	background:#3498db;
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
	border-radius:7px 7px 0 0;
}
.pageTop a:before,
.pageTop a:after {
	position:absolute;
	left:50%;
	content:"";
	width:0px;
	height:0px;
	margin-left:-10px;
	border:10px solid transparent;
}
.pageTop a:before {
	top:50%;
	margin-top:-13px;
	border-bottom:10px solid #3498db;
}
.pageTop a:after {
	top:50%;
	margin-top:-15px;
	z-index:-1;
	border-bottom:10px solid #fff; /* 矢印の色 */
}

/* =====================
	タブレット向け
======================= */
@media screen and (min-width: 480px) and (max-width: 959px) {
h4.h4-product-small {
	font-size: 0.85em;
}
.pageTop {
	width:100%;
}
.pageTop a {
	left:-68px;
	margin-left:100%;
}
	{	position: fixed;
	bottom: 0px;
	left:auto;
	display: block;
	width: 66px;
	hegiht:66px;
	margin-left:920px;
	padding:1em 0 1em 2px;
	background:#3498db;
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
		border-radius:3px 3px 0 0;}
#header-upper-in {
	width: 100%;
	margin:0 auto;
}
#header-innner,#main {
	width: 100%;
}
.shamei {
	position:absolute;
	top:0vh;
	left: 100px;
}
.sp-name {
	width: 70vw;
	max-width: 470px;
	height: auto;
	}
.tel-number {
	position: absolute;
	top:6vh;
	left: 110px;
}
.tel-number-sp {
	width: 50vw;
	max-width: 320px;
	height: auto;
	}
ul#topnav {
	clear: both;
	float: left;
	width: 100%;
	height: 45px;
	background-color: #fff;
}
ul#topnav li {
	padding:0 0;
	list-style: none;
	float: left;
	margin:0.1em 0.1em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
ul#topnav li a:link,ul#topnav li a:visited {
	text-decoration: none;
	width: 18.6vw;
	height: 40px;
	display: block;
	box-sizing: border-box;
	border:1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-radius: 5px;
	line-height: 40px;
	text-align: center;
	color: #555;
	font-size: 0.9em;
	padding:0px 0 0 0;
}
/*====================
トップページ製品情報　タブレット
	===========================*/
.left-box {
	clear: both;
	width: 49%;
	height: 30%;
	padding:5px 5px;
	margin:0 0% 10px 0.5%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	float: left;
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.right-box {
	width: 49%;
	height: 30%;
	padding:5px 5px;
	margin:0 0.5% 10px 1%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	float: right;
}

.left-box .move {
  -webkit-transform: translate(-10px, 0);
  opacity: 0;
}

.product-img {
	width: 50%;
	height: auto;
	float: left;
}
.product-info {
	width: 47%;
	float: right;
}
.product-info ul li {
	font-size: 0.9em;
}
	
.product-info ul li span {
	font-size: 0.8em;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.product-info ul li span {
	font-size: 0.85em;
}
}
/*====================
製品一覧ページ　タブレット
	===========================*/	
ul.ul-products li {
	list-style: none;
	float: left;
	width: 28vw;
	height: auto;
	padding:3px;
	margin:0 5px;
	border:1px solid #ccc;
	box-shadow:4px 4px 5px #ccc;
}
ul.ul-products li img {
	width: 28vw;
	height: auto;
	}
/*====================
footer　タブレット
	===========================*/	
#footer-inner {
	width: 100%;
}
#footer-inner ul {
		width: 100%;
	height: 2em;
	margin-bottom: 0.5em;
	}
#footer-inner ul li {
	float: left;
	font-size:0.85em;
	letter-spacing: 0em;
	line-height: 2.0em;
	margin-right: 1.5em;
}
.footer-banner {
	width: 414px;
	height:;
	margin:0 5px 0 10px;
	float: left;
}

address {
	clear:none;
	font-size: 0.85em;
	width:380px;
	height:110px;
	float: right;
	margin:0 auto 1em auto;
}

/* タブレット向けここまで */ }

/* =====================
	スマホ向け
======================= */
@media screen and (max-width: 479px) {

.pageTop {
	width:100%;
}
.pageTop a {
	left:-90px;
	margin-left:100%;
}

/* スマホ向けここまで */ }

/*=======================================
Mobile 
=========================================*/
@media screen and (max-width: 480px) {

	h2.h2-title-light,h3.h3-title-light {
		height: auto;
	font-size: 1.1em;
	font-weight: normal;
	color:#1dace0 ;
	border-bottom: 6px solid #d8ecff;
	line-height: 1.5em;
	padding:0.5em 0.3em 0 0.3em;
	margin: 0.5em 0 1em 0;
	clear:both;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
		background: none;
}

h4.h4-product-small {
	font-size: 0.85em;
}
.img-r {
		float: none;
	}

.pc-text {
		display: none;
	}
.sp-text {
		display: block;
	}
#header-upper-in {
	width: 100%;
	margin:0 auto;
}
#header-innner {
	width: 100%;
}
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
.header-image {
	clear: both;
	width:100%;
	height: 189px;
	background: url(../images/header-led-img-sp.jpg) no-repeat center;
	background-size:contain;
}
#products .header-image,#hanbaiten .header-image,#contact .header-image,
#company .header-image,#policy .header-image,#sitepolicy .header-image {
	width:100%;
	height: 189px;
	background-size:contain;
	background: url(../images/sp-header-products.jpg) no-repeat center;
}
#hanbaiten .header-image {
	background: url(../images/sp-header-hanbaiten.jpg) no-repeat center;
}
#contact .header-image {
	background: url(../images/sp-header-contact.jpg) no-repeat center;
}
#company .header-image {
	background: url(../images/sp-header-company.jpg) no-repeat center;
}
#policy .header-image {
	background: url(../images/sp-header-policy.jpg) no-repeat center;
}
#sitepolicy .header-image {
	background: url(../images/sp-header-sitepolicy.jpg) no-repeat center;
}

h1 {
	color: #fff;
	font-size: 0.6em;
	font-weight: normal;
	line-height: 24px;
}
h2.h2-title,h3.h3-title,h3.h3-title-products {
	font-size: 1.1em;
	}
.sp-logo {
		width: 65px;
		height: auto;
	margin: 0 0;
	padding:0 0;
	}
.header-right {
		float: none;
	}
.shamei {
	position:absolute;
	top:10px;
	left: 70px;
}
.sp-name {
		display: none;
	}
.sp-text-shamei {
		display: block;
		width: 80vw;
		height: auto;
		font-size: 1.0em;
		font-weight: bold;
	color: #555;
	}
.tel-number-sp {
	position: absolute;
	top:30px;
	left: 70px;
	width: 75%;
	max-width: 310px;
	height: auto;
}
ul#topnav {
	clear: both;
	float: none;
	width: 100%;
	height: 45px;
	background-color: #fff;
}
ul#topnav li {
	padding:0 0;
	list-style: none;
	float: left;
	margin:0.1em 0em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
ul#topnav li a:link,ul#topnav li a:visited {
	text-decoration: none;
	width: 19vw;
	height: 40px;
	display: block;
	box-sizing: border-box;
	border:1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-radius: 5px;
	line-height: 40px;
	text-align: center;
	color: #555;
	font-size: 0.75em;
	padding:0px 0 0 0;
}
/*====================
トップページ製品情報　スマートフォン
	===========================*/
.left-box {
	clear: both;
	width: 98%;
	height: 210px;
	padding:5px 5px;
	margin:0 1% 10px 1%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	float: none;
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.right-box {
	width: 98%;
	height: 165px;
	padding:5px 5px;
	margin:0 1% 10px 1%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	float: none;
}
.height-box01 {
		height: 220px!important;
}
.height-box02 {
		height: 190px!important;
}
.left-box .move {
  -webkit-transform: translate(-10px, 0);
  opacity: 0;
}

.product-img {
	width: 50%;
	height: auto;
	float: left;
}
.product-info {
	width: 47%;
	float: right;
}
.product-info ul li {
	font-size: 0.9em;
	line-height: 1.5em;
}
ul.ul-products li {
	list-style: none;
	float: left;
	width: 28vw;
	height: auto;
	padding:3px;
	margin:0 1px;
	border:1px solid #ccc;
	box-shadow:4px 4px 5px #ccc;
}
table.table-campany td {
	font-size: 0.85em;
	padding:0.4em 0 0.4em 1.0em;
	letter-spacing: 0.1em;
}
ul.ul-products li img {
	width: 28vw;
	height: auto;
	}
#main {
		width: 100%;
	}
#main p {
	font-size: 0.9em;
	line-height: 1.6em;
	margin:0 0.4em 0.5em 0.4em;;
}
.box-att {
	background-color: #B4045F;
    border: 2px dashed #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px #B4045F;
    margin: 1em 0;
    padding: 0.5em 0.5em 0 0.5em;
}
#main p.top-att {
        color: #fff;
  font-size: 1.0em;
	font-weight: bold;
  position: relative;
  padding: 0 0 0px 0px;
	margin:0 0 0 0em;
}
#main p.top-att:before, #main p.top-att:after {
  display: none;
}
#main p.top-att:before {
  display: none;
}
#main p.top-att:after {
  
}
	
#footer-inner {
	width: 100%;
}
#footer-inner ul.footer-menu {
	float: left;
	margin-left: 15px;
}
#footer-inner ul li {
	float: left;
	width: 40vw;
	font-size:0.9em;
	letter-spacing: 0em;
	line-height: 2.0em;
}
ul.gyoumu li {
	color: #333;
	list-style-type: square;
	list-style-position: inside;
	line-height: 1.8em;
	letter-spacing: 0em;
	padding:0 0 0 0.2em;
	font-size: 0.85em;
	border-bottom: 1px dotted #ccc;
}
#footer-inner ul li a:link,#footer-inner ul li a:visited {
	color:#fff;
	padding:0 0 0 0.2em;
}
.width-auto {
		width: 300px;
		height: auto;
}
.width100per-img {
		width: 100%;
		height: auto;
}
.width100per {
		width: 100%;
	max-width: 350px;
		height: auto;
		margin:0px auto;
}
	.sp350 {
	width: 100vw;
	max-width: 350px;
	height: auto;
	}
.footer-banner {
	width: 80%;
	max-width: 350px;
	height:auto;
	float: none;
	margin:0 auto;
}
address {
	width:95%;
	height:90px;
	font-size: 0.85em;
	float: none;
	margin-left: 10px;
	margin-bottom: 0em;
}
address .img-l {
	box-shadow:none;
}
.copyright {
	height: auto;
	line-height: 1.0em;
	font-size: 0.8em;
	color: #fff;
	padding:0.5em 0;
	text-align: center;
}
}