@charset "utf-8"; /* ------------------------------------------------------------------- コーポレートサイト全体で共通で読み込むCSS 最終更新：　2025年8月19日 コーポレートサイトのすべてのページから読むことを想定しています。 ■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:#333; 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:0; 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(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug.cat) no-repeat 4px 0.5em; } /* 旧アイコンブランク */ a.icon-blank { display:inline-block; padding-left:16px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-oynax.cat) no-repeat 2px 0.35em; background-size:9px;} /* 旧アイコン外部 */ a.icon-external { display:inline-block; padding-left:16px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-rkgreany.cat) no-repeat 2px 0.4em; } /* アイコン右向き */ a.icons-arrow-r { display:inline-block; padding-left:19px; min-height:16px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpbaf-neebj-evtug.cat) no-repeat 0 0.28em; } /* アイコン右向き[大] */ a.icon-arrow-r-large { display:inline-block; padding-left:20px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug-ynetr-obk.cat) no-repeat 0 0.2em; font-size:16px; font-size:1.6rem; line-height:1.5; } /* アイコンブランク */ a.icons-blank { display:inline-block; padding-left:19px; min-height:16px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpbaf-oynax.cat) no-repeat 0 0.28em; } /* アイコン外部 */ a.icons-external { display:inline-block; padding-left:19px; min-height:16px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpbaf-rkgreany.cat) no-repeat 0 0.28em; } /* アイコン打ち消し */ a.icon-none { display:inline; padding-left:0; background:none; } /* リンクとテキストを縦に並べたとき、テキストの開始位置がそろうようにする */ .icon-none-indent { display:inline-block; padding-left:16px;} /* リンク画像のロールオーバー */ #main a:hover img, #side a:hover img, #main .biggerlink.over img, #main .biggerlink:hover img { opacity:0.7; } /* ------------------------------------------------------------------- p要素 p要素は、コーポレートサイト全体で、以下の仕様で統一します。 ・上マージン 1em ・文字サイズ 1.4rem （ html要素に font-size:62.5%; を指定 ） ・行間 1.7em ------------------------------------------------------------------- */ #main p { margin:1em 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;} /* 注釈 番号付き（注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;} /* 注釈 アスタリスク ＊ */ #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;} /* ------------------------------------------------------------------- メイン領域共通のラベル ------------------------------------------------------------------- */ #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-event-keyword { border-color:#f2a069 !important; background:#ffc989 !important; color:#333 !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 p.label-promo span.label-promo-region { border-color:#99bbcc !important; background:#f5fdff !important; color:#004e80 !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:#3e6fab; } /* 製品・サービス紹介 */ #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, #main .label-common-color-sustainability { 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, #main .label-common-color-society { 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, #main .label-common-color-governance { 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; } /* 読み物・コラム */ #main .label-common-color-covid { border:1px solid #999999; background:#f5f5f5; color:#5c5c5c; } /* コロナ */ /* ------------------------------------------------------------------- スタイル調整セレクタ 以下のセレクタは、原則として、使用しません。 　　緊急時の一時処置にのみ用い、永続的な利用をしてはいけません。 　　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; } /* === cmn0047: 改行処理 === */ #main .text-wordbreak { display:inline-block; word-wrap:break-word !important; word-break:break-all !important; } /* === テキストアンダーライン === */ #main .text-underline { text-decoration:underline !important; } /* === 強調 === */ #main .text-emphasis { font-weight:bold !important; } /* ------------------------------------------------------------------- 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-area-utility { position:relative; overflow:visible; display:table; margin:0 auto; padding:0.8em 0; z-index:103; width:960px; } #header-area-utility:before { display:block; position:absolute; top:0; left:-4520px; left:-50vw; z-index:-1; width:10000px; width:calc(200vw + 960px); min-width:996px; height:100%; content:""; background:#fff; } /* ロゴ 10+154+10=174 */ #header-area-utility #header-logo-ots { display:table-cell; vertical-align:top; width:154px; padding:5px 20px 0 10px; } #header-area-utility #header-logo-ots img { vertical-align:top; } /* ロゴ要素以外入らない場合の処理 */ #header-area-utility #header-logo-ots:last-child{ display:block;} #header-area-utility .home { display:table-cell; width:5em; font-size:11px; font-size:1.1rem; line-height:1em; vertical-align:middle; } #header-area-utility .home a { display:inline-block; padding:2px 0 0 14px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpbaf-ubzr.cat) no-repeat 0 2px; color:#333; } /* メニューリンク 960-(174+199)=587 */ #header-menu-navi { display:table-cell; vertical-align:middle; width:496px; text-align:right; padding-right:20px; } #header-menu-navi ul { display:inline-block; } #header-menu-navi ul li { display:inline-block; margin:0 0 0 18px; list-style:none; font-size:11px; font-size: 1.1rem; line-height:1.5em; } #header-menu-navi ul li:first-child { margin:0; } #header-menu-navi p { display:inline-block; position:relative; font-size:11px; font-size:1.1rem; line-height:1.5em; margin:0 0 0 18px; padding:0 0 0 19px; } #header-menu-navi p:before { display:block; content:""; background:#d0d0d0; width:1px; height:100%; position:absolute; left:-1px; top:0; } #header-menu-navi p:after { display:block; content:""; background:#fff; width:1px; height:100%; position:absolute; left:0; top:0; } #header-menu-navi a { display:inline-block; padding:0 0 0 12px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug.cat) no-repeat 2px 0.35em; color:#333; text-decoration:none; } #header-menu-navi a:hover { text-decoration: underline; } /* 検索ボックス 156+43=199 */ #header-menu-search { display:table-cell; vertical-align:middle; width:260px; } #header-menu-search form { display:table; position:relative; white-space:nowrap; } /* 入力欄 */ #header-menu-search form .text { -webkit-appearance:none; box-sizing:border-box; width:200px; height:2.143em; height:3rem; margin:0; padding:0 5px; border:1px solid #ccc; border-right:0; border-radius:5px 0 0 5px; background-color:#fff; box-shadow:inset 1px 1px 2px rgba(0, 0, 0, 0.2); font-size:14px; font-size:1.4rem; line-height:1.5em; outline:none; } /* プレースホルダー */ #header-menu-search form .text::-webkit-input-placeholder { color:#666; } #header-menu-search form .text::-moz-placeholder { color:#666; opacity:1; } #header-menu-search form .text:-moz-placeholder { color:#666; } #header-menu-search form .text:-ms-input-placeholder { color:#666; } /* 検索ボタン */ #header-menu-search form .submit { box-sizing:border-box; width:60px; height:2.143em; height:3rem; margin:0; padding:0 0 0 1px; border:0; border-radius:0 5px 5px 0; background:#4b4b4b; background: -webkit-linear-gradient(top, #8b8b8b 0%, #525252 50%, #525252 100%); background: linear-gradient(to bottom, #8b8b8b 0%, #525252 50%, #525252 100%); font-size:14px; font-size:1.4rem; line-height:1.5em; color:#fff; letter-spacing:2px; font-weight:bold; cursor:pointer; } /* ユーティリティ　タブレット縦 */ @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-area-utility #header-logo-ots { padding-right:10px; } #header-area-utility .home a { font-size:1rem; } #header-area-utility .home a { background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpbaf-ubzr-gnoyrg.cat); background-size:10px auto; } #header-menu-navi { padding-right:10px; padding-top:2px; } #header-menu-navi ul li { margin-left:0.5em; font-size:1rem; line-height:1.2em; text-align:left; vertical-align:middle; } #header-menu-navi p { margin-left:1em; padding-left:0.5em; font-size:0.9rem; line-height:1.2em; } #header-menu-navi a { padding-left:11px; font-size:1rem; line-height:1.2em; background: transparent url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug.cat) no-repeat 3px 0.15em; } #header-menu-navi a:hover { text-decoration:none; } #header-menu-search { width:126px; } #header-menu-search form .text { width:120px; } #header-menu-search form .submit { width:5.475rem; } } /* ------------------------------------------------------------------- グローバルナビゲーション ------------------------------------------------------------------- */ #header-navi { clear:both; padding:3px 0 0; position:relative; } /* グローバルナビ区画 */ #header-navi-global { clear:both; display:table; position:relative; z-index:104; width:960px; margin:0 auto; padding:0; border-top:none; border-left:1px solid #c26d2d; border-right:1px solid #c5722b; background-color:#f18e43; background:-webkit-linear-gradient(top, #f69f55 0%, #e56314 100%); background:linear-gradient(to bottom, #f69f55 0%, #e56314 100%); } /* before疑似要素でグロナビの背景を作成 */ #header-navi-global:before { display:block; position:absolute; top:-3px; left:-4520px; left:-50vw; z-index:-1; width:10000px; width:calc(200vw + 960px); height:100%; content:" "; border-top:3px solid #773f3f; background-color:#f18e43; background:-webkit-linear-gradient(top, #f69f55 0%, #e56314 100%); background:linear-gradient(to bottom, #f69f55 0%, #e56314 100%); transition:box-shadow 0.4s ease; } #header-navi-global.dropdown-open:before { box-shadow:inset 0 -2px 1px 0 rgba(0, 0, 0, 0.2); } /* 大カテリンクリスト */ #header-navi-global > ul { display:table-cell; position:relative; } #header-navi-global > ul:before { display:block; position:absolute; right:-1px; top:0; width:1px; height:100%; background-color:#c26d2d; content:""; } #header-navi-global > ul > li { display:table-cell; position:relative; width:227px; border-left:1px solid #c26d2d; border-right:1px solid #f2a167; font-size:15px; font-size:1.5rem; line-height:1.2em; font-weight:bold; letter-spacing:1px; word-break:break-all; cursor:pointer; vertical-align:middle; text-align:center; } #header-navi-global > ul > li:first-child { width:102px; letter-spacing:0; } /* お客様マイページ */ #header-navi-global > ul > li:first-child + li + li { letter-spacing:0 !important; } /* グロナビリンクリストの中 */ #header-navi-global > ul > li > a { display:block; padding:7px 5px 6px; text-decoration:none; color:#f9f9f9; text-shadow:-1px -1px 0 rgba(119, 63, 63, 0.75); } .header-kind-single #header-navi-global > ul > li > a { padding-bottom:5px; } #header-navi-global > ul > li:first-child + li + li > a { padding-right:1px; padding-left:9px; } #header-navi-global > ul > li > a::before { content: ""; transition:box-shadow 0.4s ease; } /* グロナビリンクリストの中のマウスオーバー */ #header-navi-global > ul > li:hover { background:#cd2e03; background:rgba(234, 56, 0, 0.6); } /* ★ ★ ★グロナビリンクリスト（カレント処理）★ ★ ★ */ /* box-shadowはiPadでオレンジ色背景色が下にコンマ数px見えてしまう対策 */ #header-navi-global > ul > li.current { border-right-color:transparent; background-color:#fff; box-shadow:0 1px 0 #fff; } #header-navi-global.dropdown-open > ul > li.current { box-shadow:none; } #header-navi-global > ul > li.current > a { color:#a81515; text-shadow:none; } #header-navi-global > ul > li.current > a:hover { text-decoration:underline; } #header-navi-global > ul > li.current > a { color:#a81515; text-shadow:none; } #header-navi-global > ul > li.current > a::after { border-color:#999; } #header-navi-global.dropdown-open > ul > li.current:not(.active) > a::before { display:block; position:absolute; left:0; bottom:0; width:calc(100% + 1px); height:1px; border-top:1px solid #e4e4e4; background-color:#bbb; content:""; box-shadow:0 -1px 1px rgba(0, 0, 0, 0.05); } #header-navi-global > ul > li.active { z-index:1; background-color:#e4e4e4; } #header-navi-global > ul > li.active > a { color:#a81515; text-shadow:none; } #header-navi-global > ul > li.active > a:hover { text-decoration:underline; } /* ★マウスオーバー処理（メガメニュー）★ */ /* 初期消去 */ #header-navi-global > ul > li > div.global-dropdown { display:none; } #header-navi-global > ul > li:hover div.global-dropdown { display:block; } #header-navi-global > ul > li div.global-dropdown { position:absolute; left:0; top:100%; z-index:105; margin:0; padding:4px 0 0; text-align:left; background:rgba(255, 255, 255, 0.01); } #header-navi-global > ul > li div.global-dropdown ul { margin:0; padding:0; border:1px solid #e84d0b; border-radius:5px; background:#fff; box-shadow:0 2px 6px rgba(0, 0, 0, 0.4); position:relative; } /* 三角 */ #header-navi-global > ul > li div.global-dropdown ul:before { content:""; display:block; width:0; height:0; position:absolute; left:23px; top:-9px; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid #e84d0b; } #header-navi-global > ul > li div.global-dropdown ul:after { content:""; display:block; width:0; height:0; position:absolute; left:23px; top:-8px; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid #fff; } #header-navi-global > ul > li div.global-dropdown li { margin:0; padding:0; list-style:none; white-space:nowrap; } #header-navi-global > ul > li div.global-dropdown li a { display:block; padding:0.8em 13px 0.8em 25px; font-size:12px; font-size:1.2rem; line-height:1.5em; font-weight:normal; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug.cat) no-repeat 13px 1.25em; border-top:1px solid #ccc; } #header-navi-global > ul > li div.global-dropdown li a.icon-blank { display:block; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-oynax.cat) no-repeat 11px 1.1em / 9px auto; } #header-navi-global > ul > li div.global-dropdown li:first-child a { border:none; } /* グローバルナビ区画 メニューがない場合 */ #header-navi-border { clear:both; display:table; position:relative; z-index:1001; width:814px; margin:0 auto; padding:0 0 0 144px; border:none; background-color:#f18e43; background:-webkit-linear-gradient(top, #f69f55 0%, #e56314 100%); background:linear-gradient(to bottom, #f69f55 0%, #e56314 100%); } /* before疑似要素でグロナビの背景を作成 */ #header-navi-border:before { display:block; position:absolute; top:-3px; left:-50%; z-index:-1; width:10000px; width:calc(200vw + 960px); height:100%; content:" "; border-top:3px solid #773f3f; background-color:#f18e43; background:-webkit-linear-gradient(top, #f69f55 0%, #e56314 100%); background:linear-gradient(to bottom, #f69f55 0%, #e56314 100%); } #header-navi-border p { display:block; height:2em; cursor:default; border:none; } #header-navi-border p:hover { background:none; } #header-navi-border img{display:none;} /* ローカルナビ区画 */ #header-navi-local { clear:both; position:relative; padding-top:0; background:#fefefe; background: -webkit-linear-gradient(top, #fff 0%, #eee 100%); background: linear-gradient(to bottom, #fff 0%, #eee 100%); } #header-navi-local:before { display:block; position:absolute; top:-3px; left:-50%; z-index:-1; width:10000px; width:calc(200vw + 960px); height:100%; content:" "; border-top:3px solid #773f3f; border-bottom:1px solid #ccc; background:#fefefe; background:-webkit-linear-gradient(top, #fff 0%, #eee 100%); background:linear-gradient(to bottom, #fff 0%, #eee 100%); box-shadow:0 3px 3px -3px rgba(0, 0, 0, 0.2); } #header-navi-local .header-navi-local-inner { display:table; display:-ms-flexbox; display:-webkit-flex; display:flex; position:relative; width:960px; padding-top:3px; } /* ローカルホーム */ #header-navi-local .header-navi-local-inner > p { display:table-cell; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; position:relative; padding:11px 14px 12px; font-size:11px; font-size:1.1rem; line-height:1.5em; text-align:center; vertical-align:middle; word-break:break-all; cursor:pointer; } #header-navi-local .header-navi-local-inner > p.products-home { width:107px; } #header-navi-local .header-navi-local-inner > p.cs-mypage-home { min-width:92px; } #header-navi-local .header-navi-local-inner > p.corp-home { width:52px; } /* ホームの中 */ #header-navi-local .header-navi-local-inner > p a { display:block; text-decoration:none; color:#333; } #header-navi-local .header-navi-local-inner > p a::before, #header-navi-local .header-navi-local-inner > p a::after { display:block; position:absolute; top:1.65em; width:1px; height:1.9em; border-right:1px solid #fff; background-color:#ccc; content:""; } #header-navi-local .header-navi-local-inner > p a::before { left:0; } #header-navi-local .header-navi-local-inner > p a::after { right:-1px; } /* ホームの中のマウスオーバー */ #header-navi-local .header-navi-local-inner > p:hover { background:#a91400; } #header-navi-local .header-navi-local-inner > p:hover a { color:#fff; } #header-navi-local .header-navi-local-inner > p:hover a:before, #header-navi-local .header-navi-local-inner > p:hover a:after { display:none; } /* ホーム - カレント */ #header-navi-local .header-navi-local-inner > p.current, #header-navi-local .header-navi-local-inner > p.current:hover { border-bottom:3px solid #a91400; padding-top:11px; padding-bottom:10px; background:none; } #header-navi-local .header-navi-local-inner > p.current a, #header-navi-local .header-navi-local-inner > p.current a:hover { color:#a91400; font-weight:bold; } #header-navi-local .header-navi-local-inner > p.current:hover a:before, #header-navi-local .header-navi-local-inner > p.current:hover a:after { display:block; } /* ローカルナビ */ #header-navi-local .header-navi-local-inner > ul { display:table-cell; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex:1 1 auto; -ms-flex-positive:1; flex:1 1 auto; position:relative; vertical-align:middle; } #header-navi-local .header-navi-local-inner > ul > li { display:table-cell; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; -webkit-flex:1 1 auto; -ms-flex-positive:1; flex:1 1 auto; position:relative; list-style:none; padding:11px 0; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Surnq-ybpny-aniv-neebj.cat) no-repeat 50% calc(100% - 3px); vertical-align:middle; text-align:center; font-size:14px; font-size:1.4rem; line-height:1.2em; word-break:break-all; cursor:pointer; } #header-navi-local .header-navi-local-inner > p.products-home + ul > li { min-width:100px; padding-top:20px; padding-bottom:20px; } #header-navi-local .header-navi-local-inner > p.cs-mypage-home + ul > li { min-width:139px; } /* ローカルリンクリストの中 */ #header-navi-local .header-navi-local-inner > ul > li > a { display:block; padding:0 8px; text-decoration:none; color:#333; text-shadow:0 0 1px rgba(0, 0, 0, 0.1); } #header-navi-local .header-navi-local-inner > p.products-home + ul > li > a { padding:0 12px; } #header-navi-local .header-navi-local-inner.complete > ul > li > a.icon-otsukaid { background:transparent url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-bgfhxnvq.cat) no-repeat 8px center; } #header-navi-local .header-navi-local-inner > ul > li > a::before { display:block; position:absolute; top:0; right:-1px; bottom:0; width:1px; height:1.5em; margin:auto 0; border-right:1px solid #fff; background:#ccc; content:""; } #header-navi-local .header-navi-local-inner > ul > li > a > br { display:none; } #header-navi-local .header-navi-local-inner > ul > li[class*="cs-mypage-"] > a > br { display:inline; } /* ローカルリンクリストの中のマウスオーバー */ #header-navi-local .header-navi-local-inner > ul > li:hover, #header-navi-local .header-navi-local-inner > ul > li.hover, #header-navi-local .header-navi-local-inner > ul > li.show.hover { background:#a91400; } #header-navi-local .header-navi-local-inner > ul > li:hover > a, #header-navi-local .header-navi-local-inner > ul > li.hover > a, #header-navi-local .header-navi-local-inner > ul > li.show > a { color:#fff; } #header-navi-local .header-navi-local-inner > ul > li:hover > a::before, #header-navi-local .header-navi-local-inner > ul > li.hover > a::before, #header-navi-local .header-navi-local-inner > ul > li.show > a::before { display:none; } /* ローカルリンクリスト - カレント */ #header-navi-local .header-navi-local-inner > ul > li.current { padding-top:12px; padding-bottom:11px; background:transparent; } #header-navi-local .header-navi-local-inner > ul > li.current::before { position:absolute; display:block; right:0; bottom:0; width:100%; height:3px; content:""; background-color:#a91400; } #header-navi-local .header-navi-local-inner > ul > li.current:hover { background:#a91400; } #header-navi-local .header-navi-local-inner > ul > li.current > a { color:#a91400; font-weight:bold; } #header-navi-local .header-navi-local-inner > ul > li.current > a:hover, #header-navi-local .header-navi-local-inner > ul > li.current:hover > a, #header-navi-local .header-navi-local-inner > ul > li.current.hover > a { color:#fff; } /* ローカルナビドロップダウン */ /* 初期 */ #header-navi-local .header-navi-local-inner > ul > li .local-dropdown { position:absolute; top:100%; left:-1px; z-index:10; width:100%; text-align:left; background:#ccc; background:rgba(255, 255, 255, 0.01); cursor:default; display:none; } /* 三角 */ #header-navi-local .header-navi-local-inner > ul > li .local-dropdown::before { display:block; position:absolute; top:-5px; z-index:1; width:10px; height:10px; border-top:1px solid #999; border-left:1px solid #999; background-color:#fff; content:""; -webkit-transform:translate(-50%) rotate(45deg); -ms-transform:translate(-50%) rotate(45deg); transform:translate(-50%) rotate(45deg); } #header-navi-local .header-navi-local-inner > ul > li.show > .local-dropdown { display:block; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown .local-dropdown-inner { display:table; position:relative; margin:0; padding:10px; border:1px solid #999; background:#fff; box-shadow:0 6px 6px -3px #000; } /* ドロップダウンメニューセット */ #header-navi-local .header-navi-local-inner > ul > li .local-dropdown .dropdown-column { display:table-cell; padding-right:10px; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown .dropdown-columns .dropdown-column { min-width:250px; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown .dropdown-column:last-of-type { padding-right:0; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown p.dropdown-column-title { padding:3px 8px 2px; background-color:#656565; font-size:13px; font-size:1.3rem; line-height:1.5em; color:#fff; white-space:normal; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown p.dropdown-column-title:not(:first-child) { margin-top:0.4em; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul + p.dropdown-column-title { margin-top:16px; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul { display:table-cell; margin:0; padding:0; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown p.dropdown-column-title + ul { padding-top:6px; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul + ul { padding-left:10px; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul li { list-style:none; margin:0.5em 0 0 0; padding:0; font-size:13px; font-size:1.3rem; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul li:first-child { margin-top:0; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul li a { display:block; white-space:normal; padding:0 5px 0 16px; margin-top:0; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug.cat) no-repeat 4px 0.45em; line-height:1.4em; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul li a.icon-blank { background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-oynax.cat) no-repeat 2px 0.35em; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown ul li a:hover { background-color:#eee; } /* 最大幅（960px）の折り返し対応 */ #header-navi-local .header-navi-local-inner > ul > li .local-dropdown-outer { position:absolute; top:100%; left:0; z-index:10; width:960px; height:0; margin:0; text-align:left; display:none; cursor:auto; } #header-navi-local .header-navi-local-inner > ul > li:hover .local-dropdown-outer { display:block; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown-outer .local-dropdown { width:auto; display:inline-block; background:#ccc; background:rgba(255, 255, 255, 0.01); } /* 折り返し処理 */ /* ソリューション・製品 */ #header-navi-local .header-navi-local-inner > ul > li.products-01 .local-dropdown-outer { margin-left:-135px; } #header-navi-local .header-navi-local-inner > ul > li.products-02 .local-dropdown-outer { margin-left:-235px; } #header-navi-local .header-navi-local-inner > ul > li.products-03 .local-dropdown-outer { margin-left:-447px; } #header-navi-local .header-navi-local-inner > ul > li.products-04 .local-dropdown-outer { margin-left:-575px; } #header-navi-local .header-navi-local-inner > ul > li.products-05 .local-dropdown-outer { left:auto; right:0; } #header-navi-local .header-navi-local-inner > ul > li.products-01 .local-dropdown-outer .local-dropdown { margin-left:135px; } #header-navi-local .header-navi-local-inner > ul > li.products-02 .local-dropdown-outer .local-dropdown { margin-left:235px; } #header-navi-local .header-navi-local-inner > ul > li.products-03 .local-dropdown-outer .local-dropdown { margin-left:447px; } #header-navi-local .header-navi-local-inner > ul > li.products-04 .local-dropdown-outer .local-dropdown { margin-left:575px; } #header-navi-local .header-navi-local-inner > ul > li.products-05 .local-dropdown-outer .local-dropdown { left:auto; right:0; } #header-navi-local .header-navi-local-inner > ul > li.products-01 .local-dropdown-outer .local-dropdown::before { left:calc(232px / 2); } #header-navi-local .header-navi-local-inner > ul > li.products-02 .local-dropdown-outer .local-dropdown::before { left:calc(148px / 2); } #header-navi-local .header-navi-local-inner > ul > li.products-03 .local-dropdown-outer .local-dropdown::before { left:calc(187px / 2); } #header-navi-local .header-navi-local-inner > ul > li.products-04 .local-dropdown-outer .local-dropdown::before { left:calc(120px / 2); } #header-navi-local .header-navi-local-inner > ul > li.products-05 .local-dropdown-outer .local-dropdown::before { right:calc(148px / 2); -webkit-transform:translate(50%) rotate(45deg); -ms-transform:translate(50%) rotate(45deg); transform:translate(50%) rotate(45deg); } /* お客様マイページ */ #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-01 .local-dropdown-outer { margin-left:-120px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-02 .local-dropdown-outer { margin-left:-256px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-03 .local-dropdown-outer { margin-left:-391px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-04 .local-dropdown-outer { margin-left:-546px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-05 .local-dropdown-outer { margin-left:-687px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-06 .local-dropdown-outer { margin-left:-831px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-01 .local-dropdown-outer .local-dropdown { margin-left:120px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-02 .local-dropdown-outer .local-dropdown { margin-left:256px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-03 .local-dropdown-outer .local-dropdown { margin-left:391px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-04 .local-dropdown-outer .local-dropdown { margin-left:546px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-05 .local-dropdown-outer .local-dropdown { margin-left:687px; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-06 .local-dropdown-outer .local-dropdown { left:auto; right:0; } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-01 .local-dropdown-outer .local-dropdown::before { left:calc(114px / 2); } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-02 .local-dropdown-outer .local-dropdown::before { left:calc(128px / 2); } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-03 .local-dropdown-outer .local-dropdown::before { left:calc(170px / 2); } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-04 .local-dropdown-outer .local-dropdown::before { left:calc(156px / 2); } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-05 .local-dropdown-outer .local-dropdown::before { left:calc(142px / 2); } #header-navi-local .header-navi-local-inner > ul > li.cs-mypage-06 .local-dropdown-outer .local-dropdown::before { right:calc(129px / 2); -webkit-transform:translate(50%) rotate(45deg); -ms-transform:translate(50%) rotate(45deg); transform:translate(50%) rotate(45deg); } /* 企業情報 */ #header-navi-local .header-navi-local-inner > ul > li.corp-01 .local-dropdown-outer { margin-left:-80px; } #header-navi-local .header-navi-local-inner > ul > li.corp-02 .local-dropdown-outer { margin-left:-252px; } #header-navi-local .header-navi-local-inner > ul > li.corp-03 .local-dropdown-outer { margin-left:-367px; } #header-navi-local .header-navi-local-inner > ul > li.corp-04 .local-dropdown-outer { margin-left:-483px; } #header-navi-local .header-navi-local-inner > ul > li.corp-05 .local-dropdown-outer { margin-left:-587px; } #header-navi-local .header-navi-local-inner > ul > li.corp-06 .local-dropdown-outer { margin-left:-829px; } #header-navi-local .header-navi-local-inner > ul > li.corp-01 .local-dropdown-outer .local-dropdown { margin-left:80px; } #header-navi-local .header-navi-local-inner > ul > li.corp-02 .local-dropdown-outer .local-dropdown { margin-left:252px; } #header-navi-local .header-navi-local-inner > ul > li.corp-03 .local-dropdown-outer .local-dropdown { margin-left:367px; } #header-navi-local .header-navi-local-inner > ul > li.corp-04 .local-dropdown-outer .local-dropdown { margin-left:483px; } #header-navi-local .header-navi-local-inner > ul > li.corp-05 .local-dropdown-outer .local-dropdown { margin-left:587px; } #header-navi-local .header-navi-local-inner > ul > li.corp-06 .local-dropdown-outer .local-dropdown { left:auto; right:0; } #header-navi-local .header-navi-local-inner > ul > li.corp-01 .local-dropdown-outer .local-dropdown::before { left:calc(188px / 2); } #header-navi-local .header-navi-local-inner > ul > li.corp-02 .local-dropdown-outer .local-dropdown::before { left:calc(132px / 2); } #header-navi-local .header-navi-local-inner > ul > li.corp-03 .local-dropdown-outer .local-dropdown::before { left:calc(132px / 2); } #header-navi-local .header-navi-local-inner > ul > li.corp-04 .local-dropdown-outer .local-dropdown::before { left:calc(120px / 2); } #header-navi-local .header-navi-local-inner > ul > li.corp-05 .local-dropdown-outer .local-dropdown::before { left:calc(188px / 2); } #header-navi-local .header-navi-local-inner > ul > li.corp-06 .local-dropdown-outer .local-dropdown::before { right:calc(133px / 2); -webkit-transform:translate(50%) rotate(45deg); -ms-transform:translate(50%) rotate(45deg); transform:translate(50%) rotate(45deg); } /* メニュードロップダウン */ @media print { #header-navi-global { box-shadow:none; } /* ホームの中 */ #header-navi-global > p a { text-shadow: 0 0 0 #fff; } #header-navi-global-home a { text-shadow: 0 0 0 #fff; } #header-navi-global > ul { } #header-navi-global > ul > li:first-child + li + li + li { border-right:1px solid #ccc; } #header-navi-global > ul > li:first-child + li + li + li:before { display:none; } #header-navi-global > ul > li > a { text-shadow: 0 0 0 #fff; } #header-navi-global > ul > li.current { border-top:0; } #header-navi-global > ul > li.current:before { display:none; } #header-navi-global > ul > li.current > a:after { display:none; } #header-navi-global > ul > li.current > a { padding:8px 5px 5px 5px; } #header-navi-global > ul > li.current:first-child + li + li > a { padding:8px 1px 5px 9px; } #header-navi-local { padding-top:0; } } /* ----------------------------------------------- SPでのPC表示用 max-device-width:767px タブレット（横）用 min-device-width:768px + max-device-width:960px + orientation:landscape ----------------------------------------------- */ @media only screen and (max-device-width:767px), only screen and (min-device-width:768px) and (max-device-width:960px) and (orientation:landscape) { /* グローバルナビ区画 */ #header-navi-global { width:958px; padding-left:0; } #header-navi-global > ul { display:-webkit-box; display:-webkit-flex; display:flex; } #header-navi-global > ul > li { display:block; } #header-navi-global > ul > li { width:22%; } #header-navi-global > ul > li:first-child { width:12%; } #header-navi-local .header-navi-local-inner > ul > li { padding-bottom:18px; background:none; } #header-navi-local .header-navi-local-inner > ul > li.current { padding-bottom:13px; } #header-navi-local .header-navi-local-inner > ul > li:hover { background:transparent; } } /* ----------------------------------------------- タブレット（縦） ----------------------------------------------- */ @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-area-utility { width:100%; margin:auto; } #header-navi-global { width:708px; padding-left:0; } /* ■大カテリンクリスト■ */ #header-navi-global > ul { display:-webkit-box; display:-webkit-flex; display:flex; } #header-navi-global > ul > li { display:block; -webkit-flex:1 1 auto; flex:1 1 auto; width:150px; font-size:13px; font-size:1.3rem; } #header-navi-global > ul > li:first-child { width:60px; } #header-navi-global > ul > li:not(:first-child) > a::after { display:block; margin:0.2em auto 0; } #header-navi-global > ul > li.active > a::after { -webkit-transform:translate(0, 4px) rotate(45deg); transform:translate(0, 4px) rotate(45deg); } /* ★ ★ ★グロナビリンクリスト（カレント処理）★ ★ ★ */ #header-navi-global > ul > li.current { font-size:1.2rem; } #header-navi-global > ul > li.current a { padding-top:8px; } /* 右のボーダー上書き */ #header-navi-global > ul > li:first-child + li + li + li.current:after { content:""; display:block; position:absolute; left:100%; top:0; width:1px; height:100%; border:none; background:#ccc; box-shadow:none; } /* ドロップダウンメニュー不可 */ #header-navi-global > ul > li > a:focus + div.global-dropdown, #header-navi-global > ul > li:hover div.global-dropdown { display:none; } /* ベースライン調整 */ #header-navi-global > ul > li > a { padding:6px 5px 7px; } /* ★★★灰色区画★★★ */ #header-navi-local {} #header-navi-local .header-navi-local-inner { display:-webkit-box; display:-webkit-flex; display:flex; width:708px; } #header-navi-local .header-navi-local-inner > p:hover a { color:#333; } #header-navi-local .header-navi-local-inner > p.products-home, #header-navi-local .header-navi-local-inner > p.cs-mypage-home, #header-navi-local .header-navi-local-inner > p.corp-home { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; padding-left:7px; padding-right:7px; } #header-navi-local .header-navi-local-inner > p.products-home { width:95px; } #header-navi-local .header-navi-local-inner > p.cs-mypage-home { width:93px; } #header-navi-local .header-navi-local-inner > p a { width:100%; } #header-navi-local .header-navi-local-inner > ul { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex:1 1 auto; flex:1 1 auto; } #header-navi-local .header-navi-local-inner > ul > li { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-flex:1 1 auto; flex:1 1 auto; padding:18px 0 15px; background:none; font-size:1.1rem; } #header-navi-local .header-navi-local-inner > p.products-home + ul > li, #header-navi-local .header-navi-local-inner > p.cs-mypage-home + ul > li, #header-navi-local .header-navi-local-inner > p.corp-home + ul > li { min-width:0; } #header-navi-local .header-navi-local-inner > p.products-home + ul > li { width:20%; min-width:1px; padding-top:12px; padding-bottom:10px; } #header-navi-local .header-navi-local-inner > p.products-home + ul > li > a > br { display:block;} /* カレント */ #header-navi-local .header-navi-local-inner > ul > li.current { padding-top:17px; padding-bottom:12px; } #header-navi-local .header-navi-local-inner > p.cs-mypage-home + ul > li.current[class*="cs-mypage-"] { padding-top:9px; padding-bottom:7px; } #header-navi-local .header-navi-local-inner > ul > li:hover { background:transparent; } #header-navi-local .header-navi-local-inner > ul > li > a { width:100%; padding:0 7px; text-shadow:0 0 1px #ddd; background-position:6px center; } #header-navi-local .header-navi-local-inner > ul > li > a.icon-otsukaid { background:transparent url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-bgfhxnvq.cat) no-repeat 5px center; } /* ホバー */ #header-navi-local .header-navi-local-inner > ul > li:hover > a { color:#333; } /* -- カテゴリ別の幅指定 706 = （P1+1）+n（y+1）-- */ /* ソ製 */ #header-navi-local .header-navi-local-inner > p.products-home + ul > li.products-03, #header-navi-local .header-navi-local-inner > p.corp-home + ul > li.corp-04, #header-navi-local .header-navi-local-inner > p.corp-home + ul > li.corp-05 { min-width:0; } /* ドロップダウンメニュー不可 */ #header-navi-local .header-navi-local-inner > ul > li.over div.local-dropdown, #header-navi-local .header-navi-local-inner > ul > li > a:focus + div.local-dropdown, #header-navi-local .header-navi-local-inner > ul > li:hover div.local-dropdown { display:none; } } @media only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 2/3), only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 4/3), only screen and (max-device-width:959px) and (min-device-height:500px) and (device-aspect-ratio: 3/4), only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 3/5), only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 5/3), only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 8/5), only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 15/9), only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 9/16), only screen and (max-device-width:959px) and (min-device-height:700px) and (device-aspect-ratio: 256/135), only screen and (max-device-width:959px) and (min-device-height:700px) and (min-resolution: 192dpi), only screen and (max-device-width:959px) and (min-device-height:500px) and (resolution: 144dpi), only screen and (min-width:320px) and (device-aspect-ratio: 5/8) and (-webkit-min-device-pixel-ratio:1.3) and (min-resolution: 192dpi), only screen and (min-width:320px) and (device-aspect-ratio: 8/5) and (-webkit-min-device-pixel-ratio:1.3) and (min-resolution: 192dpi), only screen and (min-width:320px) and (device-aspect-ratio: 9/16) and (-webkit-min-device-pixel-ratio:1.3) and (min-resolution: 192dpi), only screen and (min-width:320px) and (device-aspect-ratio: 16/9) and (-webkit-min-device-pixel-ratio:1.3) and (min-resolution: 192dpi), only screen and (device-width:375px) and (device-height:667px) and (-webkit-device-pixel-ratio:2), only screen and (device-width:667px) and (device-height:375px) and (-webkit-device-pixel-ratio:2), only screen and (device-width:568px) and (device-height:320px) and (-webkit-device-pixel-ratio:2), only screen and (device-width:320px) and (device-height:568px) and (-webkit-device-pixel-ratio:2), only screen and (device-width:480px) and (device-height:320px) and (-webkit-device-pixel-ratio:2), only screen and (device-width:320px) and (device-height:480px) and (-webkit-device-pixel-ratio:2) { /* タブレット横　ドロップダウン不可 */ #header-navi-global a, #header-navi-local a { -webkit-tap-highlight-color:rgba(0,0,0,0); } /* ベースライン調整 */ #header-navi-global > ul > li > a { padding:6px 5px 7px; } #header-navi-local .header-navi-local-inner > p:hover, #header-navi-local .header-navi-local-inner > ul > li:hover { background:transparent; } #header-navi-local .header-navi-local-inner > ul > li .local-dropdown { display:none !important; } } /* ------------------------------------------------------------------- パンくずリスト（上） ------------------------------------------------------------------- */ #breadcrumbs-top { clear:both;} #breadcrumbs-top ol{ width:960px; margin:0 auto; padding: 5px 0; } #breadcrumbs-top ol li{ float:left; list-style-type:none; padding: 0 0 0 23px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-oernqpehzof-gbc.cat) no-repeat 0.7em 0.35em; font-size:12px; font-size:1.2rem; line-height:1.5em; white-space:nowrap;} #breadcrumbs-top ol li:first-child { padding-left:0; background:none; } #breadcrumbs-top ol li a { display:inline-block; } @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) { #breadcrumbs-top { width:710px; margin:0 auto;} #breadcrumbs-top ol { width: 610px; margin:0; padding: 10px 0;} #breadcrumbs-top ol li {white-space:normal;} } /* ------------------------------------------------------------------- パンくずリスト（下） ------------------------------------------------------------------- */ #breadcrumbs-bottom{ clear:both; min-width:960px; margin-top:30px; border-top:1px solid #ccc; background-color:#ebe8e7;} #breadcrumbs-bottom ol{ width:960px; margin:0 auto; padding:10px 0;} #breadcrumbs-bottom ol li{ float:left; list-style-type:none; padding: 0 0 0 23px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-oernqpehzof-obggbz.cat) no-repeat 0.7em 0.35em; font-size:12px; font-size:1.2rem; line-height:1.5em; white-space:nowrap;} #breadcrumbs-bottom ol li:first-child { padding-left:0; background:none; } #breadcrumbs-bottom ol li a { display:inline-block; color:#333; } @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) { #breadcrumbs-bottom { min-width:710px; margin: 30px auto 0 auto;} .index + #breadcrumbs-bottom { margin:30px auto 0 auto;} #breadcrumbs-bottom ol { width:710px; margin:0 auto;} } /* ------------------------------------------------------------------- サイト内検索のサジェスト(ヘッダー・ページ内複数あり) ------------------------------------------------------------------- */ .header-suggest-result-container { display: none; position: absolute; z-index: 9999; background-color: #fff; border: #ccc thin solid; font-family: sans-serif;} .header-suggest-result-container .suggest-result { padding: 5px; text-align: left; border-bottom: #ccc 1px solid; cursor: pointer;} .header-suggest-result-container .suggest-result.selected { background-color: #ecf5fa;} .header-suggest-result-container .suggest-result p { color: black; text-decoration: none; font-size: 12px;} .header-suggest-result-container .suggest-result p span { color: #ee9640; font-weight: bold;} .suggest-result-container { display: none; position: absolute; background-color: #fff; border: #CCC thin solid; font-family: sans-serif; z-index: 9999;} .suggest-result-container .suggest-result { padding: 5px; cursor: pointer; text-align: left; border-bottom: #CCC 1px solid;} .suggest-result-container .suggest-result.selected { background-color: #ecf5fa;} .suggest-result-container .suggest-result p { color: black; text-decoration: none; font-size: 12px;} .suggest-result-container .suggest-result p span { color: #ee9640; font-weight: bold;} /* ------------------------------------------------------------------- cmn0048_1: 大塚IDログインによるコンテンツ利用コントロールエレメント ------------------------------------------------------------------- */ #main .boxes-ots-login-content { display:none; position:relative; margin-top:65px; padding:80px 0; background:#f8f8f8; border:1px solid #ccc;} #main .boxes-ots-login-content p { text-align:center;} #main .boxes-ots-login-content .description { margin:0; font-weight:bold; font-size:18px; font-size:1.8rem; line-height:1.5em;} #main .boxes-ots-login-content .message { margin:0; font-weight:bold; font-size:2.4rem; line-height:1.5em;} #main .boxes-ots-login-content .message br { display:none;} #main .boxes-ots-login-content .button { width:305px; margin:1.2em auto 0;} #main .boxes-ots-login-content .button a { display:block; padding:16px 0 13px; border:1px solid #ccc; border-radius:10em; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-ohggba-ybtva-bgfhxnvq.cat) no-repeat 20px center #fffefc; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-ohggba-ybtva-bgfhxnvq.cat) no-repeat 20px center, -webkit-linear-gradient(top, #fffefc 0%, #fdeed1 100%); background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-ohggba-ybtva-bgfhxnvq.cat) no-repeat 20px center, linear-gradient(to bottom, #fffefc 0%, #fdeed1 100%); color:#333; font-size:24px; font-size:2.4rem; font-weight:bold; line-height:1.15em; box-shadow:3px 3px 5px 0 rgba(4, 0, 0, 0.2), 0 0 0 1px #fff inset; text-decoration:none;} #main .boxes-ots-login-content .button a:hover { text-decoration:underline;} #main .boxes-ots-login-content .insert { margin-top:1em;} #main .boxes-ots-login-content .insert a { display:inline-block; padding-left:16px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug.cat) no-repeat 4px 0.5em;} #main .boxes-ots-login-content .insert a.icons-blank { display:inline-block; padding-left:16px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-b%2Svzt%2Svpba-oynax.cat) no-repeat 2px 0.5em; background-size:9px;} /* リニューアルボタン */ #main .boxes-ots-login-content .parts-otsukaid-buttons { display:flex; justify-content:center; margin-top:20px;} #main .boxes-ots-login-content .parts-otsukaid-buttons p:first-child { margin-right:14px;} #main .boxes-ots-login-content .parts-otsukaid-buttons p:last-child { margin-left:14px;} #main .boxes-ots-login-content .parts-otsukaid-buttons .button-login { width:250px; margin-top:0;} #main .boxes-ots-login-content .parts-otsukaid-buttons .button-login a { display:block; padding:17px 0 14px; border:1px solid #e94b31; border-radius:10em; background:linear-gradient(to bottom, #e94b31 0%, #d53519 100%); color:#fff; font-size:2.4rem; font-weight:bold; line-height:1.15em; box-shadow:3px 3px 5px 0 rgba(4, 0, 0, 0.2); text-decoration:none;} #main .boxes-ots-login-content .parts-otsukaid-buttons .button-login a:hover { background:#e94b31;} #main .boxes-ots-login-content .parts-otsukaid-buttons .button-insert { width:250px; margin-top:0;} #main .boxes-ots-login-content .parts-otsukaid-buttons .button-insert a { display:block; padding:17px 0 14px; border:1px solid #e8492f; border-radius:10em; background:linear-gradient(to bottom, #fffefc 0%, #fff4e7 100%); color:#e94b31; font-size:2.4rem; font-weight:bold; line-height:1.15em; box-shadow:3px 3px 5px 0 rgba(4, 0, 0, 0.2); text-decoration:none;} #main .boxes-ots-login-content .parts-otsukaid-buttons .button-insert a:hover { background:#fffefd;} .is-login #main .boxes-ots-login-content::before, .is-login-required #main .boxes-ots-login-content::before { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:#fefefe url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Sybnqvat.tvs) 50% 50% no-repeat; background-size:32px auto; content:""; } .is-login #main-body .boxes-ots-login-content, .is-login-required #main-body .boxes-ots-login-content { display:block; } .is-login #main-body > *:not(.boxes-ots-login-content) { display:none; } .is-login #main-body.logged-in > *:not(.boxes-ots-login-content) { display:block; } .is-login #main-body.logged-in > .boxes-ots-login-content, .is-login-required #main-body.logged-in > .boxes-ots-login-content { display:none; } .is-login #main-body.logged-out > .boxes-ots-login-content::before, .is-login-required #main-body.logged-out > .boxes-ots-login-content::before { content:none; } /* 拡張：続きを読む */ #main .boxes-ots-login-content.more {margin-top:40px;} #main .boxes-ots-login-content.more::after { position:absolute; left:-1px; bottom:calc(100% + 1px + 40px); width:calc(100% + 2px); height:calc((1.4rem * 1.7) * 3); content:""; background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 92%);} /* ------------------------------------------------------------------- ページID ------------------------------------------------------------------- */ #main .page-id { display:inline-block; position:fixed; right:0; bottom:0; z-index:100; margin-top:0; padding:3px 10px; background-color:#008196; color:#fff; line-height:1.4; } /* ------------------------------------------------------------------- フッター ------------------------------------------------------------------- */ #footer { clear:both; width:100%; } /* フッターナビゲーション */ #footer #footer-nav { clear:both; width:100%; } #footer #footer-nav #footer-local-nav-outer { padding-bottom: 20px; background-color:#f5f1ef; border-top: 1px solid #ccc; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav { width:960px; margin:0 auto; padding:0 0 50px 0; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Ssbbgre-ybpny-ani-ot.tvs) no-repeat left bottom #f5f1ef; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box { float:left; margin-top:1.5em; padding: 0 20px 0 12px; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box ul { margin:0.6em 0 20px 0; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box ul li { list-style: none; margin:0.5em 0 0; font-size:12px; font-size:1.2rem; line-height:1.5em; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box a { display:inline-block; padding-left:12px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug-oebja.cat) no-repeat 2px 0.45em; color:#666; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box a.icon-blank { background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-oynax-tenl.cat) no-repeat 0 0.35em;} #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box p { margin:0.6em 0 8px; font-size:14px; font-size:1.4rem; line-height:1.5em; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box p a { margin-left: -12px; font-weight:bold; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box-column3 { width:288px; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box-column4 { width:208px; } /* フッターナビゲーション高さ調整 */ #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box .nav-adjust { margin-top:4.8em; } /* ■■■ToDo: class="nav-box nav-box-column3"みたいな書き方やめる */ #footer #footer-nav #footer-global-nav-outer { background-color:#f0e1de; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav { width:960px; margin:0 auto; padding:5px 0; background-color:#f0e1de; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul { width:969px; margin:0 0 0 -9px; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li { list-style:none; float:left; width: 200px; margin:0 0 0 9px; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li a { display: block; min-height: 1.8em; padding: 0.4em 0 0; background: #f0f0f0; background:-webkit-linear-gradient(top, #fff 0%, #fefefe 55%, #f9f6ef 57%, #f9f7f0 100%); background:linear-gradient(to bottom, #fff 0%, #fefefe 55%, #f9f6ef 57%, #f9f7f0 100%); border: 1px solid #e2cbc0; border-radius: 5px; color:#572626; text-shadow: 0 0 1px #d1c9c0; font-size:14px; font-size:1.4rem; line-height:1.5em; text-decoration: none; text-align: center; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li a:hover, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li a:active, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li a:focus { background: #ffedcf; background:-webkit-linear-gradient(top, #fffcf4 0%, #ffe9ca 55%, #ffe4bf 57%, #ffedcf 100%); background:linear-gradient(to bottom, #fffcf4 0%, #ffe9ca 55%, #ffe4bf 57%, #ffedcf 100%);} #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home { width:122px; overflow: hidden; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a { position: relative; border-radius: 5px 0 0 5px; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a span { display: block; position: relative; padding-right: 0.6em; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:before, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:after, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:before, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:after { position: absolute; right: -1.3em; width: 0; height: 0; border: 1.3em solid transparent; content: " "; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:before, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:after { bottom: 0; margin-bottom: -1px; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:before, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:after { top: -0.4em; margin-top: -1px; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:before, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:before { margin-right: 2px; } /* 三角部分のボーダー幅 */ #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:after, #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:after { margin-right: 0; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:before{ border-bottom-color: #e2cbc0; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home a:after { border-bottom-color: #f0e1de; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:before { border-top-color: #e2cbc0; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home span:after { border-top-color: #f0e1de; } @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) { #footer #footer-nav #footer-local-nav-outer { width:auto; padding:0 0 1em; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav { width:710px; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box-column3 { width:204px; } #footer #footer-nav #footer-local-nav-outer #footer-local-nav .nav-box-column4 { width:145px; } #footer #footer-nav #footer-global-nav-outer { width:auto; padding:0; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav { width:710px; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul { width: auto; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li { width:148px; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li a { font-size:12px; font-size:1.2rem; line-height:1.5em; } #footer #footer-nav #footer-global-nav-outer #footer-global-nav ul li.home { width: 82px; } } /* ユーティリティ */ #footer #footer-utility-outer { background-color:#572626; } #footer #footer-utility-outer #footer-utility { position:relative; width:960px; margin:0 auto; padding:10px 0; background-color:#572626; border-bottom:1px solid #8b6d68; } #footer #footer-utility-outer #footer-utility ul {} #footer #footer-utility-outer #footer-utility ul li { list-style:none; float:left; padding:0 10px 0 0; font-size:12px; font-size:1.2rem; line-height:1.5em; } #footer #footer-utility-outer #footer-utility ul li a { display:inline-block; padding-left:12px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug-juvgr.cat) no-repeat 2px 0.45em; color:#fff; } #footer #footer-utility-outer #footer-utility ul li a.icon-blank { padding-left:15px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-oynax-juvgr.cat) no-repeat 2px 0.35em; } #footer #footer-utility-outer #footer-utility p { position:absolute; bottom:-27px; right:0; font-size:12px; font-size:1.2rem; line-height:1.5em; } #footer #footer-utility-outer #footer-utility p a { display:inline-block; padding-left:12px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpba-neebj-evtug-juvgr.cat) no-repeat 2px 0.45em; color:#fff; } @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) { #footer #footer-utility-outer #footer-utility { width:690px; padding:15px 10px; } #footer #footer-utility-outer #footer-utility p { right:10px; } } /* コピーライト */ #footer #footer-copyright { background-color:#572626; } #footer #footer-copyright p { width:960px; margin:0 auto; padding:10px 0 10px 0; background-color:#572626; text-align:left; color:#fff; font-size:10px; font-size:1.0rem; line-height:1.3em; } @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) { #footer #footer-copyright p { width:690px; padding:10px 10px;} } /* ------------------------------------------------------------------- ページトップ ------------------------------------------------------------------- */ #pagetop { clear:both; position:relative; width:960px; margin:0 auto; z-index:100; } #pagetop a { display:block; position:fixed; bottom:40px; width:44px; height:44px; margin:0 0 0 916px; } #pagetop a.footer-fixed { position:absolute; top:-181px; bottom: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) { #pagetop { width:710px; } #pagetop a { margin:0 0 0 666px; } #pagetop a.footer-fixed { top:-250px; } } @media print { #pagetop { visibility:hidden; } } /* ------------------------------------------------------------------- 「スマホ版を表示」ボタン 以下のコードはPC・スマホで共通です。 修正する場合は、双方にコピー＆ペーストしてください。 ------------------------------------------------------------------- */ #footer #footer-viewmode { display:none; } /* ------------------------------------------------------------------- 解析タグ隙間用 ------------------------------------------------------------------- */ #nodisplay-analysis { position:absolute; left:-100%; top:0; width:1px;height:1px; margin:0; padding:0; border:none; font-size:1px; line-height:1px;} #nodisplay-analysis *{ width:1px; height:1px; margin:0; padding:0; border:none; font-size:1px; line-height:1px;} /* ------------------------------------------------------------------- サプライトップ用調整 ------------------------------------------------------------------- */ .supply #header-navi-local { display:none; } /* ------------------------------------------------------------------- 大塚ID促進ポップアップ ------------------------------------------------------------------- */ .otsukaid-no-registration-popup, .otsukaid-registration-popup { position:absolute; top:6px; right:0; z-index:1002; width:320px; box-sizing:border-box; padding:15px; margin:0 calc((100% - 960px) / 2) 0 0; border:1px solid #cdcdcd; border-radius:10px; background-color:#fafafa; box-shadow:5px 5px 9px rgba(0, 0, 0, 0.5); text-align:left; opacity:0; transition:opacity 1s; } .otsukaid-no-registration-popup { width:410px; } .otsukaid-registration-popup { width:380px; } .otsukaid-no-registration-popup.init, .otsukaid-registration-popup.init { z-index:-1; } @media screen and (max-width:960px) { .otsukaid-no-registration-popup, .otsukaid-registration-popup { margin-right:18px; } } @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) { .otsukaid-no-registration-popup, .otsukaid-registration-popup { margin-right:29px; } } .otsukaid-no-registration-popup::before, .otsukaid-registration-popup::before, .otsukaid-no-registration-popup::after, .otsukaid-registration-popup::after { position:absolute; right:158px; border-width:0 8px 12px; border-style:solid; border-color:transparent; content:""; } .otsukaid-no-registration-popup::before, .otsukaid-registration-popup::before { top:-10px; z-index:2; border-bottom-color:#fafafa; } .otsukaid-no-registration-popup::after, .otsukaid-registration-popup::after { top:-12px; z-index:1; border-bottom-color:#cdcdcd; } .otsukaid-no-registration-popup::before, .otsukaid-no-registration-popup::after { right:158px; } .otsukaid-registration-popup::before, .otsukaid-registration-popup::after { right:44px; } .otsukaid-view-show .otsukaid-no-registration-popup, .otsukaid-view-show .otsukaid-registration-popup { top:5px; } .otsukaid-view-show .otsukaid-no-registration-popup[aria-hidden="false"], .otsukaid-view-show .otsukaid-registration-popup[aria-hidden="false"] { opacity:1; transition:opacity 1s 0.4s; } /* タイトル */ .otsukaid-no-registration-popup .title, .otsukaid-registration-popup .title { font-size:16px; font-size:1.6rem; font-weight:bold; } /* テキスト */ .otsukaid-no-registration-popup .text, .otsukaid-registration-popup .text { margin:0.6em 0 0; font-size:12px; font-size:1.2rem; line-height:1.6em; } /* ポイント */ .otsukaid-no-registration-popup .point, .otsukaid-registration-popup .point { margin:0.5em 0 0; font-size:14px; font-size:1.4rem; line-height:1.6em; } .otsukaid-no-registration-popup .point li, .otsukaid-registration-popup .point li { list-style:none; padding:0 0 0 15px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Spff%2S%89CAT%0Q%0N%1N%0N%00%00%00%0QVUQE%00%00%00%0N%00%00%00%0P%08%06%00%00%00%5Ox%2P%N0%00%00%00%19gRKgFbsgjner%00Nqbor%20VzntrErnqld%P9r%3P%00%00%00%R5VQNGk%QN%84%90%NS%PN%83%60%14%P6_%26%1N%0Q.u5k%0O%82%06%8O%P5%60%S1%124M%2P%RR%1R%26o3%09%9N%05%QO%NNr%P1%N4%18%Q5%O2%SO%Q8K%S0%Q9%QR%O1%P1%3R%OS%O9%1Q8%07%PR%R1j%9R%S3%87%00%20%OS%OPv%9N%P3J%N0%NR%RO%93%24V%O0%2Px%1Q%9N%N6v%RO8%0R%14RNHH%R7H0%PO%O2%99%R7l%04N%00%9N%7S%84%SN%OR%QSv%9N%06%P300%8R%R3i%15Y%Q3%14G-%8Rp%OPw%8S%90%R7%S9%QP%O6%RQ%SR%5Q%PQ4Z%OP7%93%N2%28s%96r%1S%97%Q1OL%96JD%14%11R%Q1_%90%86%24V%P00%0Py%QO%86%RS%SO%Q0h%1Q%P30%28%SS%40%RN%NR%RO%82%R38%08%82%800%0P%O1%QP%7OP%9R%R6l%QRD%96re%1SXGH%OQ%90%N5-%3O%OO%NR%QO%7S%SN%P4Z%80%01%00%14%5O%2O%7Ow%RQw%8N%00%00%00%00VRAQ%NRO%60%82) 0 calc(((1.4rem * 1.6) - 12px) / 2) no-repeat; } /* 閉じるボタン */ .otsukaid-no-registration-popup .close, .otsukaid-registration-popup .close { position:absolute; top:4px; right:4px; width:20px; height:20px; border:none; border-radius:50%; background:#999 url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Spff%2S%89CAT%0Q%0N%1N%0N%00%00%00%0QVUQE%00%00%00%0R%00%00%00%0R%08%06%00%00%00%1SU-%Q1%00%00%00%19gRKgFbsgjner%00Nqbor%20VzntrErnqld%P9r%3P%00%00%00%N6VQNGk%QNo%S8%SS%SS%3S%03%107%02%O1%3Q%94%8Q%0S3%03%S14%20I%07d%9P%SRP%P07%02%9NN%9NIP%Q5%9R%84%09I%20v%O6%P1%N1v%05G%PQP%20%96P%96%P4%N5%19P%13U%1P%QQqg%PQ%R8%9N%14nw%O1%S9%N5%1NV%S3iy%9NcvQ%Q6%8PH%13%0831%60%02s%20%Q6R%R2%8O%02%O14%86%2N%2P%N1%O7%14w%Q3%13%20%RR%85%O2%3S%N3%876%3RZ0%R7%Q5n%Q3YU%13%03.%PQ%P4u%P2%NN%99%01w%P2%1S%N8%26%15%02v%15%N6l%17Y%20%84%08Z0%9P%00%P4%3P%00%01%06%00OhM%10%RO%P1%07%NN%00%00%00%00VRAQ%NRO%60%82) 50% 50% no-repeat; background-size:12px auto; cursor:pointer; } .otsukaid-no-registration-popup .close:hover, .otsukaid-registration-popup .close:hover { background-color:#aaa; } /* ------------------------------------------------------------------- モーダルウィンドウ誘導エレメント ------------------------------------------------------------------- */ .modal-induction { position:fixed; top:50%; left:0; right:0; z-index:1002; box-sizing:border-box; width:600px; margin:0 auto; padding:40px; border:2px solid #ccc; border-radius:10px; background:#fff; text-align:center; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.3); -ms-transform:translate(0, -50%); transform:translate(0, -50%); transition:opacity 0.8s linear, transform 0.8s; } .modal-induction.simple { padding-top:80px; padding-bottom:80px; } .modal-induction[aria-hidden="true"]:not(.wait):not(.animate) { display:none; } .modal-induction[aria-hidden="true"].wait { opacity:1; } .modal-induction[aria-hidden="true"].animate { opacity:0; -ms-transform:translate(0, -60%); transform:translate(0, -60%); } .modal-induction[aria-hidden="false"]:not(.wait):not(.animate) { opacity:1; } .modal-induction[aria-hidden="false"].wait:not(.close) { opacity:0; -ms-transform:translate(0, -60%); transform:translate(0, -60%); } .modal-induction[aria-hidden="false"].animate:not(.wait) { opacity:1; } /* ヘッダー */ .modal-induction .header {} .modal-induction .header .title { font-size:22px; font-size:2.2rem; line-height:1.4em; font-weight:bold; } .modal-induction.simple .header .title { font-size:21px; font-size:2.1rem; } /* 閉じるボタン */ .modal-induction .header .close { position:absolute; top:12px; right:12px; width:34px; height:34px; border:none; border-radius:50%; background:#919191; cursor:pointer; box-shadow:2px 2px 5px rgba(0, 0, 0, 0.2); transition:top 0.3s, right 0.3s, background-color 0.3s, box-shadow 0.3s; } .modal-induction .header .close::before, .modal-induction .header .close::after { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:#fff; content:""; -ms-transform:rotate(45deg); transform:rotate(45deg); } .modal-induction .header .close::before { width:20px; height:4px; } .modal-induction .header .close::after { width:4px; height:20px; } .modal-induction .header .close:hover { background-color:#aaa; } .modal-induction .header .close:active { top:13px; right:11px; box-shadow:1px 1px 3px rgba(0, 0, 0, 0.3); } /* コンテンツ */ .modal-induction .content { margin:1em 0 0; } /* 画像 */ .modal-induction .content .pic {} .modal-induction .content .pic img { vertical-align:top; } /* 文章 */ .modal-induction .content .text { margin:0.6em 0 0; font-size:14px; font-size:1.4rem; line-height:1.4em; } /* リンク */ .modal-induction .content .link { margin:2em 0 0; } .modal-induction .content .link a { font-size:18px; font-size:1.8rem; line-height:1.4em; } /* ボタン */ .modal-induction .content .button { margin:2em 0 0; text-align:center; } .modal-induction .content .button a { display:inline-block; position:relative; padding:14px 40px 14px 60px; border:1px solid #ccc; border-radius:2em; background:#fff; background:-webkit-linear-gradient(top, #fff 0%, #fff 50%, #eee 100%); background:linear-gradient(to bottom, #fff 0%, #fff 50%, #eee 100%); font-size:20px; font-size:2rem; line-height:1.4em; color:#333; box-shadow:2px 2px 5px rgba(0, 0, 0, 0.1); } .modal-induction .content .button a::before { position:absolute; top:0; left:20px; bottom:0; width:13px; height:13px; margin:auto 0; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.bgfhxn-fubxnv.pb.wc%2Spbzzba-f%2Svzt%2Svpbaf-onaare.cat) 0 -45px no-repeat; content:""; } /* ------------------------------------------------------------------- 少しお勧めのフローティング要素（AT連携） ------------------------------------------------------------------- */ .little-recommended-floating { display:none; position:fixed; bottom:calc(40px + 44px + 20px); /* #pagetopの位置 + 高さ + 余白 */ right:40px; z-index:101; width:214px; padding:0 14px 20px; border-radius:5px; box-sizing:border-box; background:#fff; box-shadow:5px 5px 12px -4px rgba(0, 0, 0, 0.5); } /* ラベル */ .little-recommended-floating .label { margin:0 -14px; padding:5px 8px; background-color:#dff7fb; font-size:14px; font-size:1.4rem; line-height:1.5em; text-align:center; color:#126f7d; } /* 画像 */ .little-recommended-floating .pic { position:relative; margin:0 -14px; } .little-recommended-floating .pic img { vertical-align:top; } /* タイトル */ .little-recommended-floating .title { margin:16px 0 0; font-size:16px; font-size:1.6rem; line-height:1.5em; font-weight:bold; } /* 登録・大塚IDとはボタン */ .little-recommended-floating .buttons { margin:12px 0 0; font-size:14px; font-size:1.4rem; line-height:1.5em; } .little-recommended-floating .buttons a { display:block; padding:12px 8px; border-radius:4px; box-sizing:border-box; text-align:center; white-space:nowrap; box-shadow:6px 6px 8px -2px rgba(0, 0, 0, 0.2); } .little-recommended-floating .buttons a:nth-child(n+2) { margin-top:10px; } .little-recommended-floating .buttons .green-button { background-color:#477127; font-weight:bold; color:#fff; } .little-recommended-floating .buttons .green-button:hover { background-color:#5f9139; } .little-recommended-floating .buttons .white-button { background-color:#fff; color:#333; } /* 閉じるボタン */ .little-recommended-floating .close { position:absolute; top:-8px; right:-8px; width:28px; height:28px; padding:0; border:none; border-radius:50%; background-color:#bbb; cursor:pointer; } .little-recommended-floating .close::-moz-focus-inner { padding:0; border:0; } .little-recommended-floating .close::before, .little-recommended-floating .close::after { position:absolute;top:0; left:0; right:0; bottom:0; width:18px; height:2px; margin:auto; background-color:#fff; content:""; } .little-recommended-floating .close::before { -ms-transform:rotate(45deg); transform:rotate(45deg); } .little-recommended-floating .close::after { -ms-transform:rotate(-45deg); transform:rotate(-45deg); } .little-recommended-floating .close:hover { background-color:#ccc; }