* {
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
body {
margin:0;
padding:0;
font:13px HiraKakuProN-W3, Meiryo, 'メイリオ', ArialMT, Hiragino Kaku Gothic Pro, 'ヒラギノ角ゴ Pro W3', Osaka, Verdana, 'ＭＳ Ｐゴシック';
line-height:1.9;
}
/*-----------------------------------------------------------------*/
/* HEADER */
/*-----------------------------------------------------------------*/
#logo {display:inline-block;}
#logo img {vertical-align:middle;border:none;}
#ITN {display:inline-block;}
#ITN * {vertical-align:middle;}
#ITN img,#ITN iframe {vertical-align:middle !important;}
#ITN iframe {display:inline-block !important;}
/*-----------------------------------------------------------------*/
/* SOCIALBUTTON */
/*-----------------------------------------------------------------*/
.msbSocialbutton .msbBtn a {background-repeat:no-repeat;}
.msbSocialbuttonBig .msbBtn a {background-position:center 5px;}
.msbSocialbutton .msbBtn a:link,
.msbSocialbutton .msbBtn a:visited,
.msbSocialbutton .msbBtn a:hover {text-decoration:none;}
.msbSocialbutton .msbBtnLikebuttonJson a {
background-image:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png);
background-size:18px;
}
.msbSocialbutton .msbBtnTweetbuttonJson a {
background-image:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png);
background-size:18px;
}
.msbSocialbutton .msbBtnHatenabuttonJson a {
background-image:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png);
background-size:18px;
}
.msbSocialbutton .msbBtnLinebutton a {
background-image:url(https://image.itmedia.co.jp/images/socialbutton/msbBtn_Color.png);
background-size:18px;
}
/*-----------------------------------------------------------------*/
/* SOCIALBUTTON BIG */
/*-----------------------------------------------------------------*/
.msbSocialbuttonBig {
display:table;
text-align:center;
}
.msbSocialbuttonBig .msbBtn {
display:table-cell;
padding:0;
vertical-align:top;
overflow:hidden;
}
.msbSocialbuttonBig .msbBtn a {
font-size:12px;
line-height:18px;
}
.msbSocialbuttonBig .msbBtnLikebuttonJson a,
.msbSocialbuttonBig .msbBtnTweetbuttonJson a,
.msbSocialbuttonBig .msbBtnHatenabuttonJson a,
.msbSocialbuttonBig .msbBtnLinebutton a {
display:inline-block;
min-width:30px;
padding:36px 5px 0;
text-align:center;
}
.msbSocialbuttonBig .msbBtnLikebuttonJson a {
background-position:center 5px;
background-size:27px;
}
.msbSocialbuttonBig .msbBtnTweetbuttonJson a {
background-position:center -45px;
background-size:27px;
}
.msbSocialbuttonBig .msbBtnLinebutton a {
background-position:center -95px;
background-size:27px;
}
.msbSocialbuttonBig .msbBtnHatenabuttonJson a {
background-position:center -145px;
background-size:27px;
}
.msbSocialbuttonBig .msbBtnLikebuttonJsonCount,
.msbSocialbuttonBig .msbBtnTweetbuttonJsonCount,
.msbSocialbuttonBig .msbBtnHatenabuttonJsonCount,
.msbSocialbuttonBig .msbBtnLinebutton a {font-family:Gill Sans, 'メイリオ', Meiryo;}
.msbSocialbuttonBig .msbBtnLikebuttonJsonCount .msbBtnJsonloader,
.msbSocialbuttonBig .msbBtnTweetbuttonJsonCount .msbBtnJsonloader,
.msbSocialbuttonBig .msbBtnHatenabuttonJsonCount .msbBtnJsonloader {
margin:3px auto 0;
display:block;
width:6px;
height:6px;
border-radius:50%;
border:2px solid #CCC;
border-right-color:transparent;
-webkit-animation:iconloader 1s linear infinite;
animation:iconloader 1s linear infinite;
}
.msbSocialbuttonBig .msbBtnLikebuttonJsonCount {color:#0866ff;}
.msbSocialbuttonBig .msbBtnTweetbuttonJsonCount {color:#000;}
.msbSocialbuttonBig .msbBtnHatenabuttonJsonCount {color:#00a4de;}
.msbSocialbuttonBig .msbBtnLinebutton a {color:#06c755 !important;}

/*-----------------------------------------------------------------*/
/* CONTENTS */
/*-----------------------------------------------------------------*/
#contents {
background:black;
color:rgb(206,206,206);
}
#contents a:link,
#contents a:visited {
color:rgb(206,206,206);
text-decoration:none;
}
#contents a:hover {
color:rgb(255,255,255);
text-decoration:underline;
}
#txTitle {
margin:0;
padding:0;
font-weight:normal;
line-height:1.6em;
}
#imgCaption {
padding:0;
font-weight:normal;
line-height:1.6em;
}
#imgNavigation #imgBtnReturn a {background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat -2px 8px;}
#imgNavigation #imgBtnLeft a {background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat left -42px;}
#imgNavigation #imgBtnRight a {background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat right -92px;}
#imgMain img {vertical-align:middle;}
#imgThumb .imgThumbJS {
position:relative;
display:inline-block;
width:60px;
height:45px;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
vertical-align:middle;
border:1px solid rgba(0,0,0,0.3);
box-sizing:border-box;
opacity:0.5;
}
#imgThumb .imgThumbJS:hover {opacity:1;}
#imgThumb .imgThumbJSactive {opacity:1;}
imgThumb .imgThumbJSLoad:before {
content:'';
display:block;
width:10px;
height:10px;
position:absolute;
top:50%;
left:50%;
margin-top:-7px;
margin-left:-7px;
border:2px solid #CCC;
border-radius:50%;
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.2;}
50% {-webkit-transform:rotate(180deg);opacity:1.0;}
100% {-webkit-transform:rotate(360deg);opacity:0.2;}
}
@keyframes iconloader {
0% {transform:rotate(0deg);opacity:0.2;}
50% {transform:rotate(180deg);opacity:1.0;}
100% {transform:rotate(360deg);opacity:0.2;}
}
#imgThumb img {vertical-align:middle;}
#ITR {
width:300px;
margin:0 auto;
}
/*-----------------------------------------------------------------*/
/* FOOTER */
/*-----------------------------------------------------------------*/
footer p {
margin:0;
padding:0;
}
/*-----------------------------------------------------------------*/
/* STYLE PCV */
/*-----------------------------------------------------------------*/
.stylePCV {min-width:990px;}
.stylePCV header {
padding:20px;
min-height:90px;
}
.stylePCV #logo {margin:0 30px 20px 0;}
.stylePCV #ITN {vertical-align:middle;}
.stylePCV #contents {
padding:0 20px;
background:#FFF;
}
.stylePCV #contents_in {
display:table;
width:100%;
}
.stylePCV #imgMain {margin-bottom:10px;}
.stylePCV #imgMain #imgMain_out {
position:relative;
overflow:hidden;
}
.stylePCV #imgMain #imgMain_in {
position:relative;
width:100%;
height:400px;
}
.stylePCV #imgMain #imgMain_in img {
opacity:0;
width:100%;
height:100%;
display:block;
position:absolute;
top:0;
left:0;
}
.stylePCV #imgMain #imgMain_in #imgPrev,
.stylePCV #imgMain #imgMain_in #imgNext,
.stylePCV #imgMain #imgMain_in #imgCenter {
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
}
.stylePCV #imgMain #imgMain_in #imgPrev,
.stylePCV #imgMain #imgMain_in #imgNext {position:absolute;}
.stylePCV #imgMain #imgMain_in #imgPrev {left:-100%;}
.stylePCV #imgMain #imgMain_in #imgNext {right:-100%;}
.stylePCV #imgMain #imgMain_in.imgMainPrev #imgPrev:before,
.stylePCV #imgMain #imgMain_in.imgMainNext #imgNext:before {
content:'';
display:block;
width:20px;
height:20px;
position:absolute;
top:50%;
left:50%;
margin-top:-13px;
margin-left:-13px;
border:3px solid #CCC;
border-radius:50%;
border-right-color:transparent;
-webkit-animation:iconloader 1s linear infinite;
animation:iconloader 1s linear infinite;
}
.stylePCV #imgNavigation {
width:100%;
min-height:49px;
margin:0px 0 10px;
box-sizing:border-box;
background:rgba(0,0,0,0.5);
text-align:center;
position:relative;
}
.stylePCV #imgNavigation span {
display:inline-block;
vertical-align:middle;
}
.stylePCV #imgNavigation #imgBtnReturn {
position:absolute;
top:0;
left:0;
}
.stylePCV #imgNavigation #imgBtnZoom {
position:absolute;
top:0;
right:0;
}
.stylePCV #imgNavigation #imgBtnImagenum {padding:10px 20px;}
.stylePCV #imgNavigation span a {
font-size:120%;
display:inline-block;
border-radius:5px;
}
.stylePCV #imgNavigation span a:hover {
background-color:rgb(0,122,204) !important;
text-decoration:none;
}
.stylePCV #imgNavigation #imgBtnReturn a {padding:10px 10px 10px 40px;}
.stylePCV #imgNavigation #imgBtnLeft a {padding:10px 10px 10px 30px;}
.stylePCV #imgNavigation #imgBtnRight a {padding:10px 30px 10px 10px;}
.stylePCV .msbSocialbuttonBig {
display:block;
position:relative;
margin-bottom:20px;
background:rgba(0,0,0,0.1);
padding:10px;
box-sizing:border-box;
}
.stylePCV .msbSocialbuttonBig:before {
content:'';
display:block;
position:absolute;
left:-20px;
top:50%;
margin-top:-10px;
width:0;
height:0;
border:10px solid transparent;
border-right:10px solid rgba(0,0,0,0.1);
}
.stylePCV .msbSocialbuttonBig .msbBtn {padding:0 5px;}
.stylePCV .msbSocialbuttonBig .msbBtn a {min-width:50px;}
.stylePCV .msbSocialbuttonBig .msbBtnLikebuttonJsonCount,
.stylePCV .msbSocialbuttonBig .msbBtnTweetbuttonJsonCount,
.stylePCV .msbSocialbuttonBig .msbBtnHatenabuttonJsonCount,
.stylePCV .msbSocialbuttonBig .msbBtnLinebutton a,
.stylePCV .msbSocialbuttonBig .msbBtnGoogleplusone a {font-family:Arial, 'メイリオ', Meiryo;}
.stylePCV #imgMain #imgMain_in img {background-color:#FFF;}
.stylePCV #txTitle {
position:relative;
height:1.6em;
font-size:170%;
}
.stylePCV #txTitle a {
display:block;
height:1.6em;
overflow:hidden;
background:rgba(0,0,0,0.5);
}
.stylePCV #txTitle a:hover {
position:absolute;
left:0;
top:0;
text-decoration:none;
height:auto;
z-index:10;
}
.stylePCV #imgCaption {
font-size:110%;
overflow:hidden;
height:1.6em;
margin:0px 0px 10px;
}
.stylePCV #imgThumb {overflow:hidden;}
.stylePCV #imgThumb_in {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition-property:-webkit-transform;
transition-property:transform;
-webkit-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.stylePCV #imgThumb_in .imgThumbJS {
width:60px;
height:45px;
}
.stylePCV footer {padding:10px 20px;}
.stylePCV #div_1 {
display:table-cell;
vertical-align:top;
background:#000;
padding:20px;
}
.stylePCV #div_2 {
display:table-cell;
vertical-align:top;
width:300px;
padding:0 0 0 20px;
}
/*-----------------------------------------------------------------*/
/* STYLE SPV */
/*-----------------------------------------------------------------*/
.styleSPV {min-width:320px;}
.styleSPV header {
display:none;
padding:5px;
}
.styleSPV #logo img {
width:auto;
height:24px;
}
.styleSPV #ITN {display:none;}
.styleSPV #contents {
position:relative;
padding:5px;
}
.styleSPV .msbSocialbuttonBig,
.styleSPV .msbSocialbuttonSmall {
width:100%;
padding:5px;
box-sizing:border-box;
}
.styleSPV .msbSocialbuttonBig .msbBtn,
.styleSPV .msbSocialbuttonSmall .msbBtn {text-align:center;}
.styleSPV #imgMain {position:relative;}
.styleSPV #imgMain #imgMain_out {
width:100%;
height:250px;
overflow:scroll;
-webkit-transition-property:height;
transition-property:height;
-webkit-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.styleSPV #imgMain #imgMain_in {
position:relative;
width:100%;
height:250px;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
opacity:1;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition-property:-webkit-transform,opacity,width,height;
transition-property:transform,opacity,width,height;
-webkit-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.styleSPV #imgMain #imgMain_in.imgMainMove {
-webkit-transition-duration:0ms;
transition-duration:0ms;
}
.styleSPV #imgMain #imgMain_in #imgPrev,
.styleSPV #imgMain #imgMain_in #imgNext,
.styleSPV #imgMain #imgMain_in #imgCenter {
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
}
.styleSPV #imgMain #imgMain_in #imgPrev,
.styleSPV #imgMain #imgMain_in #imgNext {position:absolute;}
.styleSPV #imgMain #imgMain_in #imgPrev {left:-100%;}
.styleSPV #imgMain #imgMain_in #imgNext {right:-100%;}
.styleSPV #imgMain #imgMain_in.imgMainPrev #imgPrev:before,
.styleSPV #imgMain #imgMain_in.imgMainNext #imgNext:before {
content:'';
display:block;
width:20px;
height:20px;
position:absolute;
top:50%;
left:50%;
margin-top:-13px;
margin-left:-13px;
border:3px solid #CCC;
border-radius:50%;
border-right-color:transparent;
-webkit-animation:iconloader 1s linear infinite;
animation:iconloader 1s linear infinite;
}
.styleSPV #imgMain #imgMain_in #imgRelated {
position:absolute;
top:0px;
width:100%;
height:100%;
overflow:hidden;
}
.styleSPV #imgMain #imgMain_in .imgRelatedLeft {left:-100%;}
.styleSPV #imgMain #imgMain_in .imgRelatedRight {right:-100%;}
.styleSPV #imgMain #imgMain_in #imgRelatedBox {
position:relative;
display:-webkit-box;
display:-moz-box;
display:box;
width:100%;
height:100%;
}
.styleSPV #imgMain #imgMain_in #imgRelatedBox .imgRelatedFlex {
box-sizing:border-box;
-webkit-box-flex:1;
box-flex:1;
}
.styleSPV #imgMain #imgMain_in #imgRelatedBox .imgRelatedImg {
position:relative;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
display:block;
width:100%;
border:1px solid #000;
box-sizing:border-box;
opacity:0;
}
.styleSPV #imgMain #imgMain_in #imgRelatedBox .imgRelatedImg.target:before {
content:'';
display:block;
width:20px;
height:20px;
position:absolute;
top:50%;
left:50%;
margin-top:-13px;
margin-left:-13px;
border:3px solid #CCC;
border-radius:50%;
border-right-color:transparent;
-webkit-animation:iconloader 1s linear infinite;
animation:iconloader 1s linear infinite;
}
.styleSPV #imgMain #imgBtn {
display:none;
position:fixed;
display:inline-block;
background:rgba(255,255,255,0.7);
border:1px solid rgba(255,255,255,0.9);
border-radius:5px;
padding:5px;
}
.styleSPV #imgMain #imgMain_in img {display:none;}
.styleSPV #imgNavigation {display:none;}
.styleSPV #imgMain #imgNavigation {display:block;}
.styleSPV #imgMain #imgNavigation span {
display:block;
position:absolute;
border-radius:100px;
border:1px solid rgba(255,255,255,0.3);
background-color:rgba(0,0,0,0.3);
overflow:hidden;
opacity:1;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition-property:-webkit-transform,opacity,background,width;
transition-property:transform,opacity,background,width;
-webkit-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.styleSPV #imgMain #imgNavigation #imgBtnReturn {
right:0;
top:0;
width:40px;
height:40px;
}
.styleSPV #imgMain #imgNavigation #imgBtnLeft {
left:5px;
top:50%;
margin-top:-15px;
width:30px;
height:30px;
}
.styleSPV #imgMain #imgNavigation #imgBtnRight {
right:5px;
top:50%;
margin-top:-15px;
width:30px;
height:30px;
}
.styleSPV #imgMain #imgNavigation #imgBtnFit {
display:none;
position:fixed;
left:5px;
top:5px;
width:50px;
height:50px;
}
.styleSPV #imgMain #imgNavigation #imgBtnOrg {
left:0;
top:0;
width:40px;
height:40px;
}
.styleSPV #imgMain #imgNavigation #imgBtnRelated {
right:0;
bottom:5px;
width:40px;
height:40px;
z-index:99;
}
.styleSPV #imgMain #imgNavigation #imgBtnRelated.relfirst {width:100px;}
.styleSPV #imgMain #imgNavigation span a {
display:block;
width:100%;
height:100%;
text-indent:-9999px;
text-decoration:none;
line-height:41px;
}
.styleSPV #imgMain #imgNavigation #imgBtnReturn a {background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat center -81px / 20px;}
.styleSPV #imgMain #imgNavigation #imgBtnLeft a {
background-size:15px;
background-position:9px -15px;
}
.styleSPV #imgMain #imgNavigation #imgBtnRight a {
background-size:15px;
background-position:6px -38px;
}
.styleSPV #imgMain #imgNavigation #imgBtnFit a {background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat center -159px / 23px;}
.styleSPV #imgMain #imgNavigation #imgBtnOrg a {background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat center -111px / 20px;}
.styleSPV #imgMain #imgNavigation #imgBtnRelated a {
background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat 11px -152px / 18px;
padding-left:36px;
}
.styleSPV #imgMain #imgNavigation #imgBtnRelated.relfirst a {text-indent:0;}
.styleSPV #txTitle {
color:#FFF;
font-size:120%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
height:1.9em;
-webkit-transition-property:height;
transition-property:height;
-webkit-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.styleSPV #txTitle a:link,
.styleSPV #txTitle a:visited {
color:rgb(255,255,255);
text-decoration:none;
}
.styleSPV #imgCaption {
color:#FFF;
font-size:80%;
margin:0px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
height:2.2em;
-webkit-transition-property:height;
transition-property:height;
-webkit-transition-duration:200ms;
transition-duration:200ms;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.styleSPV #imgThumb {
width:100%;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
.styleSPV #imgThumb_in {margin:0 auto;}
.styleSPV #related {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:scroll;
visibility:hidden;
-webkit-overflow-scrolling:touch;
background:rgba(0,0,0,0.8);
-webkit-transition-property:-webkit-transform,opacity,visibility;
transition-property:transform,opacity,visibility;
-webkit-transition-duration:300ms;
transition-duration:300ms;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.styleSPV #related.related-hide {
opacity:0;
visibility:hidden;
}
.styleSPV #related.related-show {
opacity:1;
visibility:visible;
}
.styleSPV #related h3 {
background:url(https://image.itmedia.co.jp/images/largeimage/icon.png) no-repeat left -123px / 14px;
margin:0 0 10px;
padding:0 0 3px 22px;
font-size:100%;
border-bottom:1px solid #CCC;
}
.styleSPV #related table tr td:nth-child(1) {
vertical-align:middle;
padding:5px 0;
width:80px;
}
.styleSPV #related table tr td:nth-child(2) {
vertical-align:middle;
padding:5px;
}
.styleSPV #related table tr td:nth-child(2) a {color:#FFF;}
.styleSPV #related table tr td:nth-child(2) a:hover {text-decoration:none;}
.styleSPV footer {text-align:center;}
.styleSPV footer #copyright {display:none;}
.styleSPV #MICROAD {
margin:0 auto;
height:50px;
}
.styleSPV ._popIn_recommend_container {padding:0 !important;}
.styleSPV ._popIn_recommend_articles {background:#000;padding:3px;}
.styleSPV ._popIn_infinite_page {margin-bottom:0 !important;}
.styleSPV ._popIn_recommend_credit {position:static !important;text-align:right;padding:5px;}
.styleSPV ._popIn_recommend_art_img {left:3px !important;top:3px !important;right:3px !important;bottom:3px !important;}