@charset "utf-8";

@import url("html5reset.css");

@media print { /* 紙媒体向けスタイル定義 */
	html {
	color:#000;
	}

	/* --BODY-- */
	body {
	margin:0;
	padding:0;
	text-align: center;
	}
}
html {
	overflow-y:scroll;
}
body {
	margin:0;
	padding:0;
	text-align:center;
}
ul {
	list-style:none;
}
blockquote, dd, div, dl, dt,
h1, h2, h3, h4, h5, h6,
li, ol, p, pre, span, td, th, ul {
	margin:0;
	padding:0;
}


/*---------------------------------------------------------
　　フォント
---------------------------------------------------------*/

body,table {
	/*font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
	font:12px/1.5;
	font-size: 12px; /* modern browser */
	*font-size: small; /* IE 7 */
	*font: x-small; /* IE 6 */
	background:#efefef;
}

code, kbd, pre, samp, tt {
	font-family:monospace;
	line-height:100%;
}
/* for IE7 */
*+html code, kbd, pre, samp, tt {
	font-size:108%;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}

.fnt_red {
    color:#FF0000;
}

.fnt_b {
    font-weight:bold;
}

/*---------------------------------------------------------
　　基本スタイル
---------------------------------------------------------*/

* {
	color:#555;
}

p {
	line-height:1.5em;
	text-align:left;
}

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

img {
  max-width: 100%;
  /* height: auto; */
}

/*---------------------------------------------------------
　　共通
---------------------------------------------------------*/

section {
	margin:0 0 50px 0;
}

.txt {
	margin:0 0 3em 0;
	text-align:left;
	line-height:1.6em;
}

.img_c {
	margin:0 0 30px 0;
	text-align:center;
}

.img_r {
	margin:0 0 20px 20px;
	float:right;   
}


.position_r {
    text-align:right;
}

.waku {
	border:1px solid #ccc;
}

.fnt14 {
    font-size:14px;
}

.table01 {
	margin:0 0 15px 0;
	padding:0;
    background-color:#FFFFFF;
}
.table01 td {
    vertical-align:top;
}

/*---------------------------------------------------------
　　タイトル
---------------------------------------------------------*/

h1 {
	margin: 0;
	padding:0;
	height: 80px;
	text-align: center;
	background: url(../images/h1_bg.jpg) 50% 0 no-repeat #fff;
	border-bottom: 1px solid #ddd;
}
h1 p {
	margin: 0 auto;
	display: block;
	width: 960px;
	line-height: 80px;
	font-size: 170%;
	font-weight: bold;
	color: #1a0;
	text-align: left;
}

h2 {
	margin: 0 0 1em 0;
	padding: .2em 0 0 13px;
	font-size: 160%;
	font-weight: normal;
	text-align: left;
	border-left: 8px solid #1a0;
}

h3 {
	margin: 0 0 2em 0;
	padding: 0;
	font-size: 150%;
	font-weight: bold;
	text-align: left;
	color: #1a0;
	text-indent: 20px;
	background: url(../images/list_mark1.png) 0 50% no-repeat;
	border-bottom: 1px dotted #1a0;
}

h4 {
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 130%;
	font-weight: bold;
	text-align: left;
	color: #1a0;
}

h4.h4-red {
	color: #f00;
}


/*---------------------------------------------------------
　　リンク
---------------------------------------------------------*/

a:link {
	color:#06f; text-decoration:underline;
}
a:visited {
	color:#06f; text-decoration:underline;
}
a:active {
	color:#0af; background:none; text-decoration:underline;
}
a:hover {
	color:#0af; background:none; text-decoration:underline;
}

a img, img {
	border:0;
	margin:0;
	padding:0;
	vertical-align:bottom;
}

a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
	background: #fff;
}

/*---------------------------------------------------------
　　ヘッダ
---------------------------------------------------------*/

#header_wrap {
	text-align: center;
	border-bottom: 1px solid #ddd;
	background: url(../images/header_bg.png) repeat-x 0 100% #fff;
}

#header {
	margin: 0 auto;
	width: 960px;
	overflow: hidden;
}
#header-logo {
	width: 40%;
	text-align: left;
	float: left;
}
#header-tel {
	width: 50%;
	text-align: right;
	background: url(../images/header_tel.png) 100% 0 no-repeat;
	float: right;
}
#header-tel img {
	margin: 46px 10px auto auto;
}

/* ヘッダメニュー */

