@charset "Shift_JIS";
body, div, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, p, th, td { font: small/1.4 Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */ padding: 0; text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */ color: #000000; }
img {
	border:0px none;
	margin:0;
	padding:0;
	vertical-align: bottom
	}
img a {
	border:0px none;
	}
ol, ul {
	list-style:none;
	}

#container { width: 1000px; background: #FFFFFF; margin: 0 auto; text-align: left; } 
#header { background: #FFFFFF; padding: 0 0px;  /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */ height: 90px; width: 1000px; } 
#header h1 { margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */ padding: 7px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */ float: left; }
#logo { padding:0px; }
#eco_office { right: 217px; top: 19px; float: right; padding-top: 24px; }
#header2{}
#globalnavi { margin: 0; padding: 0 5px; list-style-type: none; background: url(../common/back-navi.gif); width: 990px; height: 36px; }
#globalnavi li { margin: 0; padding: 0; float: left; }
#globalnavi a { text-indent: -9999px; /* テキストを隠す */ text-decoration: none; display: block; width: 162px; height: 36px; }
#menu1 a { background: url(../common/navi.gif) 0px 0px; } /* 表示画像の位置を指定 */
#menu1-n a,
#menu1 a:hover { background: url(../common/navi.gif) 0px -36px; } /* 入れ替え画像の位置を指定 */
#menu2 a { background: url(../common/navi.gif) -162px 0px; }
#menu2-n a,
#menu2 a:hover { background: url(../common/navi.gif) -162px -36px; }
#menu3 a { background: url(../common/navi.gif) -324px 0px; }
#menu3-n a,
#menu3 a:hover { background: url(../common/navi.gif) -324px -36px; }
#menu4 a { background: url(../common/navi.gif) -486px 0px; }
#menu4-n a,
#menu4 a:hover{ background: url(../common/navi.gif) -486px -36px; }

#pan { width: 990px; text-align: left; font-size: 13px; line-height: 13px; padding: 10px 5px; }

#sidebar1 { float: right; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */ width: 200px; /* 標準に準拠したブラウザまたは Internet Explorer の標準モードでは、この div の実際の幅には、幅に加えて余白と境界線も含まれます */ background: #f2f2f2; /* 背景色は、列内のコンテンツの長さにわたって表示されます */ padding: 0px; display: block; height: auto; margin: 0px; }
#s_navi2 { width: 200px; float: right; }
#s_navi2 li { margin: 0; padding: 0; }
#s_navi2 a { text-indent: -9999px; /* テキストを隠す */ text-decoration: none; display: block; width: 200px; height: 66px; }
#s_navi3 { width: 200px; float: right; }
#s_navi3 li { margin: 0; padding: 0; }
#s_navi3 a { text-indent: -9999px; /* テキストを隠す */ text-decoration: none; display: block; width: 200px; height: 66px; }
#m1 a { background: url(../image/side_navi2.gif) no-repeat 0px 0px; } /* 表示画像の位置を指定 */
#m1-n a,
#m1 a:hover { background: url(../image/side_navi2.gif) no-repeat -200px 0px; } /* 入れ替え画像の位置を指定 */
#m2 a { background: url(../image/side_navi2.gif) no-repeat 0px -66px; }
#m2-n a,
#m2 a:hover { background: url(../image/side_navi2.gif) no-repeat -200px -66px; }
#m3 a { background: url(../image/side_navi2.gif) no-repeat 0px -132px; }
#m3-n a,
#m3 a:hover { background: url(../image/side_navi2.gif) no-repeat -200px -132px; }

.s_navi2waku { width: 200px; }

a.btn{ display:block; width:200px; font-size:100%; text-decoration:none; color:#000000; text-align: left; padding: 5px 0px; background: url(../image/triangle.gif) no-repeat 5px; text-indent: 1.5em; }
a.btn:visited{ color:#000000; font-size: 100%; text-align: left; text-indent: 1.5em; display: block; padding: 5px 0px; width: 200px; background: url(../image/triangle.gif) no-repeat 5px; }
a.btn:hover{ color:#663300; font-size: 100%; background: url(../image/triangle.gif) no-repeat 5px; }
a.btn:active{ color: #3300FF; font-size: 100%; background: url(../image/triangle.gif) no-repeat 5px; }

f.btn{ display:block; width:200px; font-size:100%; text-decoration:none; color:#000000; text-align: left; padding: 5px 0px; background: url(../image/triangle.gif) no-repeat 5px; text-indent: 1.5em; float: right; }
f.btn:visited{ color:#000000; font-size: 100%; text-align: left; text-indent: 1.5em; display: block; padding: 5px 0px; width: 200px; background: url(../image/triangle.gif) no-repeat 5px; }
f.btn:hover{ color:#663300; font-size: 100%; background: url(../image/triangle.gif) no-repeat 5px; }
f.btn:active{ color: #3300FF; font-size: 100%; background: url(../image/triangle.gif) no-repeat 5px; }


#mainContent { margin: 0; /* この div エレメントの右マージンにより、ページの右側に #sidebar1 div が設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、このマージンを削除します。 */ padding: 0; /* 余白は div ボックスの内側のスペース、マージンは div ボックスの外側のスペースです */ width: 780px; float: left; display: block; } 

#setsuden { background: #fef6f2; width: 780px; display: block; }
.img_780_clear { width: 780px; display: block; clear: both; }
.s_left { float: left; width: 370px; padding-left: 10px; text-align: left; font: 13px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; padding-right: 10px; display: block; }
.s_right { float: right; width: 370px; text-align: left; font: 13px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; padding-right: 10px; padding-left: 10px; display: block; }

.s_copy { text-align: left; font: 13px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; padding-right: 10px; padding-left: 10px; display: block; }
.s_copy2 { text-align: left; font: 13px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; }
.s_copy3 { text-align: left; font: 13px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; display: block; padding: 10px; }

.s_midashi { text-align: left; font: bold 18px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; display: block; padding: 10px; }
.s_midashi2 { text-align: left; font: bold 18px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; display: block; padding-bottom: 10px; }

.s_komidashi { text-align: left; font: bold 15px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; display: block; }
.s_komidashi2 { text-align: left; font: bold 15px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; padding-top: 10px; display: block; }

#s_left_waku390 { text-align: left; float: left; width: 390px; padding-left: 10px; display: block; padding-right: 10px; }
#s_left_waku270 { text-align: left; float: left; width: 270px; padding-left: 10px; padding-right: 10px; }
#s_right_waku { float: right; display: block; padding-right: 10px; padding-left: 10px; }
#s_right_waku2 { float: right; display: block; padding-right: 10px; padding-left: 10px; }


#s02_l { text-align: left; float: left; width: 350px; padding-left: 10px; }
#s02_r { float: right; }

#s02_l2 { text-align: left; float: left; width: 462px; padding-left: 10px; padding-top: 20px; }
#s02_r2 { float: right; width: 270px; text-align: left; padding-top: 20px; }

.s02_l3copy { text-align: left; float: left; width: 225px; padding-left: 10px; padding-top: 15px; display: block; padding-right: 10px; }

.s_copy3back { text-align: left; background: #F5FAF6 url(../image/online_back.gif) repeat-y 0px 0px; display: block; width: 780px; padding: 0px; margin: 0px; }
.s_copy3back_t { text-align: left; font: 13px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; display: block; width: 740px; padding: 0px 20px 10px; }

.waku_350 { background: url(../image/waku_350.gif) no-repeat left top; display: block; height: 26px; width: 350px; padding-bottom: 15px; text-align: left; text-indent: 15px; font: bold 15px/30px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; }
.waku_350_2 { background: url(../image/waku_350.gif) no-repeat left top; display: block; height: 26px; width: 350px; padding-bottom: 15px; text-align: left; text-indent: 15px; font: bold 15px/30px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; margin-top: 15px; }
.waku_370 { background: url(../image/waku_370.gif) no-repeat left top; display: block; height: 26px; width: 370px; padding-bottom: 15px; text-align: center; font: bold 15px/30px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; }
.waku_370_2 { background: url(../image/waku_370.gif) no-repeat left top; display: block; height: 26px; width: 370px; padding-bottom: 15px; text-align: center; font: bold 15px/30px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; margin-top: 15px; }
.waku_370_img { display: block; width: 370px; padding-bottom: 15px; text-align: right; margin-top: 5px; }

.bcpwaku_clear { clear: both; background: url(../image/waku_bcp.gif) no-repeat left top; display: block; height: 288px; width: 780px; padding-bottom: 10px; }
.bcp_copy { text-align: left; display: block; width: 528px; padding-top: 115px; }
.bcp_copy_t { text-align: left; font: 13px/22px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; display: block; width: 378px; margin-left: 150px; }

#mlinkwaku { width: 780px; overflow: visible; }

.mlink ul{ list-style:none; clear: both; }
.mlink li{ list-style:none; float:right; display:inline; }
.mlink a{ background: url(../common/yajirusi2.gif) no-repeat 100% 40%; font-size:13px; padding:10px 30px 10px 0px; color:#000000; text-decoration:none; display: block; }
.mlink a:hover{ background: url(../common/yajirusi2.gif) no-repeat 100% 40%; color:#154f9e; text-decoration:none; }

/* 2021.4.10 add */
#canon{
	padding:			20px 0px;
	border-bottom:		1px solid #333;
	margin-bottom:		20px;
}
#canon p{
	text-align:		left;
}
#UTM{
	border-top:			2px dotted #333;
	padding:			20px 0px;
	border-bottom:		2px dotted #333;
/*	margin-bottom:		20px;	/*  */
}
#UTM h2{
	font-size:		23px;
	font-weight:	bold;
	text-align:		left;
	margin-bottom:	20px;
}
#UTM p{
	text-align:		left;
}
.wrapFlexSplit{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap : wrap; /*for IE10*/
	-webkit-flex-wrap : wrap; /*for old webkit browser*/
	flex-wrap : wrap;


	justify-content: space-between;	/*最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置*/
}

#network_security{
	padding:			20px 0px;
}
#network_security p{
	text-align:		left;
/*	margin-bottom:	20px;	/*  */
}
#network_security p.title{
	font-weight:	bold;
	font-size:		18px;
}
#network_security .image{
/*	float:			left;	/*  */
/*	margin-right:	20px;	/*  */
	width:			70%;
}
#network_security .image img{
	width:			100%;
	height:			auto;
}
#network_security .text{
/*	float:		right;	/*  */
	width:			25%;
}

/* 2021.4.10 add */

#footer_tokai { background: url(../common/footer_tokai.gif) no-repeat left top; width: 1000px; padding-top: 55px; padding-bottom: 5px; text-align: center; font: 11px Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; }
#footer { padding: 0 10px 0 20px; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */ background:#FFFFFF url(../common/footer.gif) no-repeat left top; height: 30px; } 
#footer p {
	margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
}
#footer_link { float: right; }

.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */ float: left; }
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*------------------------------ clearfix -----*/
/* CSSハック01 */
.clear { clear: both; }
/* CSSハック02 */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */