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

/*===================================================
  
  ＊ 基本 ＊
  
  ■ 共通
     ･･･ normalize.css, set.css

  ■ header,contents,footer
     ※641px以上
     ･･･ common.css

  ■ header,contents,footer
     ※640px以下
     ･･･ common_sp.css


  ＊ レイアウト ＊

  ■ (contents) side,main,他ページ
     ※640px以下でサイズ変更
     ･･･ layout.css


  ＊ レイアウト(1カラムページ) ＊
  　 ※上記「基本」を引き継ぎます
  
  ■1カラムページ共通
  ･･･ oc_common.css
      &製品ごとのcss


  ＊ レイアウト(LPページ) ＊
  　 ※上記「基本」「1カラムページ」を引き継ぎます
  
  ■LPページ共通
  ･･･ lp_common.css
      &製品ごとのcss
  

  ＊ コメントメモ ＊
  ======================================
    大タイトル
  ======================================

  -------- 中タイトル ---------

  --- 小タイトル ---

  ===================================================*/
  /*===================================================
非表示
===================================================*/
  
body {
	color: #2C1F19;
	text-align: left;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 18px;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-x;
	background-color: #FFF;
	background-attachment: scroll;
	background-position: left top;
	line-height: 1;
}
h1, h2, h3, h4, h5, h6, div, p, ul, dl, dt, dd, form, fieldset, address, img {
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:18px;
	border:none;
	color: #000000;
	font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	line-height: 24px;
}
strong {
	color: #CC0066;
}
#space {
	clear: left;
	height: 40px;
}
#space80 {
	clear: left;
	height: 80px;
}
.space {
	clear: left;
}
.space40 {
	clear: left;
	margin-bottom: 60px;
}
.btm10 {
	clear: left;
	margin-bottom: 10px;
}
.btm20 {
	clear: left;
	margin-bottom: 20px;
}
.btm40 {
	clear: left;
	margin-bottom: 40px;
}
.atten_inner {
	float: left;
	width: 670px;
	margin-bottom: 20px;
	padding: 15px;
	background-color: #FFF0F0;
}





/*===================================================
パンくず
===================================================*/
#crumb {
	width: 990px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	margin-bottom: 0px;
	padding-top: 10px;
	padding-bottom: 12px;
}
#crumb li {
	font-size: 12px;
	display: inline;
}
#crumb li a {
	background-image: url(../images/icon/crumb_yaji.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 10px;
}






/*===================================================
header
===================================================*/

#header {
	width: 1000px;
	height: 163px;
	position: relative;
	font-size: 15px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#header #logo {
	position: absolute;
	left: 15px;
	top: 32px;
}
#header #page_t h1 {
	font-size: 12px;
	font-weight: bold;
	position: absolute;
	left: 210px;
	top: 46px;
	line-height: 14px;
}





#header nav #global_nav {
	position: absolute;
	height: 59px;
	width: 1000px;
	top: 101px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #E9E9E9;
	border-left-color: #E9E9E9;
}
#header nav #global_nav li {
	display: inline;
	text-align: center;
}
#header nav #global_nav li a {
	display: block;
	float: left;
	height: 49px;
	color: #000000;
	font-size: 14px;
	text-shadow: 1px 1px 2px #fff;
	padding-top: 10px;
	text-decoration: none;
	font-weight: bold;
}
#header nav #global_nav a .sub {
	font-size: 12px;
	line-height: 12px;
	color: #666;
}
#header nav #global_nav li a:hover {
	display: block;
	float: left;
	height: 49px;
	padding-top: 10px;
	color: #000000;
	font-size: 14px;
	text-shadow: 1px 1px 3px #fff;	/*----------
	background: -moz-linear-gradient(top,  #ededed 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top,  #ededed 0%,#ffffff 100%); 
	background: linear-gradient(to bottom,  #ededed 0%,#ffffff 100%); 

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
-----*/
}


#header nav #global_nav #home a {
	background-repeat: no-repeat;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #home a:hover {
	background-repeat: no-repeat;
	background-color: #EDF7FC;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #item a {
	background-repeat: no-repeat;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #item a:hover {
	background-repeat: no-repeat;
	background-color: #EDF7FC;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #qa a {
	background-repeat: no-repeat;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #qa a:hover {
	background-repeat: no-repeat;
	background-color: #EDF7FC;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #company a {
	background-repeat: no-repeat;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #company a:hover {
	background-repeat: no-repeat;
	background-color: #EDF7FC;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #E9E9E9;
	width: 199px;
}
#header nav #global_nav #inquiry a {
	background-repeat: no-repeat;
	width: 200px;
}
#header nav #global_nav #inquiry a:hover {
	background-repeat: no-repeat;
	background-color: #EDF7FC;
	width: 200px;
}


