/*LINK*/
#cmsWrap a:link,
#cmsWrap a:visited{
text-decoration:none;
-webkit-transition:color 0.5s;
transition:color 0.5s;
}
#cmsWrap a:link{color:#069;}
#cmsWrap a:visited{color:#666;}
/*TITLE AREA*/
.cmsType{
position:absolute;
top:6px;
left:5px;
font-size:93%;
}
@media(min-width:341px){.cmsType{left:10px;}}
@media(min-width:361px){.cmsType{left:20px;}}
.cmsDate{
font-size:93%;
text-align:right;
border-bottom:1px solid #DDD;
margin:0 0 10px;
padding:0 0 5px;
}
.update{
display:inline-block;
background:url(https://image.itmedia.co.jp/spv/images/cms_iconset.png) no-repeat left -38px / 11px;
padding:1px 0 0 16px;
}
.cmsSubtitle{
font-size:123.1%;
}
.cmsSubtitle h2,
.cmsSubtitle div{
font-weight:normal;
}
.cmsTitle{
font-size:161.6%;
}
.cmsTitle h1{
font-weight:normal;
}
/* タイトルレイアウト変更 */
.title {
position: relative;
z-index: 1;
display: inline-flex;
box-sizing: border-box;
flex-direction: column;
width: 100%;
vertical-align: top;
}
.cmsHeaderMove[style*='background'] .title__link--summary > .title {
font-weight: bold;
}
.title__link--reference > .title {
color: #000;
}
.setIndexBGStyleBlack .title__link--reference > .title {
color: #fff;
}
.title__subtitle {
order: -1;
font-size: 76%;
font-style: inherit;
}
#kn .title__subtitle {
font-weight: bold;
}
.title__delimiter {
display: none;
}
.title__pagenumber {
display: none;
}
.title__reference {
display: none;
}
.title__summary {
display: none;
}
/* タイトルレイアウト変更 */
.cmsAbstract{
font-size:123.1%;
}
.cmsAbstract h2,
.cmsAbstract h3,
.cmsAbstract p{
font-weight:normal;
color:#333;
}
.cmsInfo{
font-size:12px;
text-align:right;
}
.cmsInfo .byline{
display:block;
border:1px solid transparent;
margin-bottom:5px;
}
.cmsInfo .byline b{
font-weight:normal;
}
.cmsInfo .cmsAuthorlink{
background:url(https://image.itmedia.co.jp/spv/images/cms_iconset.png) no-repeat left -87px;
margin:0 3px;
padding:0 0 0 20px;
}
.cmsInfo .cmsAuthorlink:link,
.cmsInfo .cmsAuthorlink:visited{
color:#069;
}
.cmsInfo #pclink,
.cmsInfo #reflink{
display:none;
}
#cmsMark{
margin:0 0 20px;
display:flex;
flex-direction:row-reverse;
}
#cmsMark:empty{
display:none;
}
#cmsMark img{
float:none;
width:auto;
height:auto;
margin:0 !important;
}
/*CMS/Input BASE*/
#cmsBody p{
font-size:123.1%;
margin:0 0 20px;
word-wrap:break-word;
}
#cmsBody h3:not(.format--subheading),
#cmsBody h2.format--crosshead{
clear:both;
margin:0 0 10px;
padding:0 0 2px;
font-size:138.5%;
border-bottom:3px solid #DDD;
}
#cmsBody h4,
#cmsBody h3.format--subheading{
clear:both;
margin:0 0 10px;
padding:0 0 2px;
font-size:123.1%;
border-bottom:2px solid #EEE;
}
#cmsBody ul,
#cmsBody ol{
margin:0 0 20px 20px;
}
#cmsBody ul ul,
#cmsBody ul ol,
#cmsBody ol ul,
#cmsBody ol ol{
margin-bottom:0;
padding-top:3px;
}
#cmsBody li{
position:relative;
left:18px;
margin:0 18px 3px 0;
font-size:123.1%;
}
#cmsBody li li{
font-size:100%;
}
/*ENDWPP*/
#cmsBody .endkwd .box{
border:none;
background:none !important;
padding:0;
}
#cmsBody .endkwd .box br{
display:none;
}
#cmsBody .endkwd .box h3:not(.format--subheading),
#cmsBody .endkwd .box h2.format--crosshead{
background:url(https://image.itmedia.co.jp/spv/images/ulli_key.png) no-repeat left center transparent !important;
background-size:14px !important;
border-bottom:1px solid #000 !important;
margin:0 0 8px;
padding:3px 0 3px 20px;
font-size:130%;
font-weight:normal;
}
#cmsBody .endkwd .box h4,
#cmsBody .endkwd .box h3.format--subheading{
background:none;
margin:0;
padding:0 0 5px;
font-weight:normal;
font-size:120%;
color:#FFF;
line-height:1.5em;
border:none;
}
#cmsBody .endkwd .box h4 a,
#cmsBody .endkwd .box h3.format--subheading a{
background:url(https://image.itmedia.co.jp/images/ulli_key-solid.png) no-repeat 0 3px transparent;
padding:1px 0 3px 14px;
background-size:12px 12px;
text-decoration:none;
display:inline-block;
}
/*ENDLINK*/
#cmsBody .endlink h4,
#cmsBody .endlink h3.format--subheading{
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 0 8px;
padding:3px 0 3px 20px;
font-size:130%;
font-weight:normal;
}
#cmsBody .endlink ul{
margin:0 0 10px;
list-style:none;
}
#cmsBody .endlink li{
clear:both;
left:inherit;
font-size:100%;
line-height:1.7;
margin:0 0 10px;
display:none;
}
#cmsBody .endlink li a{
display:inline;
}
#cmsBody .endlink li a img{
float:left;
display:block;
width:60px;
height:45px;
margin:4px 10px 3px 0;
}
.tmplArticle #cmsBody .endlink li a:link img{
border:1px solid #CCC;
}
#cmsBody .endlink .endlink-art,
#cmsBody .endlink .endlink-lnk{
display:none;
}
#cmsBody .endlink .endlink-art a{
font-size:123.1%;
}
#cmsBody .endlink .endlink-lnk a{
font-size:108%;
}
#cmsBody .endlink #endlink-art1,
#cmsBody .endlink #endlink-art2,
#cmsBody .endlink #endlink-art3,
#cmsBody .endlink #endlink-lnk1,
#cmsBody .endlink #endlink-lnk2,
#cmsBody .endlink #endlink-lnk3{
display:list-item;
}
/*COPYRIGHT*/
#cmsCopyright,
#cmsCopyright p,
#cmsCopyright p span{
font-size:10px !important;
line-height:12px !important;
text-align:right !important;
color:#333 !important;
}
/*CREDIT*/
#cmsBody .credit{
clear:both;
border:1px solid #CCC;
margin:0 0 20px;
padding:5px;
font-size:12px;
}
#cmsBody .credit br{
display:inline;
}
/*COL100 600*/
#cmsBody div[id^="col"]{margin-bottom:20px;}
#cmsBody div[id^="col"] small{display:block;word-break:break-all;}
#cmsBody div[id^="col"] #cap-l{text-align:left;}
#cmsBody div[id^="col"] #cap-r{text-align:right;}
#cmsBody div[id^="col50"]{width:50px;}
#cmsBody div[id^="col100"]{width:100px;}
#cmsBody div[id^="col150"]{width:150px;}
#cmsBody div[id^="col200"]{width:200px;}
#cmsBody div[id^="col250"]{width:250px;}
#cmsBody div[id^="col300"]{width:300px;}
#cmsBody div[id^="col350"]{width:175px;}
#cmsBody div[id^="col400"]{width:200px;}
#cmsBody div[id^="col500"]{width:250px;}
#cmsBody div[id^="col600"]{width:300px;}
#cmsBody div[id^="col"][id$="c"]{margin:0 auto 20px;}
#cmsBody div[id^="col"][id$="l"]{float:left;margin:0 5px 5px 0;}
#cmsBody div[id^="col"][id$="r"]{float:right;margin:0 0 5px 5px;}
/*TABLE*/
#cmsBody .cmsTable,
#cmsBody #tbl-spec{
border-collapse:collapse;
margin:0 0 20px;
}
#cmsBody .cmsTableL{float:left;}
#cmsBody .cmsTableC{margin:0 auto 20px;}
#cmsBody .cmsTableR{float:right;}
#cmsBody .cmsTable25{width:25%;}
#cmsBody .cmsTable50{width:50%;}
#cmsBody .cmsTable75{width:75%;}
#cmsBody .cmsTable100{width:100%;}
#cmsBody .cmsTable caption,
#cmsBody #tbl-spec caption{
font-size:93%;
margin-bottom:3px;
text-align:left;
}
#cmsBody .cmsTable tbody{
box-shadow:0 0 1px rgba(0,0,0,0.2) inset;
}
#cmsBody .cmsTable tbody tr{
background:#FFF;
box-shadow:0 1px 0 rgba(255,255,255,0.8) inset;
}
#cmsBody .cmsTable tbody tr:nth-child(even){
background:#F5F5F5;
}
#cmsBody .cmsTable th,
#cmsBody .cmsTable td{
font-size:100%;
padding:5px;
text-align:left;
}
#cmsBody .cmsTable thead th{
background:rgba(187,73,64,1);
color:#FFF;
font-size:108%;
}
#cmsBody .cmsTable thead th:first-child{
border-radius:2px 0 0 0;
}
#cmsBody .cmsTable thead th:last-child{
border-radius:0 2px 0 0;
}
#cmsBody .cmsTable tbody th{
background:rgba(187,73,64,0.1);
}
#cmsBody #tbl-spec tbody th{
background:rgba(56,89,146,0.1);
}
/*INLINE COLOR*/
.cmsColorRed{color:#C00;}
.cmsColorBlue{color:#00C;}
.cmsColorGreen{color:#090;}
.cmsColorBottlegreen{color:#066;}
.cmsColorOrange{color:#F60;}
.cmsColorYellow{color:#CC0;}
.cmsColorPurple{color:#A757A8;}
.cmsColorGray{color:#999;}
.cmsColorWhite{color:#FFF;}
/*INLINE BGCOLOR*/
.cmsBgcolorRed{background-color:#FBB;}
.cmsBgcolorBlue{background-color:#BBF;}
.cmsBgcolorGreen{background-color:#BCB;}
.cmsBgcolorBottlegreen{background-color:#699;}
.cmsBgcolorOrange{background-color:#FCB;}
.cmsBgcolorYellow{background-color:#FFB;}
.cmsBgcolorPurple{background-color:#FCF;}
.cmsBgcolorGray{background-color:#DDD;}
.cmsBgcolorWhite{background-color:#FFF;}
/*INLINE FONTSIZE*/
.cmsFontsize-3{font-size:55%;}
.cmsFontsize-2{font-size:70%;}
.cmsFontsize-1{font-size:85%;}
.cmsFontsize1{font-size:115%;}
.cmsFontsize2{font-size:130%;}
.cmsFontsize3{font-size:145%;}
/*BOX*/
#cmsBody .cmsBox,
#cmsBody .cmsBoxL,
#cmsBody .cmsBoxR,
#cmsBody .box{
margin-bottom:20px;
border:3px solid rgba(102,102,102,1);
border-radius:2px;
clear:both;
padding:5px;
}
#cmsBody .cmsBox p:last-of-type,
#cmsBody .cmsBox ul:last-of-type,
#cmsBody .cmsBox ol:last-of-type,
#cmsBody .cmsBox ul li:last-of-type,
#cmsBody .cmsBox ul li:last-of-type,
#cmsBody .cmsBoxL p:last-of-type,
#cmsBody .cmsBoxL ul:last-of-type,
#cmsBody .cmsBoxL ol:last-of-type,
#cmsBody .cmsBoxL ul li:last-of-type,
#cmsBody .cmsBoxL ul li:last-of-type,
#cmsBody .cmsBoxR p:last-of-type,
#cmsBody .cmsBoxR ul:last-of-type,
#cmsBody .cmsBoxR ol:last-of-type,
#cmsBody .cmsBoxR ul li:last-of-type,
#cmsBody .cmsBoxR ul li:last-of-type{
margin-bottom:0;
}
#cmsBody .cmsBox br[clear="all"]:last-of-type,
#cmsBody .cmsBoxL br[clear="all"]:last-of-type,
#cmsBody .cmsBoxR br[clear="all"]:last-of-type{
display:none;
}
#cmsBody .cmsBox.cmsBoxNoborder,
#cmsBody .cmsBodyBoxNoborder .cmsBodyBoxInner,
#cmsBody .box.cmsBoxNoborder{border:none;background:rgba(102,102,102,0.1);}
#cmsBody .cmsBoxRed,
#cmsBody .cmsBodyBoxRed .cmsBodyBoxInner,
#cmsBody .box#red{border-color:rgba(190,43,43,1);background:rgba(190,43,43,0.1);}
#cmsBody .cmsBoxGreen,
#cmsBody .cmsBodyBoxGreen .cmsBodyBoxInner,
#cmsBody .box#Green{border-color:rgba(100,149,38,1);background:rgba(100,149,38,0.1);}
#cmsBody .cmsBoxBlue,
#cmsBody .cmsBodyBoxBlue .cmsBodyBoxInner,
#cmsBody .box#blue{border-color:rgba(38,112,149,1);background:rgba(38,112,149,0.1);}
#cmsBody .cmsBoxOrange,
#cmsBody .cmsBodyBoxOrange .cmsBodyBoxInner,
#cmsBody .box#orange{border-color:rgba(218,107,46,1);background:rgba(218,107,46,0.1);}
#cmsBody .boxRed h3,#cmsBody .boxRed h4,#cmsBody .boxRed h2.format--crosshead,
#cmsBody .cmsBodyBoxRed h3,#cmsBody .cmsBodyBoxRed h4,#cmsBody .cmsBodyBoxRed h2.format--crosshead,
#cmsBody .box#red h3,#cmsBody .box#red h4,#cmsBody .box#red h2.format--crosshead{border-color:rgba(190,43,43,0.5);}
#cmsBody .boxGreen h3,#cmsBody .boxGreen h4,#cmsBody .boxGreen h2.format--crosshead,
#cmsBody .cmsBodyBoxGreen h3,#cmsBody .cmsBodyBoxGreen h4,#cmsBody .cmsBodyBoxGreen h2.format--crosshead,
#cmsBody .box#red h3,#cmsBody .box#green h4,#cmsBody .box#green h2.format--crosshead{border-color:rgba(100,149,38,0.5);}
#cmsBody .boxBlue h3,#cmsBody .boxBlue h4,#cmsBody .boxBlue h2.format--crosshead,
#cmsBody .cmsBodyBoxBlue h3,#cmsBody .cmsBodyBoxBlue h4,#cmsBody .cmsBodyBoxBlue h2.format--crosshead,
#cmsBody .box#red h3,#cmsBody .box#blue h4,#cmsBody .box#blue h2.format--crosshead{border-color:rgba(38,112,149,0.5);}
#cmsBody .boxOrange h3,#cmsBody .boxOrange h4,#cmsBody .boxOrange h2.format--crosshead,
#cmsBody .cmsBodyBoxOrange h3,#cmsBody .cmsBodyBoxOrange h4,#cmsBody .cmsBodyBoxOrange h2.format--crosshead,
#cmsBody .box#red h3,#cmsBody .box#orange h4,#cmsBody .box#orange h2.format--crosshead{border-color:rgba(218,107,46,0.5);}
/*BOX - Add Caption*/
#cmsBody .cmsBodyBox{
margin-bottom:20px;
}
#cmsBody .cmsBodyBoxInner{
border:3px solid rgba(102,102,102,1);
border-radius:2px;
clear:both;
padding:5px;
}
#cmsBody .cmsBodyBoxInner h3,
#cmsBody .cmsBodyBoxInner h4,
#cmsBody .cmsBodyBoxInner h2.format--crosshead,
#cmsBody .cmsBodyBoxInner p{
margin:0 0 5px;
}
#cmsBody .cmsBodyBoxCaption{
padding:5px;
background:transparent;
}
#cmsBody .cmsBodyBoxNoborder h3,#cmsBody .cmsBodyBoxNoborder h4,
#cmsBody .cmsBodyBoxNoborder h2.format--crosshead{border-color:rgba(102,102,102,0.5);}
/*BOX (OLD)*/
#cmsBody .box:after{
content:"";
display:block;
font-size:0;
line-height:0;
height:0;
clear:both;
}
#cmsBody .box p:last-of-type,
#cmsBody .box ul:last-of-type,
#cmsBody .box ol:last-of-type,
#cmsBody .box ul li:last-of-type,
#cmsBody .box ol li:last-of-type{
margin-bottom:0;
}
#cmsBody .box br[clear="all"]:last-of-type{
display:none;
}
/*BLOCKQUOTE*/
#cmsBody blockquote{
position:relative;
margin:0 0 20px;
padding:1em 1em 1em 3em;
background:#EEE;
}
#cmsBody blockquote:before{
position:absolute;
top:0;
left:0;
content:"“";
font-size:600%;
line-height:1em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
}
#cmsBody blockquote p:last-of-type{
margin:0;
}
/*PRE*/
#cmsBody .cmsBodyPreBox{
clear:both;
margin:0 0 20px;
}
#cmsBody .cmsBodyPre{
width:95%;
overflow:scroll;
border:1px solid #CCC;
background:#EEE;
margin:0 auto 3px;
}
#cmsBody .cmsBodyPreCaption{
width:95%;
margin:0 auto;
}
#cmsBody .cmsBodyPre pre{
font-family:Courier, monospace, "ＭＳ ゴシック", "Osaka−等幅";
margin:0;
padding:10px;
color:#063;
}
/*PRE*/
#cmsBody .cmsBodyPrettifyBox pre.prettyprint{
line-height:inherit;
}
#cmsBody .cmsBodyPrettifyBox pre.prettyprint,
#cmsBody .cmsBodyPrettifyBox pre.prettyprint li{
font-family:Courier, monospace, "ＭＳ ゴシック", "Osaka−等幅";
font-size:108%;
}
/*BOX TRANSPARENT*/
#cmsBody .trBoxC .trBoxWidth{margin:auto;}
#cmsBody .trBoxL .trBoxWidth{float:left;}
#cmsBody .trBoxR .trBoxWidth{float:right;}
/*LARGEIMAGE LINK BUTTON*/
#cmsBody .cmsImgLinkBtn{
margin:25px 0;
}
#cmsBody .cmsImgLinkBtn a{
display:block;
margin:0;
padding:10px;
font-size:140%;
font-weight:bold;
text-align:center;
border:2px solid #FB910E;
border-radius:2px;
background:#FFF;
background:-webkit-linear-gradient(top,#FFF,#E6E6E6);
background:linear-gradient(to bottom,#FFF,#E6E6E6);
}
#cmsBody .cmsImgLinkBtn a:link,
#cmsBody .cmsImgLinkBtn a:visited{
color:#000;
}
/*CTRL*/
#cmsBody .ctrl{
clear:both;
margin:0 0 20px;
text-align:center;
}
#cmsBody .ctrl #prev a{
display:inline-block;
font-size:14px;
line-height:36px;
background:#FBB03B;
width:100px;
height:34px;
color:#000;
position:relative;
}
#cmsBody .ctrl #prev a:before{
content:'';
position:absolute;
top:0;
left:-34px;
width:0;
height:0;
border:17px solid transparent;
border-right-color:#FBB03B;
}
#cmsBody .ctrl #numb{
visibility:hidden;
}
#cmsBody .ctrl #next a{
display:inline-block;
font-size:14px;
line-height:36px;
background:#FBB03B;
width:100px;
height:34px;
color:#000;
position:relative;
}
#cmsBody .ctrl #next a:before{
content:'';
position:absolute;
top:0;
left:100px;
width:0;
height:0;
border:17px solid transparent;
border-left-color:#FBB03B;
}
/*ARTICLES - NOTICE -*/
#cmsBody #notice{
clear:both;
margin:0 0 20px;
text-align:center;
}
#cmsBody #notice a{
display:block;
font-size:131%;
font-weight:bold;
border:5px solid rgb(196,95,143);
border-radius:5px;
background:rgba(196,95,143,.2);
color:#000;
padding:10px;
text-decoration:none;
}
#cmsBody #notice a:before{
content:'次のページ';
display:block;
width:100%;
color:#666;
font-size:90%;
}
/*ARTICLES - REFERENCE -*/
#cmsBody #cmsReference{
clear:both;
margin:0 0 20px;
text-align:center;
}
#cmsBody #cmsReference a{
display:block;
padding:5px;
color:#000;
background:#FFF;
border:1px solid #000;
font-size:14px;
border-radius:2px;
}
/*ARTICLES - popin -*/
._popIn_recommend{padding:0 5px;}
@media(min-width:341px){
._popIn_recommend{padding:0 10px;}
}
@media(min-width:361px){
._popIn_recommend{padding:0 20px;}
}
._popIn_recommend_header{
font-weight:normal !important;
font-size:130% !important;
border-bottom:1px solid #DDD !important;
padding:3px 0 3px 20px !important;
background-size:14px !important;
}
._popIn_recommend_art_title{
font-size:14px !important;
line-height:1.3 !important;
}
/*LARGEIMAGE LOADER*/
.enlarge{
margin:10px auto;
width:30px;
height:30px;
border-radius:50%;
border:5px solid #CCC;
border-right-color:transparent;
-webkit-animation:iconloader 1s linear infinite;
animation:iconloader 1s linear infinite;
}
#cmsTranslation{
text-align:right;
font-style:italic;
}
/* Amazon
----------------------------------------------- */
.cmsAmazonBox{
display:flex;
margin-bottom:20px;
}
.cmsAmazonImg a{
display:flex;
align-items:center;
justify-content:center;
border:1px solid #CCC;
width:100px;
height:100px;
box-sizing:border-box;
}
.cmsAmazonImg a img{
object-fit:contain;
width:calc(100% - 15px);
height:calc(100% - 15px);
vertical-align:middle;
border:none !important;
}
.cmsAmazonBox_2{
flex:1;
padding-left:10px;
}
.cmsAmazonTitle{
font-size:123.1%;
line-height:1.6;
font-weight:bold;
word-break:break-word;
}
.cmsAmazonTitle a{
color:#333;
}
#cmsBody .cmsAmazonTitle a:link,
#cmsBody .cmsAmazonTitle a:visited{
color:#069;
}
.cmsAmazonDesc{
margin-top:5px;
line-height:1.6;
color:#666;
}
.cmsAmazonBtn{
margin-top:10px;
font-size:110%;
line-height:1.6;
font-weight:bold;
text-align:center;
}
.cmsAmazonBtn a{
display:block;
background: #F5C747;
border-bottom: solid 2px #E0AC22;
border-radius:3px;
color:#000;
padding:5px 10px 4px;
}
.cmsAmazonBtn a:before{
content:'';
display:inline-block;
vertical-align:middle;
width:16px;
height:16px;
margin-right:5px;
background:url(https://image.itmedia.co.jp/spv/images/cms_amazon_btn.png) no-repeat center center / contain;
}
#cmsBody .cmsAmazonBtn a:link,
#cmsBody .cmsAmazonBtn a:visited{
color:#000;
}
/* Affiliate Links
----------------------------------------------- */
.cmsToc{
position:relative;
margin-bottom:20px;
border:1px solid #666;
padding:33px 25px;
}
.cmsTocHeading{
position:absolute;
top:-11px;
left:20px;
font-size:1.2rem;
line-height:1;
color:#333;
padding:0 16px;
font-weight:bold;
background:#fff;
}
#cmsBody .cmsToc ul,
#cmsBody .cmsToc li{
margin:0;
padding:0;
}
#cmsBody .cmsToc ul{
padding-left:10px;
}
#cmsBody .cmsToc li{
margin-bottom:10px;
font-size:.95rem;
font-weight:bold;
}
#cmsBody .cmsToc li:last-child{
margin-bottom:0;
}
#cmsBody .cmsToc a:link,
#cmsBody .cmsToc a:visited,
#cmsBody .cmsToc a:hover{
color:#666;
}
.cmsAmazonLink,
.cmsRakutenLink,
.cmsValuecommerceLink,
.cmsButtonLink,
.cmsAccesstradeLink{
font-size:1rem;
font-weight:bold;
text-align:center;
margin-bottom:20px;
}
.cmsAmazonLink a,
.cmsRakutenLink a,
.cmsValuecommerceLink a,
.cmsButtonLink a,
.cmsAccesstradeLink a{
display:block;
border-radius:3px;
padding:7px 10px 5px;
}
.cmsAmazonLink a,
.cmsButtonLink a {
background:#fbb03b;
border-bottom:solid 2px #523e1e;
}
.cmsRakutenLink a{
background:#BF0000;
border-bottom:solid 2px #930000;
}
.cmsValuecommerceLink a{
background:#009091;
border-bottom:solid 2px #006465;
}
.cmsValuecommerceLink img[src*="ad.jp.ap.valuecommerce.com/servlet/gifbanner"]{
display:none;
}
#cmsBody .cmsAccesstradeLink a {
background:#FF6800;
border-bottom:solid 2px #9e4409;
}
.cmsAccesstradeLink img[src*="h.accesstrade.net/sp/rr?rk="]{
display:none;
}
#cmsWrap .cmsAmazonLink a:link,
#cmsWrap .cmsAmazonLink a:visited,
#cmsWrap .cmsAmazonLink a:hover,
#cmsWrap .cmsButtonLink a:link,
#cmsWrap .cmsButtonLink a:visited,
#cmsWrap .cmsButtonLink a:hover {color:#000;}
#cmsWrap .cmsRakutenLink a:link,
#cmsWrap .cmsRakutenLink a:visited,
#cmsWrap .cmsRakutenLink a:hover,
#cmsWrap .cmsValuecommerceLink a:link,
#cmsWrap .cmsValuecommerceLink a:visited,
#cmsWrap .cmsValuecommerceLink a:hover,
#cmsBody .cmsAccesstradeLink a:link,
#cmsBody .cmsAccesstradeLink a:visited,
#cmsBody .cmsAccesstradeLink a:hover {color:#fff;text-decoration:none;}
.cmsRakutenLink a:hover,
.cmsValuecommerceLink a:hover,
.cmsAccesstradeLink a:hover{filter:brightness(110%);}
/**/
.cmsValuecommerceBanner{
margin-bottom:20px;
}
#cmsBody .cmsValuecommerceBanner a:link img,
#cmsBody .cmsValuecommerceBanner a:visited img,
#cmsBody .cmsValuecommerceBanner a:hover img{
border:none;
}
/* Related
----------------------------------------------- */
.cmsRelatedItem{
display:-webkit-flex;
display:flex;
margin-bottom:20px;
border-top:1px solid #DDD;
border-bottom:1px solid #DDD;
padding:10px 0;
}
#cmsBody .cmsRelatedItem a img{
border:1px solid #DDD;
vertical-align:middle;
margin:0;
}
.cmsRelatedBox_2{
flex:1;
padding-left:10px;
}
#cmsBody .cmsRelatedTitle{
font-size:115%;
font-weight:bold;
margin:0;
}
/* Tweets Insta Facebook */
.cmsEmbeddedTweets,
.cmsEmbeddedFBposts,
.cmsEmbeddedInstagram,
.cmsEmbeddedTikTok{
width:300px;
margin:0 auto 20px;
}
.cmsEmbeddedTikTok{width:100%}
.cmsEmbeddedThreads{
width:100%;
max-width:540px;
margin:0 auto 20px;
}
.cmsEmbeddedFBpostsIn{
min-height:200px;
}
.cmsEmbeddedFBposts span,
.cmsEmbeddedFBposts iframe{
width:100% !important;
}
.cmsEmbeddedTweetsCaption,
.cmsEmbeddedFBpostsCaption{
margin-top:10px;
}
.cmsEmbeddedInstagramIn{
padding:5px 10px 0;
border:1px solid #DDD;
border-radius:5px;
}
.cmsEmbeddedInstagram iframe{
width:100%;
height:500px;
margin-bottom:5px;
}
.cmsEmbeddedTikTok iframe{
width:100%;
}
.cmsEmbeddedInstagramCaption{
margin-top:10px;
}
.cmsEmbeddedTikTokCaption{
margin:0 auto;
width:300px;
}
.cmsEmbeddedThreadsCaption{
margin:10px auto 0;
width:100%;
max-width:540px;
}
#cmsBody .twitter-tweet{
position:relative;
min-height:200px;
background:#f6f6f6;
border-radius:14px;
margin:0 !important;
}
#cmsBody .twitter-tweet:before{
position:absolute;
top:11px;
left:auto;
right:16px;
content:"";
width:24px;
height:24px;
background:url(https://image.itmedia.co.jp/spv/images/msbBtnTweetbutton.png) no-repeat center / contain;
}
#cmsBody .twitter-tweet-rendered + blockquote.twitter-tweet{
display:none;
}
#cmsBody .twitter-tweet iframe{
position:relative !important;
}
#cmsBody .cmsEmbeddedTweetsOuter{
min-height:230px;
overflow:hidden;
}
#cmsBody .cmsEmbeddedInstagramOuter{
min-height:538px;
overflow:hidden;
}
/* thumbnails */
.cmsThumb{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin-bottom:20px;
}
.cmsThumb:before{
content:'';
display:block;
width:calc(25% - 15px);
height:0;
order:1;
}
.cmsThumb:after{
content:'';
display:block;
width:calc(25% - 15px);
height:0;
}
.cmsThumbItem{
position:relative;
display:block;
width:calc(25% - 5px);
margin:0 0 5px;
}
@media(min-width:341px){
.cmsThumb:before,
.cmsThumb:after,
.cmsThumbItem{width:calc(25% - 10px);}
.cmsThumbItem{margin:0 0 10px;}
}
@media(min-width:361px){
.cmsThumb:before,
.cmsThumb:after,
.cmsThumbItem{width:calc(25% - 15px);}
.cmsThumbItem{margin:0 0 20px;}
}
.cmsThumbItem:before{
content:'';
display:block;
padding-top:100%;
}
.cmsThumbItem img{
position:absolute;
top:0;
left:0;
object-fit:cover;
width:100%;
height:100%;
}
.cmsThumbItem .cmsLazy{
border:none;
margin-top:0;
}
/* cmsSeriesList
----------------------------------------------- */
#cmsSeriesList #seriesIndexBox0,
#cmsSeriesList #seriesIndexBox2 {
opacity:0;
transition-property:opacity;
transition-duration:500ms;
transition-timing-function:ease;
}
#cmsSeriesList div[id^="col"] {
margin:0;
}
#cmsSeriesList .colBoxHead {
border-bottom:3px solid #FBB03B;
margin-bottom:10px;
}
#cmsSeriesList .colBoxHead .seriesBoxTitle {
margin:0;
padding:0 0 0 20px;
background:url(data:image/gif;base64,R0lGODlhBQAFAIABAJmZmf///yH5BAEAAAEALAAAAAAFAAUAAAIIBGKGF72rTAEAOw==) no-repeat left center / 14px;
font-size:130%;
display:inline-block;
}
#cmsSeriesList #seriesBoxLength {
display:inline-block;
font-weight:bold;
font-size:130%;
margin-left:5px;
}
#cmsSeriesList .colBoxIcon {
display:block;
border:1px solid #CCC;
padding:1px;
width:60px;
height:45px;
float:left;
margin:4px 10px 3px 0;
}
#cmsSeriesList .colBoxIcon a {
display:block;
width:60px;
height:45px;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
float:none;
margin:0;
}
#cmsSeriesList .colBoxIcon.noImg a {
background-image:url(https://image.itmedia.co.jp/spv/images/series_noimg.png);
background-size:20px;
background-color:#CCC;
}
#cmsSeriesList .colBoxTitle p {
margin:0;
font-size:100%;
font-weight:normal;
}
#cmsSeriesList .mycolBoxIndex {
position:relative;
border:3px solid #FBB03B;
padding-top:30px;
}
#cmsSeriesList .mycolBoxIndex:before {
content:'今見ているページです';
display:block;
position:absolute;
top:0;
left:0;
width:100%;
color:#333;
background:#FBB03B;
font-size:12px;
line-height:18px;
padding:3px;
}
#cmsSeriesList .seriesBoxClosed0 #colBoxIndex-0 .NewMark {
position: relative;
width: 47px;
display: inline-block;
height: 22px;
vertical-align: top;
}
#cmsSeriesList .seriesBoxClosed0 #colBoxIndex-0 .NewMark:before {
content:'';
display:block;
position:absolute;
top:50%;
left:0;
width:0;
height:0;
border:8px solid transparent;
border-right:8px solid rgba(230,230,230,0.9);
margin-top:-9px;
}
#cmsSeriesList .seriesBoxClosed0 #colBoxIndex-0 .NewMark:after {
content:'New';
position:absolute;
top:50%;
left:15px;
padding:0 3px;
font-size:9px;
font-weight:normal;
color:#F00;
font-family:Arial,Verdana;
display:inline-block;
width:20px;
height:16px;
line-height:16px;
background:rgba(230,230,230,0.9);
margin-top:-9px;
}
#cmsSeriesList .colBoxButton {
border-radius:0;
width:auto;
border:none;
margin:0 0 10px;
text-align:center;
}
#cmsSeriesList .colBoxButton a {
border-radius:0;
border:none;
padding:5px 10px;
display:block;
width:auto;
font-weight:normal;
background:rgba(251,176,59,0.2);
border:3px solid rgba(251,176,59,1);
}
#cmsBody #cmsSeriesList .colBoxButton a:link,
#cmsBody #cmsSeriesList .colBoxButton a:visited,
#cmsBody #cmsSeriesList .colBoxButton a:hover {
color:#000;
}
/* cmsUsingAffiliate
------------------------------*/
#cmsBody .cmsUsingAffiliate {
font-size: 100%;
padding-bottom: 15px;
}