@layer vendor, tokens, base, layout, components, content, utilities, motion; /* * 新しい外観の入口（#8・#13、docs/spec/visual-design.md §2.2・§2.4）。Site.astro が import し、ビルドが @import 先とともに * 1 つのハッシュつきファイル（/_astro/）にまとめる。全ページの はそれと fonts.css（別のハッシュつきファイル）だけを読む。 * * 層の優先順位はこのファイルだけが持つ（下ほど優先）。詳細度や !important で競り合わない。 * vendor 第三者のプラグイン CSS（ファイル自体は変えない）。アイコンは Font Awesome を読み込まず、components/icon.css が描く * tokens 見た目の値 * base 要素の既定 * layout ページの枠（中身の幅、ヘッダー、フッター、ページの先頭へ戻るボタン、下層ページの本文の枠・ページ名の帯・パンくず・グリッド） * components 繰り返し使う部品とその状態（部品ごとに 1 ファイル） * content 下層ページの現行 HTML への適合（インラインの指定の正規化、現行の図、現行の見出しクラス） * utilities 現行の補助クラス（mt10・taC・w40 など） * motion 動き（動く前の状態と遷移だけ） * * @import はこのファイルからの相対パス（ビルドが読む）。第三者 CSS は public/ の現行ファイルをそのまま取り込む。 * url() はルートからの絶対パスにする（public/ のファイルを指し、ビルドはそのまま残す）。 */ /* vendor：タブ（Regular Labs Tabs）、フォーム（RSForm Pro）。 スマホメニュー（mod_jf_mobilemenu）は Drawer.astro に置き換えたため取り込まない。flexslider.css は取り込まない */ @layer vendor{ .rl_tabs .nav-tabs:after,.rl_tabs .tab-content>.tab-pane:after,.rl_tabs-responsive:after,.rl_tabs:after{clear:both}.rl_tabs .fade{opacity:0;-webkit-transition:opacity 1ms linear;-moz-transition:opacity 1ms linear;-o-transition:opacity 1ms linear;transition:opacity 1ms linear}.rl_tabs .fade.in{opacity:1}.rl_tabs.has_effects .fade{-webkit-transition:opacity .15s linear;-moz-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.rl_tabs .collapse{position:relative;height:0;overflow:hidden;-webkit-transition:height 1ms ease;-moz-transition:height 1ms ease;-o-transition:height 1ms ease;transition:height 1ms ease}.rl_tabs .collapse.in{height:auto}.rl_tabs.has_effects .collapse{-webkit-transition:height .35s ease;-moz-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}.rl_tabs>.nav{padding:0;margin-left:0;margin-bottom:18px;list-style:none}.rl_tabs>.nav>li>a{display:block}.rl_tabs>.nav>li>a:hover{text-decoration:none;background-color:#eee}.rl_tabs>.nav>.pull-right{float:right}.rl_tabs .nav-tabs{*zoom:1;border-bottom:1px solid #ddd}.rl_tabs .nav-tabs:after,.rl_tabs .nav-tabs:before{display:table;content:"";line-height:0}.rl_tabs .nav-tabs>li{float:left;margin-bottom:-1px}.rl_tabs .nav-tabs>li>a{margin-right:2px;padding:8px 12px;line-height:18px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.rl_tabs .nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.rl_tabs .nav-tabs>li.active>a,.rl_tabs .nav-tabs>li.active>a:hover{color:#555;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default}.rl_tabs .tab-content{overflow:visible}.rl_tabs .tab-content>.tab-pane{*zoom:1;display:none}.rl_tabs .tab-content>.tab-pane:after,.rl_tabs .tab-content>.tab-pane:before{display:table;content:"";line-height:0}.rl_tabs .tab-content>.active{display:block}.rl_tabs-responsive>.rl_tabs-sm{border-bottom:0}.rl_tabs-responsive>.rl_tabs-sm>li{float:none}.rl_tabs-responsive>.rl_tabs-sm>li>a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.rl_tabs-responsive>.rl_tabs-sm>li>a:focus,.rl_tabs-responsive>.rl_tabs-sm>li>a:hover{border-color:#ddd;z-index:2}.rl_tabs-responsive>.rl_tabs-sm>li:first-child>a{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px}.rl_tabs-responsive>.rl_tabs-sm>li:last-child>a{-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px}span.rl_tabs-title-inactive{display:inherit}span.rl_tabs-title-active{display:none}.rl_tabs,.rl_tabs-responsive{*zoom:1;margin-bottom:1em}.rl_tabs-responsive:after,.rl_tabs-responsive:before,.rl_tabs:after,.rl_tabs:before{display:table;content:"";line-height:0}.rl_tabs-responsive:last-child,.rl_tabs:last-child{margin-bottom:0}.rl_tabs>ul.nav-tabs>li{margin:0 0 -1px!important;padding:0!important;list-style:none!important;background:0 0!important;overflow-y:visible!important}.rl_tabs>ul.nav-tabs>li:before{content:"";margin:0;padding:0}.rl_tabs>ul.nav-tabs>li>a{display:block!important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;color:#3071a9;text-decoration:none;line-height:inherit}.rl_tabs>ul.nav-tabs>li>a:hover{color:#1f496e;text-decoration:none}.rl_tabs>ul.nav-tabs>li.active>a:focus,.rl_tabs>ul.nav-tabs>li>a:focus{outline:0;border-color:#eab03f}.rl_tabs>ul.nav-tabs>li.active span.rl_tabs-title-inactive{display:none}.rl_tabs>ul.nav-tabs>li.active span.rl_tabs-title-active{display:inherit}.rl_tabs>.tab-content{padding:0}.rl_tabs>.tab-content>.tab-pane{padding:12px 0;overflow-x:auto;overflow-y:hidden}.rl_tabs>.tab-content>.tab-pane>:first-child{margin-top:0}.rl_tabs>.tab-content>.tab-pane>:last-child{margin-bottom:0}.rl_tabs>.tab-content>.tab-pane .rl_tabs-title{display:none}.rl_tabs .rl_tabs-scroll,.rl_tabs .rl_tabs-sm-scroll{position:relative;visibility:hidden;padding:0}.rl_tabs.outline_content>.tab-content{border:1px solid #ddd;border-top:none;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs.outline_content>.tab-content>.tab-pane{padding:12px}.rl_tabs.outline_content>ul.nav-tabs{margin-bottom:0}.rl_tabs.outline_handles ul.nav-tabs>li a,.rl_tabs.outline_handles ul.nav-tabs>li a:hover{border:1px solid #ddd}.rl_tabs.color_inactive_handles>ul.nav>li>a{background-color:#f5f5f5;margin-right:5px}.rl_tabs.color_inactive_handles>ul.nav>li>a:hover{background-color:#eee}.rl_tabs.color_inactive_handles>ul.nav>li.active>a,.rl_tabs.color_inactive_handles>ul.nav>li.active>a:hover{background-color:#fff}.rl_tabs.align_right>ul.nav-tabs>li{float:right}.rl_tabs.align_right>ul.nav-tabs>li>a{margin-left:2px;margin-right:0}.rl_tabs.align_center>ul.nav-tabs{text-align:center}.rl_tabs.align_center>ul.nav-tabs>li{float:none;display:inline-block;*display:inline;*zoom:1;margin-left:-1px;margin-right:-3px}.rl_tabs.align_justify>ul.nav-tabs{text-align:center;display:table;width:100%;margin-bottom:-1px}.rl_tabs.align_justify>ul.nav-tabs>.rl_tabs-scroll{display:table-cell}.rl_tabs.align_justify>ul.nav-tabs>li{float:none;display:table-cell}.rl_tabs.align_justify>ul.nav-tabs:after,.rl_tabs.align_justify>ul.nav-tabs:before,ul.rl_tabs-sm{display:none}.rl_tabs.align_justify>ul.nav-tabs>li:last-child>a{margin-right:0}.rl_tabs.align_justify>ul.nav-tabs>li a,.rl_tabs.align_justify>ul.nav-tabs>li a:hover{margin-bottom:-1px;border-bottom:1px solid transparent}.rl_tabs.align_justify.bottom>ul.nav-tabs{margin-bottom:0;margin-top:-1px}.rl_tabs.align_justify.bottom>ul.nav-tabs>li a,.rl_tabs.align_justify.bottom>ul.nav-tabs>li a:hover{margin-bottom:0;margin-top:-1px;border-bottom:1px solid #ddd;border-top:1px solid transparent}.rl_tabs.top>ul.nav-tabs>li>a{border-bottom-color:#ddd}.rl_tabs.top>ul.nav-tabs>li.active>a:focus,.rl_tabs.top>ul.nav-tabs>li>a:focus{border-bottom-color:transparent;-webkit-box-shadow:0 -2px 2px rgba(234,176,63,.5);-moz-box-shadow:0 -2px 2px rgba(234,176,63,.5);box-shadow:0 -2px 2px rgba(234,176,63,.5)}.rl_tabs.top>ul.nav-tabs>li.active a,.rl_tabs.top>ul.nav-tabs>li.active a:hover{border-bottom-color:transparent}.rl_tabs.top>ul.nav-tabs>li.blue>a,.rl_tabs.top>ul.nav-tabs>li.blue>a:hover{border-top:5px solid #74b4e8;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.blue.active>a,.rl_tabs.top>ul.nav-tabs>li.blue>a:hover{border-top-color:#2384d3}.rl_tabs.top>ul.nav-tabs>li.primary>a,.rl_tabs.top>ul.nav-tabs>li.primary>a:hover{border-top:5px solid #74b4e8;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.primary.active>a,.rl_tabs.top>ul.nav-tabs>li.primary>a:hover{border-top-color:#2384d3}.rl_tabs.top>ul.nav-tabs>li.info>a,.rl_tabs.top>ul.nav-tabs>li.info>a:hover{border-top:5px solid #47b0cf;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.info.active>a,.rl_tabs.top>ul.nav-tabs>li.info>a:hover{border-top-color:#24748c}.rl_tabs.top>ul.nav-tabs>li.green>a,.rl_tabs.top>ul.nav-tabs>li.green>a:hover{border-top:5px solid #62bc62;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.green.active>a,.rl_tabs.top>ul.nav-tabs>li.green>a:hover{border-top-color:#378137}.rl_tabs.top>ul.nav-tabs>li.success>a,.rl_tabs.top>ul.nav-tabs>li.success>a:hover{border-top:5px solid #62bc62;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.success.active>a,.rl_tabs.top>ul.nav-tabs>li.success>a:hover{border-top-color:#378137}.rl_tabs.top>ul.nav-tabs>li.orange>a,.rl_tabs.top>ul.nav-tabs>li.orange>a:hover{border-top:5px solid #faa937;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.orange.active>a,.rl_tabs.top>ul.nav-tabs>li.orange>a:hover{border-top-color:#c67605}.rl_tabs.top>ul.nav-tabs>li.warning>a,.rl_tabs.top>ul.nav-tabs>li.warning>a:hover{border-top:5px solid #faa937;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.warning.active>a,.rl_tabs.top>ul.nav-tabs>li.warning>a:hover{border-top-color:#c67605}.rl_tabs.top>ul.nav-tabs>li.red>a,.rl_tabs.top>ul.nav-tabs>li.red>a:hover{border-top:5px solid #d3534c;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.red.active>a,.rl_tabs.top>ul.nav-tabs>li.red>a:hover{border-top-color:#942a25}.rl_tabs.top>ul.nav-tabs>li.danger>a,.rl_tabs.top>ul.nav-tabs>li.danger>a:hover{border-top:5px solid #d3534c;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.danger.active>a,.rl_tabs.top>ul.nav-tabs>li.danger>a:hover{border-top-color:#942a25}.rl_tabs.top>ul.nav-tabs>li.error>a,.rl_tabs.top>ul.nav-tabs>li.error>a:hover{border-top:5px solid #d3534c;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.error.active>a,.rl_tabs.top>ul.nav-tabs>li.error>a:hover{border-top-color:#942a25}.rl_tabs.top>ul.nav-tabs>li.grey>a,.rl_tabs.top>ul.nav-tabs>li.grey>a:hover{border-top:5px solid #b3b3b3;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.grey.active>a,.rl_tabs.top>ul.nav-tabs>li.grey>a:hover{border-top-color:grey}.rl_tabs.top>ul.nav-tabs>li.gray>a,.rl_tabs.top>ul.nav-tabs>li.gray>a:hover{border-top:5px solid #b3b3b3;padding-top:4px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.rl_tabs.top>ul.nav-tabs>li.gray.active>a,.rl_tabs.top>ul.nav-tabs>li.gray>a:hover{border-top-color:grey}.rl_tabs.bottom>.nav-tabs{border-bottom:0;margin-bottom:18px!important;border-top:1px solid #ddd}.rl_tabs.bottom>.nav-tabs>li{margin-top:-1px!important;margin-bottom:0!important}.rl_tabs.bottom>.nav-tabs>li>a{border-top-color:#ddd;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs.bottom>.nav-tabs>li>a:hover{border-color:#ddd transparent transparent}.rl_tabs.bottom>.nav-tabs>li.active>a,.rl_tabs.bottom>.nav-tabs>li.active>a:hover{border-color:transparent #ddd #ddd}.rl_tabs.bottom>.nav-tabs>li.active>a:focus,.rl_tabs.bottom>.nav-tabs>li>a:focus{border-top-color:transparent;-webkit-box-shadow:0 2px 2px rgba(234,176,63,.5);-moz-box-shadow:0 2px 2px rgba(234,176,63,.5);box-shadow:0 2px 2px rgba(234,176,63,.5)}.rl_tabs.bottom>.nav-tabs>li.blue>a,.rl_tabs.bottom>.nav-tabs>li.blue>a:hover{border-bottom:5px solid #74b4e8;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.blue.active>a,.rl_tabs.bottom>.nav-tabs>li.blue>a:hover{border-bottom-color:#2384d3}.rl_tabs.bottom>.nav-tabs>li.primary>a,.rl_tabs.bottom>.nav-tabs>li.primary>a:hover{border-bottom:5px solid #74b4e8;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.primary.active>a,.rl_tabs.bottom>.nav-tabs>li.primary>a:hover{border-bottom-color:#2384d3}.rl_tabs.bottom>.nav-tabs>li.info>a,.rl_tabs.bottom>.nav-tabs>li.info>a:hover{border-bottom:5px solid #47b0cf;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.info.active>a,.rl_tabs.bottom>.nav-tabs>li.info>a:hover{border-bottom-color:#24748c}.rl_tabs.bottom>.nav-tabs>li.green>a,.rl_tabs.bottom>.nav-tabs>li.green>a:hover{border-bottom:5px solid #62bc62;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.green.active>a,.rl_tabs.bottom>.nav-tabs>li.green>a:hover{border-bottom-color:#378137}.rl_tabs.bottom>.nav-tabs>li.success>a,.rl_tabs.bottom>.nav-tabs>li.success>a:hover{border-bottom:5px solid #62bc62;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.success.active>a,.rl_tabs.bottom>.nav-tabs>li.success>a:hover{border-bottom-color:#378137}.rl_tabs.bottom>.nav-tabs>li.orange>a,.rl_tabs.bottom>.nav-tabs>li.orange>a:hover{border-bottom:5px solid #faa937;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.orange.active>a,.rl_tabs.bottom>.nav-tabs>li.orange>a:hover{border-bottom-color:#c67605}.rl_tabs.bottom>.nav-tabs>li.warning>a,.rl_tabs.bottom>.nav-tabs>li.warning>a:hover{border-bottom:5px solid #faa937;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.warning.active>a,.rl_tabs.bottom>.nav-tabs>li.warning>a:hover{border-bottom-color:#c67605}.rl_tabs.bottom>.nav-tabs>li.red>a,.rl_tabs.bottom>.nav-tabs>li.red>a:hover{border-bottom:5px solid #d3534c;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.red.active>a,.rl_tabs.bottom>.nav-tabs>li.red>a:hover{border-bottom-color:#942a25}.rl_tabs.bottom>.nav-tabs>li.danger>a,.rl_tabs.bottom>.nav-tabs>li.danger>a:hover{border-bottom:5px solid #d3534c;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.danger.active>a,.rl_tabs.bottom>.nav-tabs>li.danger>a:hover{border-bottom-color:#942a25}.rl_tabs.bottom>.nav-tabs>li.error>a,.rl_tabs.bottom>.nav-tabs>li.error>a:hover{border-bottom:5px solid #d3534c;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.error.active>a,.rl_tabs.bottom>.nav-tabs>li.error>a:hover{border-bottom-color:#942a25}.rl_tabs.bottom>.nav-tabs>li.grey>a,.rl_tabs.bottom>.nav-tabs>li.grey>a:hover{border-bottom:5px solid #b3b3b3;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.grey.active>a,.rl_tabs.bottom>.nav-tabs>li.grey>a:hover{border-bottom-color:grey}.rl_tabs.bottom>.nav-tabs>li.gray>a,.rl_tabs.bottom>.nav-tabs>li.gray>a:hover{border-bottom:5px solid #b3b3b3;padding-bottom:4px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.rl_tabs.bottom>.nav-tabs>li.gray.active>a,.rl_tabs.bottom>.nav-tabs>li.gray>a:hover{border-bottom-color:grey}.rl_tabs.bottom.outline_content>.tab-content{margin:0;border:1px solid #ddd;border-bottom:none;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.rl_tabs.left>.nav-tabs,.rl_tabs.right>.nav-tabs{border-bottom:0;margin-bottom:18px!important}.rl_tabs.left>.nav-tabs>li,.rl_tabs.right>.nav-tabs>li{float:none}.rl_tabs.left>.nav-tabs>li>a,.rl_tabs.right>.nav-tabs>li>a{min-width:74px;margin-right:0!important;margin-bottom:3px}.rl_tabs.left.outline_content>.tab-content,.rl_tabs.right.outline_content>.tab-content{border:1px solid #ddd}.rl_tabs.left>.nav-tabs{float:left;margin-right:19px;border-right:1px solid #ddd}.rl_tabs.left>.nav-tabs>li{margin-right:-1px!important;margin-bottom:0!important}.rl_tabs.left>.nav-tabs>li>a{-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.rl_tabs.left>.nav-tabs>li>a:hover{border-color:transparent #ddd transparent transparent}.rl_tabs.left>.nav-tabs>li.active>a,.rl_tabs.left>.nav-tabs>li.active>a:hover{border-color:#ddd transparent #ddd #ddd}.rl_tabs.left>.nav-tabs>li.active>a:focus,.rl_tabs.left>.nav-tabs>li>a:focus{border-right-color:transparent;-webkit-box-shadow:-2px 0 2px rgba(234,176,63,.5);-moz-box-shadow:-2px 0 2px rgba(234,176,63,.5);box-shadow:-2px 0 2px rgba(234,176,63,.5)}.rl_tabs.left>.nav-tabs>li.blue>a,.rl_tabs.left>.nav-tabs>li.blue>a:hover{border-left:5px solid #74b4e8;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.blue.active>a,.rl_tabs.left>.nav-tabs>li.blue>a:hover{border-left-color:#2384d3}.rl_tabs.left>.nav-tabs>li.primary>a,.rl_tabs.left>.nav-tabs>li.primary>a:hover{border-left:5px solid #74b4e8;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.primary.active>a,.rl_tabs.left>.nav-tabs>li.primary>a:hover{border-left-color:#2384d3}.rl_tabs.left>.nav-tabs>li.info>a,.rl_tabs.left>.nav-tabs>li.info>a:hover{border-left:5px solid #47b0cf;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.info.active>a,.rl_tabs.left>.nav-tabs>li.info>a:hover{border-left-color:#24748c}.rl_tabs.left>.nav-tabs>li.green>a,.rl_tabs.left>.nav-tabs>li.green>a:hover{border-left:5px solid #62bc62;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.green.active>a,.rl_tabs.left>.nav-tabs>li.green>a:hover{border-left-color:#378137}.rl_tabs.left>.nav-tabs>li.success>a,.rl_tabs.left>.nav-tabs>li.success>a:hover{border-left:5px solid #62bc62;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.success.active>a,.rl_tabs.left>.nav-tabs>li.success>a:hover{border-left-color:#378137}.rl_tabs.left>.nav-tabs>li.orange>a,.rl_tabs.left>.nav-tabs>li.orange>a:hover{border-left:5px solid #faa937;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.orange.active>a,.rl_tabs.left>.nav-tabs>li.orange>a:hover{border-left-color:#c67605}.rl_tabs.left>.nav-tabs>li.warning>a,.rl_tabs.left>.nav-tabs>li.warning>a:hover{border-left:5px solid #faa937;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.warning.active>a,.rl_tabs.left>.nav-tabs>li.warning>a:hover{border-left-color:#c67605}.rl_tabs.left>.nav-tabs>li.red>a,.rl_tabs.left>.nav-tabs>li.red>a:hover{border-left:5px solid #d3534c;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.red.active>a,.rl_tabs.left>.nav-tabs>li.red>a:hover{border-left-color:#942a25}.rl_tabs.left>.nav-tabs>li.danger>a,.rl_tabs.left>.nav-tabs>li.danger>a:hover{border-left:5px solid #d3534c;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.danger.active>a,.rl_tabs.left>.nav-tabs>li.danger>a:hover{border-left-color:#942a25}.rl_tabs.left>.nav-tabs>li.error>a,.rl_tabs.left>.nav-tabs>li.error>a:hover{border-left:5px solid #d3534c;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.error.active>a,.rl_tabs.left>.nav-tabs>li.error>a:hover{border-left-color:#942a25}.rl_tabs.left>.nav-tabs>li.grey>a,.rl_tabs.left>.nav-tabs>li.grey>a:hover{border-left:5px solid #b3b3b3;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.grey.active>a,.rl_tabs.left>.nav-tabs>li.grey>a:hover{border-left-color:grey}.rl_tabs.left>.nav-tabs>li.gray>a,.rl_tabs.left>.nav-tabs>li.gray>a:hover{border-left:5px solid #b3b3b3;padding-left:7px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.rl_tabs.left>.nav-tabs>li.gray.active>a,.rl_tabs.left>.nav-tabs>li.gray>a:hover{border-left-color:grey}.rl_tabs.left.outline_content>.tab-content{-webkit-border-radius:0 4px 4px 4px;-moz-border-radius:0 4px 4px;border-radius:0 4px 4px}.rl_tabs.right>.nav-tabs{float:right;margin-left:19px;border-left:1px solid #ddd}.rl_tabs.right>.nav-tabs>li{margin-left:-1px!important;margin-bottom:0!important}.rl_tabs.right>.nav-tabs>li>a{-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.rl_tabs.right>.nav-tabs>li>a:hover{border-color:transparent transparent transparent #ddd}.rl_tabs.right>.nav-tabs>li.active>a,.rl_tabs.right>.nav-tabs>li.active>a:hover{border-color:#ddd #ddd #ddd transparent}.rl_tabs.right>.nav-tabs>li.active>a:focus,.rl_tabs.right>.nav-tabs>li>a:focus{border-left-color:transparent;-webkit-box-shadow:2px 0 2px rgba(234,176,63,.5);-moz-box-shadow:2px 0 2px rgba(234,176,63,.5);box-shadow:2px 0 2px rgba(234,176,63,.5)}.rl_tabs.right>.nav-tabs>li.blue>a,.rl_tabs.right>.nav-tabs>li.blue>a:hover{border-right:5px solid #74b4e8;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.blue.active>a,.rl_tabs.right>.nav-tabs>li.blue>a:hover{border-right-color:#2384d3}.rl_tabs.right>.nav-tabs>li.primary>a,.rl_tabs.right>.nav-tabs>li.primary>a:hover{border-right:5px solid #74b4e8;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.primary.active>a,.rl_tabs.right>.nav-tabs>li.primary>a:hover{border-right-color:#2384d3}.rl_tabs.right>.nav-tabs>li.info>a,.rl_tabs.right>.nav-tabs>li.info>a:hover{border-right:5px solid #47b0cf;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.info.active>a,.rl_tabs.right>.nav-tabs>li.info>a:hover{border-right-color:#24748c}.rl_tabs.right>.nav-tabs>li.green>a,.rl_tabs.right>.nav-tabs>li.green>a:hover{border-right:5px solid #62bc62;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.green.active>a,.rl_tabs.right>.nav-tabs>li.green>a:hover{border-right-color:#378137}.rl_tabs.right>.nav-tabs>li.success>a,.rl_tabs.right>.nav-tabs>li.success>a:hover{border-right:5px solid #62bc62;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.success.active>a,.rl_tabs.right>.nav-tabs>li.success>a:hover{border-right-color:#378137}.rl_tabs.right>.nav-tabs>li.orange>a,.rl_tabs.right>.nav-tabs>li.orange>a:hover{border-right:5px solid #faa937;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.orange.active>a,.rl_tabs.right>.nav-tabs>li.orange>a:hover{border-right-color:#c67605}.rl_tabs.right>.nav-tabs>li.warning>a,.rl_tabs.right>.nav-tabs>li.warning>a:hover{border-right:5px solid #faa937;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.warning.active>a,.rl_tabs.right>.nav-tabs>li.warning>a:hover{border-right-color:#c67605}.rl_tabs.right>.nav-tabs>li.red>a,.rl_tabs.right>.nav-tabs>li.red>a:hover{border-right:5px solid #d3534c;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.red.active>a,.rl_tabs.right>.nav-tabs>li.red>a:hover{border-right-color:#942a25}.rl_tabs.right>.nav-tabs>li.danger>a,.rl_tabs.right>.nav-tabs>li.danger>a:hover{border-right:5px solid #d3534c;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.danger.active>a,.rl_tabs.right>.nav-tabs>li.danger>a:hover{border-right-color:#942a25}.rl_tabs.right>.nav-tabs>li.error>a,.rl_tabs.right>.nav-tabs>li.error>a:hover{border-right:5px solid #d3534c;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.error.active>a,.rl_tabs.right>.nav-tabs>li.error>a:hover{border-right-color:#942a25}.rl_tabs.right>.nav-tabs>li.grey>a,.rl_tabs.right>.nav-tabs>li.grey>a:hover{border-right:5px solid #b3b3b3;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.grey.active>a,.rl_tabs.right>.nav-tabs>li.grey>a:hover{border-right-color:grey}.rl_tabs.right>.nav-tabs>li.gray>a,.rl_tabs.right>.nav-tabs>li.gray>a:hover{border-right:5px solid #b3b3b3;padding-right:7px;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.rl_tabs.right>.nav-tabs>li.gray.active>a,.rl_tabs.right>.nav-tabs>li.gray>a:hover{border-right-color:grey}.rl_tabs.right.outline_content>.tab-content{-webkit-border-radius:4px 0 4px 4px;-moz-border-radius:4px 0 4px 4px;border-radius:4px 0 4px 4px}.rl_tabs>ul.nav-tabs>li.blue.solid>a,.rl_tabs>ul.nav-tabs>li.blue.solid>a:hover{background-color:#74b4e8;border-color:#74b4e8;color:#fff}.rl_tabs>ul.nav-tabs>li.blue.solid.active>a,.rl_tabs>ul.nav-tabs>li.blue.solid>a:hover{background-color:#2384d3;border-color:#2384d3}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.blue{margin:0 -1px -1px;border:2px solid #2384d3;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.blue{background-color:#f7fbfe}.rl_tabs>ul.nav-tabs>li.primary.solid>a,.rl_tabs>ul.nav-tabs>li.primary.solid>a:hover{background-color:#74b4e8;border-color:#74b4e8;color:#fff}.rl_tabs>ul.nav-tabs>li.primary.solid.active>a,.rl_tabs>ul.nav-tabs>li.primary.solid>a:hover{background-color:#2384d3;border-color:#2384d3}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.primary{margin:0 -1px -1px;border:2px solid #2384d3;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.primary{background-color:#f7fbfe}.rl_tabs>ul.nav-tabs>li.info.solid>a,.rl_tabs>ul.nav-tabs>li.info.solid>a:hover{background-color:#47b0cf;border-color:#47b0cf;color:#fff}.rl_tabs>ul.nav-tabs>li.info.solid.active>a,.rl_tabs>ul.nav-tabs>li.info.solid>a:hover{background-color:#24748c;border-color:#24748c}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.info{margin:0 -1px -1px;border:2px solid #24748c;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.info{background-color:#c0e4ef}.rl_tabs>ul.nav-tabs>li.green.solid>a,.rl_tabs>ul.nav-tabs>li.green.solid>a:hover{background-color:#62bc62;border-color:#62bc62;color:#fff}.rl_tabs>ul.nav-tabs>li.green.solid.active>a,.rl_tabs>ul.nav-tabs>li.green.solid>a:hover{background-color:#378137;border-color:#378137}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.green{margin:0 -1px -1px;border:2px solid #378137;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.green{background-color:#cdeacd}.rl_tabs>ul.nav-tabs>li.success.solid>a,.rl_tabs>ul.nav-tabs>li.success.solid>a:hover{background-color:#62bc62;border-color:#62bc62;color:#fff}.rl_tabs>ul.nav-tabs>li.success.solid.active>a,.rl_tabs>ul.nav-tabs>li.success.solid>a:hover{background-color:#378137;border-color:#378137}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.success{margin:0 -1px -1px;border:2px solid #378137;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.success{background-color:#cdeacd}.rl_tabs>ul.nav-tabs>li.orange.solid>a,.rl_tabs>ul.nav-tabs>li.orange.solid>a:hover{background-color:#faa937;border-color:#faa937;color:#fff}.rl_tabs>ul.nav-tabs>li.orange.solid.active>a,.rl_tabs>ul.nav-tabs>li.orange.solid>a:hover{background-color:#c67605;border-color:#c67605}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.orange{margin:0 -1px -1px;border:2px solid #c67605;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.orange{background-color:#fee9cc}.rl_tabs>ul.nav-tabs>li.warning.solid>a,.rl_tabs>ul.nav-tabs>li.warning.solid>a:hover{background-color:#faa937;border-color:#faa937;color:#fff}.rl_tabs>ul.nav-tabs>li.warning.solid.active>a,.rl_tabs>ul.nav-tabs>li.warning.solid>a:hover{background-color:#c67605;border-color:#c67605}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.warning{margin:0 -1px -1px;border:2px solid #c67605;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.warning{background-color:#fee9cc}.rl_tabs>ul.nav-tabs>li.red.solid>a,.rl_tabs>ul.nav-tabs>li.red.solid>a:hover{background-color:#d3534c;border-color:#d3534c;color:#fff}.rl_tabs>ul.nav-tabs>li.red.solid.active>a,.rl_tabs>ul.nav-tabs>li.red.solid>a:hover{background-color:#942a25;border-color:#942a25}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.red{margin:0 -1px -1px;border:2px solid #942a25;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.red{background-color:#f1c9c7}.rl_tabs>ul.nav-tabs>li.danger.solid>a,.rl_tabs>ul.nav-tabs>li.danger.solid>a:hover{background-color:#d3534c;border-color:#d3534c;color:#fff}.rl_tabs>ul.nav-tabs>li.danger.solid.active>a,.rl_tabs>ul.nav-tabs>li.danger.solid>a:hover{background-color:#942a25;border-color:#942a25}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.danger{margin:0 -1px -1px;border:2px solid #942a25;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.danger{background-color:#f1c9c7}.rl_tabs>ul.nav-tabs>li.error.solid>a,.rl_tabs>ul.nav-tabs>li.error.solid>a:hover{background-color:#d3534c;border-color:#d3534c;color:#fff}.rl_tabs>ul.nav-tabs>li.error.solid.active>a,.rl_tabs>ul.nav-tabs>li.error.solid>a:hover{background-color:#942a25;border-color:#942a25}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.error{margin:0 -1px -1px;border:2px solid #942a25;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.error{background-color:#f1c9c7}.rl_tabs>ul.nav-tabs>li.grey.solid>a,.rl_tabs>ul.nav-tabs>li.grey.solid>a:hover{background-color:#b3b3b3;border-color:#b3b3b3;color:#fff}.rl_tabs>ul.nav-tabs>li.grey.solid.active>a,.rl_tabs>ul.nav-tabs>li.grey.solid>a:hover{background-color:grey;border-color:grey}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.grey{margin:0 -1px -1px;border:2px solid grey;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.grey{background-color:#fff}.rl_tabs>ul.nav-tabs>li.gray.solid>a,.rl_tabs>ul.nav-tabs>li.gray.solid>a:hover{background-color:#b3b3b3;border-color:#b3b3b3;color:#fff}.rl_tabs>ul.nav-tabs>li.gray.solid.active>a,.rl_tabs>ul.nav-tabs>li.gray.solid>a:hover{background-color:grey;border-color:grey}.rl_tabs.outline_content>.tab-content>.tab-pane.color_content.gray{margin:0 -1px -1px;border:2px solid grey;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.rl_tabs>.tab-content>.tab-pane.solid.color_content.gray{background-color:#fff}@media (max-width:767px){.rl_tabs-responsive>ul.rl_tabs-sm{display:block}.rl_tabs-responsive>.rl_tabs{*zoom:1}.rl_tabs-responsive>.rl_tabs:after,.rl_tabs-responsive>.rl_tabs:before{display:table;content:"";line-height:0}.rl_tabs-responsive>.rl_tabs:after{clear:both}.rl_tabs-responsive>.rl_tabs>ul.nav-tabs{display:none}.rl_tabs-responsive>.rl_tabs>.tab-content>.tab-pane{display:block;visibility:visible}.rl_tabs-responsive>.rl_tabs>.tab-content>.tab-pane .rl_tabs-title{display:block}.rl_tabs-responsive>.rl_tabs .fade{opacity:1}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content{border:none}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane{border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin-bottom:1em;padding:12px}.rl_tabs-responsive>ul.rl_tabs-sm>li.blue>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.blue>a:hover{border:2px solid #74b4e8;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.blue:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.blue>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.blue.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.blue.solid>a:hover{background-color:#74b4e8;border-color:#74b4e8;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.blue.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.blue.solid>a:hover{background-color:#2384d3;border-color:#2384d3}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.blue{border:2px solid #74b4e8}.rl_tabs-responsive>ul.rl_tabs-sm>li.primary>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.primary>a:hover{border:2px solid #74b4e8;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.primary:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.primary>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.primary.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.primary.solid>a:hover{background-color:#74b4e8;border-color:#74b4e8;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.primary.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.primary.solid>a:hover{background-color:#2384d3;border-color:#2384d3}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.primary{border:2px solid #74b4e8}.rl_tabs-responsive>ul.rl_tabs-sm>li.info>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.info>a:hover{border:2px solid #47b0cf;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.info:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.info>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.info.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.info.solid>a:hover{background-color:#47b0cf;border-color:#47b0cf;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.info.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.info.solid>a:hover{background-color:#24748c;border-color:#24748c}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.info{border:2px solid #47b0cf}.rl_tabs-responsive>ul.rl_tabs-sm>li.green>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.green>a:hover{border:2px solid #62bc62;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.green:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.green>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.green.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.green.solid>a:hover{background-color:#62bc62;border-color:#62bc62;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.green.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.green.solid>a:hover{background-color:#378137;border-color:#378137}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.green{border:2px solid #62bc62}.rl_tabs-responsive>ul.rl_tabs-sm>li.success>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.success>a:hover{border:2px solid #62bc62;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.success:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.success>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.success.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.success.solid>a:hover{background-color:#62bc62;border-color:#62bc62;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.success.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.success.solid>a:hover{background-color:#378137;border-color:#378137}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.success{border:2px solid #62bc62}.rl_tabs-responsive>ul.rl_tabs-sm>li.orange>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.orange>a:hover{border:2px solid #faa937;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.orange:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.orange>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.orange.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.orange.solid>a:hover{background-color:#faa937;border-color:#faa937;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.orange.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.orange.solid>a:hover{background-color:#c67605;border-color:#c67605}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.orange{border:2px solid #faa937}.rl_tabs-responsive>ul.rl_tabs-sm>li.warning>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.warning>a:hover{border:2px solid #faa937;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.warning:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.warning>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.warning.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.warning.solid>a:hover{background-color:#faa937;border-color:#faa937;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.warning.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.warning.solid>a:hover{background-color:#c67605;border-color:#c67605}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.warning{border:2px solid #faa937}.rl_tabs-responsive>ul.rl_tabs-sm>li.red>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.red>a:hover{border:2px solid #d3534c;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.red:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.red>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.red.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.red.solid>a:hover{background-color:#d3534c;border-color:#d3534c;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.red.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.red.solid>a:hover{background-color:#942a25;border-color:#942a25}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.red{border:2px solid #d3534c}.rl_tabs-responsive>ul.rl_tabs-sm>li.danger>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.danger>a:hover{border:2px solid #d3534c;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.danger:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.danger>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.danger.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.danger.solid>a:hover{background-color:#d3534c;border-color:#d3534c;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.danger.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.danger.solid>a:hover{background-color:#942a25;border-color:#942a25}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.danger{border:2px solid #d3534c}.rl_tabs-responsive>ul.rl_tabs-sm>li.error>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.error>a:hover{border:2px solid #d3534c;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.error:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.error>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.error.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.error.solid>a:hover{background-color:#d3534c;border-color:#d3534c;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.error.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.error.solid>a:hover{background-color:#942a25;border-color:#942a25}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.error{border:2px solid #d3534c}.rl_tabs-responsive>ul.rl_tabs-sm>li.grey>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.grey>a:hover{border:2px solid #b3b3b3;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.grey:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.grey>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.grey.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.grey.solid>a:hover{background-color:#b3b3b3;border-color:#b3b3b3;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.grey.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.grey.solid>a:hover{background-color:grey;border-color:grey}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.grey{border:2px solid #b3b3b3}.rl_tabs-responsive>ul.rl_tabs-sm>li.gray>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.gray>a:hover{border:2px solid #b3b3b3;border-bottom-width:3px}.rl_tabs-responsive>ul.rl_tabs-sm>li.gray:last-child>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.gray>a:hover{border-bottom-width:2px}.rl_tabs-responsive>ul.rl_tabs-sm>li.gray.solid>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.gray.solid>a:hover{background-color:#b3b3b3;border-color:#b3b3b3;color:#fff}.rl_tabs-responsive>ul.rl_tabs-sm>li.gray.solid.active>a,.rl_tabs-responsive>ul.rl_tabs-sm>li.gray.solid>a:hover{background-color:grey;border-color:grey}.rl_tabs-responsive>.rl_tabs.outline_content>.tab-content>.tab-pane.gray{border:2px solid #b3b3b3}}@media print{.rl_tabs-sm,.rl_tabs>.nav-tabs{display:none!important}.rl_tabs>.tab-content,.rl_tabs>.tab-content>.rl_tabs-pane{display:block!important;opacity:1!important}.rl_tabs-title{display:block!important}}} @layer vendor{ .formHidden { position: absolute; left: -20000px; top: -20000px; opacity: 0; visibility: hidden; } .formRed { color: red; font-weight: bold; } .formError { color: #CF4D4D; font-weight:bold; font-size:10px; } .formNoError { display:none; } strong.formRequired { font-weight: bold; font-style: normal; margin-left: 3px; } div.formBody { display: block; float: left; } div.formDescription { margin-left: 3px; padding-left: 3px; font-size: 11px; font-weight: normal; } div.calheader{ text-align:center !important; } .rsformProgress { text-align: center; font-size: 14px; } .rsformProgressContainer { width: 100%; height: 4px; border: solid 1px #c7c7c7; overflow: hidden; margin: 0 0 10px !important; background: #fff; } .rsformProgressBar { height: 4px; background: green; margin: 0px !important; } .rsformVerticalClear { overflow: hidden; display: block; } p.rsformVerticalClear { margin: 0; } .recaptcha_input_area_text { float: none !important; } .rsformMaps img { max-width: none !important; } .rsform-map-geolocation { list-style: none outside none; margin: 0; width: 455px; background: none repeat scroll 0 0 #F5F5F5; border: 1px solid #E8E7E7; height: auto; position: absolute; z-index: 999999; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .rsform-map-geolocation li a { padding: 4px; text-decoration: none; display: block; line-height: 20px; } .rsform-map-geolocation li a:hover{ text-decoration: none; background: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .rsfp-image-container { margin-top: 4px; } .rsfp-image-polaroid { padding: 4px; background-color: #fff; border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.1); width: 200px; border-radius: 5px; cursor: pointer; transition: 0.3s; } .rsfp-image-polaroid:hover { opacity: 0.7; } .rsfp-modal { display: none; position: fixed; z-index: 9999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .rsfp-modal-close-button { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .rsfp-modal-close-button:hover, .rsfp-modal-close-button:focus { color: #bbb; text-decoration: none; cursor: pointer; } .rsfp-modal-image { margin: auto; display: block; width: 80%; max-width: 700px; } .rsfp-modal-caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } .rsfp-modal-image, .rsfp-modal-caption { animation-name: rsfp-modal-zoom; animation-duration: 0.6s; } @keyframes rsfp-modal-zoom { from {transform:scale(0)} to {transform:scale(1)} } @media only screen and (max-width: 700px){ .rsfp-modal-image { width: 100%; } } /* progress bar */ .rsfp-progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .rsfp-progress .rsfp-bar { float: left; width: 0; height: 100%; font-size: 12px; color: #ffffff; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .rsfp-progress .rsfp-bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .rsfp-progress .rsfp-bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .rsfp-progress .rsfp-bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .rsfp-progress .rsfp-bar-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } @media (min-width: 960px) { .formContainer > .uk-grid > .uk-width-1-12 { width: 8.333%; } .formContainer > .uk-grid > .uk-width-2-12 { width: 16.666%; } .formContainer > .uk-grid > .uk-width-3-12 { width: 25%; } .formContainer > .uk-grid > .uk-width-4-12 { width: 33.333%; } .formContainer > .uk-grid > .uk-width-5-12 { width: 41.666%; } .formContainer > .uk-grid > .uk-width-6-12 { width: 50%; } .formContainer > .uk-grid > .uk-width-7-12 { width: 58.333%; } .formContainer > .uk-grid > .uk-width-8-12 { width: 66.666%; } .formContainer > .uk-grid > .uk-width-9-12 { width: 75%; } .formContainer > .uk-grid > .uk-width-10-12 { width: 83.333%; } .formContainer > .uk-grid > .uk-width-11-12 { width: 91.666%; } .formContainer > .uk-grid > .uk-width-12-12 { width: 100%; } }} /* 自前の層：各ファイルが自分の層（@layer <名前> { }）の中に書く */ /* * tokens 層：見た目の値（色・書体・文字サイズ・余白・角丸・時間・幅）。値の持ち主はこのファイルだけ（visual-design.md §2・§3）。 * ほかの層はここで定義した変数だけを使う（0 と 1px を除く。§4）。 * #13：見本 第 7 版（docs/design/13-style-draft-v7/v7.css）の値。#8 の変数は名前を変えず、下層ページの本文のために残す * （第 1 段階では色と書体だけを新しくし、大きさ・余白・角丸は #8 のまま。visual-design.md §3）。 */ @layer tokens { :root { /* ---- 色 ---------------------------------------------------------------------------------------------- */ --color-bg: #ffffff; --color-surface: #f4f6f7; /* 面 */ --color-fg: #152632; /* 文字（純黒より少し青みのある墨） */ --color-muted: #5a6b77; /* 補助の文字 */ --color-faint: #5f6d77; /* 薄い文字（欧文の小さな文字・日付） */ --color-border: #dfe5e8; --color-accent: #00707f; /* リンク・選択中・フォーカス（ロゴの青緑と同じ色相で、白地の文字に使える濃さ） */ --color-accent-fg: #ffffff; --color-focus: #00707f; --color-danger: #b42318; --color-dark: #24323d; /* 採用の面 */ --color-dark-fg: #ffffff; --color-dark-muted: #b9c4cc; /* 事業内容の札の淡い地（mcframe はロゴの緑、ERP はロゴの青緑、Cloud は空色、SI は暖かい砂色） */ --tint-mc: #edf6e6; --tint-erp: #e2f5f7; --tint-cloud: #e6f0f9; --tint-si: #f5efe5; /* ---- 書体（visual-design.md §6） ---------------------------------------------------------------------- */ --font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif; --font-en: "Manrope", "Noto Sans JP", sans-serif; /* ---- 文字の大きさ ------------------------------------------------------------------------------------- */ /* 新しい部品：本文 15px */ --fs-xs: 0.75rem; /* 12 */ --fs-s: 0.875rem; /* 14 */ --fs-m: 0.9375rem; /* 15 本文 */ --fs-n: 1rem; /* 16 お知らせの題名 */ --fs-l: 1.125rem; /* 18 */ --fs-l2: 1.0625rem; /* 17 スマホの会社情報のリンク */ --fs-xl: 1.375rem; /* 22 */ --fs-2xl: clamp(1.5rem, 2.4vw, 2rem); /* 24〜32 */ --fs-3xl: clamp(1.625rem, 3vw, 2.375rem); /* 26〜38 メインビジュアル */ /* #8（下層ページの本文）：比率 1.25、7 段階（基準 16px） */ --fs-1: 0.8rem; --fs-2: 1rem; --fs-3: 1.25rem; --fs-4: 1.5625rem; --fs-5: 1.953rem; --fs-6: 2.441rem; /* ---- 行の高さ・字間 ----------------------------------------------------------------------------------- */ --lh-text: 2.1; /* 新しい部品の本文 */ --lh-tight: 1.5; /* 新しい部品の見出し */ --lh-hero: 1.55; /* メインビジュアルの見出し */ --lh-desc: 1.9; /* 事業内容の説明 */ --lh-menu: 1.6; /* フッターのサイトマップ */ --lh-body: 1.9; /* #8（下層ページの本文） */ --lh-heading: 1.45; /* #8 */ --ls-body: 0.04em; --ls-head: 0.04em; --ls-latin: 0.02em; /* 欧文の小見出し・数字 */ --ls-heading: 0.08em; /* #8 */ /* ---- 余白：4px 刻み ----------------------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-join: 104px; /* 採用の面の上の余白（スマホ 88px） */ --sp-join-sp: 88px; --sp-actions: 28px; /* お問い合わせの電話番号とボタンの間 */ /* ---- 角丸 --------------------------------------------------------------------------------------------- */ --radius-0: 0; /* #8 */ --radius-s: 2px; /* #8（下層ページの本文） */ --radius-card: 8px; /* 新しい部品の小さな角丸 */ --radius-m: 16px; --radius-l: 28px; --radius-pill: 999px; /* ---- 幅・高さ・部品の寸法 ----------------------------------------------------------------------------- */ --w-wrap: 1000px; /* 新しい骨格の中身の幅 */ --gutter: clamp(20px, 8vw, 128px); --w-th: 200px; --header-h: 76px; --logo-h: 40px; --touch: 44px; --arrow: 36px; --arrow-sp: 32px; --icon: 18px; --pill-h: 56px; --tag-h: 28px; --biz-tile-w: 144px; --biz-tile-h: 88px; --radius-tile: 12px; /* 事業内容の淡い地の札 */ --biz-tile-h-sp: 128px; --biz-mark: 48px; --biz-mark-sp: 44px; --biz-logo: 104px; --join-body-w: 440px; --cert-tile-h: 72px; --cert-tile-h-sp: 52px; --hero-min-h: min(68vh, 580px); --hero-title-max: 7cqi; /* メインビジュアルの見出しの上限（文字の列の幅の 7%） */ --news-date-w: 7em; --cert-logo-max: 160px; /* #8：品質方針の認証マークの最大幅 */ --diagram-min-sp: 720px; /* #8：スマホで横に送って見る図の最小幅 */ --list-btn-w: 70px; /* #8 */ --bar: 48px; /* #8 */ --bar-h: 2px; /* #8：フォーカスの枠の太さなど */ --mark: 4px; /* #8 */ --control: 20px; /* #8：フォームの丸・四角の選択欄の見た目の大きさ（押せる範囲は --touch） */ --tooltip-w: 400px; /* #8：お知らせの吹き出しの最大幅 */ --tooltip-arrow: 5px; /* #8 */ --form-field-max: 600px; /* #8 */ --privacy-box-h: 200px; /* #8 */ /* ---- 不透明度・重なり --------------------------------------------------------------------------------- */ --opacity-hover: 0.85; /* #8：本文の画像のリンクを指したとき */ --opacity-link: 0.7; /* 文字のリンクを指したとき */ --opacity-tooltip: 0.9; /* #8 */ --header-glass: 92%; /* ヘッダーの地の不透明度（後ろの文字を少し透かす） */ --header-blur: 8px; --shadow-dropdown: 0 8px 32px color-mix(in srgb, var(--color-fg) 12%, transparent); --photo-filter: saturate(0.92) contrast(0.96) brightness(1.02); /* 採用の写真の色調をそろえる */ --z-dropdown: 99; --z-header: 120; --z-drawer: 130; --z-topcontrol: 999; --z-tooltip: 9999; /* ---- 動き（transform と opacity だけに使う。visual-design.md §4 の 4） --------------------------------- */ --dur-none: 0s; /* 表示の切り替え（visibility）を待たせないとき */ --dur-ui: 250ms; /* 操作への反応 */ --dur-reveal: 900ms; /* 画面に入った要素 */ --dur-hero: 1200ms; /* メインビジュアル */ --dur-hero-img: 2400ms; /* メインビジュアルの画像の拡大の戻り */ --delay-hero-line: 120ms; /* 見出しの 2 行目の遅れ */ --stagger-reveal: 90ms; --ease-soft: cubic-bezier(0.47, 0.16, 0.24, 1); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --reveal-shift: 28px; --dropdown-shift: 6px; --hero-zoom: 1.06; --lift: 4px; --hover-zoom: 1.08; /* 指したときの図形・矢印の拡大 */ --hover-shadow: 0 12px 32px color-mix(in srgb, var(--color-fg) 10%, transparent); /* #8（下層ページの本文の部品） */ --dur-press: 160ms; --dur-fast: 150ms; --press-scale: 0.97; } /* 英語のページ：日本語向けの字間を詰める */ :root:lang(en) { --ls-body: 0.01em; --ls-head: 0.02em; --ls-heading: 0.02em; } /* 動きを減らす設定では何も動かさない：時間と移動量の値を 0 にする */ @media (prefers-reduced-motion: reduce) { :root { --dur-ui: 0s; --dur-reveal: 0s; --dur-hero: 0s; --dur-hero-img: 0s; --delay-hero-line: 0s; --stagger-reveal: 0s; --reveal-shift: 0px; --dropdown-shift: 0px; --hero-zoom: 1; --lift: 0px; --hover-zoom: 1; --dur-press: 0s; --dur-fast: 0s; --press-scale: 1; } } } /* * base 層：要素の既定（visual-design.md §2.2）。 * 全体：どの部品にも偏らない中立の既定（新しい骨格・トップの部品は、これに自分の指定を足す）。 * .page-legacy：下層ページの現行 HTML の本文（#13 第 1 段階で作り直さない部分）の要素の既定。 * 現行の normalize.css・template.css が要素に付けていた指定のうち、本文で使うものを #8 の値で持つ。 * 本文の中だけに当てるため、新しい部品の指定と競り合わない。 */ @layer base { /* ---- 全体 ---------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 固定のヘッダーの下に、ページ内リンクの行き先が隠れないようにする */ scroll-padding-top: var(--header-h); } body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-ja); font-size: var(--fs-m); line-height: var(--lh-text); letter-spacing: var(--ls-body); line-break: strict; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; } b, strong { font-weight: 700; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; } button { font: inherit; color: inherit; } /* 日本語は文節の切れ目で折り返し、語の途中の 1〜3 文字だけが次の行に残らないようにする */ h1, h2, h3, h4, h5, h6, p, li, th, td, a { word-break: auto-phrase; overflow-wrap: break-word; } p, li { text-wrap: pretty; } /* フォーカス：キーボード操作のときだけ枠を出す */ :focus { outline: 0; } :focus-visible { outline: var(--bar-h) solid var(--color-focus); outline-offset: var(--bar-h); } table { max-width: 100%; border-collapse: collapse; border-spacing: 0; background-color: transparent; } td, th { padding: 0; } iframe { border: 0; } fieldset { margin: 0; padding: 0; border: 0; } /* フォーム部品。書体はフォームの部品（components/form.css）が指定する */ input, optgroup, select, textarea { margin: 0; color: inherit; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { padding: 0; } textarea { overflow: auto; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; } input[type="text"], input[type="email"], input[type="tel"], textarea, select { display: inline-block; max-width: 100%; min-height: var(--touch); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-s); background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-ja); font-size: var(--fs-2); vertical-align: middle; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border-color: var(--color-focus); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nowrap { white-space: nowrap; } /* ---- 下層ページの本文（現行 HTML） ------------------------------------------------------------------- */ .page-legacy { font-size: var(--fs-2); line-height: var(--lh-body); line-break: auto; } /* 見出し：本文と同じ書体。大きさは見出しの部品（components・content）が持つ */ .page-legacy :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--sp-3); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } .page-legacy h2 { font-size: var(--fs-4); } .page-legacy h3 { font-size: var(--fs-3); } .page-legacy :is(h4, h5, h6) { font-size: var(--fs-2); } .page-legacy p { margin: 0 0 var(--sp-4); } .page-legacy a { color: var(--color-accent); } .page-legacy a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; } .page-legacy a img { transition: opacity var(--dur-ui) var(--ease-out); } .page-legacy a:hover img { opacity: var(--opacity-hover); } } /* * layout 層：ページの枠（visual-design.md §2.2）。 * 新しい骨格：中身の幅（.ui-wrap）、ヘッダー（.site-header）、フッター（.site-footer）、ページの先頭へ戻るボタン（.site-pagetop）、 * トップのセクションの間（.top-block）。 * 下層ページの本文（現行 HTML。#13 第 1 段階）：本文の枠、ページ名の帯、パンくず、グリッド（span_*・col など）。 */ @layer layout { /* ---- 新しい骨格 ------------------------------------------------------------------------------------ */ .ui-wrap { width: 100%; max-width: calc(var(--w-wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--color-bg) var(--header-glass), transparent); backdrop-filter: blur(var(--header-blur)); } .site-header__inner { display: flex; align-items: center; gap: var(--sp-6); height: var(--header-h); } .site-logo { display: flex; align-items: center; min-height: var(--touch); } .site-logo img { display: block; width: auto; height: var(--logo-h); } /* どの画面幅で何を出すか：PC はグローバルメニューと言語の切り替え、1100px 以下はスマホのメニューを開くボタン */ .site-header__nav { margin-left: auto; } .site-header__toggle { display: none; margin-left: auto; } @media (max-width: 1100px) { .site-header__nav, .site-header__lang { display: none; } .site-header__toggle { display: block; } } .site-footer { margin-top: var(--sp-8); padding-block: var(--sp-9) var(--sp-6); background: var(--color-surface); } .site-footer__top { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-7); } .site-footer__menus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } .site-footer__menus p, .site-footer__menus a { display: flex; align-items: center; min-height: var(--touch); font-size: var(--fs-s); line-height: var(--lh-menu); } .site-footer__menus p { font-weight: 700; } .site-footer__menus a { color: var(--color-muted); white-space: nowrap; } .site-footer__menus a:hover { color: var(--color-fg); } .site-certs { display: grid; grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-8); padding: 0; list-style: none; } .site-cert { display: flex; align-items: center; justify-content: center; height: var(--cert-tile-h); padding: var(--sp-3); border-radius: var(--radius-card); background: var(--color-bg); } .site-cert img { display: block; width: auto; max-width: 100%; max-height: 100%; } .site-cert--wide img { height: var(--sp-5); } .site-copyright { margin-top: var(--sp-7); color: var(--color-faint); font-family: var(--font-en); font-size: var(--fs-xs); } .site-pagetop { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-topcontrol); } /* ボタンは JavaScript で動くため、JavaScript が無いときは出さない */ html:not(.js) .site-pagetop { display: none; } .top-block { margin-top: var(--sp-9); } @media (max-width: 1023px) { .site-footer__top { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .top-block { margin-top: var(--sp-8); } .site-footer__menus { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-certs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .site-cert--wide { grid-column: 1 / -1; } .site-cert { height: var(--cert-tile-h-sp); padding: var(--sp-2); } .site-pagetop { right: var(--sp-4); bottom: var(--sp-4); } } /* ---- 下層ページの本文（現行 HTML）：中身の幅は新しい骨格と同じ 1000px ---------------------------------- */ #box-wrap.container, #promo-page-title .container, .cntn { width: auto; max-width: calc(var(--w-wrap) + var(--sp-5) * 2); margin-left: auto; margin-right: auto; padding-left: var(--sp-5); padding-right: var(--sp-5); } /* 事業内容（#index）は、帯（背景の色・写真）を画面の端まで広げ、幅は各帯の .cntn が持つ */ #index #box-wrap.container { max-width: none; padding-left: 0; padding-right: 0; } /* 上下だけを指定する（左右の余白は .cntn が持つ） */ .section { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } #comp-wrap { position: relative; padding: 0; } /* お知らせ一覧の 1 件（.container）は中の浮動の列を囲む */ #post .container { display: flow-root; } /* グリッド（現行の span_*・col） */ .col { display: block; float: left; width: 100%; margin-left: 2%; } .col:first-child { margin-left: 0; } .span_3 { width: 23.5%; } .span_9 { width: 70%; } .span_12 { width: 100%; } .row::after, .col::after, .clr::after, .group::after, .row-fluid::after { content: ""; display: block; clear: both; } .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } /* お知らせの右の列（カテゴリー） */ #rightbar-w { float: right; display: block; } /* ページ名の帯とパンくず */ #promo-page-title { margin: 0; padding: var(--sp-8) 0 var(--sp-7); background: var(--color-surface); } #promo-page-title h2 { margin: 0; color: var(--color-fg); font-size: var(--fs-6); font-weight: 700; letter-spacing: var(--ls-heading); text-align: left; } .breadcrumbs { margin: 0; padding: var(--sp-4) 0 0; color: var(--color-muted); font-size: var(--fs-1); } .breadcrumbs a { color: var(--color-muted); } .breadcrumbs .fa-angle-right { margin: 0 var(--sp-1); } /* 事業内容（#index）は本文の枠が画面の端まで広がるため、パンくずは中身の幅にそろえる */ #index .breadcrumbs { max-width: calc(var(--w-wrap) + var(--sp-5) * 2); margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); } /* スマホ（現行の responsive.css と同じ境目） */ @media screen and (max-width: 568px) { #box-wrap.container, #promo-page-title .container, .cntn { padding-left: var(--sp-4); padding-right: var(--sp-4); } .section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); } /* グリッド：1 列にする。お知らせの右の列（カテゴリー）は出さない（現行と同じ） */ .span_3, .span_9, .span_12 { width: auto; } .col, .col:first-child { float: none; margin: 0; } #rightbar-w { display: none; } #promo-page-title { padding: var(--sp-6) 0; } #promo-page-title h2 { font-size: var(--fs-5); } #index .breadcrumbs { padding-left: var(--sp-4); padding-right: var(--sp-4); } } } /* * 部品：アイコン（visual-design.md §5.1）。Lucide（lucide-static 1.50.0、ISC。icons/LICENSE）の SVG を CSS のマスクで描く。 * 色は文字色（currentColor）になり、リンクの中ではリンクの色になる。HTML（）は変えない。 * 現行の CSS が疑似要素で付けていた記号も同じ方法で描く：置き場所の規則は各部品が持ち、ここでは描き方と図柄（--icon）を持つ。 * パスはルートからの絶対パス（英語トップは を持つ）。 */ @layer components { :root { --icon-menu: url("/templates/rontech/icons/menu.svg"); --icon-x: url("/templates/rontech/icons/x.svg"); --icon-chevron-right: url("/templates/rontech/icons/chevron-right.svg"); --icon-lock: url("/templates/rontech/icons/lock.svg"); --icon-key-round: url("/templates/rontech/icons/key-round.svg"); --icon-book-open: url("/templates/rontech/icons/book-open.svg"); --icon-building-2: url("/templates/rontech/icons/building-2.svg"); --icon-settings: url("/templates/rontech/icons/settings.svg"); --icon-monitor: url("/templates/rontech/icons/monitor.svg"); --icon-flag: url("/templates/rontech/icons/flag.svg"); --icon-laptop: url("/templates/rontech/icons/laptop.svg"); --icon-chart-line: url("/templates/rontech/icons/chart-line.svg"); --icon-plane: url("/templates/rontech/icons/plane.svg"); --icon-user: url("/templates/rontech/icons/user.svg"); --icon-users: url("/templates/rontech/icons/users.svg"); --icon-phone: url("/templates/rontech/icons/phone.svg"); --icon-circle-dot: url("/templates/rontech/icons/circle-dot.svg"); --icon-square-check: url("/templates/rontech/icons/square-check.svg"); --icon-calendar: url("/templates/rontech/icons/calendar.svg"); --icon-folder-open: url("/templates/rontech/icons/folder-open.svg"); --icon-file-text: url("/templates/rontech/icons/file-text.svg"); } /* ---- 描き方：1 文字分の正方形を文字色で塗り、SVG の形で切り抜く ---------------------------------- */ .fa::before, .icon-calendar::before, .icon-folder-open::before, a.tel::before, ul.icon li::before, #sidebar .categories-module li::before, a[href$=".pdf"]::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; vertical-align: -0.125em; } /* ---- Font Awesome のクラス → Lucide の図柄 ---------------------------------------------------- */ .fa { display: inline-block; font-style: normal; line-height: 1; } .fa-angle-right { --icon: var(--icon-chevron-right); } .fa-lock { --icon: var(--icon-lock); } .fa-key { --icon: var(--icon-key-round); } .fa-book { --icon: var(--icon-book-open); } .fa-building, .fa-building-o { --icon: var(--icon-building-2); } .fa-cogs { --icon: var(--icon-settings); } .fa-desktop { --icon: var(--icon-monitor); } .fa-flag { --icon: var(--icon-flag); } .fa-laptop { --icon: var(--icon-laptop); } .fa-line-chart { --icon: var(--icon-chart-line); } .fa-plane { --icon: var(--icon-plane); } .fa-user { --icon: var(--icon-user); } .fa-users { --icon: var(--icon-users); } /* 大きめのアイコン：周りの文字の 1 段上（比率 1.25） */ .fa-lg { font-size: 1.25em; } .fa-inverse { color: var(--color-bg); } /* 丸の中のアイコン（mcframe「製品のポイント」）：墨色の丸を CSS で描き、中のアイコンを背景の色で描く */ .fa-stack { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; background: var(--color-fg); vertical-align: middle; } .fa-stack .fa-stack-2x { display: none; } .fa-stack .fa-stack-1x { color: var(--color-bg); } /* ---- 現行の CSS が疑似要素で付けていた記号 ------------------------------------------------------ */ .icon-calendar { --icon: var(--icon-calendar); } .icon-folder-open { --icon: var(--icon-folder-open); } a.tel { --icon: var(--icon-phone); } ul.icon li { --icon: var(--icon-circle-dot); } ul.icon.check li { --icon: var(--icon-square-check); } #sidebar .categories-module li { --icon: var(--icon-folder-open); } /* 新しい部品（#13）：