@charset "utf-8"; *{ margin:0; padding:0; } body { font: 100% Verdana, Arial, Helvetica, sans-serif; background:url(images/background.jpg) repeat-x; margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */ padding: 0; text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */ color: #000000; } #header { background:url(images/header.jpg) no-repeat; width:800px; height:70px; } #header h1,h2 { margin: 0; text-indent:-9999em; } #head_image h1,h2{ margin: 0; text-indent:-9999em; } /*home時*/ #home_image{ width:800px; height:253px; background:url(images/top-images.jpg) no-repeat; margin:4px 0; } /*home以外*/ #etc_image{ width:800px; height:130px; background:url(images/etc-images.jpg) no-repeat; margin:4px 0; } #footer { padding: 15px 0 0 0; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */ background:url(images/footer.jpg) no-repeat; width:800px; height:37px; text-align:center; } #footer p { margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */ padding: 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */ font-size:0.8em; } .fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */ float: right; margin-left: 8px; } .fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */ float: left; margin-right: 8px; } .clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */ clear:both; height:0; font-size: 1px; line-height: 0px; } div.img_div{ font-size:0; } #mainContent a:link{ color:#666699; text-decoration:none; } #mainContent a:visited{ color:#666699; text-decoration:none; } #mainContent a:hover{ color:#ff3300; text-decoration: underline; } #footer a:link{ color:#666699; text-decoration:none; } #footer a:visited{ color:#666699; text-decoration:none; } #footer a:hover{ color:#ff3300; text-decoration: underline; } img{ border:none; } /************************************************************************************/ /*****************************右サイドバー設定***************************************/ /************************************************************************************/ /* の場合 */ .twoColFixRtHdr #container { width: 800px; /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */ background: #FFFFFF; margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */ text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */ } .twoColFixRtHdr #sidebar1 { float: right; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */ width: 190px; /* 標準に準拠したブラウザまたは Internet Explorer の標準モードでは、この div の実際の幅には、幅に加えて余白と境界線も含まれます */ background: #ffffff; /* 背景色は、列内のコンテンツの長さにわたって表示されます */ } .twoColFixRtHdr #mainContent { margin: 0 193px 0 0; /* この div エレメントの右マージンにより、ページの右側に #sidebar1 div が設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、このマージンを削除します。 */ padding: 0; /* 余白は div ボックスの内側のスペース、マージンは div ボックスの外側のスペースです */ /*width:605px;*/ } .twoColFixRtHdr #mainContent div.content{ margin:4px 5px; } .twoColFixRtHdr #mainContent div.content p{ text-indent:1em; } .twoColFixRtHdr #sidebar1 li{ list-style: none; } .twoColFixRtHdr #sidebar1 ul li{ list-style: none; } /****************パン屑リスト*********************/ div.bread_list{ font-size:0.7em; margin:2px 0; } div.bread_list a:link,a:visited{ color:#888888; text-decoration: none; } div.bread_list a:hover{ color:#ff6633; text-decoration: underline; } /************************************************************************************/ /*****************************左サイドバー設定***************************************/ /************************************************************************************/ /* の場合 */ .twoColFixLtHdr #container { width: 800px; /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */ background: #FFFFFF; margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */ text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */ } .twoColFixLtHdr #sidebar1 { float: left; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */ width: 190px; /* 標準に準拠したブラウザまたは Internet Explorer の標準モードでは、この div の実際の幅には、幅に加えて余白と境界線も含まれます */ background: #ffffff; /* 背景色は、列内のコンテンツの長さにわたって表示されます */ } .twoColFixLtHdr #mainContent { margin: 0 0 0 196px; /* この div エレメントの右マージンにより、ページの右側に #sidebar1 div が設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、このマージンを削除します。 */ padding: 0; /* 余白は div ボックスの内側のスペース、マージンは div ボックスの外側のスペースです */ /*width:602px;*/ color:#444444; font-size:0.9em; line-height:1.3em; } .twoColFixLtHdr #mainContent div.content{ margin:4px 5px; font-size:0.9em; } .twoColFixLtHdr #mainContent div.content p{ text-indent:1em; } .twoColFixLtHdr #mainContent div.content h4{ margin:17px 0 9px 0; padding:5px 6px; border-left:6px solid #FF6633; font-size:1.3em; font-weight:normal; color:#FF6633; background:url(images/finding-bk.jpg) repeat-x; } .twoColFixLtHdr #sidebar1 li{ list-style: none; } .twoColFixLtHdr #sidebar1 ul li{ list-style: none; } .twoColFixLtHdr #sidebar1 ul li.category_top a{ background: url(images/side_back_top.jpg) no-repeat; width: 169px; height:28px; padding:10px 0px 0px 21px; display: block; color:#ffffff; text-decoration: none; font:1em Arial, Helvetica, sans-serif; font-weight: bold; } .twoColFixLtHdr #sidebar1 ul li.category_top a:hover{ background: url(images/side_back_top.jpg) no-repeat; } .twoColFixLtHdr #sidebar1 ul li.category_child a{ margin:3px 0; border-top:3px double #9999bb; border-bottom:3px double #9999bb; background:#dddddd; padding:5px 2px 4px 4px; width:184px; display: block; text-decoration: none; font-size:0.9em; color:#660033; } .twoColFixLtHdr #sidebar1 ul li.category_child a:hover{ margin:3px 0; border-top:3px double #9999bb; border-bottom:3px double #9999bb; background:#dddddd; padding:5px 2px 4px 4px; width:184px; display: block; text-decoration: none; font-size:0.9em; color:#660033; } .twoColFixLtHdr #sidebar1 ul li.page_item a{ margin:3px 0; border-top:1px double #FF6633; border-bottom:1px double #FF6633; background:#ffffff; padding:4px 2px 4px 4px; width:184px; display: block; text-decoration: none; font-size:0.8em; color:#660033; } .twoColFixLtHdr #sidebar1 ul li.page_item a:hover{ margin:3px 0; border-top:1px double #FD3359; border-bottom:1px double #FD3359; background:#dddddd; padding:4px 2px 4px 4px; width:184px; display: block; text-decoration: none; font-size:0.8em; color:#660033; } /* .twoColFixLtHdr #sidebar1 ul li.page_item a{ background: #eeeeee; width: 184px; padding:3px 2px 3px 2px; margin:1px 0; display: block; color:#444444; border-bottom: 1px solid #cccccc; border-right:1px solid #cccccc; border-left:1px solid #cccccc; text-decoration: none; font-size:0.8em; } .twoColFixLtHdr #sidebar1 ul li.page_item a:hover{ background: #9999bb; width: 184px; padding:3px 2px 3px 2px; margin:1px 0; display: block; border-right:1px solid #cccccc; border-left:1px solid #cccccc; color:#ffffff; border-bottom: 1px solid #cccccc; text-decoration: none; font-size:0.8em; } */ .twoColFixLtHdr #mainContent div.content ul{ margin:8px 0; margin-left:30px; padding:5px 8px; border-top:#FF6633 double 3px; border-bottom:#FF6633 double 3px; } .twoColFixLtHdr #mainContent div.content ul li{ margin:3px 3px 3px 15px; list-style-image:url(images/line-img.gif); color:#009966; } .feed { background:url(images/icon_feed.gif) no-repeat left center; padding:2px 0 2px 17px; font-size:0.9em; margin:0 0 0 10px; } /******************グローバルナビゲーション**********************/ #g_navi { width:800px; height:38px; background:url(images/navi-back.jpg) no-repeat; } #g_navi ul{ margin:0; padding:0; text-indent:-9999em; display:block; text-decoration:none; } #g_navi li{ margin:0; padding:0; text-indent:-9999em; display:block; text-decoration:none; float:left; list-style:none; } #g_navi li#g_navi_home a{ margin:0; padding:0; width:134px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-home.jpg) no-repeat; } #g_navi li#g_navi_home a:hover{ margin:0; padding:0; width:134px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-home-r.jpg) no-repeat; } #g_navi li#g_navi_web a{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-web.jpg) no-repeat; } #g_navi li#g_navi_web a:hover{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-web-r.jpg) no-repeat; } #g_navi li#g_navi_it a{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-it.jpg) no-repeat; } #g_navi li#g_navi_it a:hover{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-it-r.jpg) no-repeat; } #g_navi li#g_navi_jiin a{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-jiin.jpg) no-repeat; } #g_navi li#g_navi_jiin a:hover{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-jiin-r.jpg) no-repeat; } #g_navi li#g_navi_about a{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-about.jpg) no-repeat; } #g_navi li#g_navi_about a:hover{ margin:0; padding:0; width:133px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-about-r.jpg) no-repeat; } #g_navi li#g_navi_contact a{ margin:0; padding:0; width:134px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-contact.jpg) no-repeat; } #g_navi li#g_navi_contact a:hover{ margin:0; padding:0; width:134px; height:38px; text-indent:-9999em; display:block; text-decoration:none; background:url(images/navi-contact-r.jpg) no-repeat; } /**********************************ページコンテンツ*****************************************************/ h3.content_title{ background:url(images/content_finding.jpg) no-repeat; height:43px; padding:8px 0px 0px 30px; width:574px; font:1.1em Arial, Helvetica, sans-serif; color:#333333; margin:0 0 10px 0; letter-spacing:0.5em; font-family:Tahoma,Arial, Helvetica, sans-serif; } .twoColFixLtHdr #mainContent div.content table.cont_tbl{ margin:5px 0 5px 10px; border-collapse:collapse; } .twoColFixLtHdr #mainContent div.content table.cont_tbl td.icon{ font-size:12px; line-height:1.3em; padding:3px 2px; width:20px; vertical-align:top; border-bottom:1px dashed #cccccc; } .twoColFixLtHdr #mainContent div.content table.cont_tbl td.left_tbl{ font-size:12px; line-height:1.3em; padding:3px 2px; width:90px; vertical-align:top; border-bottom:1px dashed #cccccc; } .twoColFixLtHdr #mainContent div.content table.cont_tbl td.right_tbl{ font-size:12px; line-height:1.3em; padding:3px 2px; width:420px; vertical-align:top; border-bottom:1px dashed #cccccc; } /**************************************トップページ*****************************************/ /*ニュース*/ dl.news dt{ color:#111111; font-size:0.9em; font-weight:bold; padding:3px; margin:4px 0 1px 0; } dl.news dd{ font-size:0.9em; padding:0px 3px 3px 15px; margin:0 0 3px 0px; border-bottom:1px dashed #cccccc; } /*ニュース一覧*/ dl.news_list dt{ color:#111111; font-size:0.9em; font-weight:bold; padding:3px; margin:4px 0 1px 0; } dl.news_list dd{ font-size:0.9em; padding:0px 3px 3px 15px; margin:0 0 3px 0px; } /**************************************コンタクトフォーム*****************************************/ .errmsg{ color : red; font-size : small; font-weight : bold; } table.contact_tbl{ margin:5px auto; border:1px solid #cccccc; border-collapse:collapse; } table.contact_tbl td img{ margin:3px 0; } table.contact_tbl th{ padding:3px; color:#666699; vertical-align: top; border:1px solid #cccccc; background:#dedede; } table.contact_tbl td{ padding:3px; color:#777777; vertical-align:top; border:1px solid #cccccc; font-size:0.9em; } /**********************画像関係****************************/ img.alignright{ float:right; text-align:right; } img.alignleft{ float:left; text-align:left; }