ins,mark{color:#000}a,hr{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,summary,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}sup,sub{margin:0;padding:0;border:0;outline:0;background:0 0}blockquote{quotes:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}
body{
--base-fs:11;--base-lh:1.7;
font:calc(var(--base-fs) * 1px) -apple-system, Sans-Serif, HiraKakuProN-W3, Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
line-height:var(--base-lh);
min-width:320px;
}
a:link,
a:visited{
color:#000;
text-decoration:none;
-webkit-transition:color 0.5s;
transition:color 0.5s;
}
h1,h2,h3,h4,h5,li,p {
overflow-wrap:break-word;
}
.formText,
.formEmail,
.formTextarea{
font-size:14px;
}
.deferLoader{
margin:3px auto 0;
display:inline-block;
width:6px;
height:6px;
border-radius:50%;
border:2px solid #CCC;
border-right-color:transparent;
-webkit-animation:jsonloader 1s linear infinite;
animation:jsonloader 1s linear infinite;
}
.size10{font-size:77%;}.size11{font-size:85%;}.size12{font-size:93%;}.size13{font-size:100%;}.size14{font-size:108%;}.size15{font-size:116%;}.size16{font-size:123.1%;}.size17{font-size:131%;}.size18{font-size:138.5%;}.size19{font-size:146.5%;}.size20{font-size:153.9%;}.size21{font-size:161.6%;}.size22{font-size:167%;}.size23{font-size:174%;}.size24{font-size:182%;}.size25{font-size:189%;}.size26{font-size:197%;}
.colBoxClear{
font-size:0;
line-height:0;
height:0;
clear:both;
}
.h5px{height:5px;}.h10px{height:10px;}.h15px{height:15px;}.h20px{height:20px;}.h25px{height:25px;}.h30px{height:30px;}
/* WRAP */
#masterWrap{
overflow:hidden;
}
#masterWrapOuter{
position:relative;
box-shadow:0 0 3px #CCC;
padding-top:50px;
}
.masterWrapOuterDefault{
-webkit-transform:translate3d(0px,0,0);
transform:translate3d(0px,0,0);
-webkit-transition:-webkit-transform 0.3s;
transition:transform 0.3s;
}
.masterWrapOuterDefault.slideRight{
-webkit-transform:translate3d(300px,0,0);
transform:translate3d(300px,0,0);
}
.masterWrapOuterDefault.slideLeft{
-webkit-transform:translate3d(-300px,0,0);
transform:translate3d(-300px,0,0);
}
#masterWrapInner{
color:#000;
background:#FFF;
}
/* SLIDEBOX */
#slideBox_transparent{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background:transparent;
z-index:999;
display:none;
}
.slideBox{
position:fixed;
top:0;
box-sizing:border-box;
width:300px;
height:100%;
display:none;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
.slideBox a{
color:#666;
}
#slideBox_left,
#slideBox_right{
font-size:11px;
line-height:1.7;
padding-top:50px;
}
#slideBox_left{left:0;}
#slideBox_right{right:0;}
/* slideLeft.css */
/* HEADER */
#masterHeader{
padding:10px;
}
#headerstyle_fixed #masterHeader{
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:999;
background:#FFF;
box-sizing:border-box;
border-bottom:1px solid transparent;
-webkit-transition:border 0.3s;
transition:border 0.3s;
}
#headerstyle_fixed #masterHeader.scrollShadow,
#headerstyle_fixed #masterHeader.openShadow{
border-bottom:1px solid #CCC;
}
/* SLIDEBUTTON */
.slideBtn{
position:absolute;
top:5px;
width:40px;
height:40px;
display:block;
cursor:pointer;
z-index:999;
}
#slideBtn_left{left:0;}
#slideBtn_rank{left:50px;z-index:998;}
#slideBtn_search{right:50px;}
#slideBtn_right{right:0;}
.slideBtnArea{
width:40px;
height:40px;
}
.slideBtnOpen .slideBtnArea{
-webkit-animation:slideBtnOpen 300ms linear 1 forwards;
animation:slideBtnOpen 300ms linear 1 forwards;
}
.slideBtnOpen360 .slideBtnArea{
-webkit-animation:slideBtnOpen360 300ms linear 1 forwards;
animation:slideBtnOpen360 300ms linear 1 forwards;
}
.slideBtnClose .slideBtnArea{
-webkit-animation:slideBtnClose 300ms linear 1 forwards;
animation:slideBtnClose 300ms linear 1 forwards;
}
.slideBtnClose360 .slideBtnArea{
-webkit-animation:slideBtnClose360 300ms linear 1 forwards;
animation:slideBtnClose360 300ms linear 1 forwards;
}
@-webkit-keyframes slideBtnOpen{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
@keyframes slideBtnOpen{
0%{transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
@-webkit-keyframes slideBtnClose{
0%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(0deg);}
}
@keyframes slideBtnClose{
0%{transform:rotate(180deg);}
100%{transform:rotate(0deg);}
}
@-webkit-keyframes slideBtnOpen360{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes slideBtnOpen360{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes slideBtnClose360{
0%{-webkit-transform:rotate(360deg);}
100%{-webkit-transform:rotate(0deg);}
}
@keyframes slideBtnClose360{
0%{transform:rotate(360deg);}
100%{transform:rotate(0deg);}
}
#slideBtn_left .slideBtnArea{background:url(https://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center 10px / 20px;}
#slideBtn_rank .slideBtnArea{background:url(https://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center -30px / 20px;}
#slideBtn_search .slideBtnArea{background:url(https://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center -56px / 17px;}
#slideBtn_right .slideBtnArea{background:url(https://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center -110px / 20px;}
/* LOGO */
#masterLogo{
margin:0 auto;
width:90px;
height:30px;
}
#masterLogo h1{
font-size:12px;
line-height:12px;
width:90px;
height:30px;
}
/**/
#masterLogo a{
display:table-cell;
width:90px;
height:30px;
text-align:center;
vertical-align:middle;
}
#masterLogo a img{
vertical-align:middle;
}
/* CONTENTS */
/* TOP INDEX AJAX LOADER */
.index-ajax-loader{
height:50px;
padding:20px;
opacity:1;
overflow:hidden;
-webkit-transition:height,padding,opacity 0s;
transition:height,padding,opacity 0s;
}
.index-ajax-loader.complete{
height:0;
padding:0;
opacity:0;
}
.index-ajax-loader .loading{
font-family:Gill Sans, 'メイリオ', Meiryo;
text-align:center;
}
.index-ajax-loader .loader{
margin:0 auto 10px;
display:block;
width:20px;
height:20px;
border-radius:50%;
border:3px solid #CCC;
border-right-color:transparent;
-webkit-animation:iconloader 1s linear infinite;
animation:iconloader 1s linear infinite;
}
/* COLBOX */
.colBox{
overflow:hidden;
}
.colBox .colBoxHead{
border-bottom:1px solid #DDD;
position:relative;
padding:10px 5px;
}
.colBox .colBoxHead h1,
.colBox:not(.colBoxCategories) .colBoxHead h2,
.colBox .colBoxHead .colBoxHeadname{
background:url(data:image/gif;base64,R0lGODlhBQAFAIABAJmZmf///yH5BAEAAAEALAAAAAAFAAUAAAIIBGKGF72rTAEAOw==) no-repeat left center / 14px;
padding:0 0 0 20px;
font-size:130%;
font-weight:normal;
}
.colBox.colBoxCategories .colBoxHead h2{
font-weight:normal;
}
.colBox .colBoxHead2{
background:#EEE;
padding:3px 5px;
font-size:93%;
color:#666;
}
.colBox .colBoxHeadSubtxt{
position:absolute;
top:12px;
right:5px;
}
.colBox .colBoxSubhead{
border-bottom:1px dotted #DDD;
margin:0 0 5px;
padding:0 0 3px;
}
.colBox .colBoxSubhead .subhead{
font-size:12px;
margin:0;
}
.colBox .colBoxIndex{
padding:5px;
}
.colBox .colBoxIndex form{
margin:0;
padding:0;
}
.colBox .colBoxIndex button{
vertical-align:middle;
}
.colBoxIcon{
display:inline;
}
.colBoxIcon a{
float:left;
margin:4px 10px 3px 0;
}
/**/
.colBox .colBoxIndex .kwdset li{
display:inline-block;
}
.colBox .colBoxIndex .kwdset li a{
display:inline-block;
background:#EEE;
padding:0 3px;
}
/**/
.colBox .colBoxIndex .type-related li{
border:none;
}
/**/
.colBoxIndexList .colBoxIndex{
-webkit-transition:background-color 0.2s;
transition:background-color 0.2s;
padding:0;
}
.colBoxIndexList .colBoxIndex.tap_ui{
background-color:#EEE;
}
.colBoxIndexList .colBoxIcon{
display:block;
border:1px solid #CCC;
margin:0 10px 3px 0;
float:left;
width:82px;
height:62px;
}
.colBoxIndexList .colBoxIcon a{
display:block;
margin:1px 0 0 1px;
width:80px;
height:60px;
}
.colBoxIndexList .imgLazy{
opacity:0;
border:1px solid #DDD;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-transition:opacity 0.3s;
transition:opacity 0.3s;
}
.colBoxIndexList .imgLazy.imgLazy_ok,
.colBoxIndexList .imgLazy.imgLazy_ng{
opacity:1;
}
.colBoxIndexList .colBoxIndex[data-articletype="Special"],
.colBoxIndexList .colBoxIndex[data-articletype="PR"],
.colBoxIndexList .colBoxIndex[data-articletype="PR_1"]{
position:relative;
}
.colBoxIndexList .colBoxIndex[data-articletype="PR"] .icon-writer{
display:none;
}
.colBoxIndexList .colBoxIndex[data-articletype="Special"]:before,
.colBoxIndexList .colBoxIndex[data-articletype="PR"]:before,
.colBoxIndexList .colBoxIndex[data-articletype="PR_1"]:before{
content:"PR";
font-size:90%;
color:#999;
position:absolute;
bottom:10px;
right:5px;
}
@media(min-width:341px){
.colBoxIndexList .colBoxIndex[data-articletype="Special"]:before,
.colBoxIndexList .colBoxIndex[data-articletype="PR"]:before,
.colBoxIndexList .colBoxIndex[data-articletype="PR_1"]:before{
right:10px;
}
}
@media(min-width:361px){
.colBoxIndexList .colBoxIndex[data-articletype="Special"]:before,
.colBoxIndexList .colBoxIndex[data-articletype="PR"]:before,
.colBoxIndexList .colBoxIndex[data-articletype="PR_1"]:before{
right:20px;
}
}
/**/
.colBoxIndexMMDD .colBoxHead{
display:none;
}
/**/
.colBoxIndexList .colBoxIndex{
display:flex;
border-bottom:1px solid #DDD;
}
.colBoxIndexList .colBoxIndex .colBoxLeft{
border-right:none;
border-bottom:none;
overflow:hidden;
vertical-align:middle;
padding:10px 5px 10px 10px;
width:80px;
}
@media(min-width:341px){
.colBoxIndexList .colBoxIndex .colBoxLeft{
width:100px;
}
}
@media(min-width:361px){
.colBoxIndexList .colBoxIndex .colBoxLeft{
width:120px;
}
}
.colBoxIndexList .colBoxIndex .colBoxRight{
flex:1;
vertical-align:middle;
padding:10px 10px 10px 5px;
}
.colBoxIndexList .colBoxLeft{
background:none !important;
}
.colBoxIndexList .colBoxLeft .colBoxIcon{
display:block;
border:none;
margin:0;
float:none;
width:auto;
height:auto;
}
.colBoxIndexList .colBoxLeft .colBoxIcon a{
display:table-cell;
margin:0;
float:none;
vertical-align:middle;
width:80px;
height:60px;
}
@media(min-width:341px){
.colBoxIndexList .colBoxLeft .colBoxIcon a{
width:100px;
height:75px;
}
}
@media(min-width:361px){
.colBoxIndexList .colBoxLeft .colBoxIcon a{
width:120px;
height:90px;
}
}
.colBoxIndexList .colBoxLeft .colBoxIcon a.iconfix{
display:block;
border:1px solid #DDD;
box-sizing:border-box;
}
.colBoxIndexList .colBoxLeft .colBoxIcon a .iconloader{
margin:0 auto;
display:block;
width:10px;
height:10px;
border-radius:50%;
border:1px solid #CCC;
border-right-color:transparent;
-webkit-animation:iconloader 1s linear infinite;
animation:iconloader 1s linear infinite;
}
@-webkit-keyframes iconloader{
0%{-webkit-transform:rotate(0deg);opacity:0.5;}
50%{-webkit-transform:rotate(180deg);opacity:1.0;}
100%{-webkit-transform:rotate(360deg);opacity:0.5;}
}
@keyframes iconloader{
0%{transform:rotate(0deg);opacity:0.5;}
50%{transform:rotate(180deg);opacity:1.0;}
100%{transform:rotate(360deg);opacity:0.5;}
}
/**/
.colBoxIndexEditfree .colBoxHead h1,
.colBoxIndexEditfree .colBoxHead h2,
.colBoxIndexEditfree .colBoxHead .colBoxHeadname{
background:url(https://image.itmedia.co.jp/spv/images/ulli_man.png) no-repeat left center / 14px;
padding:0 0 0 20px;
}
/**/
.colBoxSubTitle{
font-size:108%;
}
.colBoxSubTitle h3{
font-weight:normal;
}
.colBoxTitle{
font-size:123.1%;
}
.colBoxTitle h1,
.colBoxTitle h2,
.colBoxTitle h3{
font-weight:normal;
}
.colBoxDescription{
display:none;
font-size:108%;
font-weight:normal;
}
.setIndexStyleDefault .colBoxDescription{
display:block;
}
.colBoxDescription h2,
.colBoxDescription h3{
font-weight:normal;
color:#888;
}
.colBoxInfo{
font-size:90%;
color:#999;
}
.colBoxInfo .icon-writer,
.colBoxInfo .icon-date{
display:block;
padding:1px 0 0 15px;
background:url(https://image.itmedia.co.jp/spv/images/author_update.png) no-repeat left 4px;
}
.colBoxInfo .icon-writer{background-position:left 4px;}
.colBoxInfo .icon-date{background-position:left -26px;}
.colBoxPageLink{
padding:5px;
font-size:108%;
text-align:right;
}
#subtopContents .colBoxPageLink{
display:none;
}
.colBoxUlist ul{
font-size:108%;
list-style-type:none;
}
.colBoxIndexNewssmart .colBoxUlist ul{
margin:0 !Important;
}
.colBoxUlist ul li{
margin:0 0 3px;
padding:0 0 3px 14px;
background:url(data:image/gif;base64,R0lGODlhAQABAIAAAJmZmQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==) no-repeat left center / 5px;
border-bottom:1px dotted #CCC;
}
.colBoxIndexNewssmart .colBoxUlist ul li{
border-bottom:1px dotted #ffedea;
font-size:12px !important;
}
.colBoxOlist ul{
font-size:108%;
list-style-type:none;
}
.colBoxTable table{
border-collapse:collapse;
}
.colBoxTable table th,
.colBoxTable table td{
font-size:108%;
border:1px solid #CCC;
padding:1px 3px;
text-align:left;
}
.colBoxTable table th{
background:#EEE;
}
.colBoxBorder{
border-bottom:1px solid #DDD;
}
.colBoxBacknumber .colBoxHead h2,
.colBoxKeywordIndex .colBoxHead h1,
.colBoxBacknumber .colBoxHead .colBoxHeadname,
.colBoxKeywordIndex .colBoxHead .colBoxHeadname{
background:url(https://image.itmedia.co.jp/spv/images/ulli_archive.png) no-repeat left center / 14px;
padding:0 0 0 20px;
}
.colBoxBacknumber .colBoxIndex,
.colBoxKeywordIndex .colBoxIndex{
padding:10px !important;
}
.colBoxBacknumber select,
.colBoxKeywordIndex select,
.colBoxBacknumber button,
.colBoxKeywordIndex button{
font:12px HiraKakuProN-W3, Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
}
.colBoxInformation .colBoxHead h2,
.colBoxInformation .colBoxHead .colBoxHeadname{
background:url(https://image.itmedia.co.jp/spv/images/ulli_userinfo.png) no-repeat left center / 14px;
padding:0 0 0 20px;
}
.colBoxInformation .colBoxDescription{
margin:0 0 5px;
}
.colBoxInformation .colBoxDescription h2{
font-size:12px;
font-weight:normal;
}
.colBoxInformation .colBoxUlist ul{
font-size:12px;
}
.colBoxQuickPoll .colBoxTitle h3{
font-size:16px !important;
}
.colBoxQuickPoll .colBoxIndex form{
margin:0;
}
.colBoxQuickPoll .colBoxIndex form label{
font-size:14px;
vertical-align:middle;
font-weight:bold;
}
.colBoxQuickPoll .colBoxGraph{
font-size:12px;
border:1px solid #FFF;
background:-webkit-linear-gradient(top,#e4df48,#c3bd1c);
background:linear-gradient(to bottom,#e4df48,#c3bd1c);
border-radius:5px;
box-shadow:0px 0px 1px #999;
text-align:center;
margin:0 0 5px;
padding:2px 0;
}
.colBoxQuickPoll .colBoxInfo{
text-align:center;
}
.colBoxQuickPoll .colBoxInfoBtn{
padding:10px 0 0 0;
}
.colBoxQuickPoll .colBoxInfo p{
color:#C00;
}
.colBoxListinline .colBoxUlist li{
display:inline;
border:none;
margin:0 5px 0 0;
padding:0 0 0 16px;
background-size:12px;
padding-left:16px;
}
.colBoxListinlineblock .colBoxUlist li{
display:inline;
background:none;
border:none;
margin:0;
padding:0;
}
.colBoxListinlineblock .colBoxUlist li a{
display:inline-block;
text-align:center;
font-weight:bold;
background:-webkit-linear-gradient(top,#FFF,#EEE);
background:linear-gradient(to bottom,#FFF,#EEE);
border:1px solid #CCC;
margin:0 5px 5px 0;
padding:5px;
min-width:24px;
}
.colBoxKeywordlist .colBoxUlist li,
.colBoxRelKeyword .colBoxUlist li{
background:url(https://image.itmedia.co.jp/images/ulli_key-solid.png) no-repeat left center / 12px;
}
.colBoxKeywordlist .colBoxUlist li{
padding-left:16px;
}
.colBoxRelKeyword .colBoxUlist li{
display:inline-block;
border:none !important;
margin:0;
padding-left:16px;
}
.colBoxSEOLINK{
font-size:120%;
}
.colBoxKeywordIndex .colBoxUlist li{
background:none;
border:none;
margin:0;
padding:0;
}
.colBoxKeywordIndex .colBoxUlist li a{
display:block;
width:30px;
height:30px;
float:left;
font-size:16px;
line-height:32px;
text-align:center;
font-weight:bold;
margin:0 5px 5px 0;
}
.colBoxKeywordIndex select{
width:100px;
}
.colBoxRanking .colBoxHead h2,
.colBoxRanking .colBoxHead .colBoxHeadname{
background:url(https://image.itmedia.co.jp/spv/images/ulli_king.png) no-repeat left center / 15px;
padding:0 0 0 20px;
}
.colBoxRanking .colBoxOlist ol{
counter-reset:li;
list-style:none;
padding:0 0 0 1.2em;
}
.colBoxRanking .colBoxOlist ol li{
border-bottom:1px solid #EEE;
font-size:116%;
padding:0 0 0 5px;
}
.colBoxRanking .colBoxOlist ol .rank10{
border-bottom:none;
}
.colBoxRanking .colBoxOlist ol li a{
position:relative;
display:block;
padding:.2em 0 .2em 2em;
*padding:.4em;
margin:.5em 0;
text-decoration:none;
transition:all .3s ease-out;
}
.colBoxRanking .colBoxOlist ol li a:hover:before{
transform:rotate(45deg);
}
.colBoxRanking .colBoxOlist ol li a:before{
content:counter(li);
counter-increment:li;
position:absolute;
left:-1.3em;
top:50%;
margin-top:-1.3em;
background:#FFF;
height:2em;
width:2em;
line-height:2em;
border:.1em solid #EEE;
text-align:center;
transition:all .3s ease-out;
font-family:Gurmukhi MN, Gill Sans, 'メイリオ', Meiryo;
text-shadow:0 1px 0 rgba(255,255,255,.5);
font-size:123.1%;
color:#333;
}
.colBoxRanking .colBoxOlist ol .rank1 a:before{
background:#FAF09A;
border-color:#CCB600;
color:#000;
}
.colBoxRanking .colBoxOlist ol .rank2 a:before{
background:#FAFAFA;
border-color:#C5C5C5;
color:#000;
}
.colBoxRanking .colBoxOlist ol .rank3 a:before{
background:#F8CD9F;
border-color:#EE810B;
color:#000;
}
/**/
.colBoxRankingTypeA .colBoxIndex{
padding:0 10px;
}
#colBoxRankingTop .colBoxRankingTypeA .colBoxIndex{
padding:0;
}
.colBoxRankingTypeA .colBoxOlist ol{
padding:0;
}
.colBoxRankingTypeA .colBoxOlist ol li{
padding:5px 0;
}
.colBoxRankingTypeA .colBoxOlist ol li a{
display:table;
padding:0 0 0 40px;
}
.colBoxRankingTypeA .colBoxOlist ol li a:before{
content:counter(li);
counter-increment:li;
position:absolute;
left:0;
top:0;
margin-top:0;
background:#FFF;
width:30px;
height:50px;
line-height:3em;
border:1px solid #DDD;
box-sizing:border-box;
text-align:center;
transition:all .3s ease-out;
font-family:Gurmukhi MN, Gill Sans, 'メイリオ', Meiryo;
text-shadow:0 1px 0 rgba(255,255,255,.5);
font-size:123.1%;
color:#333;
}
.colBoxRankingTypeA .colBoxOlist ol li a .icon-field{
display:table-cell;
vertical-align:top;
}
.colBoxRankingTypeA .colBoxOlist ol li a .icon-field span{
display:block;
border:1px solid #DDD;
width:50px;
height:50px;
box-sizing:border-box;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.colBoxRankingTypeA .colBoxOlist ol li a .title-field{
display:table-cell;
vertical-align:top;
padding-left:10px;
}
/**/
#colBoxSearchTop{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
padding:60px 10px 10px;
box-sizing:border-box;
background:rgba(255,255,255,0);
-webkit-transition:background 0.3s;
transition:background 0.3s;
}
#colBoxSearchTop.colBoxActive{
background:rgba(255,255,255,0.7);
}
#colBoxSearchTop .colBoxSearch{
background:#FFF;
box-shadow:0 0 3px #999;
border-radius:2px;
width:100%;
opacity:0;
-webkit-transform:translate3d(0,-300px,0);
transform:translate3d(0,-300px,0);
-webkit-transition:-webkit-transform,opacity 0.3s;
transition:transform,opacity 0.3s;
height:100%;
overflow:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
box-sizing:border-box;
}
#colBoxSearchTop.colBoxActive .colBoxSearch{
opacity:1;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
/**/
#colBoxRankingTop{
display:none;
position:fixed;
top:100%;
left:0;
width:100%;
height:100%;
z-index:1000;
padding:60px 10px 10px;
box-sizing:border-box;
background:rgba(255,255,255,0);
-webkit-transition:background 0.3s;
transition:background 0.3s;
}
#colBoxRankingTop.colBoxActive{
top: 0;
background:rgba(255,255,255,0.7);
}
#colBoxRankingTop .colBoxRanking{
padding:0 10px;
background:#FFF;
border:1px solid #CCC;
width:100%;
height:100%;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
box-sizing:border-box;
opacity:0;
-webkit-transform:translate3d(0,-300px,0);
transform:translate3d(0,-300px,0);
-webkit-transition:-webkit-transform,opacity 0.3s;
transition:transform,opacity 0.3s;
}
#colBoxRankingTop.colBoxActive .colBoxRanking{
opacity:1;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
#colBoxRankingTop .colBoxRankingClose,
#colBoxSearchTop #colBoxSearchClose{
width:45px;
height:16px;
background:url(https://image.itmedia.co.jp/spv/images/ulli_close.gif) no-repeat center center / contain;
border:1px solid #CCC;
position:absolute;
top:13px;
right:10px;
cursor:pointer;
}
.colBoxSubnavigation{
background:#FFF;
background:linear-gradient(to top, #FFF 0%,#FFF 3%,#EEE 3%,#FFF);
border-top:1px solid #DDD;
border-bottom:1px solid #DDD;
}
.colBoxSubnavigation .colBoxIndex{
padding:0;
border:none;
}
.colBoxSubnavigation .colBoxUlist ul{
display:table;
width:100%;
}
.colBoxSubnavigation .colBoxUlist ul li{
display:table-cell;
background:none;
border:none;
margin:0;
padding:0;
text-align:center;
font-size:12px;
width:25%;
}
.colBoxSubnavigation .colBoxUlist ul li.active{
background:linear-gradient(to bottom, #FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF);
}
.colBoxSubnavigation .colBoxUlist ul li a{
display:block;
border-left:1px solid #FFF;
border-right:1px solid #DDD;
padding:5px 0;
width:100%;
color:#000;
}
.colBoxButton{
width:150px;
margin:0 auto;
border:1px solid #CCC;
border-radius:20px;
}
.colBoxButton a{
display:block;
padding:5px;
font-size:14px;
font-weight:bold;
text-align:center;
background:linear-gradient(to bottom, #369, #036);
border:1px solid #FFF;
border-radius:20px;
}
.colBoxButton a:link,
.colBoxButton a:visited,
.colBoxButton a:hover{
color:#FFF;
text-decoration:none;
}
.colBoxButtons .colBoxUlist ul li{
display:inline;
border:none;
margin:0 3px 0 0;
padding:0;
background:none;
}
.colBoxButtons .colBoxUlist ul li a{
display:inline-block;
padding:5px 10px;
background:#333;
color:#FFF;
border:1px solid #FFF;
font-size:12px;
line-height:18px;
}
.colBoxNewtxt{
color:#C00;
}
.colBoxWarning{
background:#EEE;
border-top:1px solid #DDD;
border-bottom:1px solid #DDD;
}
.colBoxWarning .colBoxUlist ul li{
border:none;
padding:0 0 0 12px;
font-weight:bold;
}
.colBoxWarning .colBoxUlist ul li a{
color:#666;
}
.colBoxWarning .colBoxUlist ul li:last-child{
margin-bottom:0;
}
.colBoxArchiveList .colBoxIndex .colBoxType{
background:#FBB03B;
border-radius:2px;
text-align:center;
margin-top:5px;
}
#tt .colBoxArchiveList .colBoxType,
.colBoxArchiveList .colBoxIndex[data-articletype="ニュース"] .colBoxType{
display:none;
}
#categoryWrap #categoryTitle {
margin:0 0 5px;
padding:5px 5px 0;
}
#categoryWrap #categoryTitle h1{
font-size:146.5%;
}
#categoryWrap #categoryTitle h2{
font-size:120%;
font-weight:normal;
color:#555;
}
#categoryBody .colBoxIndexList .colBoxIcon a img{
width:100%;
}
.colBoxCategories .colBoxUlist ul{
margin:5px;
}
.colBoxCategories .colBoxUlist li{
display:inline-block;
margin:4px 2px;
padding:0;
background:none;
border:none;
}
.colBoxCategories .colBoxUlist li a{
display:block;
padding:2px 6px;
background:#f7f7f7;
border-radius:3px;
border:1px #eee solid;
color:#555;
}
#colBoxAsideCategoryList.colBoxCategories{
  margin: 0 15px;
}
#colBoxAsideCategoryList.colBoxCategories .colBoxHead {
background: url(https://image.itmedia.co.jp/spv/images/ulli_plug.png) no-repeat left center;
background-size: 14px;
border-bottom: 1px solid #DDD;
color: #000;
margin: 0 5px 8px;
padding: 3px 0 3px 20px;
font-size: 130%;
font-weight: normal;
}
/* FOOTER */
#copyright{
padding:5px;
font-size:10px;
line-height:12px;
text-align:center;
font-family:Gill Sans, 'メイリオ', Meiryo;
}
#pagetop{
text-align:center;
padding:10px;
background:#EEE;
}
/* ARTICLE */
#cmsWrap{
background:#FFF;
margin:0 0 5px;
}
.cmsHeader{
position:relative;
padding:5px;
}
#cmsBody{
padding:5px;
}
@media(min-width:341px){
.cmsHeader{
padding:5px 10px;
}
#cmsBody{
padding:5px 10px;
}
}
@media(min-width:361px){
.cmsHeader{
padding:5px 20px;
}
#cmsBody{
padding:5px 20px;
}
}
/* SOCIALBUTTON */
.wrap_social{
display:flex;
justify-content:space-between;
}
.box_social{
width:20%;
font-size:12px;
line-height:18px;
font-family:Gill Sans, 'メイリオ', Meiryo;
text-align:center;
}
.wrap_social_big .box_social{
min-height:54px;
}
.wrap_social_big .btn_social{
display:inline-block;
text-align:center;
min-width:40px;
margin:0 auto;
padding-top:36px;
}
.wrap_social_small .btn_social{
display:inline-block;
min-width:40px;
text-align:left;
box-sizing:border-box;
padding:0 5px 0 24px;
}
.loader_social{
margin:3px auto 0;
display:block;
width:6px;
height:6px;
border-radius:50%;
border:2px solid #CCC;
border-right-color:transparent;
-webkit-animation:jsonloader 1s linear infinite;
animation:jsonloader 1s linear infinite;
}
.btn_social_fb{color:#0866ff !important;}
.btn_social_tw{color:#000 !important;}
.btn_social_ln{color:#06c755 !important;}
.btn_social_hb{color:#00a4de !important;}
.btn_social_ul{color:#e99106 !important;}
.wrap_social_big .btn_social_fb{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat center 5px / 27px;}
.wrap_social_big .btn_social_tw{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat center -45px / 27px;}
.wrap_social_big .btn_social_ln{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat center -95px / 27px;}
.wrap_social_big .btn_social_hb{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat center -145px / 27px;}
.wrap_social_big .btn_social_ul{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat center -195px / 27px;}
.wrap_social_small .btn_social_fb{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat left 0px / 18px;}
.wrap_social_small .btn_social_tw{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat left -33px / 18px;}
.wrap_social_small .btn_social_ln{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat left -67px / 18px;}
.wrap_social_small .btn_social_hb{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat left -100px / 18px;}
.wrap_social_small .btn_social_ul{background:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png) no-repeat left -133px / 18px;}
@-webkit-keyframes jsonloader{
0%{-webkit-transform:rotate(0deg);opacity:0.2;}
50%{-webkit-transform:rotate(180deg);opacity:1.0;}
100%{-webkit-transform:rotate(360deg);opacity:0.2;}
}
@keyframes jsonloader{0%{transform:rotate(0deg);opacity:0.2;}
50%{transform:rotate(180deg);opacity:1.0;}
100%{transform:rotate(360deg);opacity:0.2;}
}
/* SOCIALBUTTON PR */
.colBoxCsbBtn{box-shadow:none;border:none;}
.colBoxCsbBtn .colBoxIndex{border:none;padding:0;}
.csbBtn{float:left;}
/* SUBTOP/FEATURES */
#subtopHeader{
margin:0 auto 5px;
}
#specialHeader{
position: relative;
margin:30px auto 5px;
}
#subtopHeader h1,
#specialHeader h1{
margin:0;
font-size:12px;
line-height:16px;
text-indent:-9999px;
}
#specialHeader .specialMark {
position: absolute;
top: -24px;
right: 10px;
}
#specialHeader .specialMark span{
background:#fff;
padding:0 4px;
line-height:8px;
font-size:9px;
font-weight:bold;
color:#89a4b4;
border:1px solid #89a4b4;
}
#subtopTitle,
#specialTitle{
margin:0 0 5px;
padding:5px 5px 0;
border-top:5px solid rgba(51,111,211,1);
}
#subtopTitle h1,
#specialTitle h1{
font-size:146.5%;
}
#subtopDescription,
#specialDescription{
margin:0 0 10px;
padding:0 5px;
}
#tt #specialBody .colBoxDescription{
display:block;
}
.colBoxFeaturesImage .colBoxImage{
text-align:center;
}
/* CMSTOOL */
div[class*="colBox"][class*="2index"][class*="Urllist"] .colBoxIndexL50,
div[class*="colBox"][class*="2index"][class*="Urllist"] .colBoxIndexR50{
padding:0;
}
div[class*="colBox"][class*="2index"][class*="Urllist"] .colBoxIndexL50 .colBoxIndex,
div[class*="colBox"][class*="2index"][class*="Urllist"] .colBoxIndexR50 .colBoxIndex{
border-top:none;
}
.colBoxIndex .linkset{
font-size:108%;
list-style-type:none;
}
.colBoxIndex .linkset li{
margin:0 0 3px;
padding:0 0 3px 14px;
background:url(data:image/gif;base64,R0lGODlhAQABAIAAAJmZmQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==) no-repeat left center / 5px;
border-bottom:1px dotted #CCC;
}
/* CREDIT */
#cmsPrcredit{
margin:0 0 10px;
padding:5px;
}
#cmsPrcredit .inner{
border:3px solid #CCC;
padding:5px;
}
#cmsPrcredit .inner br{
display:none;
}
#cmsPrcredit .inner .credit{
margin:0;
font-size:12px;
line-height:16px;
}
#cmsPrcredit .inner .credit br{
display:inline;
}
/* ADTAG */
.gad{
text-align:center;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
}
.gad_static{
text-align:center;
}
#RECTANGL,
#RECTNGL2,
#SPBANNER,
#AFFILIAT,
#ARBANNER{
margin:0 auto;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
}
#RECTANGL,
#RECTNGL2,
#SPBANNER{
width:auto;
text-align:center;
}
#RECTANGL .colBox,
#RECTNGL2 .colBox,
#SPBANNER .colBox{
overflow:visible;
}
#mobile .colBoxIndexAD,
#pcuser .colBoxIndexAD{
text-align:center;
}
#AFFILIAT,
#ARBANNER{
width:320px;
}
.gad.slideRight,
#RECTANGL.slideRight,
#RECTNGL2.slideRight,
#SPBANNER.slideRight,
#AFFILIAT.slideRight{
-webkit-transform:translate3d(1000px,0,0);
transform:translate3d(1000px,0,0);
}
.gad.slideLeft,
#RECTANGL.slideLeft,
#RECTNGL2.slideLeft,
#SPBANNER.slideLeft,
#AFFILIAT.slideLeft{
-webkit-transform:translate3d(-1000px,0,0);
transform:translate3d(-1000px,0,0);
}
#RECTANGL #adHeaderText,
#RECTNGL2 #adHeaderText,
#SPBANNER #adHeaderText{
width:300px !important;
}
.colBoxIndexAD{
padding:10px 5px 0;
}
#cmsBody .colBoxIndexAD{
border-top:none;
margin:0 0 20px;
padding:0;
}
.colBoxAD{
box-shadow:none;
background:transparent;
display:inline-block;
}
#subtopContents .colBoxAD{
display:inline;
}
.colBoxAD .colBoxIndexAD{
border:none;
padding:0;
}
.colBoxAd,
.colBoxDisplayAd,
.colBoxDisplayAd a{
display:inline-block;
}
#TEXT{
padding:5px 5px 0;
}
@media(min-width:341px){
#TEXT{
padding:5px 10px 0;
}
}
@media(min-width:361px){
#TEXT{
padding:5px 20px 0;
}
}
#TEXT .colBoxITT .colBoxIndex{
border:none;
padding:0;
}
#TEXT .colBoxITT .colBoxTitle{
background:url(https://image.itmedia.co.jp/images/ad/ITT_pr.gif) no-repeat 0 3px;
}
#TEXT .colBoxITT .colBoxTitle h3{
font-size:12px;
line-height:18px;
}
#colBoxCBOX .colBoxHead,
#colBoxFEATURES .colBoxHead,
#colBoxFTDMP .colBoxHead{
background:#EEE;
border-color:#FFF;
}
#colBoxCBOX .colBoxHeadSubtxt,
#colBoxFEATURES .colBoxHeadSubtxt,
#colBoxFTDMP .colBoxHeadSubtxt{
font-family:Arial;
color:#999;
}
#colBoxCBOX .colBoxInner,
#colBoxFEATURES .colBoxInner,
#colBoxFTDMP .colBoxInner{
border:5px solid #DDD;
}
#colBoxCBOX .colBoxIndex,
#colBoxFEATURES .colBoxIndex,
#colBoxFTDMP .colBoxIndex{
padding:5px 10px;
}
#colBoxCBOX .colBoxIcon img,
#colBoxFEATURES .colBoxIcon img,
#colBoxFTDMP .colBoxIcon img{
width:80px;
height:auto;
}
#colBoxCBOX .colBoxTitle h3,
#colBoxFEATURES .colBoxTitle h3,
#colBoxFTDMP .colBoxTitle h3{
font-weight:normal;
}
#colBoxCBOX .colBoxDescription,
#colBoxFEATURES .colBoxDescription,
#colBoxFTDMP .colBoxDescription{
display:block !important;
color:#999;
}
#colBoxCBOX .colBoxClear.h10px,
#colBoxFEATURES .colBoxClear.h10px,
#colBoxFTDMP .colBoxClear.h10px{
height:0;
}
/* ad */
.colBoxITT{
margin:0 0 5px;
}
.colBoxITT .colBoxTitle{
background:url(https://image.itmedia.co.jp/images/ad/ITT_pr.gif) no-repeat 0 2px;
margin:0;
padding:0 0 0 24px;
}
.colBoxITT .colBoxTitle h3{
font-size:12px;
line-height:16px;
font-weight:normal;
}
.colBoxITT .colBoxTitleSubtxt{
display:none;
}
.colBoxTEXT .colBoxHead{
display:none;
}
.colBoxTEXT .colBoxIndex{
margin:0 0 5px;
border:none;
padding:0;
}
.colBoxTEXT .colBoxTitle{
background:url(https://image.itmedia.co.jp/images/ad/ITT_pr.gif) no-repeat 0 3px;
margin:0;
padding:0 0 0 24px;
}
.colBoxTEXT .colBoxTitle h3{
font-size:12px;
line-height:18px;
font-weight:normal;
}
.colBoxAdHead{
position:relative;
height:32px;
}
/* BILLBOAD */
#BILLBOAD{
line-height:0;
}
#BILLBOAD .colBoxAdHead{
height:16px;
}
#BILLBOAD .colBox .colBoxHeadSubtxt{
top:8px;
}
/*layout*/
._resp_space{padding-left:5px;padding-right:5px;}
@media(min-width:341px){._resp_space{padding-left:10px;padding-right:10px;}}
@media(min-width:361px){._resp_space{padding-left:20px;padding-right:20px;}}
/*pankuzu*/
.jsonld_breadcrumb,
#cmsBody .jsonld_breadcrumb{
border-top:1px solid #DDD;
border-bottom:1px solid #DDD;
background:#EEE;
padding:5px 10px;
margin-bottom:5px;
}
#cmsBody .jsonld_breadcrumb[data-pos="footer"],
.jsonld_breadcrumb[data-pos="footer"]{
padding:10px;
margin-bottom:10px;
}
.jsonld_breadcrumb:empty{
display:none;
}
.jsonld_breadcrumb ol,
.jsonld_breadcrumb ul,
#cmsBody .jsonld_breadcrumb ul{
margin:0 0 5px;
overflow:scroll;
white-space:nowrap;
-webkit-overflow-scrolling:touch;
/**/
padding:0;
text-shadow:none;
}
.jsonld_breadcrumb ol:last-of-type,
.jsonld_breadcrumb ul:last-of-type,
#cmsBody .jsonld_breadcrumb ul:last-of-type{
margin:0;
}
.jsonld_breadcrumb[data-pos="footer"] ul,
#cmsBody .jsonld_breadcrumb[data-pos="footer"] ul{
margin:0 0 10px;
}
.jsonld_breadcrumb[data-pos="footer"] ul:last-of-type,
#cmsBody .jsonld_breadcrumb[data-pos="footer"] ul:last-of-type{
margin:0;
}
.jsonld_breadcrumb li,
#cmsBody .jsonld_breadcrumb li{
display:inline-block;
font-size:12px;
color:#999;
/**/
background:none;
padding:0;
margin:0;
}
.jsonld_breadcrumb li a,
#cmsBody .jsonld_breadcrumb li a{
display:inline-block;
color:#666;
}
.jsonld_breadcrumb li:first-of-type a,
#cmsBody .jsonld_breadcrumb li:first-of-type a{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGJSURBVDhPxZI/SAJhGMa981+DQ4ODOjne0OBY0NIQCBHUlptChwoGLUFO4pSjg3jn1Bo0NjZUKLQWNDg0a0NDQ0GgaL/37rtD+0stPfDe+3zP+z7vfd99pwW+QafT2SFtRCIRs1AovLrqPL4cgPmQdCR8Op32NE3bLhaLj7KexYcBtVotlEwmLQy7GPtIYnZ4MBjcNE3z3u10oavsoNVqxVKp1Jky9KLR6EqpVDIpVdGMyWTSbbfby263C38A5kQ4HL6GZjGfDIfDNc79JDW23iDliDi7OOd4W6ILnCMwdUkK0ATmBm+tiv4eGFepyw5j5AP6mppt21mEU+oLiHuIttv+ORhi0NfFE2fZ1CEWJEb0fjILOE4fzx10TOyHeDww8QZxURo8WJaVJkk4KJfLl4o6oL+JL62PRqN1FrdK96Hrep648ELJPjC/DAaDnF6pVJ6V9mvU6/Xx3H/wF/z/ALkFDwZ3fKy4fKQMH1etnPv3a8AgroTM7iBB5L3AnBFxBn6NkF4QCLwBXT+Ph/PjK7cAAAAASUVORK5CYII=) no-repeat left calc(50% - 1px) / 13px;
padding-left:17px;
}
.jsonld_breadcrumb[data-pos="footer"] li a,
#cmsBody .jsonld_breadcrumb[data-pos="footer"] li a{
border:1px solid #CCC;
background-color:#FFF;
padding:3px 6px 4px;
}
.jsonld_breadcrumb[data-pos="footer"] li:first-of-type a,
#cmsBody .jsonld_breadcrumb[data-pos="footer"] li:first-of-type a{
padding:3px 6px 4px 21px;
background-position:5px calc(50% - 1px);
}
.jsonld_breadcrumb li:after{
content:"＞";
padding:0 7px;
color:#CCC;
}
.jsonld_breadcrumb li:last-child:after{
content:"";
padding:0;
}
/* Measures for tie-up wraparound */
#cmsSubPR .colBoxIcon.nowrap a{
display:inline-block;
margin-right:0;
float:none;
}
/* ToT TOP STORIES SPV */
.colBoxIndexNew .topstories-update {
font-size: 0.75rem;
}
.colBoxIndex.topstories-item {
display: block;
padding: 10px;
overflow: hidden;
}
.colBoxIndex.topstories-item .colBoxIcon {
width: 120px;
height: 90px;
margin: 0 10px 0 0;
border: 1px solid #ddd;
}
.colBoxIndex.topstories-item .colBoxIcon a {
width: 100%;
height: 100%;
margin: 0;
}
.colBoxIndex.topstories-item h3, .colBoxIndex.topstories-item h5 {
font-weight: normal;
}
/* rm77216 native lazyload */
.cms_limg_tap_icon_parent:not(.cmsThumbItem){
position: relative;
display: inline-block;
z-index: 1;
}
.cms_limg_tap_icon_parent:not(.cmsThumbItem):before {
content: "タップで拡大";
display: block;
position:absolute;
padding:5px;
top:0;
right:0;
background-color:#FFF;
border:1px solid #DDD;
text-align:center;
line-height:14px;
font-size:10px;
color:#000;
z-index:998;
}
.cms_limg_tap_icon_parent:not(.cmsThumbItem) > img[loading] {
margin-top:26px;
border:1px solid #DDD;
box-sizing:border-box;
}
#ait .cms_limg_tap_icon_parent:not(.cmsThumbItem) > img[loading] {
margin-top: 0;
}
#top #masterLogoGroup{
display: flex;
justify-content: center;
}
#top #masterLogo{
display: flex;
width:119px;
align-items: center;
}
#top #masterLogo a{
height: auto;
}