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,sub,summary,sup,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}body{line-height:1}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 {
font:11px -apple-system, Sans-Serif, HiraKakuProN-W3, Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
line-height:1.9;
min-width:320px;
}
a:link,
a:visited {
color:#000;
text-decoration:none;
-webkit-transition:color 0.5s;
transition:color 0.5s;
}
.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(260px,0,0);
transform:translate3d(260px,0,0);
}
.masterWrapOuterDefault.slideLeft {
-webkit-transform:translate3d(-260px,0,0);
transform:translate3d(-260px,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;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:260px;
height:100%;
display:none;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
.slideBox a {
color:#666;
}
#slideBox_left {
left:0;
padding-top:50px;
}
#slideBox_right {
right:0;
padding-top:50px;
}
/* slideLeft.css */
/*-----------------------------------------------------------------*/
.slideBox iframe {
width:260px;
height:1000px;
}
/*-----------------------------------------------------------------*/
/* 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(http://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center 10px / 20px auto;
}
#slideBtn_rank .slideBtnArea {
background:url(http://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center -30px / 20px auto;
}
#slideBtn_search .slideBtnArea {
background:url(http://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center -56px / 17px auto;
}
#slideBtn_right .slideBtnArea {
background:url(http://image.itmedia.co.jp/spv/images/head_menu.gif) no-repeat center -110px / 20px auto;
}
/*-----------------------------------------------------------------*/
/* 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 .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 .colBoxIndex[data-articletype="Special"] {
position:relative;
}
.colBoxIndexList .colBoxIndex[data-articletype="Special"]:before {
content:"PR";
font-size:90%;
color:#999;
position:absolute;
bottom:10px;
right:5px;
}
@media(min-width:341px){
.colBoxIndexList .colBoxIndex[data-articletype="Special"]:before {
right:10px;
}
}
@media(min-width:361px){
.colBoxIndexList .colBoxIndex[data-articletype="Special"]:before {
right:20px;
}
}
/*-----------------------------------------------------------------*/
.colBoxIndexMMDD .colBoxHead {
display:none;
}
/*-----------------------------------------------------------------*/
.setIndexStyleIcon .colBoxIndexList .colBoxIndex {
display:block;
width:auto;
position:relative;
min-height:240px;
overflow:hidden;
border-bottom:1px solid #DDD;
}
.setIndexStyleIcon .colBoxIndexList .colBoxIndex .colBoxLeft {
display:block !important;
border:none;
width:auto;
height:240px;
position:relative;
z-index:8;
}
.setIndexStyleIcon .colBoxIndexList .colBoxIndex .colBoxLeft.colBoxNoimage {
background-position:10px 10px;
background-repeat:no-repeat;
background-color:#F8F8F8;
background-size:80px;
}
.setIndexStyleIcon .colBoxIndexList .colBoxIndex .colBoxLeft:after {
position:absolute;
display:block;
content:'';
top:0;
left:0;
width:100%;
height:100%;
}
.setIndexStyleIcon .colBoxIndexList .colBoxIndex .colBoxLeft .colBoxIcon a {
display:block;
margin:0;
float:none;
width:100%;
height:240px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-top:100px;
}
.setIndexStyleIcon .colBoxIndexList .colBoxIndex .colBoxRight {
display:block;
position:absolute;
bottom:0;
width:100%;
border:none;
box-sizing:border-box;
padding:8px;
background:rgba(255,255,255,0.9);
z-index:9;
}
/*-----------------------------------------------------------------*/
.setIndexStyleMinimum .colBoxIndexList .colBoxLeft,
.setIndexStyleDefault .colBoxIndexList .colBoxLeft {
background:none !important;
}
.setIndexStyleMinimum .colBoxIndexList .colBoxLeft .colBoxIcon a.iconfix,
.setIndexStyleDefault .colBoxIndexList .colBoxLeft .colBoxIcon a.iconfix {
border:1px solid #DDD;
box-sizing:border-box;
}
/*-----------------------------------------------------------------*/
.setIndexStyleIcon .colBoxIndexList .colBoxLeft .colBoxIcon a.iconfix {
background:none !important;
}
/*-----------------------------------------------------------------*/
.colBoxIndexList .colBoxIndex {
display:-webkit-box;
display:box;
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 {
-webkit-box-flex:1;
box-flex:1;
vertical-align:middle;
padding:10px 10px 10px 5px;
}
.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;
}
.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(http://image.itmedia.co.jp/spv/images/ulli_man.png) no-repeat left center / 14px;
padding:0 0 0 20px;
}
/*-----------------------------------------------------------------*/
.colBoxSubTitle {
font-size:108%;
-webkit-transition:font-size 0.1s;
transition:font-size 0.1s;
}
.colBoxSubTitle h3 {
font-weight:normal;
}
.colBoxTitle {
font-size:123.1%;
-webkit-transition:font-size 0.1s;
transition:font-size 0.1s;
}
.colBoxTitle h1,
.colBoxTitle h2 {
font-weight:normal;
}
.colBoxDescription {
display:none;
font-size:108%;
-webkit-transition:font-size 0.1s;
transition:font-size 0.1s;
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 {
display:block;
background:url(http://image.itmedia.co.jp/spv/images/author_update.png) no-repeat left 4px;
padding:1px 0 0 15px;
}
.colBoxInfo .icon-date {
display:block;
background:url(http://image.itmedia.co.jp/spv/images/author_update.png) no-repeat left -26px;
padding:1px 0 0 15px;
}
.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 h1,
.colBoxKeywordIndex .colBoxHead h1,
.colBoxBacknumber .colBoxHead .colBoxHeadname,
.colBoxKeywordIndex .colBoxHead .colBoxHeadname {
background:url(http://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 {
font:12px HiraKakuProN-W3, Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
}
.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(http://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 {
background:url(http://image.itmedia.co.jp/images/ulli_key-solid.png) no-repeat left center / 12px;
padding-left:16px;
}
.colBoxRelKeyword .colBoxUlist li {
display:inline-block;
border:none !important;
margin:0;
background:url(http://image.itmedia.co.jp/images/ulli_key-solid.png) no-repeat left center / 12px;
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(http://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%;
line-height:1.7;
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:998;
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:0;
left:0;
width:100%;
height:100%;
z-index:998;
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 {
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(http://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 .colBoxUlist ul li {
background:none;
border:none;
padding:0;
font-weight:bold;
}

.colBoxArchiveList .colBoxIndex .colBoxType {
background:#FBB03B;
border-radius:2px;
text-align:center;
margin-top:5px;
}
#tt .colBoxArchiveList .colBoxType,
.colBoxArchiveList .colBoxIndex[data-articletype="ニュース"] .colBoxType {
display:none;
}
.colBoxArchiveList .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;
}
.colBoxArchiveList .imgLazy.imgLazy_ok {
opacity:1;
}
/*-----------------------------------------------------------------*/
/* 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:-webkit-flex;
display:flex;
}
.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:#385992 !important;}
.btn_social_tw {color:#4EB5F2 !important;}
.btn_social_gs {color:#BB4940 !important;}
.btn_social_ln {color:#2CBF13 !important;}
.btn_social_hb {color:#336FD3 !important;}
.wrap_social_big .btn_social_fb {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat center 5px / 27px auto;}
.wrap_social_big .btn_social_tw {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat center -45px / 28px auto;}
.wrap_social_big .btn_social_gs {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat center -95px / 27px auto;}
.wrap_social_big .btn_social_ln {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat center -162px / 30px auto;}
.wrap_social_big .btn_social_hb {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat center -195px / 27px auto;}
.wrap_social_small .btn_social_fb {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat left 0px / 18px auto;}
.wrap_social_small .btn_social_tw {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat left -34px / 19px auto;}
.wrap_social_small .btn_social_gs {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat left -67px / 18px auto;}
.wrap_social_small .btn_social_ln {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat left -99px / 18px auto;}
.wrap_social_small .btn_social_hb {background:url(http://image.itmedia.co.jp/spv/images/msbBtn.png) no-repeat left -133px / 18px auto;}
@-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,
#specialHeader {
margin:0 auto 5px;
}
#subtopHeader h1,
#specialHeader h1 {
margin:0;
font-size:12px;
line-height:16px;
text-indent:-9999px;
}
#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 */
/*-----------------------------------------------------------------*/
#RECTANGL,
#RECTNGL2,
#SPBANNER,
#AFFILIAT,
#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;
}
#AFFILIAT,
#ARBANNER {
width:320px;
}
#RECTANGL.slideRight,
#RECTNGL2.slideRight,
#SPBANNER.slideRight,
#AFFILIAT.slideRight {
-webkit-transform:translate3d(1000px,0,0);
transform:translate3d(1000px,0,0);
}
#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;
}
.colBoxAD .colBoxIndexAD {
border:none;
padding:0;
}
#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(http://image.itmedia.co.jp/images/ad/ITT_pr.gif) no-repeat 0 3px;
}
#TEXT .colBoxITT .colBoxTitle h3 {
font-size:12px;
line-height:18px;
}
#RICHAD {
width:300px;
margin:0 auto;
}
#colBoxCBOX .colBoxHead,
#colBoxFEATURES .colBoxHead {
background:#EEE;
border-color:#FFF;
}
#colBoxCBOX .colBoxHeadSubtxt,
#colBoxFEATURES .colBoxHeadSubtxt {
font-family:Arial;
color:#999;
}
#colBoxCBOX .colBoxInner,
#colBoxFEATURES .colBoxInner {
border:5px solid #DDD;
}
#colBoxCBOX .colBoxIndex,
#colBoxFEATURES .colBoxIndex {
padding:5px 10px;
}
#colBoxCBOX .colBoxIcon img,
#colBoxFEATURES .colBoxIcon img {
border:1px solid #CCC;
box-sizing:border-box;
}
#colBoxCBOX .colBoxTitle h3,
#colBoxFEATURES .colBoxTitle h3 {
line-height:1.7;
font-weight:normal;
}
#colBoxCBOX .colBoxDescription,
#colBoxFEATURES .colBoxDescription {
display:block !important;
color:#999;
}
#colBoxCBOX .colBoxDescription p,
#colBoxFEATURES .colBoxDescription p {
line-height:1.7;
}
#colBoxCBOX .colBoxClear.h10px,
#colBoxFEATURES .colBoxClear.h10px {
height:0;
}
#cmsBody #colBoxARTICLEB .colBoxTitle h3 {
border:none;
clear:none;
font-size:inherit;
margin:0;
padding:0;
}
#cmsBody #colBoxARTICLEB .colBoxDescription {
display:block !important;
}
#cmsBody #colBoxARTICLEB .colBoxDescription p {
font-size:inherit;
margin:0;
padding:0;
}
/*-----------------------------------------------------------------*/
/* ad */
/*-----------------------------------------------------------------*/
.colBoxITT {
margin:0 0 5px;
}
.colBoxITT .colBoxTitle {
background:url(http://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;
}