@charset "utf-8"; /* ------------------------------------------------------------------- コーポレートサイト全体で共通で読み込むCSS 最終更新：　2022年8月26日 コーポレートサイトのすべてのページから読むことを想定しています。 ■CSS書き順■ * display / list-style * position / float / clear / z-index * width / height / margin / padding / border * background * color / font (font-family / font-style / font-variant / font-weight / font-size / line-height) text-decoration / text-align / vertical-align /letter-spacing / white-space / (other text) * content * cursor ------------------------------------------------------------------- */ /* ********************************************************************************** 00. イニシャライズ ********************************************************************************** */ html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,cite,code,img,q,samp,small,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,header,nav,section,time,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;vertical-align:baseline;background-color:transparent; }body {line-height:1; }blockquote,q {quotes:none; }blockquote:before,blockquote:after,q:before,q:after {content:'';content:none; }a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent; }table {border-collapse:collapse;border-spacing:0; }input,select {vertical-align:top; }article,aside,footer,header,main,nav,section{display:block; } html { font-size:62.5%; overflow-y: scroll;} body { background-color:#fff; color:#333333; font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif; text-align:center; } a:link { color:#2451c6; text-decoration:none; } a:active { color:#2451c6; text-decoration:underline; } a:visited { color:#7c169e; text-decoration:none; } a:hover { color:#2451c6; text-decoration:underline; } input { font-family: Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif;} /* Windows タブレット用の viewport 指定 */ @-ms-viewport { width: auto; } @media only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { @-ms-viewport { width: 738px; } /* ■■■ToDo: 企業とプロモで値がずれていた。738px or 730px？ */ } /* ********************************************************************************** 01. グローバルエレメント定義 ********************************************************************************** */ /* ------------------------------------------------------------------- clearfix ------------------------------------------------------------------- */ /* clearfix */ .clearfix:after { content:""; display:block; clear:both; height:0px; visibility:hidden; } .clearfix { min-height:1px; } * html .clearfix { height:1px;/*\*//*/ height:auto; overflow:hidden; /**/ } /* ------------------------------------------------------------------- リンク ------------------------------------------------------------------- */ /* アイコン右向き */ a.icon-arrow-r { display:inline-block; padding-left:16px; background:url(/common-o/img/icon-arrow-right.png) no-repeat 4px 0.5em; } /* アイコン右向き[大] */ a.icon-arrow-r-large { display:inline-block; padding-left:20px; background:url(/common-o/img/icon-arrow-right-large-box.png) no-repeat 0 0.2em; font-size:16px; font-size:1.6rem; line-height:1.5; } /* アイコンブランク */ a.icon-blank { display:inline-block; padding-left:16px; background:url(/common-o/img/icon-blank.png) no-repeat 2px 0.35em; background-size:9px;} /* アイコンブランク[大] */ a.icon-blank-large { display:inline-block; padding-left:20px; background:url(/common-o/img/icon-blank-box-reverse.png) no-repeat 0 0.2em; font-size:16px; font-size:1.6rem; line-height:1.5; } /* アイコン外部 */ a.icon-external { display:inline-block; padding-left:16px; background:url(/common-o/img/icon-external.png) no-repeat 2px 0.4em; } /* アイコン外部[大] */ a.icon-external-large { display:inline-block; padding-left:20px; background:url(/common-o/img/icon-external-box-reverse.png) no-repeat 0 0.2em; font-size:16px; font-size:1.6rem; line-height:1.5; } /* アイコン打ち消し */ a.icon-none { display:inline; padding-left:0; background:none; } /* リンクとテキストを縦に並べたとき、テキストの開始位置がそろうようにする */ .icon-none-indent { display:inline-block; padding-left:16px;} /* ------------------------------------------------------------------- p要素 p要素は、コーポレートサイト全体で、以下の仕様で統一します。 ・上マージン 1em ・文字サイズ 1.4rem （ html要素に font-size:62.5%; を指定 ） ・行間 1.7em ------------------------------------------------------------------- */ #main p { margin:1em 0 0 0; font-size:14px; font-size:1.4rem; line-height:1.7em; } /* ------------------------------------------------------------------- 注釈 ------------------------------------------------------------------- */ /* 注釈 番号なし（注） */ #main .list-notes ul { margin-left:0 !important; } #main .list-notes ul li { list-style:none; margin-top:0.7em; margin-left:3em; font-size:12px; font-size:1.2rem; line-height:1.5em; text-indent:-3em; } #main .list-notes ul li a{ display:inline;background:0;padding:0;} *+html #main .list-notes ul li a{ text-indent:0;} /* 注釈 番号付き（注1） */ #main .list-notes-number ul { margin-left:0 !important; } #main .list-notes-number ul li { list-style:none; margin-top:0.7em; margin-left:3.6em; font-size:12px; font-size:1.2rem; line-height:1.5em; text-indent:-3.6em; } #main .list-notes-number ul li a{ display:inline;background:0;padding:0;} *+html #main .list-notes-number ul li a{ text-indent:0;} /* 注釈 アスタリスク ＊ */ #main .list-notes-asterisk ul { margin-left:0 !important; } #main .list-notes-asterisk ul li { list-style:none; margin-top:0.7em; margin-left:1.35em; font-size:12px; font-size:1.2rem; line-height:1.5em; text-indent:-1.35em; } #main .list-notes-asterisk ul li a{ display:inline;background:0;padding:0;} *+html #main .list-notes-asterisk ul li a{ text-indent:0;} /* ------------------------------------------------------------------- メイン領域共通のラベル ------------------------------------------------------------------- */ #main p.label-promo{ clear:both !important;} #main p.label-promo span{ display: inline-block !important;float: left !important; text-align: center !important; margin:5px 7px 0 0 !important;padding: 2px 10px !important; background: #f8f8f8 !important;border:1px solid #999 !important; font-size: 11px !important;font-size: 1.1rem !important;line-height: 1.2em !important;color: #999 !important;} /* フリーテキスト */ #main p.label-promo span.label-promo-free { border-color:#99bbcc !important; background:#f5fdff !important; color:#004e80 !important; } /* 課題別 */ #main p.label-promo span.label-promo-purpose { border-color:#ce99b9 !important; background:#fff7fc !important; color:#850050 !important; } /* キーワード別 */ #main p.label-promo span.label-promo-keyword { border-color:#9ec6c6 !important; background:#f7fefe !important; color:#016969 !important;} /* 製品・ソフト別 */ #main p.label-promo span.label-promo-hardsoft { border-color:#99a6cc !important; background:#f5f8ff !important; color:#002180 !important;} /* 業種 */ #main p.label-promo span.label-promo-business { border-color:#b8a9be !important; background:#fdf7ff !important; color:#532e61 !important;} /* 従業員数 */ #main p.label-promo span.label-promo-scale { border-color:#c5b6a1 !important; background:#fffdf5 !important; color:#6e4913 !important;} /* オンライン */ #main p.label-promo span.label-promo-online { border-color:#adbda6 !important; background:#fafff7 !important; color:#395e28 !important;} /* 実践ソリューションフェア */ #main p.label-promo span.label-promo-jsf { border-color:#dda088 !important; background:#fff9f7 !important; color:#bb3400 !important;} /* ------------------------------------------------------------------- ニュースのラベル ラベルの大きさや形状は、各使用箇所で定義するが、 色はコーポレートサイト全体で共通にする。 ------------------------------------------------------------------- */ #main .label-common-color-solution { border:1px solid #7a7ebb; background:#f1f2f8; color:#5d61a4; } /* ITソリューション */ #main .label-common-color-tanomail { border:1px solid #54825b; background:#eef2ee; color:#3b6e42; } /* たのめーる */ #main .label-common-color-settlement { border:1px solid #c0975a; background:#f9f4ee; color:#87693D; } /* 決算・IR */ #main .label-common-color-efficiency { border:1px solid #7a7ebb; background:#f1f2f8; color:#5d61a4; } /* メーカーズボイス */ #main .label-common-color-personnel { border:1px solid #a1645d; background:#f5efee; color:#81453e; } /* 人事 */ #main .label-common-color-consultation { border:1px solid #b78ec8; background:#f8f3f9; color:#85529a; } /* いまどきのIT活用 （旧：IT導入相談室） */ #main .label-common-color-erp { border:1px solid #f8a67e; background:#fbfaf5; color:#c00000; } /* ERPナビ */ #main .label-common-color-product { border:1px solid #7ca2d2; background:#f2f6fa; color:#4275b5; } /* 製品・サービス紹介 */ #main .label-common-color-campaign { border:1px solid #e695c3; background:#fcf4f9; color:#bf4088; } /* キャンペーン */ #main .label-common-color-campaignl { border:1px solid #e695c3; background:#fcf4f9; color:#bf4088; } /* キャンペーン */ #main .label-common-color-cad { border:1px solid #6b6464; background:#e9e9e9; color:#3e3e3e; } /* CAD Japan */ #main .label-common-color-plan { border:1px solid #968579; background:#f4f3f1; color:#604b3b; } /* 休業のお知らせ */ #main .label-common-color-event { border:1px solid #e05e5e; background:#fcefef; color:#c34141; } /* フェア・セミナー */ #main .label-common-color-csr { border:1px solid #4e9aa8; background:#edf5f6; color:#2c727f; } /* CSRデータ集 */ #main .label-common-color-kankyo { border:1px solid #7da86f; background:#f2f6f0; color:#2c601b; } /* 環境保全 */ #main .label-common-color-syogai { border:1px solid #7a9b9b; background:#f1f5f5; color:#2e5e5e; } /* 障がい者支援 */ #main .label-common-color-saigai { border:1px solid #c27669; background:#f9f1f0; color:#a4655b; } /* 災害復興支援 */ #main .label-common-color-shinsai { border:1px solid #9d8160; background:#f5f2ef; color:#816443; } /* 東日本大震災 */ #main .label-common-color-other { border:1px solid #999999; background:#f5f5f5; color:#5c5c5c; } /* その他 */ #main .label-common-color-fund { border:1px solid #dd7ea9; background:#fceef4; color:#ba3b74; } /* ハートフル基金 */ #main .label-common-color-corporate { border:1px solid #6b6464; background:#e9e9e9; color:#3e3e3e; } /* 企業情報 */ #main .label-common-color-coolbiz { border:1px solid #4e9aa8; background:#edf5f6; color:#2c727f; } /* クールビズ */ #main .label-common-color-taxrate { border:1px solid #c27669; background:#f9f1f0; color:#a4655b; } /* 消費税率の変更 */ #main .label-common-color-failure { border:1px solid #c54880; background:#fcf4f6; color:#b42665; } /* 不具合・障害情報 */ #main .label-common-color-important { border:1px solid #c53c3c; background:#f9ebeb; color:#ab1111; } /* 緊急重要なお知らせ */ #main .label-common-color-customer { border:1px solid #318392; background:#eaf2f4; color:#327d8b; } /* お客様へのお知らせ */ #main .label-common-color-column { border:1px solid #82b668; background:#f2f8f0; color:#4e7811; } /* 読み物・コラム */ /* ------------------------------------------------------------------- スタイル調整セレクタ 以下のセレクタは、原則として、使用しません。 　　緊急時の一時処置にのみ用い、永続的な利用をしてはいけません。 　　margin や text-align は、エレメントで定義してください。 また、!important 宣言も、このセレクタにのみ、例外で適用しています。 通常は !important 宣言は禁止です。 ------------------------------------------------------------------- */ /* 上マージン調節 */ #main .mt00 { margin-top:0 !important; } #main .mt05 { margin-top:0.5em !important; } #main .mt10 { margin-top:1em !important; } #main .mt15 { margin-top:1.5em !important; } #main .mt20 { margin-top:2em !important; } #main .mt25 { margin-top:2.5em !important; } #main .mt30 { margin-top:3em !important; } /* 下からのマージンを調節（吸収） */ #main .mb05-r { margin-bottom:-0.5em !important; } #main .mb10-r { margin-bottom:-1em !important; } #main .mb15-r { margin-bottom:-1.5em !important; } #main .mb20-r { margin-bottom:-2em !important; } #main .mb25-r { margin-bottom:-2.5em !important; } #main .mb30-r { margin-bottom:-3em !important; } /* 左マージンを調節 */ #main .ml00 { margin-left:0em !important; } #main .ml05 { margin-left:0.5em !important; } #main .ml10 { margin-left:1em !important; } #main .ml15 { margin-left:1.5em !important; } #main .ml20 { margin-left:2em !important; } #main .ml25 { margin-left:2.5em !important; } #main .ml30 { margin-left:3em !important; } /* 左からのマージンを調節（吸収） */ #main .ml05-r { margin-left:-0.5em !important; } #main .ml10-r { margin-left:-1em !important; } #main .ml15-r { margin-left:-1.5em !important; } #main .ml20-r { margin-left:-2em !important; } #main .ml25-r { margin-left:-2.5em !important; } #main .ml30-r { margin-left:-3em !important; } /* テキストアライン[横] */ #main .text-center { text-align:center !important; } #main .text-right { text-align:right !important; } /* テキストアライン[縦] */ #main .text-middle { vertical-align:middle !important;} /* テキストアンダーライン */ #main .text-underline { text-decoration:underline !important;} /* 強調 */ #main .text-emphasis { font-weight:bold !important; } /** 2018-05-21 仕様変更対応:#10459 START **/ /* HTMLエリア用css */ html>body>div#htmlArea{ width:962px; /* margin: 2px auto;*/ height:auto; -webkit-appearance: none; /* padding: 10px 10px;*/ } /** 2018-06-07 障害対応:#14615 START **/ @media /** 2018-06-12 障害対応:#14707 START **/ only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { /** 2018-06-12 障害対応:#14707 END **/ html>body>div#htmlArea { width:707px; } } /** 2018-06-07 障害対応:#14615 END **/ /* HTMLエリア用css(ログイン・ログアウト画面用) */ html>body>div#htmlAreaLogin{ width:707px; margin: 2px auto; height:auto; /* padding: 10px 10px;*/ } /** 2018-05-21 仕様変更対応:#10459 END **/ /** 2018-05-21 仕様変更対応:#10507 START **/ /* Javascript無効時メッセージ用css */ p#cmpNoscript{ font-size: 120%; border-style:solid; border-width:1px; border-color:red; width:940px; color:red; height:auto; margin: 2px auto; padding: 10px 10px; text-align: left; line-height: 1.5em; } /** 2018-06-07 仕様変更対応:#14615 START **/ @media /** 2018-06-12 障害対応:#14707 START **/ only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { /** 2018-06-12 障害対応:#14707 END **/ p#cmpNoscript { width:685px; } } /** 2018-06-07 仕様変更対応:#14615 END **/ /* Javascript無効時メッセージ用css(ログイン・ログアウト画面用) */ p#cmpNoscriptLogin{ font-size: 120%; border-style:solid; border-width:1px; border-color:red; width:685px; color:red; height:auto; margin: 2px auto; padding: 10px 10px; text-align: left; line-height: 1.5em; } /** 2018-05-21 仕様変更対応:#10507 END **/ /* ------------------------------------------------------------------- rtoasterエリアに追加するクラス ------------------------------------------------------------------- */ .area-rtoaster-recommend{display:none;} /* ********************************************************************************** 02. グローバルエリア定義 ********************************************************************************** */ /* ------------------------------------------------------------------- コンテナ body要素の直下に、必ず #wrap を配置し、最上位の親要素として使用します。 すべてのDOM要素は、必ず、#wrap の子孫要素として実装します。（script要素のみ除く） #wrap には、コーポレートサイトの領域ごとに、以下のセレクタをつけます。 領域ごとのスタイル定義は、必ず、以下のセレクタによる名前空間の配下に実装します。 .top : コーポレートサイト トップページ .solution : ソリューション・製品 領域 .corporate : お客様サポート、通販（たのめーる）、企業情報、共通領域 ------------------------------------------------------------------- */ #wrap { width:100%; min-width:996px; text-align:left; -webkit-text-size-adjust: none; overflow:hidden; } @media only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { #wrap { min-width:730px; } } @media print { #wrap{ min-width:inherit; } } /* ------------------------------------------------------------------- ヘッダー ------------------------------------------------------------------- */ #header { width:960px; margin:0 auto; } @media only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { #header { width:710px; } } /* ロゴ */ #header #header-logo { float:left; width:185px; padding:13px 5px 0 10px; } @media only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { #header #header-logo { width:155px; } } /* ユーティリティ */ #header #header-utility { float:right; width:760px; } #header #header-utility #header-menu { float:left; width:540px; padding:16px 0 0 0; } @media only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { #header #header-utility { width:540px; } #header #header-utility #header-menu { width:330px; } } #header #header-utility #header-menu ul{ text-align:right; } #header #header-utility #header-menu ul li{ display:inline; list-style: none outside none; font-size:11px; font-size:1.1rem; line-height:1.5; } #header #header-utility #header-menu ul li a{ display:inline-block; margin:0 0 0 20px; padding:0 0 0 12px; background: url(/common-o/img/icon-arrow-r-gray.png) no-repeat 2px 0.45em; color:#333; text-decoration:none; } #header #header-utility #header-menu ul li a:hover { text-decoration:underline; } #header #header-utility #header-menu ul li.link-lang { margin-left:20px; border-left:1px solid #ccc; } *+html #header #header-utility #header-menu ul li.link-lang { margin-left:0; padding-left:20px; } @media only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { #header #header-utility #header-menu { width:370px; } #header #header-utility #header-menu ul li { font-size:10px; font-size:1.0rem; line-height:1.5; } #header #header-utility #header-menu ul li.link-lang { margin:0 2px 0 12px; } #header #header-utility #header-menu ul li a { margin: 0 0 0 10px; padding: 0 0 0 12px; } } /* サイト内検索 */ #header #header-utility #header-search { float: right; padding: 11px 0 0; position: relative; text-align: right; width: 200px;} #header #header-utility #header-search form .text { border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 2px #e5e5e5 inset; height: 16px; margin: 0; padding: 3px 50px 3px 3px; width: 144px;} /* プレースホルダー Webkit ::-webkit-input-placeholder Firefox 19以降 ::-moz-placeholder Firefox 18以前 :-moz-placeholder Windows IE :-ms-input-placeholder*/ #header #header-utility #header-search form .text::-webkit-input-placeholder {color:#c0c0c0;} #header #header-utility #header-search form .text::-moz-placeholder {color:#c0c0c0; opacity: 1;} #header #header-utility #header-search form .text:-moz-placeholder {color:#c0c0c0;} #header #header-utility #header-search form .text:-ms-input-placeholder {color:#c0c0c0;} #header #header-utility #header-search form .submit { border: medium none; border-radius: 0 5px 5px 0; cursor: pointer; height: 24px; position: absolute; right: 0; top: 11px; width: 43px;} * html #header #header-utility #header-search form .submit { top: 12px;} @media only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait), only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) { #header #header-utility #header-search { width:160px; } #header #header-utility #header-search form .text { width: 104px; height: 22px; margin: 0; padding: 0 50px 0 3px; } } /* ------------------------------------------------------------------- グローバルナビゲーション グローバルナビゲーション（ #header-nav ）配下は、要素セレクタへの直接のスタイル指定を避け、クラスセレクタで指定してください。 メガドロップダウンのなかに、画像やテキストを含めた複雑なレイアウトをすることがあり、祖先要素からの ul、li、div、p、span、img、a などへの継承が邪魔になるためです。 サンプルHTML：