/*===================================================
フッター
===================================================*/

footer {
	float: left;
	width: 100%;
	text-align: center;
}


footer #footer_inner #logo {
	margin-bottom: 10px;
}

footer #footer_inner {
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #009EDD;
	background-color: #F6F8F9;
	padding-top: 40px;
	padding-bottom: 40px;
}

footer #footer_inner  li {
	display: inline;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CED5F7;
	padding-right: 5px;
	font-size: 12px;
	line-height: 14px;
}
footer #footer_inner  li:first-child {
  border: none; 
}
footer #footer_inner  li a {
	text-decoration: none;
	font-size: 14px;
	line-height: 16px;
	margin-left: 10px;
	color: #000;
}
footer #copyright {
	margin-bottom: 40px;
	font-size: 12px;
	line-height: 12px;
	margin-top: 40px;
}


/*===================================================
枠
===================================================*/
#main {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 40px;
}
#main #inner {
	padding: 20px;
	float: left;
	width: 960px;
	}
#contents {
	float: left;
	width: 700px;
	margin-right: 20px;
}
#side {
	width: 240px;
	float: left;
}
#side h4 {
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #009EDD;
	font-weight: normal;
	font-size: 18px;
	line-height: 20px;
	clear: left;
	padding-left: 7px;
	padding-top: 7px;
	padding-bottom: 7px;
}
#side ul {
	width: 220px;
	float: left;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	display: block;
}
#side ul li a {
	font-size: 14px;
	line-height: 14px;
	color: #000;
	background-image: url(../images/icon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	display: block;
	padding-left: 16px;
	margin-bottom: 10px;
}
#side #side_company {
	float: left;
	width: 210px;
	border: 1px solid #E7E8E3;
	margin-top: 10px;
	padding-top: 19px;
	padding-right: 14px;
	padding-bottom: 19px;
	padding-left: 14px;
}

#side #side_company .address {
	font-size: 14px;
	line-height: 20px;
	margin-top: 5px;
}





/*===================================================
トップページ
===================================================*/
#top_image {
	width: 1000px;
	height: 400px;
	background-image: url(../images/top_image.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
}
#top_image h2 {
	font-size: 60px;
	line-height: 62px;
	color: #009EDD;
	padding-top: 150px;
}

#top_image p {
	font-size: 22px;
	line-height: 24px;
}




/*===================================================
トップページ枠
===================================================*/
#toppage_inner {
	float: left;
	width: 700px;
	margin-bottom: 60px;
}
#toppage_inner h2 {
	color: #009EDD;
	font-size: 36px;
	line-height: 36px;
	margin-bottom: 10px;
}
#toppage_inner h3 {
	font-size: 20px;
	line-height: 22px;
	margin-bottom: 20px;
}
#toppage_inner p {
	margin-bottom: 40px;
}
#toppage_inner #toppage_inner_img {
	float: right;
	margin-left: 10px;
}




.main_inner {
	float: left;
	width: 700px;
	margin-bottom: 40px;
}
.main_inner h2 {
	background-color: #009EDD;
	clear: left;
	color: #FFF;
	font-size: 24px;
	line-height: 26px;
	font-weight: normal;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	margin-bottom: 14px;
}

