body {
	margin: 0;
	padding: 0;
}

.pcnavi{width:100%;height:55px;background:url(../img/nav_bg.jpg) repeat center top;
}


.pcnavi ul {
    list-style-type: none;
    margin:0;
    padding:0;
    overflow: hidden;
   
}

.pcnavi li {
    float: left;margin-left:30px;margin-top:15px;
}
.pcnavi li a{text-decoration:none;
    color:#fff;
}

.pcnavi li a:hover{
    color:#4FFFFF;
}


.dropdown{
    display: inline-block;
}

.dropdown-content{
    display: none;transition:0.5s;
    position: absolute;
    background-color: #005F5F;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

.dropdown-content a {box-shadow: 0px 0px 15px #000000;
  -moz-box-shadow: 0px 0px 15px #000000;
  -webkit-box-shadow: 0px 0px 15px #000000;
    color:#ff0000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #005F5F;}

.dropdown:hover .dropdown-content {
    display: block;
}
/* accordion
===========================================================*/

BUTTON.accordion {
font-size: 14px;text-align:left;
 
position: relative;margin-bottom:15px;
display: inline-block;
padding: 10px 10px;
background: green; /*for compatibility with older browsers*/
background-image: linear-gradient(#005F00,#005F00);


text-decoration: none;
color: #fff;
font-size: 14px;
font-family: sans-serif;
font-weight: 100;box-shadow: 0px 0px 3px #000000;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;

}

BUTTON.accordion:after{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255,255,255,0.01), rgba(255,255,255,0.01));
}

  
}
BUTTON.accordion.active, BUTTON.accordion:hover {
  
 
}
DIV.panel1 {
  padding:10px;
  display: none;
  background:#003700;
color:#ffffff;z-index:100;
}
DIV.panel1.show {
  display: block !important;width:950px;
}

DIV.panel2 {
  padding:10px;
  display: none;
 background:#003700;color:#ffffff;z-index:100;
}
DIV.panel2.show {
  display: block !important;width:650px;
}

DIV.panel3 {
  padding:10px;
  display: none;
  background-color:#003700;color:#ffffff;z-index:100;
}
DIV.panel3.show {
  display: block !important
}

a {
	text-decoration: under-line;
}
a:hover {
	text-decoration: none;
	color: #FF0000;
	
}

figure {
	position: relative;
	overflow: hidden;
	width: 280px;
}
figcaption {
	position: absolute;
	bottom: -150px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 150px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;color:#ffffff;
}
figure:hover figcaption {
	bottom: 0;
}

table.table1{
 border-collapse: collapse;box-shadow: 0px 0px 3px #000000;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
 table-layout: auto;
 border-top: 1px solid #708090;
 border-right: none;
 border-bottom: none;
 border-left: 1px solid #708090;
}
table.table1 td{
 background: #eeeeee left top;padding:5px;
 border-top: none;
 border-right: 1px solid #708090;
 border-bottom: 1px solid #708090;
 border-left: none;
}
table.table1 th{
 background: #ffffff left top;
 border-top: none;
 border-right: 1px solid #708090;
 border-bottom: 1px solid #708090;
 border-left: none;
}




table.table2{

 table-layout: auto;
 border-top:none;
 border-right:none;
 border-bottom:none;
 border-left:none;
}
table.table2 td{
 background: #ffffff left top;
 border-top:none;
 border-right:none;
 border-bottom:none;
 border-left:none;
}
table.table2 tr td{
 background: #ffffff left top;
 border-top:none;
 border-right:none;
 border-bottom:none;
 border-left: none;
}




table.table2 th{
 background: #ffffff left top;
 border-top: none;
 border-right: none;
 border-bottom: none;
 border-left: none;
}


#head {
	font-family: "HG丸ｺﾞｼｯｸM-PRO";
	color: #fff;
	width: 100%;
	height:120px;
	
	
}

#head a{
	text-decoration:none;
	
	
}

#head a:hover{
	color:#ff0000;
	
	
}





.headwaku{width:950px;height:120px;margin-right: auto;
	margin-left:auto;}