#headermenu {
  *zoom: 1;
	margin:.5em auto 0 auto;
  padding: 0;
	list-style-type: none;
  width: 960px;
	
}
#headermenu li {
	position: relative;
  margin: 0;
  padding: 0;
  width: 20%;
  float: left;
  text-align: center;
}
#headermenu li a {
  display: block;
  margin: 0;
  line-height: 3.5em;
	text-align: center;
	color: #555;
	font-weight: bold;
	height: 3.5em;
	font-size: 110%;
	vertical-align: middle;
	text-decoration: none;
	background: url(../images/headermenu_line.png) repeat-y 0 0;
	border-bottom: 5px solid #efefef;
}
#headermenu .hm2 {
	padding-top: .6em;
	line-height: 1em;
	height: 2.9em;
}
#headermenu li ul {
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}

#headermenu li a:hover,
#headermenu li a.active,
#headermenu li:hover > a {
	color: #3a2;
	font-weight: bold;
	border-bottom: 5px solid #1a0;
}

/* サブメニュー */

#headermenu li ul {
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
#headermenu li ul li {
  width: 100%;
}
#headermenu li ul li a {
	width: 192px;
	padding: 0;
	height: 2.5em;
	line-height: 2.5em;
  text-align: center;
	color: #fff;
	font-size: 100%;
	font-weight: normal;
	background: #1a0;
	border: 0;
}
#headermenu li ul li a:hover {
	padding: 0;
	color: #fff;
	font-weight: normal;
	background: #0C3;
	border: 0;
}
#headermenu li ul li {
  width: 100%;
	overflow: hidden;
  height: 0;
  transition: .2s;
}
#headermenu li:hover ul {
  border-top: 1px solid #fff;
}
#headermenu li:hover ul li {
  overflow: visible;
	height: 2.5em;
	border-bottom: 1px solid #fff;
}


/*---------------------------------------------------------
　　メイン
---------------------------------------------------------*/

#main {
	margin:0 auto;
	padding:30px 0;
	width:960px;
	overflow:hidden;
}
#contents {
	margin:0;
	width:700px;
	text-align:left;
	vertical-align:top;
	float:left;
}
#side {
	margin:0;
	width:220px;
	text-align:left;
	vertical-align:top;
	float:right;
}

#wrap {
	margin: 3em auto;
	width: 960px;
}

/*---------------------------------------------------------
　　サイド
---------------------------------------------------------*/

#sidebanner p {
	margin: 0 0 10px 0;
}

#side-add {
	margin: 1em 0 2em;
	padding: 9px;
	background: #fff;
	border: 1px solid #ae8;
}
#side-add-title {
	margin: .5em 0;
	color: #1a0;
	font-size:140%;
	font-weight: bold;
	line-height: 1.2em;
	padding-left: 7px;
	border-left: 4px solid #1a0;
}
#side-add-title span {
	font-size: 90%;
	color: #1a0;
	font-weight: bold;
}
#side-add p {
	margin: 0 0 .5em 0;
	padding: .5em;
	line-height: 1.5em;	
}

/*---------------------------------------------------------
　　フッタ
---------------------------------------------------------*/

#footer {
	margin:0;
	padding:0;
	text-align:center;
}
#pagetop {
	margin: 0 auto;
	width: 960px;
	text-align: right;
}
#footermenu {
	background: #fff;
	border-top: 1px solid #ddd;
}
#footermenu ul {
	margin: 0 auto;
	padding: 1em 0;
	width: 960px;
	overflow: hidden;
}
#footermenu ul li {
	padding: 0 2em;
	float: left;
	border-right: 1px solid #ddd;
}
#footermenu ul li:first-child {
	padding-left:0;
}
#footermenu ul li:last-child {
	border: 0;
}
#footermenu li a {
	color: #1a0;
	text-decoration: none;
}
#footermenu li a:hover {
	text-decoration: underline;
}

#copy {
	text-align: center;
	background: #1a0;
}
#copy div {
	margin: 0 auto;
	padding: 1em 0;
	width: 960px;
	text-align: left;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
}

	

/*---------------------------------------------------------
　　トップページ
---------------------------------------------------------*/

/* メイン画像 */

#top-img img {
	width: 100%;
	height: auto;
}

/* 製品紹介 */

#top-item-wrap {
	margin: 0 0 2em;
	overflow: hidden;
}