.tith3 {
	font-size: 20px;
	line-height: 22px;
	font-weight: normal;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #009EDD;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	clear: left;
	margin-bottom: 14px;
}
.top_about_l {
	float: left;
	width: 310px;
	margin-right: 20px;
	margin-bottom: 30px;
	border: 5px solid #E7E8E3;
	padding: 10px;
	background-color: #FCFCFA;
}
.top_about_r {
	float: left;
	width: 310px;
	margin-bottom: 30px;
	border: 5px solid #E7E8E3;
	padding: 10px;
	background-color: #FCFCFA;
}
.top_about_l h3 {
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	margin-bottom: 10px;
}
.top_about_l img {
	margin-bottom: 10px;
}
.top_about_l .icon {
	background-image: url(../images/icon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 14px;
}
.top_about_r h3 {
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	margin-bottom: 10px;
}
.top_about_r img {
	margin-bottom: 10px;
}
.top_about_r .icon {
	background-image: url(../images/icon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 14px;
}



.top_use_l {
	float: left;
	width: 224px;
	margin-right: 14px;
}
.top_use_r {
	float: left;
	width: 224px;
}
.top_use_l h3 {
	background-color: #131E62;
	color: #FFF;
	font-size: 16px;
	line-height: 18px;
	font-weight: normal;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
.top_use_r h3 {
	background-color: #131E62;
	color: #FFF;
	font-size: 16px;
	line-height: 18px;
	font-weight: normal;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.top_use_inner {
	float: left;
	width: 194px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #E7E8E3;
	border-bottom-color: #E7E8E3;
	border-left-color: #E7E8E3;
	padding: 10px;
}
.top_use_inner img {
	margin-bottom: 10px;
}

.top_use_inner .icon {
	background-image: url(../images/icon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 14px;
	font-size: 14px;
}



/*===================================================
会社概要
===================================================*/

#company table {
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
}
#company table th {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	width: 160px;
	padding: 10px;
	background-color: #F3F3F3;
	text-align: center;
}
#company table td {
	padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
.qanda {
	float: left;
	margin-bottom: 14px;
	padding: 15px;
	border: 5px solid #CCC;
	width: 660px;
}
.qanda_q {
	font-size: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	background-image: url(../images/qanda_q.png);
	background-position: left center;
	background-repeat: no-repeat;
	padding-left: 32px;
	line-height: 22px;
	padding-bottom: 10px;
	display: block;
	padding-top: 12px;
	margin-bottom: 14px;
	background-color: #F3F3F3;
}
.qanda p {
	font-size: 14px;
}


/*===================================================
使い方
===================================================*/
.use_img {
	margin-bottom: 10px;
	text-align: center;
}
/*===================================================
商品
===================================================*/
.main_inner .item_inner {
	background-color: #F4FDFF;
	float: left;
	width: 660px;
	margin-bottom: 20px;
	padding: 20px;
}
.main_inner .item_inner img {
	display: block;
	float: left;
	width: 260px;
}
.main_inner .item_inner .item_txt {
	float: left;
	width: 380px;
	margin-left: 20px;
}
.main_inner .item_inner .item_txt h3 {
	font-size: 24px;
	line-height: 26px;
	color: #009EDD;
	margin-bottom: 10px;
}
.main_inner .item_inner .item_txt .item_feature {
	background-color: #FFF;
	padding: 10px;
	float: left;
	width: 360px;
	margin-bottom: 10px;
}
.main_inner .item_inner .item_txt .item_feature p {
	font-size: 14px;
	line-height: 20px;
}
.main_inner .item_inner .item_txt p {
	font-size: 12px;
	line-height: 16px;
}
.main_inner #use {
	float: left;
	width: 700px;
	text-align: center;
	margin-bottom: 20px;
}
.main_inner #use h3 {
	font-size: 24px;
	line-height: 28px;
	color: #009EDD;
}
.main_inner .item_table {
	float: left;
	width: 700px;
}
.main_inner .item_table table {
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
}
.main_inner .item_table table th {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	width: 140px;
	padding: 10px;
	background-color: #F3F3F3;
	text-align: left;
	font-size: 14px;
	line-height: 16px;
}
.main_inner .item_table table td {
	padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	font-size: 14px;
	line-height: 18px;
}
.btn {
	background-color: #053994;
	width: 240px;
	text-align: center;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #021E4A;
}
.btn a {
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	font-size: 18px;
	line-height: 18px;
	display: block;
	padding-top: 16px;
	padding-bottom: 11px;
}
.form_txtinner {
	width: 660px;
	clear: left;
	border: 5px solid #ccc;
	margin-bottom: 10px;
	padding: 15px;
}
.form_txtinner .form_txt_tit {
	font-size: 20px;
	font-weight: bold;
}
.form_txtinner .form_txt_atten {
	font-size: 14px;
	line-height: 16px;
	margin-top: 10px;
}

.form table {
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
}
.form table th {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	width: 200px;
	padding: 10px;
	background-color: #F3F3F3;
	text-align: left;
	font-size: 14px;
}
.form table td {
	padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}



.voice_left {
	float: left;
	width: 700px;
}
.voice_right {
	float: left;
	width: 700px;
}

.balloon1-left {
	position: relative;
	display: inline-block;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #e0edff;
	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 1.5em;
	margin-left: 0px;
	padding: 10px;
	width: 602px;
	float: right;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}

.balloon1-left p {
  margin: 0;
  padding: 0;
}
.balloon1-right {
	position: relative;
	display: inline-block;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #FFEAFF;
	margin-top: 0em;
	margin-right: 15px;
	margin-bottom: 1.5em;
	margin-left: 0;
	padding: 10px;
	float: left;
	width: 602px;
}

.balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #FFEAFF;
}

.balloon1-right p {
  margin: 0;
  padding: 0;
}
.voice_left img {
	float: left;
}
.voice_right img {
	display: block;
	float: right;
}