@charset "UTF-8";
/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

img { 
	border:0;
	width: 100%;
	max-width: 100%;
	height: auto;
}

ol,ul {
	list-style:none;
}

li {
	line-height:1;
}

caption,th {
	text-align:left;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}

area{
	outline:none;
}

input{
	border-style:none;
}

/* utility */

.fl{
	float:left;	
}

.fr{
	float:right;	
}

.cb{
	clear:both;	
}

.clearfix:after{
  content:"."; 
  display:block;
  height:0; 
  clear:both; 
  visibility:hidden;
}

.clearfix {display: inline-block;}
* html .clearfix{ height:1%; }
.clearfix{ display:block; }
.clearfix{
	zoom:1
}

.all{
	text-align:left;
}

.alc{
	text-align:center;
}

.alr{
	text-align:right;
}
a{
	color:#333;
	line-height:1.5;
	text-decoration:underline;
}

a:hover{
	text-decoration:none;
}
a.img_hover,
.img_hover a,
.img_hover a img,
.txt_hover a{
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
	text-decoration:none;
}
a.img_hover:hover,
.img_hover a:hover,
.img_hover a:hover img{
	opacity:.5;
	zoom:1;
}
.txt_hover a:hover {
	color: #ccc;
}

#main_contents .table{
	margin-bottom:2em;
	}
#main_contents .tr {display: table-row;}
#main_contents .td {display: table-cell;}
/* common */

body{
	-webkit-text-size-adjust: 100%;
	color: #555;
	background-color: #dee0df;
	background-image: url(../images/overlay.png);
	text-align:center;
}

/*#main_contents ul,
#main_contents ol{
	margin-bottom:40px;
}

#main_contents ul li,
#main_contents ol li{
	line-height:1.5;
	list-style-position:outside;
}

#main_contents ul li{
	padding-left:15px;
}

#main_contents ol li{
	margin-left:25px;
}

#main_contents p{
	line-height:1.5;
}
*/
em{
	font-style:normal;
	font-weight:bold;
}

strong{
	font-weight:normal;
}
.fs{
	font-size:95%;
}
.fxs{
	font-size:85%;
	}
.mbs{
	margin-bottom:10px;
	}
.mbm{
	margin-bottom:20px;
	}
.mbl{
	margin-bottom:40px;
	}



/* css3 */
.shadow{
	box-shadow: 0 0 16px #ccc; 
	-moz-box-shadow: 0 0 16px #ccc;  
	-webkit-box-shadow: 0 0 16px #ccc; 
}

.corner{
	border:10px solid #fff;
	border-radius:4px;
}

.gradient{
	background:-moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%) !important; /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(241,241,241,1))) !important; /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%) !important; /* Chrome10+,Safari5.1+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 ) !important; /* IE6-9 */
	background:-ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 100%) !important; /* IE10+ */
}
	
/**/
#wrapper{
	background-color:#fff;
	position:relative;
	}
/*----------------------------------*/
#header{
	text-align:center;
	}
#header .lang{
	font-size:70%;
	}

#header h1{
	width: 245px;
	height: 28px;
	margin-bottom: 15px;
	text-indent: -999em;
	margin-left: auto;
	margin-right: auto;
	}
#header h1 a{
	background-image: url(../images/logo.svg);
	background-position: center top;
	width: 100%;
	height: 100%;
	display: block;
}
#header h2{
	width: 140px;
	height:15px;
	background: url(../images/ja_cp.svg);
	text-indent: -999em;
	margin-left:auto;
	margin-right:auto;
	/*margin-bottom:60px;*/
	}
