723 行
14 KiB
Plaintext
723 行
14 KiB
Plaintext
/*=====================================================================*/
|
||
/* BASE OVERWRITE STYLE */
|
||
/*=====================================================================*/
|
||
body{
|
||
color:#333;
|
||
background:#FFF;
|
||
}
|
||
a:link,
|
||
a:visited{
|
||
color:#222;
|
||
}
|
||
a:hover,
|
||
.colBox a:hover{
|
||
color:#333;
|
||
}
|
||
a img{
|
||
border:none;
|
||
}
|
||
.colBoxKeyword{
|
||
display:none;
|
||
}
|
||
/*=====================================================================*/
|
||
/* CHANNEL BASE STYLE */
|
||
/*=====================================================================*/
|
||
/*---------------------------------------------------------------------*/
|
||
/* コンテンツ */
|
||
/*---------------------------------------------------------------------*/
|
||
#masterContents{
|
||
width:980px;
|
||
padding:0 5px 10px 5px;
|
||
clear:both;
|
||
margin:0 auto;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* レイアウト */
|
||
/*---------------------------------------------------------------------*/
|
||
#globalContents{
|
||
display:flex;
|
||
}
|
||
#masterMain{
|
||
width:667px;
|
||
margin-right:13px;
|
||
}
|
||
#masterMainLeft{
|
||
width:320px;
|
||
float:left;
|
||
}
|
||
#masterMainRight{
|
||
width:320px;
|
||
float:right;
|
||
}
|
||
#masterSub{
|
||
width:300px;
|
||
}
|
||
#masterSub .colBox{
|
||
margin-bottom:16px;
|
||
overflow:hidden;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* ボディ */
|
||
/*---------------------------------------------------------------------*/
|
||
#masterBody{
|
||
background:#FFF;
|
||
margin:0 auto;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* グローバルナビゲーション */
|
||
/*---------------------------------------------------------------------*/
|
||
#globalNavigationGroup0 #globalNavigation .gnavOut .gnavIn .gnavBtn16 a{
|
||
margin:3px 0 0 3px;
|
||
padding:5px 11px 4px;
|
||
border-radius:2px;
|
||
background:#FFF;
|
||
color:#000;
|
||
}
|
||
#g_nav_i{
|
||
width:990px;
|
||
height:80px;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* ヘッダ */
|
||
/*---------------------------------------------------------------------*/
|
||
#globalHeader{
|
||
position:relative;
|
||
}
|
||
#globalHeaderTop{
|
||
overflow:hidden;
|
||
background:#000;
|
||
}
|
||
#globalHeaderMiddle{
|
||
margin:0 auto 20px;
|
||
padding:0;
|
||
}
|
||
#globalHeaderBottom{
|
||
width:980px;
|
||
margin:0 auto;
|
||
padding:0 5px;
|
||
clear:both;
|
||
position:relative;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* ロゴ */
|
||
/*---------------------------------------------------------------------*/
|
||
#globalLogo{
|
||
width:170px;
|
||
height:47px;
|
||
margin:14px auto 16px;
|
||
}
|
||
#globalLogo h1,
|
||
#globalLogo div{
|
||
margin:0;
|
||
width:170px;
|
||
height:47px;
|
||
}
|
||
#globalLogo h1 a,
|
||
#globalLogo div a{
|
||
display:block;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* メインナビゲーション */
|
||
/*---------------------------------------------------------------------*/
|
||
#localNavigation{
|
||
margin:0 0 24px;
|
||
background:rgba(255,255,255,1);
|
||
}
|
||
#localNavigation a:active{
|
||
background-color:transparent;
|
||
}
|
||
#lnavMain{
|
||
margin:0;
|
||
padding:10px 0;
|
||
border-bottom:1px solid #ddd;
|
||
overflow:hidden;
|
||
text-align:center;
|
||
}
|
||
#lnavMain .lnavBtn{
|
||
margin:0;
|
||
padding:0;
|
||
display:inline-block;
|
||
}
|
||
#lnavMain .lnavBtn a{
|
||
display:block;
|
||
border-right:1px solid #ddd;
|
||
font-size:15px;
|
||
line-height:20px;
|
||
font-weight:bold;
|
||
margin:0;
|
||
padding:0 18px 0 12px;
|
||
color:#404040;
|
||
}
|
||
#lnavMain .lnavBtn:first-child{
|
||
background:url(https://image.itmedia.co.jp/business/images/homeicon.png) no-repeat left 2px;
|
||
background-size:16px 14px;
|
||
padding-left:14px;
|
||
}
|
||
#lnavMain .lnavBtn:last-child a{
|
||
border-right:none;
|
||
}
|
||
#lnavMain .lnavBtn.lnavBtnmln12 a{
|
||
border-right:none;
|
||
}
|
||
#lnavMain .lnavBtnmlnLast a{
|
||
border-right:none;
|
||
}
|
||
#lnavMain .lnavBtn a:link,
|
||
#lnavMain .lnavBtn a:visited{
|
||
}
|
||
#lnavMain .lnavBtn a:hover,
|
||
#lnavMain .lnavBtnActive a:link,
|
||
#lnavMain .lnavBtnActive a:visited,
|
||
#lnavMain .lnavBtnActive a:hover{
|
||
text-decoration:none;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* サブナビゲーション */
|
||
/*---------------------------------------------------------------------*/
|
||
#lnavSub{
|
||
clear:both;
|
||
overflow:auto;
|
||
}
|
||
#lnavSub .lnavBtn{
|
||
white-space:nowrap;
|
||
float:left;
|
||
margin:0;
|
||
padding:0;
|
||
}
|
||
#lnavSub .lnavBtn a{
|
||
display:block;
|
||
font-size:12px;
|
||
line-height:12px;
|
||
margin:0 5px 3px 0;
|
||
padding:7px 10px;
|
||
background:#e5e5e5;
|
||
border-radius:3px;
|
||
}
|
||
#lnavSub .lnavBtn a .raquo{
|
||
display:none;
|
||
}
|
||
#lnavSub .lnavBtnNew a:after{
|
||
background:#99012C;
|
||
color:#fff;
|
||
content:"NEW";
|
||
display:inline-block;
|
||
font-family:Arial,Verdana;
|
||
font-size:10px;
|
||
height:12px;
|
||
font-weight:bold;
|
||
padding:0 3px;
|
||
margin:0 0 0 3px;
|
||
}
|
||
#lnavSub .lnavBtn.lnavBtnHover a{
|
||
background:url(https://image.itmedia.co.jp/business/images/ulli_arrow_lnavsub_b.gif) no-repeat right 8px #e5e5e5;
|
||
padding:7px 17px 7px 10px;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* サブサブナビゲーション */
|
||
/*---------------------------------------------------------------------*/
|
||
#lnavSubSub{
|
||
font-size:10px;
|
||
line-height:14px;
|
||
padding:3px 0 5px;
|
||
clear:both;
|
||
}
|
||
#lnavSubSub .lnavBtn{
|
||
display:inline;
|
||
margin:0;
|
||
}
|
||
#lnavSubSub .lnavBtn a:link,
|
||
#lnavSubSub .lnavBtn a:visited{
|
||
color:#333;
|
||
}
|
||
#lnavSubSub .lnavBtnPR a:link,
|
||
#lnavSubSub .lnavBtnPR a:visited{
|
||
background:url(https://image.itmedia.co.jp/images/cms_pr.gif) no-repeat 0 1px;
|
||
padding:0 0 0 22px;
|
||
}
|
||
#lnavSubSub .lnavBtnPR a .raquo{
|
||
display:none;
|
||
}
|
||
#lnavSubSub .lnavBtnNew a:link,
|
||
#lnavSubSub .lnavBtnNew a:visited{
|
||
background:url(https://image.itmedia.co.jp/images/ulli_new.gif) no-repeat 0 0;
|
||
padding:0 0 0 27px;
|
||
}
|
||
#lnavSubSub .lnavBtnNew a .raquo{
|
||
display:none;
|
||
}
|
||
#lnavSubSub .lnavBtn a .raquo{
|
||
display:none;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* プルダウンナビゲーション */
|
||
/*---------------------------------------------------------------------*/
|
||
.lnavBtnGroup{
|
||
display:none;
|
||
width:auto;
|
||
z-index:50;
|
||
background:#FFF;
|
||
border:1px solid #CCC;
|
||
}
|
||
.lnavBtnGroupIn .lnavBtn{
|
||
display:block !important;
|
||
margin:0;
|
||
}
|
||
.lnavBtnGroupIn .lnavBtn a{
|
||
display:block;
|
||
padding:3px;
|
||
border-bottom:1px dotted #DDD;
|
||
color:#333 !important;
|
||
}
|
||
.lnavBtnGroupIn .lnavBtn a:hover{
|
||
background:#EEE;
|
||
text-decoration:none;
|
||
}
|
||
#lnavSub .lnavBtn .lnavBtnGroupOut a{
|
||
background:url(https://image.itmedia.co.jp/business/images/ulli_arrow_lnavsub.gif) no-repeat 1px 9px #FFF;
|
||
margin:0;
|
||
}
|
||
#lnavSub .lnavBtn .lnavBtnGroupOut a:hover{
|
||
background:url(https://image.itmedia.co.jp/business/images/ulli_arrow_lnavsub.gif) no-repeat 1px 9px #E5E5E5;
|
||
}
|
||
#lnavSub .lnavBtn .lnavBtnGroupOut .lnavBtn{
|
||
background:#FFF;
|
||
padding:0;
|
||
margin:0 ;
|
||
float:none;
|
||
border-right:none;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* ぱんくず */
|
||
/*---------------------------------------------------------------------*/
|
||
#localPankuzu{
|
||
font-size:10px;
|
||
line-height:14px;
|
||
padding:10px 0;
|
||
margin:0;
|
||
}
|
||
#localPankuzu ol {
|
||
list-style:none;
|
||
display:inline;
|
||
margin:0;
|
||
padding:0;
|
||
}
|
||
#localPankuzu .lpanIn li {
|
||
display:inline;
|
||
}
|
||
#localPankuzu .lpanIn li:after {
|
||
content:' > ';
|
||
}
|
||
#localPankuzu .lpanIn li:last-child:after {
|
||
content:'';
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* 検索窓 */
|
||
/*---------------------------------------------------------------------*/
|
||
#globalSearch{
|
||
width:300px;
|
||
margin-bottom:10px;
|
||
overflow:hidden;
|
||
}
|
||
#globalSearch .cse .gsc-search-button input.gsc-search-button-v2,
|
||
#globalSearch input.gsc-search-button-v2{
|
||
margin-top:0;
|
||
margin-left:0;
|
||
padding:6px 10px;
|
||
}
|
||
#globalSearch .gsc-search-box-tools .gsc-search-box .gsc-input,
|
||
#globalSearch table.gsc-search-box td.gsc-input,
|
||
#globalSearch table.gsc-search-box td.gsc-input{
|
||
padding-right:0;
|
||
}
|
||
/* popIn */
|
||
#_popIn_search_area{
|
||
font-size:10px;
|
||
line-height:14px;
|
||
padding:10px 0;
|
||
border:none;
|
||
border-bottom:1px solid #FFF;
|
||
height:25px;
|
||
}
|
||
#popInSearchField{
|
||
float:left;
|
||
width:255px!important;
|
||
height:24px!important;
|
||
padding:0!important;
|
||
border:1px #CCC solid;
|
||
}
|
||
#_popIn_search_area .submit{
|
||
float:left;
|
||
width:41px;
|
||
height:26px;
|
||
background:#8498c6;
|
||
color:#FFF;
|
||
font-size:12px;
|
||
font-family:Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
|
||
border:0 none;
|
||
cursor:pointer;
|
||
}
|
||
#_popIn_search_area .submit:hover{
|
||
background:#8fa3d4;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* フッタ */
|
||
/*---------------------------------------------------------------------*/
|
||
#masterFooter{
|
||
width:100%;
|
||
padding:40px 0 8px;
|
||
}
|
||
#globalFooterBottom{
|
||
border-bottom:3px solid #EEE;
|
||
}
|
||
#globalFooterLink{
|
||
font-size:10px;
|
||
line-height:14px;
|
||
text-align:right;
|
||
width:970px;
|
||
margin:0 auto;
|
||
padding:0;
|
||
}
|
||
#globalFooterCorp{
|
||
padding:32px 0 0 0;
|
||
width:970px;
|
||
margin:0 auto;
|
||
}
|
||
#globalCopyright{
|
||
font-size:12px;
|
||
line-height:16px;
|
||
}
|
||
|
||
.footerMailmag{
|
||
background-color:rgba(238,238,238,1);
|
||
background-image:url(https://image.itmedia.co.jp/business/images/footer_mailtexture.png);
|
||
background-position:calc(50% - 320px) center;
|
||
background-position:-webkit-calc(50% - 320px) center;
|
||
background-repeat:no-repeat;
|
||
padding:32px 0;
|
||
text-align:center;
|
||
}
|
||
.footerMailmag p{
|
||
font-size:16px;
|
||
line-height:20px;
|
||
font-weight:600;
|
||
margin:0 0 16px;
|
||
}
|
||
.footerMailmag a{
|
||
font-size:14px;
|
||
line-height:32px;
|
||
background:#FFF;
|
||
display:inline-block;
|
||
padding:0 24px;
|
||
transition:all 0.5s;
|
||
}
|
||
.footerMailmag a:hover{
|
||
text-decoration:none;
|
||
opacity:0.7;
|
||
}
|
||
.footerIbo{
|
||
padding:48px 0 36px;
|
||
width:220px;
|
||
margin:0 auto;
|
||
}
|
||
.footerLogo{
|
||
margin:0 0 24px;
|
||
}
|
||
.footerIbo a{
|
||
display:inline-block;
|
||
}
|
||
.footerIbo ul{
|
||
list-style:none;
|
||
margin:0;
|
||
padding:0;
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
justify-content:space-between;
|
||
}
|
||
.footerIbo li{
|
||
transition:all 0.5s;
|
||
width:42px;
|
||
}
|
||
.footerIbo li:hover{
|
||
text-decoration:none;
|
||
opacity:0.7;
|
||
}
|
||
.footerIbo li img{
|
||
width:100%;
|
||
height:auto;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* colBox */
|
||
/*---------------------------------------------------------------------*/
|
||
/* Head */
|
||
#masterMain .colBoxHead{
|
||
background-color:#FFF;
|
||
border-top:none;
|
||
border-bottom:1px solid #ddd;
|
||
margin:0 0 15px;
|
||
padding:0;
|
||
}
|
||
#masterMain .colBoxHead h2{
|
||
padding:8px 3px 5px;
|
||
font-size:15px;
|
||
line-height:20px;
|
||
}
|
||
#masterSub .colBoxHead{
|
||
font-size:14px;
|
||
line-height:18px;
|
||
padding:4px 0;
|
||
border-top:none;
|
||
border-bottom:1px solid #ddd;
|
||
margin:0 0 10px;
|
||
}
|
||
#masterSub .colBoxHead h2,
|
||
#masterSub .colBoxHead p{
|
||
font-weight:bold;
|
||
padding:4px 0;
|
||
margin:0;
|
||
}
|
||
#masterSub .colBoxTitle p{
|
||
font-size:14px;
|
||
line-height:20px;
|
||
margin:0;
|
||
font-weight:bold;
|
||
}
|
||
.colBoxInner a:hover{
|
||
opacity:0.8;
|
||
}
|
||
/* Icon */
|
||
.colBoxIcon a{
|
||
margin:0 10px 10px 0;
|
||
}
|
||
/* Ulist */
|
||
.colBoxUlist ul li{
|
||
background:none;
|
||
padding:0 0 3px 0;
|
||
}
|
||
#masterSub .colBoxUlist ul,
|
||
.colBox .backNumBoxIn ul{
|
||
padding:2px 0 0 10px;
|
||
font-size:13px;
|
||
line-height:20px;
|
||
}
|
||
#masterSub .colBoxUlist ul li,
|
||
.colBox .backNumBoxIn ul li{
|
||
position:relative;
|
||
background:none;
|
||
padding:4px 5px 8px;
|
||
}
|
||
#masterSub .colBoxUlist ul li::after,
|
||
.colBox .backNumBoxIn ul li::after{
|
||
display:block;
|
||
content:'';
|
||
position:absolute;
|
||
top:9px;
|
||
left:-1em;
|
||
width:6px;
|
||
height:6px;
|
||
border-right:1px solid #666;
|
||
border-bottom:1px solid #666;
|
||
-webkit-transform:rotate(-45deg);
|
||
transform:rotate(-45deg);
|
||
}
|
||
.colBoxOlist ol li{
|
||
border:0;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* Features */
|
||
/*---------------------------------------------------------------------*/
|
||
.colBoxFeatures.colBox{
|
||
clear:both;
|
||
margin-bottom:22px;
|
||
overflow:hidden;
|
||
}
|
||
.colBoxFeatures .colBoxIndex{
|
||
overflow:hidden;
|
||
margin-bottom:6px;
|
||
}
|
||
/*---------------------------------------------------------------------*/
|
||
/* 右カラム */
|
||
/*---------------------------------------------------------------------*/
|
||
/* PageLink */
|
||
#masterSub .colBoxPageLink{
|
||
clear:both;
|
||
margin:10px 0;
|
||
text-align:center;
|
||
}
|
||
#masterSub .colBoxPageLink a{
|
||
margin:0 auto;
|
||
padding:5px 20px;
|
||
background:#ddd;
|
||
text-decoration:none;
|
||
display:inline-block;
|
||
}
|
||
#masterSub .colBoxPageLink a:hover{
|
||
background:#e9e9e9;
|
||
text-decoration:none;
|
||
color:#777;
|
||
}
|
||
/* Social Plugin */
|
||
.colBoxSubcolTwitter,
|
||
.colBoxSubcolFacebook{
|
||
margin:0 0 20px;
|
||
}
|
||
.colBoxSubcolNewArticles{
|
||
margin:0 0 20px;
|
||
}
|
||
.colBoxSubcolNewArticles .colBoxIcon a{
|
||
margin:0 7px 7px 0;
|
||
}
|
||
.colBoxSubcolNewArticles .colBoxIcon img{
|
||
width:40px;
|
||
height:30px;
|
||
}
|
||
.colBoxSubcolNewArticles .colBoxTitle h3{
|
||
font-size:14px;
|
||
line-height:20px;
|
||
}
|
||
/* ランキング */
|
||
.colBoxRanking{
|
||
margin:0 0 20px;
|
||
counter-reset:colBoxRankingCounter;
|
||
position:relative;
|
||
}
|
||
.colBoxRanking .colBoxHead{
|
||
font-weight:bold;
|
||
}
|
||
.colBoxRanking .colBoxTab{
|
||
position:absolute;
|
||
top:0;
|
||
right:0;
|
||
margin:0;
|
||
list-style:none;
|
||
font-size:13px;
|
||
line-height:20px;
|
||
}
|
||
.colBoxRanking .colBoxTab li{
|
||
transition:all 0.5s;
|
||
float:left;
|
||
width:50px;
|
||
margin:0 0 0 5px;
|
||
padding:2px 5px;
|
||
text-align:center;
|
||
border:none;
|
||
background:#999;
|
||
cursor:pointer;
|
||
color:#fff;
|
||
}
|
||
.colBoxRanking.dayActive .colBoxTab li:first-child,
|
||
.colBoxRanking.wekActive .colBoxTab li:nth-child(2){
|
||
background:#000;
|
||
}
|
||
.colBoxRanking .colBoxTab li::after{
|
||
display:none;
|
||
}
|
||
.colBoxRanking #colBoxWeeklyRank,
|
||
.colBoxRanking #colBoxDailyRank{
|
||
margin:5px;
|
||
}
|
||
.colBoxRanking .colBoxOlist li{
|
||
position:relative;
|
||
margin:0;
|
||
padding:4px 0 8px 32px;
|
||
font-size:14px;
|
||
line-height:18px;
|
||
background:none;
|
||
}
|
||
.colBoxRanking .colBoxOlist li a:after{
|
||
counter-increment:colBoxRankingCounter;
|
||
content:counter(colBoxRankingCounter);
|
||
position:absolute;
|
||
top:6px;
|
||
left:0;
|
||
padding:7px 5px;
|
||
font-size:13px;
|
||
line-height:100%;
|
||
font-weight:bold;
|
||
color:#fff;
|
||
background:#000;
|
||
}
|
||
.colBoxRanking .colBoxOlist li.rank10 a:after{
|
||
padding:7px 0;
|
||
font-size:8px;
|
||
line-height:13px;
|
||
width:18px;
|
||
text-align:center;
|
||
}
|
||
/* 注目のテーマ */
|
||
.colBoxThemeBannar .colBoxBanner{
|
||
display:block;
|
||
text-align:center;
|
||
margin:0 0 10px;
|
||
}
|
||
.colBoxThemeBannar .colBoxBanner a{
|
||
border:none;
|
||
float:none;
|
||
margin:0;
|
||
}
|
||
.colBoxThemeSite .colBoxIndex {
|
||
clear:both;
|
||
}
|
||
.colBoxThemeSite h3 {
|
||
font-weight:normal;
|
||
}
|
||
.colBoxThemeSite img {
|
||
width:80px;
|
||
height:auto;
|
||
}
|
||
.colBoxThemeSite .colBoxSubTitle p {
|
||
font-size:11px;
|
||
line-height:1.6;
|
||
padding:0;
|
||
margin:0;
|
||
}
|
||
.colBoxThemeSite .colBoxSubTitle a {
|
||
color:#747474;
|
||
}
|
||
.colBoxThemeSite .colBoxIcon a {
|
||
border:none;
|
||
}
|
||
|
||
/*dbdBannar*/
|
||
.colBoxThemeBannar .colBoxIcon{
|
||
display:block;
|
||
text-align:center;
|
||
margin:0 0 8px;
|
||
}
|
||
.colBoxThemeBannar .colBoxIcon a{
|
||
border:none;
|
||
float:none;
|
||
margin:0;
|
||
}
|
||
/* specialInduction */
|
||
#masterSub #specialInduction .colBoxHead{
|
||
border-bottom:0px solid #ddd;
|
||
}
|
||
#masterSub #specialInduction .colBoxHead p{
|
||
border-bottom:1px solid #ddd;
|
||
}
|
||
|
||
/* ヘッダ固定 */
|
||
#masterBodyIn{
|
||
padding-top:147px;
|
||
}
|
||
.g_nav_outside{
|
||
position:fixed;
|
||
top:0;
|
||
left:0;
|
||
right:0;
|
||
z-index:1000;
|
||
width:100%;
|
||
margin:0 auto;
|
||
}
|
||
.ad-ITWL-wp .g_nav_outside{
|
||
width:990px;
|
||
}
|
||
.ad-ITWL #masterBodyIn,
|
||
.body-sphl #masterBodyIn{
|
||
padding-top:0;
|
||
}
|
||
.ad-ITWL .g_nav_outside,
|
||
.body-sphl .g_nav_outside{
|
||
position:static;
|
||
}
|