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

/* CSS Document */
/*==============================================================================
■制作者：スパイスラボ
■内容：ライブラリ
■備考：共通クラス
■目次--------------------------------------------------------------------------

	1=ClearFix
	2=配置
	3=タイポグラフィ
	4=リスト
	5=段落の設定
	6=カラムの設定
	7=ボタン
	8=アイコン
	9=テーブル
	10=共通デザイン
	11=WYSIWYG
	12=Placeholder

==============================================================================*/

/*------------------------------------------------------------------------------ 1=ClearFix */
.clearfix {zoom:1;}
.clearfix:after{
    content: "";
    display: block;
    clear: both;
    }

/*------------------------------------------------------------------------------ 2=配置 */
.left, .float_left  { float:left	}
.right, .float_right { float:right	}
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
.clear-left, .clear_left { clear:left; } .clear-right, .clear_right { clear:right; }
.hide  { display:none	} .display_block {display:block !important;} .inline {display:inline !important;}

.align_right    { text-align:right;	  }
.align_left     { text-align:left;	  }
.align_center   { text-align:center;  }
.align_justify  { text-align:justify; }




/*------------------------------------------------------------------------------ 3=タイポグラフィ */
.bold {font-weight:600;}
.normal {font-weight:normal; font-style:normal;}
.italic {font-style:italic;}
.red { color:#FF0000;}

/* ** ** Header Styles ** ** */
h1, h2, h3, h4, h5 {margin:0 0 0.5em; line-height:1.1em; _line-height:1.2em; font-weight:600;}
h1 {	font-size:2.52em;/* 32px */}
h2 {	 font-size:1.69em;　/* 22px */}
h3 {	font-size:1.385em;　/* 18px */}
h4 {	font-size:1.231em; /* 16px */}
h5 {	font-size:1.252em;}
h6 {	font-size:1.52em;}



.text10 {font-size:77%; }
.text11 {font-size:85%; }
.text12 {font-size:93%; }
.text13 {font-size:100%; }
.text14 {font-size:108%; }
.text15 {font-size:116%; }
.text16 {font-size:123.1%; }
.text17 {font-size:131%; }
.text18 {font-size:138.5%; }
.text19 {font-size:146.5%; }
.text20 {font-size:153.9%; }
.text21 {font-size:161.6%; }
.text22 {font-size:167%; }
.text23 {font-size:174%; }
.text24 {font-size:182%; }
.text25 {font-size:189%; }
.text26 {font-size:197%; }


/* ** ** custom select color ** ** */
::selection {
	background: #525252; /* Safari */
	}
::-moz-selection {
	background: #525252; /* Firefox */
	color:#fff;
}
/* ** ** paragraph styling ** ** */
p {margin:0 0 1em;}
	p img.left {float:left;margin:1.52em 1.52em 1.52em 0;padding:0;}
	p img.right {float:right;margin:1.52em 0 1.52em 1.52em;}

strong   		{	font-weight:600;}
em, dfn  		{	font-style:italic;}
dfn 	 		{   font-weight:600;}
sup, sub 		{   line-height:0;}
abbr, acronym   {	border-bottom:1px dashed #ccc;}
address 		{	margin:0 0 1.5em;font-style:italic;}
del 			{	color:#666;}
pre, code, tt   {	font:1em 'andale mono', 'lucida console', monospace;line-height:1.5; display:block;}
code 			{	background-color:#eee; display:inline; padding:0px 2px 1px 2px; line-height:1.1em;}
pre 			{	margin:1.5em 0;white-space:pre;}




/*------------------------------------------------------------------------------ 4=リスト */
.col_main ul li, .col_content ul li, ol li{ line-height:1.3; padding-top:3px; padding-bottom:3px; }

/* 基本の黒丸リスト*/
ul.disc{
  list-style:outside disc;
}
ul.disc, ol{
  margin:0 0 1.5em 2em;
  padding:0;
}

ul.disc li ul,
li ol {
  padding:0;
  margin:1em 0 1em 1.5em;
}

/* ※リスト*/
ul.kome {}
ul.kome li { background:url(../images/common/ico_kome.png) left center no-repeat; padding:0 0 0 20px; line-height:1.5em; }


td ol { margin:0 0 0 2em; }

/* 一覧リスト*/
ul.news_list {border-top:solid 1px #d4dcdf;}

ul.news_list li{
	border-bottom:solid 1px #d4dcdf; border-top:solid 1px #FFF;
	padding:10px 0 10px 0;
	line-height:1.5;
 }

/*------------------------------------------------------------------------------ 5=段落の設定 */
.margin_b5  {margin-bottom: 5px;}
.margin_b10 {margin-bottom: 10px;}
.margin_b20 {margin-bottom: 20px;}
.margin_b30 {margin-bottom: 30px;}
.margin_t5  {margin-top: 5px;}
.margin_t10 {margin-top: 10px;}
.margin_t20 {margin-top: 20px;}
.margin_t30 {margin-top: 30px;}

.indent1 { margin-left:1em; }
.indent2 { margin-left:2em; }

.section { margin-bottom: 5em; padding-bottom:5em; }
.block {margin-bottom:40px; }

.col_main .section{ padding:0 30px 0 30px; min-height:400px;/* col_mainのwidthは、674px; */ }

/*------------------------------------------------------------------------------ 7=ボタン */
/* ページトップ */
a.pagetop {
	position:fixed;
	z-index:200;
	bottom:20px;
	right:20px;
	width:44px;
	height:44px;
	display:block;
	background:#666;
	border:solid 1px #666;
	border-radius:4px;
}

a.pagetop:hover { background:#999;	border:solid 1px #999;
	border-radius:4px; }


/* グレーのボタン */
a.btn_gray, a.btn_gray_s {
	display:block;
	width:145px;
	height:37px;
	line-height:37px;
	background:url(../images/common/btn_gray.png) 0 0 no-repeat;
	text-decoration:none;
	padding-left:35px;
	color: #5f6a76;
	font-weight:bold;
}
a.btn_gray_s { background:url(../images/common/btn_gray_s.png) 0 0 no-repeat; width:65px; }
a.btn_gray:hover, a.btn_gray_s:hover  { background-position:0 -37px; }
a.btn_gray:active, a.btn_gray_s:active{ background-position:0 -74px; }


/* 赤い書類ボタン */
a.btn_doc {
	border:solid 1px #E1E1E1;
	padding:5px 8px;
	background:#f5f5f5;
	border-radius:4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
 }

a.btn_doc:hover { border:solid 1px #aaa;}

/*------------------------------------------------------------------------------ 8=アイコン*/
.arrow {
	padding-left: 16px;
	background: url(../images/common/ico_red_arrow_s.png) 0 center no-repeat;
}

.arrow_gray {
	padding-left: 16px;
	background:url(../images/common/ico_gray_arrow_s.png) 0 center no-repeat;
}

.arrow_l {
	padding-left:25px;
	background:url(../images/common/ico_red_arrow.png) 0 center no-repeat;
}
.arrow_back {
	padding-left: 20px;
	background: url(../images/common/ico_back_arrow.png) 0 center no-repeat;
}

.check {
	padding-left: 25px;
	background:url(../images/common/ico_check.png) 0 center no-repeat;
}

.doc {
	background:url(../images/common/ico_doc.png) 0 center no-repeat;
	padding-left:25px;
}

.pdf {
	background:url(../images/common/icon_pdf.jpg) right center no-repeat;
	padding: 0.1em 16px 0.1em 0;
}

.news_icon {
	border:solid 2px #333;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	padding:1px 6px;
	font-size:11px;
}



/*------------------------------------------------------------------------------ 9=テーブル */
.nowrap { white-space:nowrap }

td, th { padding:5px 10px; }
table.dpi_table { border-collapse:separate; border-top:solid 1px #dfe5ec; border-left:solid 1px #dfe5ec; }
table.dpi_table th, table.dpi_table td {
	font-size:100%;
	padding:10px;
	vertical-align:middle;
	border-right:solid 1px #dfe5ec;
	border-bottom:solid 1px #dfe5ec;}
table.dpi_table th {
	background:#e5e9eb;
	border-bottom:solid 1px #cedce0;
	border-top:solid 1px #f5f6f7;
	border-right:solid 1px #cedce0;
	text-align:center;
	color:#6e7a84;
	font-weight:bold;}

table.dpi_table td.title {background:#f2f6f8;}
table.dpi_table td.center { text-align:center; }
table.dpi_table td img { vertical-align:middle; }

table.list { width:100%; border-collapse:separate; border-top:solid 1px #d4dcdf }
table.list td { border-bottom:solid 1px #d4dcdf; border-top:solid 1px #FFF; padding:10px; }
table.list td.number { width: 30px; text-align:left; }
table.list td.date { width:110px; text-align:left; }
table.list td.tags{ width:120px; text-align:left; }

/*------------------------------------------------------------------------------ 6=Paging */
.pager {
	margin:10px 0;
	padding:5px 0;
	position:relative;
	width:100%;
}
.pager ul {
	position:relative;
	left:53%;
	float:left;
}

.pager ul li {
	position:relative;
	right:50%;
	float: left;
	margin-right:34px;
	font-weight: bold;
	line-height:18px;
	font-size:123.1%;

}

.pager ul li a {
      position: relative;
      display: block;
      padding: 5px 10px 4px;
	  line-height:18px;

}

.pager ul li a:link,
.pager ul li a:visited {
      border: 1px #CCC solid;
      background-position: 0 0;
      color: #000;
      text-decoration: none;
}
.pager ul li a:hover,
.pager ul li a:active {
      border: 1px #000 solid;
      background-position: 100% 0;
      color: #000;
      text-decoration: none;
}
.pager ul li span.current {
      display: block;
      padding: 5px 10px 4px;
      background: #666666;
	  border:solid 1px #666666;
      color: #FFFFFF;
	  font-style:normal;
}

.pager .prev,
.pager .next,
.pager .first,
.pager .last {

	position:absolute;
	top:10px;
	line-height:18px;
	font-size:123.1%;
}
.pager .first { left:0px; }
.pager .prev { left:80px; }
.pager .last { right:0px; 	text-align:right;}
.pager .next { right:80px;	 text-align:right; }


.pager .prev a,
.pager .next a,
.pager .first a,
.pager .last a {
      border: none;
	  display:block;
	     padding: 5px 10px 4px;
	  text-decoration:underline;
      border:solid 1px #fafafa;
}


.pager .prev a:hover,
.pager .next a:hover,
.pager .first a:hover,
.pager .last a:hover  {
      background:#e7ebef;
	  border:solid 1px #e7ebef;
 	  text-decoration:none;
}

/*------------------------------------------------------------------------------ 1=第3階層メニュー*/

h1.category {
	background: url(../images/product/h1_category.png) top right no-repeat;
	margin: 0px;
	padding: 0 10px;
	width: 710px;
	height: 33px;
	font-size: 123.1%;
	line-height: 33px;
	color: #5f6a76;
	text-shadow: 0 1px 1px #FFF;
}

.third_menu {
	background: #e8ebee url(../images/common/third_menu_bg.png) bottom left repeat-x;
	padding: 10px 8px 10px 15px;
	margin-bottom:40px;
}
.third_menu ul {
}
.third_menu ul li {
	display: inline;
	float: left;
}
.third_menu ul li a {
	display: block;
	width: 134px;
	height: 37px;
	float: left;
	margin-right: 7px;
	line-height: 37px;
	text-decoration: none;
	color: #5f6a76;
	text-align: center;
	font-weight: bold;
	background: url(../images/product/btn_third_menu.png) 0 0 no-repeat;
}
.third_menu ul li a:hover,
.third_menu ul li.current a:hover  {
	background-position: 0 -37px;
}
.third_menu ul li a:active,
.third_menu ul li.current a:active  {
	background-position: 0 -74px;
}


.third_menu ul li.current a {
	color:#FFF;
	background: url(../images/product/btn_third_menu_current.png) 0 0 no-repeat;
}


/*------------------------------------------------------------------------------ 10=Tab */
.dpi_tabs { width:700px; margin: 20px 15px; }
.dpi_tabs li { display:inline; float:left; }
.dpi_tabs li a, .dpi_tabs li.current a  {
	display:block;
	width:233px;
	height:40px;
	text-align:center;
	font-size:108%;
	font-weight:bold;
	text-decoration:none;
	color:#505961;
	line-height:40px;
	background:url(../images/common/dpi_tabs.png) 0 0 no-repeat; }

.dpi_tabs li.current a  { color:#FFF; }

	.dpi_tabs li a.tab_l { background-position:0 0 ; }
	.dpi_tabs li a.tab_c { background-position:-233px 0 ; }
	.dpi_tabs li a.tab_r { background-position:-466px 0 ; }
	.dpi_tabs li a.tab_l:hover { background-position:0 -40px; }
	.dpi_tabs li a.tab_c:hover { background-position:-233px -40px ; }
	.dpi_tabs li a.tab_r:hover { background-position:-466px -40px ; }
	.dpi_tabs li a.tab_l:active { background-position:0 -80px; }
	.dpi_tabs li a.tab_c:active { background-position:-233px -80px ; }
	.dpi_tabs li a.tab_r:active { background-position:-466px -80px ; }

	.dpi_tabs li.current a.tab_l { background-position:0 -120px ; }
	.dpi_tabs li.current a.tab_c { background-position:-233px -120px ; }
	.dpi_tabs li.current a.tab_r { background-position:-466px -120px ; }
	.dpi_tabs li.current a.tab_l:hover { background-position:0 -160px; }
	.dpi_tabs li.current a.tab_c:hover { background-position:-233px -160px ; }
	.dpi_tabs li.current a.tab_r:hover { background-position:-466px -160px ; }
	.dpi_tabs li.current a.tab_l:active { background-position:0 -200px; }
	.dpi_tabs li.current a.tab_c:active { background-position:-233px -200px ; }
	.dpi_tabs li.current a.tab_r:active { background-position:-466px -200px ; }

/*------------------------------------------------------------------------------ 10=詳細ページ */
.article{}
.article_head { font-size:92%; margin-bottom:40px;}

.related_item {border:solid 8px #e8ebee; padding:15px;}
.related_item h3 {}/* WYSIWYG section */


/*------------------------------------------------------------------------------ 10=担当者一覧 */

.staff_cassette {width:300px; float:left; margin-right:40px; margin-bottom:10px;}
.even { margin-right:0px; }

.staff_cassette img.thumb { width:110px; margin-right:15px;  float:left; display:block; }
.staff_cassette .info { width:175px; float:left; }

.staff_cassette em { display:block; font-weight:bold; font-size:123.1%; font-style:normal;  margin-bottom:8px;}
.staff_cassette ul.disc{}
.staff_cassette ul.disc li{padding:2px 0;}

/*------------------------------------------------------------------------------ 10=注意事項　*/
.note {background:#e8ebee; padding:10px; border:solid 1px #cdd0d4;}

/*------------------------------------------------------------------------------ 10=3カラム　レイアウト（VIとサイトマップ適用）　*/
.three_col { width:670px; overflow:auto;}

.three_col .col { width:200px; margin-right:35px; display:inline; float:left;  }
.three_col .last { margin-right:0; }


.three_col .col p a { font-size:93%;}
.three_col .col p { margin:0 auto 15px; color:#666; width:180px;  }
.three_col .col li { padding:5px 0; }

/*------------------------------------------------------------------------------ 10=ツールチップ　*/
#tooltip
{
    text-align: left;
    color: #333;
    background: #FFCC00;
    position: absolute;
    z-index: 1000;
    padding: 15px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-top: 1px solid #fff;
	-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
	-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
	box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
}

    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #FFCC00;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }

        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #FFCC00;
            top: -20px;
            bottom: auto;
        }

        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }

        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }


/*------------------------------------------------------------------------------ 11=WYSIWYG */
.wysiwyg h3 { font-size:1.69em; /* 22px */ }
.wysiwyg h4 { font-size:1.385em;　/* 18px */}
.wysiwyg h5 { font-size:1.231em; /* 16px */}
.wysiwyg h6 { font-size:1.076em; /* 14px */}

.wysiwyg ul { list-style:outside disc; margin-left:20px; }
.wysiwyg ol { margin-left:25px; }
.wysiwyg li { line-height:1.5em;}

.wysiwyg p{ margin-bottom:.5em;}
.wysiwyg hr{
	border: 0;
    height: 2px;
    border-top: 1px solid #d4dcdf;
    border-bottom: 1px solid #FFF;
	zoom:1;}

.wysiwyg a{}
.wysiwyg img { border:solid 1px #d4dcdf; }

.wysiwyg table{}
.wysiwyg th{ font-weight:bold; }
.wysiwyg th, .wysiwyg td { border:solid 1px #CCC; }



.wysiwyg .related_item h3 {font-size:108%;}/* WYSIWYG section */
.wysiwyg .related_item ul { margin:0; list-style:none;}
.wysiwyg .related_item li { padding-bottom:5px; }

/*------------------------------------------------------------------------------ 12=Placeholder */

.placeholder { color: #999; }
/*IE9 - IE8*/
#header .ph {line-height:24px\9; }
/* IE7*/
*+html #header .ph {line-height:26px\9; }