/*#header nav,
footer nav{
	text-align:center;
	}
#header nav li,
footer nav li{
	display:inline-block;
	margin-left:.5em;
	margin-right:.5em;
		}
#header nav li a,
footer nav a{
	display: block;
	position: relative;
	}
#header nav a.current:after,
footer nav a.current:after{
	content: '';
	display: block;
	position: relative;
	border-bottom: 1px solid #000;
	width:100%;
	background: #000;
	}
#header nav.ja li a span.txt,
footer nav.ja li a span.txt{
	display:block;
	text-indent: -999em;
	height:20px;
	}

#header nav.ja li a.products span.txt,
footer nav.ja li a.products span.txt{
	width: 60px;
	background: url(../images/nav_products.svg);
	}
#header nav.ja li a.new span.txt,
footer nav.ja li a.new span.txt{
	width: 50px;
	background: url(../images/nav_new.svg);
	}
#header nav.ja li a.corporate span.txt,
footer nav.ja li a.corporate span.txt{
	width: 60px;
	background: url(../images/nav_corporate.svg);
	}
#header nav.ja li a.contact span.txt,
footer nav.ja li a.contact span.txt{
	width: 85px;
	background: url(../images/nav_contact.svg);
	}
*/



/*#header nav,
footer nav{
	text-align:center;
	}
#header nav li,
footer nav li{
	display: inline-block;
	margin-left: 2%;
	margin-right: 2%;
	padding: 0;
	}
#header nav.ja li:first-child a,
footer nav.ja li:first-child a{
	background: url(../images/nav_products.svg) no-repeat center;
	}
#header nav.ja li:nth-child(2) a,
footer nav.ja li:nth-child(2) a{
	background: url(../images/nav_new.svg) no-repeat center;
	}
#header nav.ja li:nth-child(3) a,
footer nav.ja li:nth-child(3) a{
	background: url(../images/nav_media.svg) no-repeat center;
	}
#header nav.ja li:nth-child(4) a,
footer nav.ja li:nth-child(4) a{
	background: url(../images/nav_corporate.svg) no-repeat center;
	}
#header nav.ja li:last-child a,
footer nav.ja li:last-child a{
	background: url(../images/nav_contact.svg) no-repeat center;
	}
#header nav a.current:after,
footer nav a.current:after{
	content: '';
	display: block;
	position: relative;
	border-bottom: 1px solid #000;
	width:100%;
	background: #000;
	}
#header nav.ja li a,
footer nav.ja li a{
	display: block;
	text-indent: -999em;
	position: relative;
	}
  <nav class="ja">
      <ul class="img_hover">
        <li class="products"><a href="./products/">製品一覧</a>
        </li><li class="new"><a href="./new/">TSUNAGO</a>
        </li><li class="media"><a href="./media/">メディア掲載</a>
        </li><li class="corporate"><a href="./corporate/">会社案内</a>
        </li><li class="contact"><a href="./contact/">お問い合わせ</a></li>
      </ul>
    </nav>
  */


#header nav,
footer nav{
	text-align:center;
  font-size:.86em;
	}
#header nav{
  padding-top: 3em;
  }
#header nav ul{
  letter-spacing:-.4em;
  width:100%;
  margin-bottom: 3em;
  }
#header nav li,
footer nav li{
  display:inline-block;
  letter-spacing:normal;
	}
#header nav.ja li a,
footer nav.ja li a{
  display: block;
  letter-spacing:.16em;
  position:relative;
  }
#header nav a.current:after,
footer nav a.current:after{
	content: '';
	display: block;
	position: relative;
	border-bottom: 1px solid #000;
	width:100%;
	background: #000;
  left:0;
  bottom:0;
	}
/*----------------------------------*/
h2.lead{
	text-align:center;
	margin-bottom:20px;
	}
h2.lead span{
	z-index:1;
	position: relative;
	background-color:#fff;
	padding-left:.5em;
	padding-right:.5em;
	}
h2.lead:before {
	content: '';
	display: block;
	width: 100%;
	position: relative;
	top: .75em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ccc;
	z-index:0;
}

.stationery h2.lead,
.cosmetic h2.lead,
.oem h2.lead{
	font-size: 1.4em;
}

/*good design logo*/
.gd{
	width:50%;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
	}
/*----------------------------------*/

#main_contents{
	margin-bottom:10%;
	}
	
.title{
	margin-bottom:40px;
	}
.title h1{
	width:100%;
	}

.title h1 em{
	display:block;
	}
.title h1 em img{
	vertical-align:top;
	}
/*----------------------------------*/


.title h1 span{
	text-align:center;
	margin-bottom:20px;
	display:block;
	}
.title h1 span strong{
	z-index:1;
	position: relative;
	background-color:#fff;
	padding-left:.5em;
	padding-right:.5em;
	}
