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}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:13;--base-lh:1.7;
font:calc(var(--base-fs) * 1px) '游ゴシック体','Yu Gothic',YuGothic,Meiryo,'メイリオ',ArialMT,Hiragino Kaku Gothic Pro,'ヒラギノ角ゴ Pro W3',Osaka;
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;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition:-webkit-transform 0.3s;
transition:transform 0.3s;
}
#masterWrapOuter.slideRight{
-webkit-transform:translate3d(300px,0,0);
transform:translate3d(300px,0,0);
}
#masterWrapOuter.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;
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;
}
#masterHeader.scrollShadow,
#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:0;}
#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 .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 .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 .type-related li{
border:none;
}
/**/
.colBoxIndexList .colBoxIndex{
-webkit-transition:background-color .2s;
transition:background-color .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;
}
.colBoxIndexTS1.colBoxIndexList .colBoxIndex[data-articletype="Special"]:before,
.colBoxIndexTS1.colBoxIndexList .colBoxIndex[data-articletype="PR"]:before,
.colBoxIndexTS1.colBoxIndexList .colBoxIndex[data-articletype="PR_1"]:before{
color:#EEE;
z-index:100;
}
@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;}
}
/**/
.colBoxIndexTS2 .colBoxInner{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
padding:10px 10px 0;
}
.colBoxIndexTS1 .colBoxIndex{
display:block;
position:relative;
border:none;
}
.colBoxIndexTS2 .colBoxIndex{
display:block;
position:relative;
width:calc(50% - 5px);
margin-bottom:20px;
border:none;
}
.colBoxIndexTS1 .colBoxIndex .colBoxLeft,
.colBoxIndexTS2 .colBoxIndex .colBoxLeft{
width:100%;
padding:0;
}
.colBoxIndexTS2 .colBoxIndex .colBoxLeft{
margin-bottom:10px;
}
.colBoxIndexTS1 .colBoxLeft .colBoxIcon a.iconfix,
.colBoxIndexTS2 .colBoxLeft .colBoxIcon a.iconfix{
width:100%;
height:auto;
padding-top:60%;
border:none;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight{
position:absolute;
bottom:0;
left:0;
box-sizing:border-box;
width:100%;
padding:20px 10px 10px;
background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 20%,rgba(0,0,0,0.9) 100%);
display:flex;
flex-wrap:wrap;
}
.colBoxIndexTS2 .colBoxIndex .colBoxRight{
padding:0;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxTitle{
font-size:170%;
line-height:1.5;
margin-bottom:2px;
}
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxTitle{
margin-bottom:7px;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxTitle a{
font-weight:bold;
color:#FFF;
display:-webkit-box;
overflow:hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxTitle a{
display:-webkit-box;
overflow:hidden;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo{
width:100%;
color:#EEE;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count,
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count{
padding:0 0 0 18px;
background:url(https://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat left -24px / 14px;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count,
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo .icon-date,
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count,
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxInfo .icon-date{
margin-right:15px;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count,
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo .icon-date,
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo .icon-writer,
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count,
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxInfo .icon-date,
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxInfo .icon-writer{
display:inline-block;
}
.colBoxIndexTS1 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count,
.colBoxIndexTS2 .colBoxIndex .colBoxRight .colBoxInfo .my_tw_count{
display:none;
}
/**/
.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;
}
.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;
}
.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,
.colBoxBacknumber .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{
padding:10px !important;
}
.colBoxBacknumber select,
.colBoxBacknumber button{
font:12px '游ゴシック体','Yu Gothic',YuGothic,Meiryo,'メイリオ',ArialMT,Hiragino Kaku Gothic Pro,'ヒラギノ角ゴ Pro W3',Osaka;
}
.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;
}
.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;
}
/**/
.colBoxRanking .colBoxHead h2,
.colBoxRanking .colBoxHeadname{
background:url(https://image.itmedia.co.jp/spv/images/ulli_king.png) no-repeat left center / 15px;
padding:0 0 0 20px;
}
.colBoxRanking .colBoxIndex{
padding:0 10px;
}
#colBoxRankingTop .colBoxRanking .colBoxIndex{
padding:0;
}
.colBoxRanking ol{
counter-reset:li;
list-style:none;
}
.colBoxRanking li{
border-bottom:1px solid #EEE;
font-size:116%;
padding:5px 0;
}
.colBoxRanking li a{
position:relative;
display:table;
padding:0 0 0 40px;
margin:.5em 0;
text-decoration:none;
transition:all .3s ease-out;
}
.colBoxRanking li a:hover:before{
transform:rotate(45deg);
}
.colBoxRanking li a:before{
content:counter(li);
counter-increment:li;
position:absolute;
left:0;
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;
}
.colBoxRanking .icon-field{
display:table-cell;
vertical-align:top;
}
.colBoxRanking .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;
}
.colBoxRanking .title-field{
display:table-cell;
vertical-align:top;
padding-left:10px;
}
.colBoxRanking .rank1 a:before{
background:#FAF09A;
border-color:#CCB600;
color:#000;
}
.colBoxRanking .rank2 a:before{
background:#FAFAFA;
border-color:#C5C5C5;
color:#000;
}
.colBoxRanking .rank3 a:before{
background:#F8CD9F;
border-color:#EE810B;
color:#000;
}
.colBoxRanking .rank10{
border-bottom:none;
}
/**/
#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;
}
.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;
}
.colBoxArchiveList .colBoxIndex[data-articletype="ニュース"] .colBoxType{
display:none;
}
#subtopTitle.subTitle--view {
border: 0;
}
#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 .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;
}
.wrap_social_big{
min-height:54px;
}
.box_social{
width:20%;
font-size:12px;
line-height:18px;
font-family:Gill Sans, 'メイリオ', Meiryo;
text-align:center;
}
.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;}
}
/* 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;
font-size: 120%;
}
.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,
#ARBANNER{
width:300px;
margin:0 auto;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
}
#ARBANNER{
width:320px;
}
.gad.slideRight,
#RECTANGL.slideRight,
#RECTNGL2.slideRight,
#SPBANNER.slideRight{
-webkit-transform:translate3d(1000px,0,0);
transform:translate3d(1000px,0,0);
}
.gad.slideLeft,
#RECTANGL.slideLeft,
#RECTNGL2.slideLeft,
#SPBANNER.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;
}
.colBoxAD .colBoxIndexAD{
border:none;
padding:0;
}
#RICHAD{
width:300px;
margin:0 auto;
}
#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;
}
#ArticleSuperBanner{
margin:0 auto;
width:320px;
min-height:100px;
max-height:180px;
display:flex;
justify-content:center;
align-items:center;
}
#ATF{
margin:20px auto 0;
width:320px;
min-height:117px;
max-height:197px;
display:flex;
justify-content:center;
align-items:center;
}
/*OVERLAY*/
#sp_overlay {display:none;}
#sp_overlay.g {display:block;position:fixed;bottom:0;width:100vw;z-index:1000;text-align:center;background:rgba(0,0,0,.3);}
#sp_overlay.notg {display:block;}
#sp_overlay_btn {display:none;justify-content:center;align-items:center;position:absolute;top:-30px;right:5px;width:25px;height:25px;font-size:15px;text-align:center;padding: 0;color:#333;font-weight:800;border-radius:30px;box-shadow:0 3px 5px rgba(0,0,0,.1);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMBJREFUOE+tkzEOwjAMRb87d43Uc7BzANqsOQbMVQ/AziVY2GHNDbgGB2iSKTVKB1RKElUKXm0/+X/b1LZtU1XViZmfxpiH1npEJpRStbX2QES7aZouJKW8A9gz88jMg7X2loKEZuecYuYzgBrAlbquOwIYADQAXinIqnmu9d73FEusIbkaCnJzBUIILMb+mXIGpCAAgtYQSYkfQAKy3EfUny9ABpI097+AiJnbJcQ2sdnEojUWH1LxKRc/U+k7vwGfSIsG1/JdEgAAAABJRU5ErkJggg==) no-repeat center / 10px #d3d3d3;}
#sp_overlay.g #sp_overlay_btn {display:flex;}
/*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*/
#localPankuzu.localPankuzu--article {height: 37px;}
.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;
}
/* 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;
}