body.stylePCV{min-width:990px;}
.stylePCV header{padding:20px;min-height:90px;}
.stylePCV #logo{margin:0 30px 0 0;min-height:90px;}
.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;}
#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 #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:0 0 10px;
}
.stylePCV #imgThumb{overflow:hidden;}
.stylePCV #imgThumb_in{
transform:translate3d(0,0,0);
transition-property:transform;
transition-duration:200ms;
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:336px;
padding:0 0 0 20px;
}
/*------------------------------*/
body.styleSPV{min-width:320px;}
.styleSPV header{display:none;}
.styleSPV #contents,
.styleSPV #imgMain{position:relative;}
.styleSPV #imgMain #imgMain_out{
width:100%;
overflow:scroll;
transition-property:height;
transition-duration:200ms;
transition-timing-function:ease-out;
}
.styleSPV #imgMain #imgMain_in{
position:relative;
width:100%;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
opacity:1;
transform:translate3d(0,0,0);
transition-property:transform,opacity,width,height;
transition-duration:200ms;
transition-timing-function:ease-out;
}
.styleSPV #imgMain #imgMain_in.imgMainMove{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;
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:flex;
width:100%;
height:100%;
}
.styleSPV #imgMain #imgMain_in #imgRelatedBox .imgRelatedFlex {
box-sizing:border-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;
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,
.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);
transition-property:transform,opacity,background,width;
transition-duration:200ms;
transition-timing-function:ease-out;
}
.styleSPV #imgMain #imgNavigation #imgBtnReturn{
right:5px;
top:5px;
width:40px;
height:40px;
}
.styleSPV #imgMain #imgNavigation #imgBtnLeft,
.styleSPV #imgMain #imgNavigation #imgBtnRight{
top:50%;
margin-top:-15px;
width:30px;
height:30px;
}
.styleSPV #imgMain #imgNavigation #imgBtnLeft{left:5px;}
.styleSPV #imgMain #imgNavigation #imgBtnRight{right:5px;}
.styleSPV #imgMain #imgNavigation #imgBtnFit,
.styleSPV #imgMain #imgNavigation #imgBtnOrg{
position:fixed;
left:5px;
top:5px;
width:40px;
height:40px;
}
.styleSPV #imgMain #imgNavigation #imgBtnFit{display:none;}
.styleSPV #imgMain #imgNavigation #imgBtnRelated{
right:5px;
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 #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 -141px / 20px;}
.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 #contents_header{
position:absolute;
background:rgba(0,0,0,0.6);
z-index:10;
width:100%;
padding:5px;
box-sizing:border-box;
opacity:1;
bottom:0;
transition-property:opacity;
transition-duration:400ms;
transition-timing-function:ease-out;
}
.styleSPV #contents_header.hide{
opacity:0;
}
.styleSPV #contents_nav{
display:flex;
border-top:1px solid #000;
border-bottom:1px solid #000;
}
.styleSPV #contents_nav #imgBtnReturn a{
display:block;
width:100px;
height:45px;
box-sizing:border-box;
line-height:3.5;
background:url(https://image.itmedia.co.jp/images/largeimage/return.png) no-repeat 5px center / 16px #F5C747;
padding-left:19px;
border-bottom:2px solid #E0AC22;
color:#000;
text-align:center;
border-radius:1px;
font-weight:bold;
border-right:1px solid #000;
text-decoration:none;
}
.styleSPV #txTitle{display:none;}
.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;
}
.styleSPV #imgThumb{
width:100%;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
.styleSPV #imgThumb .imgThumbJS{
border:none;
border-right:1px solid #000;
}
.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);
transition-property:transform,opacity,visibility;
transition-duration:0.3s;
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;}