#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, 'MS 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; }