.top-item {
	width: 320px;
	padding: 9px;
	text-align: left;
	background: #fff;
	border: 1px solid #ddd;
	float: left;
}
.top-item p {
	margin: 0 0 15px 0;
	padding: 0;
	text-align: left;
}
.top-item p img {
	margin: 0;
}
.top-item .top-item-title {
	margin: 0 0 5px 0;
	padding: 0 .5em;
	color: #1a0;
	font-size: 170%;
	font-weight: bold;
}
.top-item .top-item-sub {
	margin: 0 0 15px 0;
	padding: 0 .5em;
	color: #1a0;
	font-size: 130%;
	font-weight: bold;
}
.top-item .top-item-txt {
	padding: 0 .5em;
	text-align: left;
	line-height: 1.4em;
}
.top-item .top-item-txt .label-license {
	display: block;
	width: 9em;
	margin: 1em 0 0 0;
	padding: .2em;
	text-align: center;
	color: #fff;
	font-size: 90%;
	font-weight: bold;
	letter-spacing:0.1em;
	background: #DD2252;
	border-radius: 3px;
	-moz-border-radius: 3px;
}

.top-item .top-item-txt .label-uv {
	display: block;
	width: 5em;
	margin: 1em 0 0 0;
	padding: .2em;
	text-align: center;
	color: #fff;
	font-size: 90%;
	font-weight: bold;
	background: #2287dd;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
.top-item-detail a {
	display: block;
	margin: 1em 0 0 0;
	padding: .6em 0;
	text-align: center;
	color: #fff;
	font-size: 110%;
	text-decoration: none;
	background: url(../images/list_mark3.png) 15px 50% no-repeat #1a0;
}
.top-item-detail a:hover {
	background: url(../images/list_mark3.png) 15px 50% no-repeat #2c0;
}

#mr-20 {
	margin-right: 20px;
}

/* お知らせ */

dl#news-box {
  margin: 0 0 10px;
  padding: 15px;
	background: #fff;
	border: 1px solid #ddd;
}
dl#news-box dt {
  width: 9em;
  margin: 0;
  padding: 7px;
  clear: left;
  float: left;
  color: #1a0;
  font-weight: bold;
  line-height: 1.5em;
  text-align: left;
}
dl#news-box dd {
  margin: 0;
  padding: 7px 5px 7px 10em;
  border-bottom: dotted 1px #CCC;
  line-height: 1.5em;
  text-align: left;
}
dl#news-box dd:last-child {
	border: 0;
}

#news-more {
	margin: .5em 0;
	text-align: right;
}
#news-more a {
	display: block;
	width: 7em;
	margin: 0 0 0 auto;
	font-weight: bold;
	text-decoration: none;
	color: #1a0;
	text-align: left;
	background: url(../images/list_mark4.png) 100% 50% no-repeat;
}
#news-more a:hover {
	text-decoration: underline;
}

/*---------------------------------------------------------
　　JFタックライトシリーズ
---------------------------------------------------------*/

.wrap {
	margin: 0 0 2em 0;
	padding: 30px;
	background: #fff;
	border: 1px solid #ddd;
}

#jf-topimg {
	margin: 0 0 2em 0;
}

#jf-topimg img {
	width: 100%;
	height: auto;
}

.ol1 {
  counter-reset: li;
  list-style: none;
  padding-left: 0;
	margin: 0 0 3em 0;
}
.ol1 > li {
  position: relative;
  margin-bottom: .8em;
  padding-left: 2.5em;
}
.ol1 > li:before {
  content: counter(li) "";
  counter-increment: li;
  position: absolute;
  left: 0;
  width: 1.8em;
  height: 1.8em;
  background: #1a0;
  border-radius: 50px;
  color: #fff;
  font-size: 110%;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
}

table.tbl1 {
	width: 100%;
	margin: 0 0 3em 0;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #ddd;
}
.tbl1 th {
	margin: 0;
	padding: 5px 8px;
	text-align: left;
	vertical-align: middle;
	line-height: 1.5em;
	font-weight: bolder;
	background-color: #efc;;
	border: 1px solid #ddd;
	white-space: nowrap;
}
.tbl1 td {
	margin: 0;
	padding: 5px 8px;
	text-align: left;
	vertical-align: middle;
	line-height: 1.5em;
	background-color: #fff;
	border:1px solid  #ddd;
}

.img-w100 {
	margin: 0 0 2em;
}
.img-w100 img {
	width: 100%;
	height: auto;
}

.youtube {
	margin: 0 0 2em;
}
.youtube iframe{
  width: 100%;
}

.float {
	float: left;
	margin: 0 2em 2em 0;
	text-align: left;
}

.ol2 {
  margin: 0 auto 3em 2em;
}
.ol2 li {
  margin: 0 0 .7em 0;
  text-align: left;
  line-height: 1.4em;
}

.ol3 {
  margin: 0 auto 3em 2em;
}
.ol3 li {
  margin: 0 0 .7em 0;
  text-align: left;
  line-height: 1.4em;
  list-style-type:disc;
}