.title h1 span.mincyo:before,
.title h1 span.cpl:before{
	content: '';
	display: block;
	width: 100%;
	position: relative;
	top: .75em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ccc;
	z-index:0;
}
.title h1 span.mini{
	font-size:85%;
	}
	
	
/**/
em.main_left,
em.main_right{
position:relative;
}
em.main_left:after,
em.main_right:after{
-webkit-transition: background .8s linear;
-moz-transition: background .8s linear;
-o-transition: background .8s linear;
transition: background .8s linear;
background-color: #fff;
background: rgba(255,255,255,1);
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
em.main_left.title_on:after,
em.main_right.title_on:after{
background: rgba(255,255,255,0);
}
/**/
footer{
	padding-top: 3em;
}
footer nav{
	padding-top: 3em;
	margin-bottom: 6em;
	padding-bottom: 3em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}
footer nav ul{
	margin-bottom:0;
	}
footer .info h3{
	font-size:95%;
	}
footer .info p{
	font-size:85%;
	}
footer address{
	font-size: 80%;
	font-style: normal;
	}

/*2018.4.6 追記*/
ul.header_link{
position:absolute;
top:0;
right:0;
padding:1em;
/*letter-spacing: -.4em;*/
}
ul.header_link li{
/*
  letter-spacing: normal;
  display: inline-block;
*/
  text-align: right;
}
ul.header_link li span.ngm{
	font-size:80%;
	}
/*.fb{
	position:absolute;
	top:20px;
	right:20px;
	}
.fb a:hover{
	color:#ccc;
	}
*/
#page-top{
	}
#page-top a {
	text-decoration: none;
	color: #fff;
	text-align: center;
	display:block;
	vertical-align:middle;
	width: 100%;
	height: 100%;
	background-color: #383838;
	position:relative;
}
#page-top a span{
	display:block;
	}
#page-top a:hover {
	background-color: #333;
}

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


form
{
margin:0;
padding:0;
}

form label
{
	display: block;
	color: #484d55;
}

form input.text,
form select,
form textarea
{
-webkit-appearance: none;
display: block;
border: 0;
background: #eee;
box-shadow: inset 0px 0px 1px 0px #a0a1a7;
border-radius: 0.35em;
width: 90%;
padding: 5%;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}

	form input.text:hover,
	form select:hover,
	form textarea:hover
	{
	}

	form input.text:focus,
	form select:focus,
	form textarea:focus
	{
		background: #f8f8f8;
	}
	
	form textarea
	{
		min-height: 12em;
	}

	form .formerize-placeholder
	{
		color: #555 !important;
		font-style: italic;
	}

	form ::-webkit-input-placeholder
	{
		color: #555 !important;
		font-style: italic;
	}

	form :-moz-placeholder
	{
		color: #555 !important;
		font-style: italic;
	}

	form ::-moz-placeholder
	{
		color: #555 !important;
		font-style: italic;
	}

	form :-ms-input-placeholder
	{
		color: #555 !important;
		font-style: italic;
	}

	form ::-moz-focus-inner
	{
		border: 0;
	}

.button
{
display: inline-block;
background: #444;
text-align: center;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.25em;
text-decoration: none;
border-radius: 0.35em;
border: 0;
outline: 0;
cursor: pointer;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}

.button-style1
{
color: #fff;
background-color: #e97770;
background-image: url(../../common/images/overlay.png);
}

	.button-style1:hover
	{
		background-color: #f98780;
	}
	
	.button-style1:active
	{
		background-color: #d96760;
	}

.button-style2
{
	background: none;
	color: #606167;
	box-shadow: inset 0px 0px 2px 0px #a0a1a7;
}

	.button-style2:hover
	{
		box-shadow: inset 0px 0px 2px 0px #606167;
	}

	.button-style2:active
	{
		box-shadow: inset 0px 0px 2px 0px #202127;
	}

.button-style3
{
	background-image: url(../../common/images/overlay.png);
	color: #fff;
}

	.button-style3:hover
	{
		background-color: #3f434b;
	}
	
	.button-style3:active
	{
		background-color: #1f232b;
	}