.headlogo {width: 600px;color:#000000;
	height:110px;
	
}

.headlogo h1{width: 490px;color:#000000;
	height:110px;padding-top:10px;
	color:rgba(18,92,40,1.0);
}


.logo{width:100px;float:left;}



.headright{width:250px;height:110px;margin-top:-110px;float:right;}


.phone{width:250px;float:right;}
.mail{width:50px;height:50px;float:left;margin-top:10px;}

.best{width:150px;height:50px;float:left;margin-top:10px;margin-left:20px;


}





.head2{width: 100%;
	height:170px;background:url(../img/back2.jpg);z-index:1;margin-bottom:200px;}







.topimg{margin-right: auto;
	margin-left:auto;
z-index:1;
 position:relative;
    width:440px;
    height:280px;
   background:url(../img/index.jpg);
   box-shadow: 0px 0px 5px #000000;
	-moz-box-shadow: 0px 0px 5px #000000;
	-webkit-box-shadow: 0px 0px 5px #000000; 
    top:40px;border-radius:3%;
}

.topimage{width: 100%;}



.topcontents{font-weight:bold;font-size:14px;padding:10px;}



.topimg2{border-radius:100%;  box-shadow: 0px 0px 3px #000000;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000; }

.topimg2:hover{height:auto;border-radius:1%;  box-shadow: 0px 0px 30px #000000;
	-moz-box-shadow: 0px 0px 30px #000000;
	-webkit-box-shadow: 0px 0px 30px #000000; }







h2{text-align:center;
    position: relative;
    color: #fff;
  background: -webkit-linear-gradient(bottom, rgba(0, 95, 0, 0.1), rgba(0, 95, 0, 1));
	/*Safari 5.1-6*/
	
	background: -o-linear-gradient(top, rgba(0, 95, 0, 0.1), rgba(0, 95, 0, 1));
	/*Opera 11.1-12*/
	
	background: -moz-linear-gradient(top, rgba(0, 95, 0, 0.1), rgba(0, 95, 0, 1));
	/*Fx 3.6-15*/
	
	background: linear-gradient(to top, rgba(0, 95, 0, 0.1), rgba(0, 95, 0, 1));
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 -1.4em 1.5em -1.4em;
    padding: 0.8em;
    box-shadow: 0 1px 3px #777;
    -moz-box-shadow: 0 1px 3px #777;
    -webkit-box-shadow: 0 1px 3px #777;
    -o-box-shadow: 0 1px 3px #777;
    -ms-box-shadow: 0 1px 3px #777;
}
 
h2:after,
h2:before{
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
 
h2:before{
    right: 0;
    border-left: 5px solid #333;
}
 
h2:after{
    left: 0;
    border-right: 5px solid #333;
}







h3 {margin-top: 150px;
	margin-bottom: 15px;
	width: 800px;margin-right: auto;
	margin-left: auto;
	font-size: 1.0em;
	line-height: 200%;
	
	background:url(../menuimg/bg.jpg);
	color: #000000;
	position: relative;
	padding: .5em .75em;
	border: solid 2px rgba(13, 13, 13, 0.7);
	border-radius: 6px;
}
h3::after {
	position: absolute;
	top: 100%;
	left: 100px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid rgba(13, 13, 13, 1.0);
}

h4 {
	margin-bottom: 15px;
	width: 150px;height:240px;float:left;margin-left:10px;
	font-size: 14px;
	line-height: 200%;
	box-shadow: 0px 0px 5px #000000;
	-moz-box-shadow: 0px 0px 5px #000000;
	-webkit-box-shadow: 0px 0px 5px #000000;
	background:#ffffff;
	color: rgba(0, 0, 0, 1);
	position: relative;
	padding: .5em .75em;
	border: solid 2px  rgba(0, 125, 0, 1.0);
	border-radius: 6px;
}
h4::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid  rgba(0, 125, 0, 1.0);
}

h4:hover{color:#ff0000;}

h4.sotudan{width:16%;}
h4.pet{width:16%;}
h4.novelty{width:16%;}
h4.pro{width:16%;}
h4.sozai{width:16%;}










h4.sotudan:hover{width:150px;height:350px;background:url(../items/sotudan2.jpg);background-position:bottom; background-repeat: no-repeat;color:#000000; transition-duration:2s;}
h4.pet:hover{width:150px;height:350px;background:url(../items/pet2.jpg);background-position:bottom; background-repeat: no-repeat;color:#000000; transition-duration:2s;}
h4.novelty:hover{width:150px;height:350px;background:url(../items/novelty2.jpg);background-position:bottom; background-repeat: no-repeat;color:#000000; transition-duration:2s;}
h4.pro:hover{width:150px;height:370px;background:url(../items/pro2.jpg);background-position:bottom; background-repeat: no-repeat;color:#000000; transition-duration:2s;}
h4.sozai:hover{width:150px;height:352px;background:url(../items/sozai.jpg);background-position:bottom; background-repeat: no-repeat;color:#000000; transition-duration:2s;}
.waku {
	width: 950px;box-shadow: 0px 0px 5px #000000;
	-moz-box-shadow: 0px 0px 5px #000000;
	-webkit-box-shadow: 0px 0px 5px #000000;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}
.main {position:
	width:950px;
	

	font-family: "メイリオ";font-size:14px;
	height: auto;
	margin-bottom: 30px;
	line-height: 150%;
	float: left;

	color: #000000;
	
	
	padding-left: 15px;
	padding-right: 15px;
}


.youtube {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width:600px;height:340px;border-radius:10px;
	height:auto;box-shadow:
}
.youtube::before {
	position: absolute;
	content: "クリックで動画を再生します。グルーと1周撮影していますので、オリジナルボールペンの実物をご覧ください";
	color: #fff;
	text-align:left;margin:10px;
	font-size: 20px;
	font-weight: normal;
	line-height: 180%;
	background: rgba(0, 0, 0, 0.0);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: all 0.3s;
}
.youtube:hover::before {
	background: rgba(0, 0, 0, 0.0);
	cursor: pointer;
	transition: all 0.3s;
}

#imgcenter {
  display: block;
  width: 30%;float:left;margin-right:2%;
  height: auto;
 
  box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
}



#imgleft {
  display: block;
  width: 30%;float:left;margin-right:2%;margin-left:2%;
  height: auto;
box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
}

#imgright {
  display: block;
  width: 30%;float:left;margin-right:2%;
  height: auto;
  
  box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
}
.spec{z-index:1;box-shadow: 0px 0px 5px #000000;
	-moz-box-shadow: 0px 0px 5px #000000;
	-webkit-box-shadow: 0px 0px 5px #000000;}
	
h3.setumei {
box-shadow: 0px 0px 15px #000000;
  -moz-box-shadow: 0px 0px 15px #000000;
  -webkit-box-shadow: 0px 0px 15px #000000;
margin-top: 10px;
	margin-bottom: 15px;
	width: 800px;margin-right: auto;
	margin-left: auto;
	font-size: 1.0em;
	line-height: 200%;
	background:url(../img/nav_bg.jpg) repeat center top;
	
	color: #ffffff;
	position: relative;
	padding: .5em .75em;
	border: solid 2px rgba(0, 125, 0, 0.7);
	border-radius: 6px;z-index:1;
}
h3.setumei::after {
	position: absolute;
	top: 100%;
	left: 100px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid rgba(0, 125, 0, 1.0);
}

h4.cont {
	margin-bottom: 15px;
	width: 180px;height:auto;float:left;margin-left:10px;
	font-size: 14px;
	line-height: 200%;
	box-shadow: 0px 0px 5px #000000;
	-moz-box-shadow: 0px 0px 5px #000000;
	-webkit-box-shadow: 0px 0px 5px #000000;
	background:#ffffff;
	color: rgba(0, 0, 0, 1);
	position: relative;
	padding: .5em .75em;
	border: solid 2px  rgba(0, 125, 0, 1.0);
	border-radius: 6px;
}
h4.cont::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid  rgba(0, 125, 0, 1.0);
}


.explainleft{width:30%;float:left;margin-top:20px;margin-right:10%;margin-left:5%;}

.explainright{width:30%;float:right;margin-top:20px;margin-right:10%;}

.explainleft img{width:100%;}

.explainright img{width:90%;}


.glass{
/* background styles */
position: relative;
display: inline-block;
padding: 15px 25px;
background: green; /*for compatibility with older browsers*/
background-image: linear-gradient(#727272,#727272);

/* text styles */
text-decoration: none;
color: #fff;
font-size: 25px;
font-family: sans-serif;
font-weight: 100;box-shadow: 0px 0px 3px #000000;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;

}

.glass:after{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}



.glass2{
/* background styles */
position: relative;margin-bottom:15px;
display: inline-block;
padding: 5px 10px;
background: green; /*for compatibility with older browsers*/
background-image: linear-gradient(#005F00,#005F00);

/* text styles */
text-decoration: none;
color: #fff;
font-size: 20px;
font-family: sans-serif;
font-weight:bold;box-shadow: 0px 0px 3px #000000;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;

}

.glass2:after{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}


.glass3{
/* background styles */
position: relative;margin-bottom:15px;
display: inline-block;
padding: 5px 10px;
background: green; /*for compatibility with older browsers*/
background-image: linear-gradient(#005F00,#005F00);

/* text styles */
text-decoration: none;
color: #fff;
font-size: 20px;
font-family: sans-serif;
font-weight:bold;box-shadow: 0px 0px 3px #000000;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;

}

.glass3:after{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.topwaku{width:100%;height:auto;margin-bottom:20px;}


.top{width:32%;height:auto;float:left;margin-top:30px;margin-left:1%;}
.top img{border:none;width:80%;}
.top img:hover {
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
  box-shadow: 0px 0px 30px #000000;
  -moz-box-shadow: 0px 0px 30px #000000;
  -webkit-box-shadow: 0px 0px 30px #000000;
}

.top2{width:30%;height:auto;float:left;margin-top:30px;margin-left:2%;}


.slider{box-shadow: 0px 0px 5px #000000;
	-moz-box-shadow: 0px 0px 5px #000000;
	-webkit-box-shadow: 0px 0px 5px #000000;}

.info{width:500px;height:auto;margin-left:auto;margin-right:auto;border:solid 1px;border-radius:5px;padding:15px;}





.infotopwaku{margin-top:30px;width:100%;}


.infotop{width:200px;height:120px;float:left;10px;line-height:170%;

background:#ffffff;}

.infotop2{width:600px;height:120px;padding:10px;float:right;
background:#ffffff;}


.title{
/* background styles */
position: relative;margin-bottom:15px;width:100%;text-align:center;
display: inline-block;
padding: 15px 25px;
background: green; /*for compatibility with older browsers*/
background-image: linear-gradient(#005F00,#005F00);

/* text styles */
text-decoration: none;
color: #fff;
font-size: 25px;
font-family: sans-serif;
font-weight: 100;box-shadow: 0px 0px 3px #000000;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;

}

.title:after{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

/*--------------------------------------------
	Footer / フッター
--------------------------------------------*/
#footer {
	width:100%;
	
	padding:20px 0 0;
	position: relative;
}
#ftr_inner {
	width:1100px;
	margin:0 auto 35px;
}
#ftr_logo{
	float:right;
}
#ftr_inner #ftr_nav{
    padding: 10px 0 0;
    float: left;
}
#ftr_inner ul{
	float:left;
	margin-right:15px;
	width:172px;
	font-size:13px;
}
#ftr_inner ul li{
	background:url(../img/1.gif) no-repeat left center;
	padding:0 0 0 18px;
	margin-bottom:3px;list-style:none;
}
#footer .license_list{
    background: #c4ece4;
    padding: 15px 0;
}
#footer .license_list ul {
    width: 980px;
    margin: 0 auto;
    font-size: 11px;
}
#footer .license_list ul li {
    display: inline-block;
    margin-right: 42px;
}
#copyright {
	display:block;
	font-size:12px;
	text-align:center;
	background:#35B198;
	padding:1px 0 0;
	color:#fff;
}
#footer #totop {
}