﻿@charset "utf-8";
/*
	Site Name: Taihei Co.,Ltd.
	Description: initial setting
	Version: 1.0
	Author: Kazupico Isoyoung of Office SMJ
*/

/*
===== CONTENTS ===========================================

	1: universal reset
	2: body and base setting
		: general params
		: acronyms and abbreviations styles
	3: form setting
	4: link setting
	5:Miscelaneous
	6:Layout

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


/*
===== 1: universal reset =================================
*/

*{
	margin:0;
	padding:0;
}

/*
===== 2: body and base setting ===========================
*/

html, body {
	background: #ffffff url('img/bg.png');
	font-family: 'メイリオ',Meiryo,'ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	margin: 0px;
	padding: 0px;
	color: #404040;
	text-align: center; /* box centering */
}

/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div,p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
	padding: 0;/* margin&padding reset */
	line-height: 1.45em;/* base line height */
	text-align: left;
	display: block;
	margin: 0px;
	font-size: 14px;
	font-weight: normal;
}

h1 {
	clear: both;
	height: 30px;
	line-height: 35px;
	margin-bottom: 1em;
	padding: 0 0 0 10px;
	background: url('img/bg-h1.png') no-repeat;
	color: #ffffff;
	font-size: 1.2em;
	/* font-weight: bold; */
	border-bottom: 1px #a83345 solid;
	letter-spacing: 0.25em;
	overflow: hidden;
}

.tdc h1 {
	clear: both;
	height: 30px;
	line-height: 35px;
	margin-bottom: 1em;
	padding: 0 0 0 10px;
	background: url('img/bg-h1.png') no-repeat;
	color: #ffffff;
	font-size: 1.1em;
	/* font-weight: bold; */
	border-bottom: 1px #a83345 solid;
	letter-spacing: 0;
	overflow: hidden;
}

.priv h1 {
	clear: both;
	height: 30px;
	line-height: 35px;
	margin-bottom: 1em;
	padding: 0 0 0 10px;
	background: url('img/bg-h1.png') no-repeat;
	color: #ffffff;
	font-size: 1.2em;
	/* font-weight: bold; */
	border-bottom: 1px #a83345 solid;
	letter-spacing: 0;
	overflow: hidden;
}

h2 {
	clear: both;
	height: 30px;
	line-height: 35px;
	margin-bottom: 1em;
	padding: 0 0 0 10px;
	background: url('img/bg-h1.png') no-repeat;
	color: #ffffff;
	font-size: 1.2em;
	/* font-weight: bold; */
	border-bottom: 1px #a83345 solid;
	letter-spacing: 0.25em;
	overflow: hidden;
}

h3 {
	clear: both;
	margin: 0 0 1em 0;
	padding: 0 0 0 5px;
	background: #fafafa;
	border-top: 1px #eeeeee solid;
	font-size: 1.2em;
	color: #000000;
}

h4 {
	clear: both;
	margin: 0 0 1em 0;
	padding: 0 0 0 5px;
	background: #fafafa;
	border-top: 1px #eeeeee solid;
	font-size: 1.1em;
	color: #404040;
}

p {
	margin: 0 0 2em 0;
	padding: 0;
	line-height: 1.45em;
}

.caution {
	border: 1px #ff0000 solid;
	border-radius: 4px;
	padding: 1em;
	background-color: #ffeeee;
}

p.caution a {
	font-weight: bold;
}

.color-red {
	color: #CC0000;
}

.color-green {
	color: #006666;
}

dl{
	list-style: none;
	padding: 0;
	margin: 0;
}

dt{
	font-weight: normal;
}

dt a{
    margin: 0;
    padding: 0 0 0 18px;
    background: url(img/arrow_01.png) no-repeat left center;
    list-style: none;
}

dt a:hover,
dt a:active {
	background: url(img/arrow_02.png) no-repeat left center;
}

dd{
	list-style: none;
	padding: 0 0 0.25em 18px;
	margin: 0 0 0.25em 0;
	border-bottom: 1px #eeeeee dotted;
	font-size: 0.9em;
}

table {
	margin : 0;empty-cells: show;
	font-size:13px;
}

td {
	padding: 0.1em 0.5em 0.1em 0;
}

tbody {
	font-size: 13px;
}

.nw {
	white-space: nowrap;
}

/* hr, */.areaAnchor,.anchor { display : none; }
img {
	border: none ;
	vertical-align: bottom;
	margin:0;
	padding:0;
}

