このリポジトリは2023-09-09にアーカイブされています。 ファイルの閲覧とクローンは可能ですが、プッシュ、イシューの作成、プルリクエストはできません。
hozonsite.php/1644932818/www.itmedia.co.jp/business/articles/2111/24/gnavi.css?date=202001281043

814 行
18 KiB
Plaintext
Raw Blame 履歴

このファイルには曖昧(ambiguous)なUnicode文字が含まれています

このファイルには、他の文字と見間違える可能性があるUnicode文字が含まれています。 それが意図的なものと考えられる場合は、この警告を無視して構いません。 それらの文字を表示するにはエスケープボタンを使用します。

#COIDP{
display:none;
}
/*-----*/
#g_nav{
--base_w:990px;
--base_h:80px;
font-family:-apple-system, Sans-Serif, HiraKakuProN-W3, Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, ' Pゴシック';
text-align:left;
}
/* Fav-Logヘッダー幅変更ここから */
.dir-fav #g_nav{
--base_w:1136px;
}
/* Fav-Logヘッダー幅変更ここまで */
#g_nav a:hover{
text-decoration:none;
}
#g_nav_o{
width:100%;
background:#FFF;
border-bottom:1px solid #DDD;
box-sizing:border-box;
}
#g_nav[data-theme="dark"] #g_nav_o{
background:#000;
}
#g_nav_i{
display:flex;
position:relative;
width:var(--base_w);
height:var(--base_h);
margin:0 auto;
}
/*-----*/
#g_nav .colBox.colBoxWarning,
#g_nav .colBox.colBoxWarning *{
all:initial;
}
#g_nav .colBox.colBoxWarning{
display:block;
background:#EEE;
}
#g_nav[data-theme="dark"] .colBox.colBoxWarning{
background:#222;
}
#g_nav .colBox.colBoxWarning .colBoxOuter{
display:block;
width:var(--base_w);
margin:0 auto;
padding:4px 5px 5px;
}
#g_nav .colBox.colBoxWarning li:before{
content:"・";
font-size:12px;
color:#333;
}
#g_nav[data-theme="dark"] .colBox.colBoxWarning li:before{
color:#CCC;
}
#g_nav .colBox.colBoxWarning li a{
font-size:12px;
cursor:pointer;
color:#333;
}
#g_nav .colBox.colBoxWarning li a:hover{
color:#000;
text-decoration:underline;
}
#g_nav[data-theme="dark"] .colBox.colBoxWarning li a{
color:#CCC;
}
#g_nav[data-theme="dark"] .colBox.colBoxWarning li a:hover{
color:#EEE;
}
/*-----*/
.g_nav_box{
display:flex;
align-items:center;
height:var(--base_h);
}
._flex{flex:1;}
/*-----*/
.g_btn {
width:80px;
height:var(--base_h);
padding:10px 0 0;
box-sizing:border-box;
}
.g_img{
width:20px;
height:20px;
margin:0 auto;
}
.g_txt{
margin-top:5px;
font-size:11px;
line-height:11px;
text-align:center;
color:#666;
}
#g_nav[data-theme="dark"] .g_txt{
color:#CCC;
}
/*-----*/
.g_inbtn{
position:relative;
display:block;
width:70px;
height:60px;
text-decoration:none;
margin:0 auto;
padding:13px 5px 5px;
box-sizing:border-box;
cursor:pointer;
background:transparent;
border:1px solid transparent;
transition-property:background,border;
transition-duration:0.2s;
z-index:999;
}
.g_inbtn:hover{
background:#EEE;
border:1px solid #CCC;
}
#g_nav[data-theme="dark"] .g_inbtn:hover{
background:#222;
border:1px solid #111;
}
.g_btn[data-menu="0"]{
z-index:900;
}
/*-----*/
.g_float{
position:absolute;
top:10px;
width:calc(100% - 10px);
height:0;
overflow:hidden;
background:transparent;
box-sizing:border-box;
z-index:998;
transition-property:height;
transition-duration:0.3s;
}
.g_float_left{left:5px;}
.g_float_right{right:5px;}
.g_btn[data-menu="1"] .g_float_left{
height:640px;
}
.g_btn[data-menu="1"] .g_float_right{
min-height:130px;
height:auto;
}
/*-----*/
.g_lines{
position:relative;
margin:0 auto;
width:20px;
height:19px;
}
.g_line{
position:absolute;
left:0;
width:100%;
height:3px;
margin:0 auto;
background:#666;
border:0;
transform:rotate(0);
transition-property:transform,top,bottom,width,height,background,border;
transition-duration:0.5s;
}
#g_nav[data-theme="dark"] .g_line{
background:#999;
}
.g_line:nth-child(1){top:0;}
.g_line:nth-child(2){top:8px;}
.g_line:nth-child(3){top:8px;}
.g_line:nth-child(4){bottom:0;}
#g_btn_menu[data-menu="1"] .g_line:nth-child(1){width:0;}
#g_btn_menu[data-menu="1"] .g_line:nth-child(2){transform:rotate(-45deg);}
#g_btn_menu[data-menu="1"] .g_line:nth-child(3){transform:rotate(45deg);}
#g_btn_menu[data-menu="1"] .g_line:nth-child(4){width:0;}
/*-----*/
.g_search_icons{
position:relative;
margin:0 auto;
width:20px;
height:19px;
}
.g_search_icon{
position:absolute;
box-sizing:border-box;
overflow:hidden;
transition-property:transform,top,left,margin,bottom,width,height,background,border;
transition-duration:0.5s;
}
#g_nav[data-theme="dark"] .g_search_icon{
background:#999;
}
.g_search_icon:nth-child(1){
top:-6px;
left:-5px;
width:20px;
height:20px;
border:5px solid #AAA;
border-radius:40px;
}
.g_search_icon:nth-child(2){
top:12px;
left:8px;
width:12px;
height:5px;
margin:0 auto;
background:#AAA;
border:0;
transform:rotate(45deg);
transition-property:transform,top,bottom,width,height,background,border;
transition-duration:0.5s;
}
#g_btn_search[data-menu="1"] .g_search_icon:nth-child(1){top:8px;left:0;width:100%;height:3px;margin:auto;transform:rotate(45deg);background:#666;border:0 solid transparent;}
#g_btn_search[data-menu="1"] .g_search_icon:nth-child(2){top:8px;left:0;width:100%;height:3px;margin:auto;transform:rotate(-45deg);background:#666;}
/*-----*/
.g_media {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
align-content:flex-start;
justify-content:space-between;
width:100%;
padding:60px 5px 5px;
background:#FFF;
border:1px solid #CCC;
box-sizing:border-box;
}
/*
#g_nav[data-theme="dark"] .g_media{
background:#000;
border:1px solid transparent;
}
*/
.g_media_list {
width:calc((100% / 5) - 10px);
height:85px;
margin-top:10px;
text-decoration:none;
color:#333;
background:transparent;
border:1px solid transparent;
box-sizing:border-box;
}
.g_media_empty {
width:calc((100% / 5) - 10px);
}
.g_media_img {
height:60px;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
}
.g_media_name {
font-size:11px;
text-align:center;
height:20px;
color:#666;
}
/*
#g_nav[data-theme="dark"] .g_media_name{
color:#999;
}
*/
.g_media_list:hover {
border:1px solid #DDD;
background:#EEE;
}
/*
#g_nav[data-theme="dark"] .g_media_list:hover{
border:1px solid #000;
background:#111;
}
*/
.g_media_list:hover .g_media_img {
filter:brightness(120%);
}
/*-----*/
.g_search_box{
width:100%;
padding:60px 5px 5px;
background:#FFF;
border:1px solid #CCC;
box-sizing:border-box;
}
/*-----*/
.g_member {
display:flex;
flex-direction:row-reverse;
width:100%;
padding:60px 5px 5px;
background:#FFF;
border:1px solid #CCC;
box-sizing:border-box;
}
#g_nav[data-theme="dark"] .g_member{
background:#000;
border:1px solid transparent;
}
.g_member_list {
width:calc((100% / 9) - 10px);
height:55px;
margin-top:10px;
text-decoration:none;
color:#666;
background:transparent;
border:1px solid transparent;
box-sizing:border-box;
}
#g_nav[data-theme="dark"] .g_member_list{
color:#999;
}
.g_member_img {
height:30px;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
}
.g_member_name {
font-size:11px;
text-align:center;
height:20px;
color:#666;
}
#g_nav[data-theme="dark"] .g_member_name{
color:#999;
}
.g_member_list:hover {
border:1px solid #DDD;
background:#EEE;
}
#g_nav[data-theme="dark"] .g_member_list:hover{
border:1px solid #000;
background:#111;
}
.g_member_list:hover .g_media_img {
-webkit-animation:g_media_anime 0.1s linear 1 forwards;
animation:g_media_anime 0.1s linear 1 forwards;
}
/*-----*/
.g_circles{
position:relative;
margin:0 auto;
width:20px;
height:19px;
}
.g_circle{
position:absolute;
box-sizing:border-box;
overflow:hidden;
transition-property:transform,top,left,margin,bottom,width,height,background,border;
transition-duration:0.5s;
}
.g_circle:nth-child(1){
top:-7px;
left:-5px;
width:30px;
height:30px;
background:#AAA;
border-radius:40px;
}
#g_nav[data-theme="dark"] .g_circle:nth-child(1){
background:#888;
}
.g_circle:nth-child(2){
background:#FFF;
top:9px;
left:50%;
margin-left:-10px;
width:20px;
height:14px;
border-radius:20px 20px 0 0;
}
#g_nav[data-theme="dark"] .g_circle:nth-child(2){
background:#000;
}
.g_circle:nth-child(3){
background:#FFF;
top:-1px;
left:50%;
margin-left:-6px;
width:12px;
height:12px;
border-radius:12px;
}
#g_nav[data-theme="dark"] .g_circle:nth-child(3){
background:#000;
}
#g_btn_member[data-menu="1"] .g_circle:nth-child(1){background:transparent;}
#g_btn_member[data-menu="1"] .g_circle:nth-child(2),
#g_btn_member[data-menu="1"] .g_circle:nth-child(3){top:8px;left:0;margin:0;width:100%;height:3px;background:#666;border:0;border-radius:0;}
#g_btn_member[data-menu="1"] .g_circle:nth-child(2){transform:rotate(-45deg);}
#g_btn_member[data-menu="1"] .g_circle:nth-child(3){transform:rotate(45deg);}
#g_nav[data-theme="dark"] #g_btn_member[data-menu="1"] .g_circle:nth-child(2){
background:#999;
}
#g_nav[data-theme="dark"] #g_btn_member[data-menu="1"] .g_circle:nth-child(3){
background:#999;
}
/*-----*/
#g_btn_tw .g_img{background:url(//image.itmedia.co.jp/spv/images/msbBtn_gray.png) no-repeat center -37px;background-size:20px;}
#g_btn_tw .g_inbtn:hover .g_img{background:url(//image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat center -37px;background-size:20px;}
#g_btn_fb .g_img{background:url(//image.itmedia.co.jp/spv/images/msbBtn_gray.png) no-repeat center 0;background-size:20px;}
#g_btn_fb .g_inbtn:hover .g_img{background:url(//image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat center 0;background-size:20px;}
/*-----*/
#g_logo{
width:100%;
margin:0 10px;
padding:0;
font-size:1rem;
text-align:center;
}
#g_logo img{
vertical-align:middle;
}
#g_logo_sub{
width:100%;
margin:0 10px;
padding:0;
font-size:1rem;
text-align:center;
}
#g_logo_sub img{
vertical-align:middle;
}
/*-----*/
.g_free_box{
width:100%;
padding:0 10px 0 20px;
}
._align_r{
justify-content:flex-end;
}
/*-----*/
.g_local{
display:flex;
align-items:center;
width:100%;
margin-bottom:4px;
list-style:none;
}
.g_local.g_local_txt{
margin-bottom:2px;
}
.g_local:last-child{margin-bottom:0;}
/*-----*/
.g_local_btn .g_lnav_o{
position:relative;
margin-right:4px;
}
.g_local_btn .align_r.g_lnav_o{
margin-left:0 0 0 7px;
}
.g_local_btn .g_lnav_o > a{
display:block;
overflow:hidden;
font-size:11px;
text-decoration:none;
transition-property:color,border-color;
transition-duration:0.2s;
border:1px solid #CCC;
background:#FFF;
color:#333;
}
.g_local_btn .g_lnav_o > a:before{
z-index:1;
content:"";
position:absolute;
top:0;
width:calc(100% - 2px);
height:0;
margin:1px 0 0 1px;
display:block;
transition-property:width,height;
transition-duration:0.2s;
background:#EEE;
}
#g_nav[data-theme="light"] .g_local_btn .g_lnav_o > a{
border-color:#CCC;
background:#FFF;
color:#444;
}
#g_nav[data-theme="light"] .g_local_btn .g_lnav_o > a:before{
background:#EEE;
color:#333;
}
#g_nav[data-theme="dark"] .g_local_btn .g_lnav_o > a{
border-color:#222;
background:#333;
color:#DDD;
}
#g_nav[data-theme="dark"] .g_local_btn .g_lnav_o > a:before{
background:#000;
color:#FFF;
}
/*-----*/
/* tt */
#g_nav .g_local_btn.green_1 .g_lnav_o > a{border:1px solid rgba(13,159,148,1);background:rgba(13,159,148,0.9);color:#FFF;}
#g_nav .g_local_btn.green_1 .g_lnav_o > a:before{background:rgba(13,159,148,1);}
/* tf */
#g_nav .g_local_btn.brown_1 .g_lnav_o > a{border:1px solid #4f2225;background:#4f2225;color:#FFF;}
#g_nav .g_local_btn.brown_1 .g_lnav_o > a:before{background:#824448;}
/* smartjapan */
#g_nav .g_local_btn.yellow_1 .g_lnav_o > a{border:1px solid #E94;background:#E94;color:#FFF;}
#g_nav .g_local_btn.yellow_1 .g_lnav_o > a:before{background:#F60;}
/* smartjapan built */
#g_nav .g_local_btn.blue_1 .g_lnav_o > a{border:1px solid #418FC1;background:#418FC1;color:#FFF;}
#g_nav .g_local_btn.blue_1 .g_lnav_o > a:before{background:#005084;}
/* pcuser|mobile */
#g_nav .g_local_btn.black_1 .g_lnav_o > a{border:1px solid #353637;background:#353637;color:#FFF;}
#g_nav .g_local_btn.black_1 .g_lnav_o > a:before{background:#000;}
/* nl */
#g_nav .g_local_btn.pink_1 .g_lnav_o > a{border:1px solid #EDBBCB;background:#C76C97;color:#FFF;}
#g_nav .g_local_btn.pink_1 .g_lnav_o > a:before{background:#a12162;}
/* mn */
#g_nav .g_local_btn.red_1 .g_lnav_o > a{border:1px solid #A01013;background:#A01013;color:#FFF;}
#g_nav .g_local_btn.red_1 .g_lnav_o > a:before{background:#EC1C24;}
#g_nav .g_local_btn.red_2 .g_lnav_o > a{border:1px solid #A01013;color:#A01013;}
/* mm */
#g_nav .g_local_btn.orange_1 .g_lnav_o > a{border:1px solid #ef7626;background:#ef7626;color:#FFF;}
#g_nav .g_local_btn.orange_1 .g_lnav_o > a:before{background:#cc530c;}
/* kn */
#g_nav .g_local_btn.blue_4 .g_lnav_o > a{border:1px solid #0050A0;background:#2572b3;color:#FFF;}
#g_nav .g_local_btn.blue_4 .g_lnav_o > a:before{background:#0050A0;}
/* executive */
#g_nav .g_local_btn.brown_2 .g_lnav_o > a{border:1px solid #953;background:#953;color:#FFF;}
#g_nav .g_local_btn.brown_2 .g_lnav_o > a:before{background:#730;}
/* enterprise */
#g_nav .g_local_btn.blue_2 .g_lnav_o > a{border:1px solid #36A;background:#36A;color:#FFF;}
#g_nav .g_local_btn.blue_2 .g_lnav_o > a:before{background:#149;}
/* ee */
#g_nav .g_local_btn.green_2 .g_lnav_o > a{border:1px solid #42A56C;background:#42A56C;color:#FFF;}
#g_nav .g_local_btn.green_2 .g_lnav_o > a:before{background:#0F7D3E;}
/* edn */
#g_nav .g_local_btn.blue_3 .g_lnav_o > a{border:1px solid #5075A6;background:#5075A6;color:#FFF;}
#g_nav .g_local_btn.blue_3 .g_lnav_o > a:before{background:#325698;}
/* ait */
#g_nav .g_local_btn.gray_1 .g_lnav_o > a{border:1px solid #666;background:#666;color:#FFF;}
#g_nav .g_local_btn.gray_1 .g_lnav_o > a:before{background:#006599;}
/*-----*/
.g_local_btn .g_lnav_o > a:before{left:0;}
.g_local_btn .g_lnav_o:hover > a:before,
.g_local_btn .g_lnav_o > a:hover:before,
.g_local_btn .g_lnav_o > a[data-active]:before{height:calc(100% - 2px);}
.g_local_btn .g_lnav_o > a[data-active]{font-weight:bold;}
/* mn */
#g_nav .g_local_btn.red_2 .g_lnav_o > a[data-active]:before{background:#EC1C24;}
#g_nav .g_local_btn.red_2 .g_lnav_o > a[data-active]{color:#FFF;}
.g_local_btn .g_lnav_o > a > div{
z-index:2;
position:relative;
padding:1px 6px;
}
.g_local_btn .g_lnav_o > a[href*="javascript:void(0)"] > div:before{
content:"▼";
display:inline-block;
transform:scale(0.5);
margin:0 2px 0 -3px;
}
.g_local_btn .g_lnav_o > a > div[data-mark]{
padding-left:17px;
}
.g_local_btn .g_lnav_o > a > div[data-mark]:after{
content:"";
display:block;
position:absolute;
top:50%;
left:7px;
width:6px;
height:6px;
margin-top:-3px;
border-radius:6px;
background:#C00;
}
.g_lnav_o_txt{
font-size:11px;
margin-right:5px;
color:#999;
}
#g_nav[data-theme="dark"] .g_lnav_o_txt{
color:#CCC;
}
.g_local_txt .g_lnav_o{
position:relative;
margin-right:7px;
}
.g_local_txt .align_r.g_lnav_o{
margin-left:0 0 0 7px;
}
.g_local_txt .g_lnav_o > a{
display:block;
font-size:11px;
color:#444;
}
#g_nav[data-theme="dark"] .g_local_txt .g_lnav_o > a{
color:#DDD;
}
#g_nav .g_local_txt .g_lnav_o > a{
text-decoration:none;
}
#g_nav .g_local_txt .g_lnav_o:hover > a,
#g_nav .g_local_txt .g_lnav_o > a:hover{
text-decoration:underline;
}
.g_local_txt .g_lnav_o > a > div{
z-index:2;
position:relative;
}
.g_local_txt .g_lnav_o > a > div:before{
content:"●";
display:inline-block;
transform:scale(0.3);
}
.g_local_txt .g_lnav_o > a[href*="javascript:void(0)"] > div:before{
content:"▼";
display:inline-block;
transform:scale(0.5);
}
.g_local_txt .g_lnav_o > a > div[data-mark]:before{
content:"●";
color:#C00;
transform:scale(0.5);
margin-right:1px;
}
/**/
.g_lnav_i{
position:absolute;
z-index:1000;
overflow:hidden;
margin-top:-5px;
}
.g_lnav_i ul,
.g_lnav_i li{
margin:0;
padding:0;
list-style:none;
}
.g_lnav_i ul{
position:relative;
width:200px;
background:#FFF;
border:1px solid #DDD;
box-sizing:border-box;
margin-top:5px;
margin-left:-200px;
transition-property:margin-left;
transition-duration:0.1s;
transition-delay:0.3s;
}
.g_lnav_i ul:before{
content:"";
position:absolute;
top:-10px;
left:5px;
border:5px solid transparent;
border-bottom:5px solid #FFF;
}
#g_nav[data-theme="dark"] .g_lnav_i ul{
border-color:#000;
}
#g_nav[data-theme="dark"] .g_lnav_i ul:before{
border-bottom-color:#000;
}
.g_lnav_i a{
display:block;
font-size:11px;
color:#666;
background:#FFF;
text-decoration:none;
}
.g_lnav_i a:hover{
color:#333;
background:#EEE;
}
.g_lnav_i a > div{
position:relative;
padding:8px;
}
.g_lnav_i a > div[data-mark]{
padding-left:20px;
}
.g_lnav_i a > div[data-mark]:before{
content:"";
display:block;
position:absolute;
top:50%;
left:10px;
width:6px;
height:6px;
margin-top:-3px;
border-radius:6px;
background:#C00;
}
.g_lnav_o > a > div[data-mark="white"]:before,
.g_lnav_o_txt > a > div[data-mark="white"]:before,
.g_lnav_i a > div[data-mark="white"]:before{background:white;}
.g_lnav_o > a > div[data-mark="black"]:before,
.g_lnav_o_txt > a > div[data-mark="black"]:before,
.g_lnav_i a > div[data-mark="black"]:before{background:black;}
.g_lnav_o > a > div[data-mark="blue"]:before,
.g_lnav_o_txt > a > div[data-mark="blue"]:before,
.g_lnav_i a > div[data-mark="blue"]:before{background:blue;}
.g_lnav_o > a > div[data-mark="green"]:before,
.g_lnav_o_txt > a > div[data-mark="green"]:before,
.g_lnav_i a > div[data-mark="green"]:before{background:green;}
.g_lnav_o > a > div[data-mark="yellow"]:before,
.g_lnav_o_txt > a > div[data-mark="yellow"]:before,
.g_lnav_i a > div[data-mark="yellow"]:before{background:yellow;}
#g_nav[data-theme="dark"] .g_lnav_i a{
color:#FFF;
background:#000;
}
#g_nav[data-theme="dark"] .g_lnav_i a:hover{background:#222;}
.g_lnav_o > a:hover + .g_lnav_i ul,
.g_lnav_o_txt> a:hover + .g_lnav_i ul,
.g_lnav_i:hover ul{
margin-left:0;
transition-duration:0.3s;
transition-delay:0s;
}
/**/
.g_local_img{
display:flex;
width:100%;
align-items:center;
margin-bottom:7px;
}
.g_local_img:last-child{margin-bottom:0;}
.g_local_img a{display:block;margin-right:10px;}
.align_r a{margin-left:10px;}
.g_local_img img{vertical-align:middle;}
/**/
#g_nav .gsc-control-cse {
border:none !important;
padding:10px !important;
}
#g_nav .gsib_a {
padding:0 8px !important;
vertical-align:top !important;
}
#g_nav .gsib_a .gsc-input {
background-color:transparent !important;
height:35px !important;
}
#g_nav input.gsc-search-button-v2 {
margin-top:0 !important;
padding:11px 27px !important;
}
#g_nav table.gsc-search-box .gsib_b {
vertical-align:top !important;
}
#g_nav table.gsc-search-box .gsib_b {
vertical-align:top !important;
}
#g_nav .gsc-result .gs-title {
height:auto !important;
line-height:26px;
}
#g_nav .gsc-input-box {
height:35px !important;
}
#g_nav .gsst_a {
padding-top:7px !important;
}
#g_nav .gsc-results,
#g_nav .gsc-cursor-box,
#g_nav .gsc-cursor-page {
display:inline-block !important;
text-decoration:none !important;
}
#g_nav .gsc-cursor-box {
text-align:left !important;
margin:0 !important;
}
#g_nav .gsc-cursor-page, .gsc-cursor-page {
background:#EEE !important;
border:none !important;
border-radius:0 !important;
margin:0 3px 5px !important;
padding:3px 0 !important;
text-decoration:none !important;
width:32px !important;
text-align:center !important;
}
#g_nav .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
background:#666 !important;
border:none !important;
color:#FFF !important;
text-shadow:none !important;
}
#g_nav .gsc-webResult.gsc-result:hover,
#g_nav .gsc-webResult.gsc-result.gsc-promotion:hover,
#g_nav .gsc-results .gsc-imageResult-classic:hover,
#g_nav .gsc-results .gsc-imageResult-column:hover {
background:none !important;
border-color:#FFF !important;
box-shadow:none !important;
}
#g_nav .gsc-thumbnail-inside,
#g_nav .gsc-url-top {
padding:0 !important;
}