ul.list {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
ul.list li {
    margin: 0 0 0.25em 0;
    padding: 0;
    list-style: none;
}

ul.list li a{
    margin: 0;
    padding: 0 0 0 18px;
    background: url(img/arrow_01.png) no-repeat left center;
    list-style: none;
}

ul.list li a:hover,
ul.list li a:active {
	background: url(img/arrow_02.png) no-repeat left center;
}

ul.list2 {
    list-style: none;
    margin: 0 0 2em 0;
    padding: 0;
    /* text-align: right; */
}
 
ul.list2 li {
    margin: 0 0 0.5em 0;
    padding: 0;
    list-style: none;
}

ul.list2 li a{
    margin: 0;
    padding: 0 0 0 18px;
    background: url(img/arrow_01.png) no-repeat left center;
    list-style: none;
}

ul.list2 li a:hover,
ul.list2 li a:active {
	background: url(img/arrow_02.png) no-repeat left center;
}

hr { 
	border-style: dotted none none none; 
	border-top-width: 1px; 
	border-top-color: #ccc; 
	height: 1px; 
} 

.c-both {
	clear:both;
}

/* acronyms and abbreviations styles 
-------------------------------------*/
acronym,abbr{cursor:help;}

/*
===== 3: form setting ===========================
*/

option{ padding-right:10px; }
*+html option{padding-right:0;}/* for IE7&Opera */
* html option{padding-right:0;}/* for IE6 */@@@

form {
    margin: 0;
    font-size: 10px;
    }
    
input, select, textarea {
	font-size: 85%;
	font-family: 'メイリオ',Meiryo,'ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}

/*
===== 4: link setting ===========================
*/

a {
	color: #003366;
}
a:hover,
a:active {
	color: #990033;
}
/* Hollyハック */
/* mac ie5 \*/
a {
	outline: 0;
}

/*
===== 5:Miscelaneous ===========================
*/

.p2 {
	margin: 0 0 1em 0;
	padding: 0;
	line-height: 1.3em;
}

.leftbox {
	float: left;
	padding: 0;
	margin: 0 10px 5px 0;
	/* border: 1px #E84287 solid; */
	border: 1px #000000 solid;
}

.rightbox {
	float: right;
	padding: 0;
	margin: 0 0 5px 0;
	border: 1px #000000 solid;
}

.rightbox2 {
	float: right;
	padding: 0;
	margin: 0 0 5px 0;
}

.shadow {
	float: left;
	background: url(img/shadow_001.png) right bottom;
	padding: 0 5px 5px 0;
	margin-right: 5px;
}

.shadow2 {
	float: right;
	background: url(img/shadow_001.png) right bottom;
	padding: 0 5px 5px 0;
	margin: 0 5px 0 10px;
}

.small {
	font-size: 12px;
}

.smaller {
	font-size: 0.8em;
	line-height: 1.1em;
	color: #808080;
}

.stressed {
	font-size: 16px;
	color:#000000;
}

.stressed2 {
	font-size: 16px;
	color: #ff9900;
}

.green {
	color: #009900;
	font-weight: bold;
}

.red {
	color: #ff0000;
	font-weight: bold;
}

.orange {
	color: #ff9900;
}

.center {
	text-align: center;
}

.pico {
	font-size: 1.1em;
	color:#990033;
	font-weight: bold;
	letter-spacing: 0.1em;
}

.fukiage {
	font-size: 1.1em;
	color:#003366;
	font-weight: bold;
	letter-spacing: 0.1em;
}

/*
===== 6:Layout ===========================
*/

#wrapper {
	/* background: url('img/bg-wrapper.png'); */
	position: relative;
 	width: 800px;
 	margin: 0px auto;
 	text-align:left;
}

.header {
	width: 750px;
	height: 85px;
	padding: 5px 0 0 0;
	background: #ffffff url('img/bg-header.png') repeat-x;
	border-top: 5px #990033 solid;
	/* border-bottom: 2px #eeeeee solid; */
	margin: auto;
}
 
.header-left {
	width: 172px;
	float: left;
}
.header-left a {
	width: 172px;
	height: 85px;
	background: url(img/logo.png) no-repeat;
	display: block;
	text-indent: -9999px;
	text-decoration: none;
}
.header-right {
	position : relative;
	width: 568px;
	height: 85px;
	float: right;
	letter-spacing: -1px;
}
.header-comment {
	position : absolute;
	width: 100%;
	padding: 0;
	font-size: 11px;
	text-align: right;
	color: #404040;
}
.header-right li {
	float: right;
	margin-left: 5px;
	list-style-type: none;
	font-size: 11px;
}
.header-right li a {
	padding-left: 5px;
	background-repeat: no-repeat;
	display: block;
}
.header-right li a:link,
.header-right li a:visited {
	color: #404040;
	text-decoration: none;
}
.header-right li a:hover,
.header-right li a:active {
	color: #990033;
	text-decoration: underline;
}

.key {
	width: 750px;
	height: 250px;
	clear: both;
	text-indent: -9999px;
	margin: auto;
	background: #ffffff url('img/key.png');
}
 
.global-navi {
	width: 750px;
	/* height: 32px; */
	background-color: #ffffff;
	margin: auto;
	padding: 5px 0 0 0;
	/* letter-spacing: 0.1em; */
}

.global-navi li {
	float: left;
	list-style-type: none;
}

/* ボタン　共通設定 */
.global-navi li a {
	background-repeat: no-repeat;
	display: block;
	/* text-indent: -9999px; */
	text-align: center;
	text-decoration: none;
}

/* ホーム */
a.gn-1:link,
a.gn-1:visited {
	width: 99px;
	display: block;
	background-color: #ffffff;
	color: #003366;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
	outline: none;
	padding: 5px 0;
	margin: 0;
	border-bottom: 2px #003366 solid;
}

a.gn-1:hover,
a.gn-1:active {
	background-color: #ffffff;
	color: #990033;
	font-size: 1em;
	border-bottom: 2px #990033 solid;
}

/* その他 */
a.gn-2:link,
a.gn-2:visited {
	width: 92px;
	display: block;
	background-color: #ffffff;
	color: #003366;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
	outline: none;
	padding: 5px 0;
	margin: 0;
	border-left: 1px #eeeeee dotted;
	border-bottom: 2px #003366 solid;
}

a.gn-2:hover,
a.gn-2:active {
	background-color: #ffffff;
	color: #990033;
	font-size: 1em;
	border-bottom: 2px #990033 solid;
}

.topicpath {
	width: 750px;
	clear: both;
	padding: 5px;
	margin: auto;
	font-size: 10px;
}
 
/* .outline-margin {
	margin:0 10px;
} */
	
.main {
	clear: both;
	width: 750px;
	margin: auto;
	padding: 0;
}

.contents {
	width: 530px;
	padding: 0;
	margin: 0;
	border: 0;
	float: left;
}

.nos {
	float:left;
	width:100%;
	margin: 0 0 0.5em 0;
	/* text-align:center; */
}

.nos h3 {
	clear: both;
	height: 30px;
	line-height: 30px;
	margin: 0 0 0.5em 0;
	padding: 0 5px 0 58px;
	background: #990033 url('img/bg-nos.png') no-repeat;
	border: 0;
	font-size: 1.1em;
	color: #000000;
}

.nos h3 a:link,
.nos h3 a:visited {
	display: block;
	color: #ffffff;
	text-decoration: none;
}

.nos h3 a:hover,
.nos h3 a:active {
	text-decoration: underline;
}

.nosimg {
	float: left;
	margin: 0 0.5em 0 0;
}

.navi {
	width: 198px;
	float: right;
	margin: 0;
	padding: 0;
}

.caption_pico {
	height: 31px;
	display: block;
	padding: 0 10px 0.5em 10px;
	margin: 0.5em 0 0 0;
	background: url('img/caption_pico.png') no-repeat;
	text-indent: -9999px;
}

a.caption_pico {
	height: 31px;
	display: block;
	padding: 0 10px 0.5em 10px;
	margin: 0.5em 0 0 0;
	background: url('img/caption_pico.png') no-repeat;
	text-indent: -9999px;
}

.caption_fukiage {
	height: 31px;
	display: block;
	padding: 0 10px 0.5em 10px;
	background: url('img/caption_fukiage.png') no-repeat;
	text-indent: -9999px;
}

a.caption_fukiage {
	height: 31px;
	display: block;
	padding: 0 10px 0.5em 10px;
	background: url('img/caption_fukiage.png') no-repeat;
	text-indent: -9999px;
}

.navi-caption {
	height: 30px;
	line-height: 30px;
	display: block;
	/* line-height: 24px; */
	padding: 0 10px 0 10px;
	background: url('img/bg-nc.png') no-repeat;
	letter-spacing: 0.1em;
	font-size: 1em;
	/* font-weight: bold; */
	color: #003366;
}

.navi-plain {
	/* width: 160px; */
	font-size: 0.9em;
	text-decoration: none;
	padding: 0 10px 0.5em 10px;
}

.navi-contents {
	width: 196px;
	padding: 0.5em 0 0 0;
	background: #fafafa;
	border-left: 1px #eeeeee solid;
	border-right: 1px #eeeeee solid;
}

.navi ul {
	list-style-type: none;
	font-size: 0.9em;
	padding: 0 10px 1em 10px;
}

.navi li a {
	/* width: 180px; */
	height: 1.5em;
	background: url(img/arrow_01.png) no-repeat 0px 5px;
	display: block;
	padding: 0.25em 0 0 1.5em;
	text-decoration: none;
	line-height: 1.5em;
}
.navi li a:hover,
.navi li a:active {
	background: url(img/arrow_02.png) no-repeat 0px 5px;
	background-repeat: no-repeat;
}

a.banner-taihei,
a.banner-taihei-blog,
a.banner-cgc,
a.banner-cgcproducts,
a.banner-coocking,
a.banner-minamisatsumashi,
a.banner-mscci,
a.banner-hiokishi,
a.banner-recruit,
a.banner-cogca,
a.banner-smartreceipt,
a.banner-nishimuta {
	width: 176px;
	height: 62px;
	margin: auto;
	margin-top: 0.5em;
	background-repeat: no-repeat;
	display: block;
	text-indent: -9999px;
	text-decoration: none;
}
a.banner-taihei {
	background-image: url(img/banner-taihei.png);
}
a.banner-taihei-blog {
	background-image: url(img/banner-taihei-blog.png);
}
a.banner-cgc {
	background-image: url(img/banner-cgc.png);
}
a.banner-cgcproducts {
	background-image: url(img/banner-cgcproducts.png);
}
a.banner-coocking {
	background-image: url(img/banner-coocking.png);
}
a.banner-minamisatsumashi {
	background-image: url(img/banner-minamisatsumashi.png);
}
a.banner-mscci {
	background-image: url(img/banner-mscci.png);
}
a.banner-hiokishi {
	background-image: url(img/banner-hiokishi.png);
}
a.banner-recruit {
	background-image: url(img/banner-recruit.png);
}
a.banner-cogca {
	background-image: url(img/banner-cogca.png);
}
a.banner-smartreceipt {
	background-image: url(img/banner-smartreceipt.png);
}
a.banner-nishimuta {
	background-image: url(img/banner-nishimuta.png);
}

.navi-bottom {
	height: 12px;
	display: block;
	padding: 0;
	margin-bottom: 1em;
	background: url('img/bg-nb.png') no-repeat;
}

.return {
	clear: both;
	width: 690px;
	height: 4em;
	padding: 0 5px;
	margin: auto;
	font-size: 12px;
	text-align: right;
}

.return a:link,
.return a:visited {
	background: url(img/navi-bottom_01.png) no-repeat 0px 1px;
	padding: 0 0 0 15px;
}

.return a:hover,
.return a:active {
	background: url(img/navi-bottom_02.png) no-repeat 2px 1px;
}

.footer {
	width: 750px;
	height: 75px;
	background: #ｆｆｆｆｆｆ url('img/bg-footer.png') repeat-x;
	clear: both;
	padding: 10px 0 0 0;
	margin: auto;
	color: #404040;
	text-align: center;
	font-size: 0.8em;
	/* line-height: 230%; */
	border-top: 1px #eeeeee solid;
}

/* .footer a {
	color: #808080;
}

.footer a:hover,
.footer a:active {
	color: #ff9900;
} */

a.smj:link,
a.smj:visited {
	color: #404040;
	text-decoration: none;
}

a.smj:hover,
a.smj:active {
	color: #ff8000;
}

.pagetop {
	position: fixed;
	bottom: 0; /* 上にしたい場合は bottom を top に書き換え */
	right: 0; /* 左にしたい場合は right を left に書き換え */
	width: 30px; /* 画像を設定する場合、その画像のwidthと同じ値 */
	height: 120px; /* 画像を設定する場合、その画像のheightと同じ値 */
	margin: 0;
}

#logoParade {
	width: 530px;
	height: 112px;
	position: relative;
	padding: 0;
	margin: 0 0 0.5em 0;
}
 
#logoParade div.scrollableArea * {
	float: left;
	padding: 0 0 0 5px;
}

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(img/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(img/cursor_arrow_left.png), url(img/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(img/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(img/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(img/cursor_arrow_right.png), url(img/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(img/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
