@charset "utf-8";
@import url("//fonts.googleapis.com/css?family=Lobster");
  .pager{
margin: 0 12px;
font-size: 96%;
}
.pager .page-numbers{
display: inline-block;
padding: .4em .6em;
margin-bottom: .4em;
line-height: 100%;
border-radius: 2px;
background: #fff;
}
.pager .page-numbers.current{
background: #fff300;
box-shadow: 0 0 1px rgba(0, 0, 0, .5);
} .pager .page-numbers.dots{
padding-left: 0;
padding-right: 0;
background: none;
} .sns-share{
margin: 1em 0;
} .sns-share .sns-share-title{
padding: .8em 0;
margin-bottom: 20px;
font-size: 110%;
text-align: center;
background: #fff;
border: 3px solid #333;
border-radius: 5px;
position: relative;
z-index: 1;
}
.sns-share .sns-share-title::before,
.sns-share .sns-share-title::after{
content: '';
display: block;
width: 0;
height: 0;
margin: auto;
position: absolute;
right: 0;
left: 0;
border-style: solid;
}
.sns-share .sns-share-title::before{
bottom: -28px;
border-width: 14px;
border-color: #fff transparent transparent transparent;
z-index: 2;
}
.sns-share .sns-share-title::after{
bottom: -36px;
border-width: 18px;
border-color: #333 transparent transparent transparent;
z-index: 0;
}
.sns-share ul.buttons{
margin: 0;
padding: 0;
}
.sns-share ul.buttons > li{
margin-bottom: 5px;
}
.sns-share ul.buttons > li > a{
display: block;
width: 100%;
padding: .8em 0;
color: #fff;
font-size: 110%;
text-align: center;
overflow: hidden;
}
.sns-share ul.buttons > li > a.facebook{
background: #5872a7;
}
.sns-share ul.buttons > li > a.twitter{
background: #6eb8f1;
background: #000;
}
.sns-share ul.buttons > li > a.hatena{
background: #4c84c7;
}
.sns-share ul.buttons > li > a.googlep{
background: #e26657;
}
.sns-share ul.buttons > li > a.line{
background: #00b833;
}
.sns-share ul.buttons > li > a > span{
font-weight: bold;
}
.sns-share.content{
margin-top: 3rem;
position: relative;
}
.sns-share.content .sns-share-title{
padding: .3em .6em;
font-size: 80%;
border-width: 2px;
position: absolute;
top: -100%;
left: -.5rem;
box-shadow: 1px 2px 3px #aaa;
}
.sns-share.content .sns-share-title::before{
margin-left: 14px;
bottom: -13px;
border-width: 7px;
z-index: 2;
}
.sns-share.content .sns-share-title::after{
margin-left: 12px;
bottom: -18px;
border-width: 9px;
z-index: 0;
}
.sns-share.content ul.buttons{
display: flex;
flex-flow: row wrap;
justify-content: center;
box-shadow: 1px 2px 3px #aaa;
}
.sns-share.content ul.buttons > li{
margin: 0;
width: calc(100% / 4);
}
.sns-share.content ul.buttons > li > a{
height: 2.5em;
margin: 0 auto;
padding: 0;
line-height: 2.5em;
font-size: 90%;
position: relative;
}
.sns-share.content ul.buttons > li > a::after{
content: '';
display: block;
width: 100%;
height: 0;
background: yellow;
position: absolute;
bottom: 0;
transition: all .3s ease 0s;
}
.sns-share.content ul.buttons > li > a:hover::after{
height: 3px;
} .section-box{
margin: 0 0 24px 0;
}
.section-title{
padding: .4em .5em;
margin-bottom: .3em;
font-size: 130%;
background: #fff;
border-top: 5px #ffc000 solid;
border-bottom: 1px #aaa solid;
}
.section-wrap,
.section-description,
.section-body{
margin: 16px 12px;
} .section-body{
margin-top: 0;
}
.section-body-title{
font-size: 110%;
line-height: 1.6em;
padding: .5em 1em;
margin: 0;
border: 1px solid #bbb;
background: #f1f1f1;
background-image: linear-gradient(45deg, #eee, #fefefe 40%, #e3e3e3 93%);
box-shadow: 1px 1px 0 0 #fff inset; 
text-shadow:
0 3px 5px #fff,
3px 0 5px #fff;
}
.section-body-inner{
padding: 12px;
}
.section-body-inner img{
max-width: 100%;
height: auto;
}
.inner-section{
margin: 24px 0;
}
.inner-section:first-child{
margin-top: 0;
}
.inner-section:last-child{
margin-bottom: 0;
}
.inner-section p{
padding-left: .5em;
padding-right: .5em;
}
.inner-section .inner-section-title{
padding: .3em .4em;
font-size: 110%;
background: #fff;
border-top: 5px #ffc000 solid;
border-bottom: 1px #aaa solid;
}
.inner-section.review #review-list{
font-size: 84%;
}
.inner-section.review #review-list .review-box{
padding: .8em .5em;
border-bottom: 1px dotted #888;
}
.inner-section.review #review-list .review-box:first-child{
padding-top: 0;
}
.inner-section.review #review-list .review-header > *{
vertical-align: middle;
}
.inner-section.review #review-list .review-header::before{
content: '';
display: inline-block;
width: 3.363em;
height: 2em;
vertical-align: middle;
background: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/review-face.png) 0 0 no-repeat;
background-size: auto 100%;
}
.inner-section.review #review-list .review-header.good::before{
background-position: 50% 0;
}
.inner-section.review #review-list .review-header.bad::before{
background-position: 100% 0;
}
.inner-section.review #review-list .review-title{
box-sizing: border-box;
display: inline-block;
width: 70%;
width: calc(100% - 4em);
min-width: 12em;
padding: .3em;
margin-left: .1em;
text-align: center;
line-height: 1em;
white-space: nowrap;
background: #ffffcc;
border: 1px solid #888;
border-radius: 5px;
position: relative;
box-shadow: 1px 1px 1px #bbb;
}
.inner-section.review #review-list .review-title::before,
.inner-section.review #review-list .review-title::after{
content: '';
display: block;
width: 0;
height: 0;
margin: -5px 0 0 -10px;
border: 5px solid transparent;
border-top: 5px solid #666;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.inner-section.review #review-list .review-title::after{
border-top-color: #ffff99;
left: 1px;
}
.inner-section.review #review-list .review-stars{
display: inline-block;
height: 1.2em;
width: 6em;
margin: 0 .2em;
background: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/review-stars.png) 0 100% no-repeat;
background-size: auto 200%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
position: relative;
}
.inner-section.review #review-list .review-stars::before{
content: '';
display: block;
width: 0;
height: 100%;
background: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/review-stars.png) 0 0 no-repeat;
background-size: auto 200%;
position: absolute;
left: 0;
top: 0;
}
.inner-section.review #review-list .review-stars.star-1::before{
width: 20%;
}
.inner-section.review #review-list .review-stars.star-2::before{
width: 40%;
}
.inner-section.review #review-list .review-stars.star-3::before{
width: 60%;
}
.inner-section.review #review-list .review-stars.star-4::before{
width: 80%;
}
.inner-section.review #review-list .review-stars.star-5::before{
width: 100%;
}
.inner-section.review #review-list .review-author{
white-space: nowrap;
}
.inner-section.review #review-list .review-author::before{
content: '(';
}
.inner-section.review #review-list .review-author::after{
content: ')';
}
.inner-section.review #review-list .review-text p{
margin: .5em 0;
}
.inner-section.review .review-post{
margin-top: .5em;
font-size: 80%;
text-align: right;
}
.inner-section.review .review-post a{
color: #1a0dab;
text-decoration: underline;
}
.inner-section.review .review-post a::before{
content: '▼';
display: inline-block;
color: #ff0000;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.inner-section.review .review-post a:hover{
text-decoration: underline dashed;
}
.inner-section.content > ul,
.inner-section.content > ol{
margin: 0 0 2em 1.5em;
}
.inner-section.content > p{
line-height: 190%;
margin-bottom: 1.5em;
}
.inner-section.content th,
.inner-section.content td {
padding: 0.8em;
}
.section-box .feature{
padding: 1rem 1.3rem;
margin: 1rem 0;
background-color: #fdfdba;
border: 3px solid #ff6600;
border-width: 0 0 0 8px;
}
.section-box .feature li a{
text-decoration: underline;
}
.section-box .feature ul{
list-style-type: disc;
}
.section-box .feature ul,
.section-box .feature ol{
margin: 0 0 2rem 1.5rem;
line-height: 2em;
}
.section-box .feature ul:last-child,
.section-box .feature ol:last-child{
margin-bottom: 0;
}
.section-box .feature.style2{
border: 2px solid #2b3664;
border-radius: 4px;
background: #fff;
}
.section-box .feature.style2 .title{
padding: .3rem 1rem;
margin: -1rem -1.3rem 1rem -1.3rem;
background: #2b3664;
color: #fff;
font-weight: bold;
font-size: 1.05em;
}
.section-box .feature.style2.red{
border: 2px solid #f00001;
}
.section-box .feature.style2.red .title{
background: #f00001;
}
.section-box .feature.style2.green{
border: 2px solid #c4d700;
}
.section-box .feature.style2.green .title{
background: #c4d700;
text-shadow: 0 0 3px #7c7c7c;
}
.section-box .feature.style2.yellow{
border: 2px solid #ffc000;
}
.section-box .feature.style2.yellow .title{
background: #ffc000;
}
.section-box .feature.style2 ol{
counter-reset: feature-ol-item;
list-style: none;
}
.section-box .feature.style2 ol li,
.section-box .feature.style2 ol li a{
vertical-align: middle;
color: #ff6600;
}
.section-box .feature.style2 ol li:before{
box-sizing: border: box;
display: inline-block;
vertical-align: middle;
width: 1.4rem;
height: 1.4rem;
line-height: 1.4rem;
font-size: .8rem;
margin-left: -1rem;
margin-right: .3rem;
text-align: center;
counter-increment: feature-ol-item;
content: counter(feature-ol-item);
color: #fff;
background: #ff6600;
border-radius: 50%;
}
.section-box .feature.style3{
background: #f0f7ff;
border: dashed 2px #5b8bd0;
}
.section-box .feature.style4,
.section-box .feature.style5{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
font-size: 88%;
border: none;
background: #cfe0d8;
position: relative;
border-radius: 4px;
}
.section-box .feature.style4 .title,
.section-box .feature.style5 .title{
display: inline-block;
margin-left: -.5em;
color: #fff;
border: 2px solid #fff;
background: #cc0000;
position: absolute;
top: calc(-1.5rem - 2px);
border-radius: 1em;
}
.section-box .feature.style5{
background: #fff;
border: 3px solid #333;
}
.section-box .feature.style5 .title{
background: #333;
}
.section-box .feature.style5.good{
border: 3px solid #f00001;
}
.section-box .feature.style5.good .title{
background: #f00001;
}
.section-box .feature.style5.bad{
border: 3px solid #000c7a;
}
.section-box .feature.style5.bad .title{
background: #000c7a;
}
.section-box .other-post{
display: block;
margin: 1em;
padding: .5em 1.3em;
line-height: 160%;
border: 1px solid #ccc;
color: #3b3b3b;
background: #efefef;
}
.section-box .other-post:hover{
background: #efefef;
border: 1px solid #aaa;
}
.section-box .other-post::after{
content: '.';
height: 0;
visibility: hidden;
display: block;
clear: both;
}
.section-box .other-post .title{
display: block;
padding: 0;
margin: 0 0 .8em 0;
font-size: 90%;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}
.section-box .other-post .thumb{
display: block;
margin-right: .5em;
float: left;
position: relative;
z-index: 1;
}
.section-box .other-post .thumb img{
width: 80px;
height: auto;
}
.section-box .other-post .excerpt{
display: block;
margin: 0;
font-size: 86%;
line-height: 1.6em;
position: relative;
} .section-box .other-post .readmore{
display: block;
margin: 1em 0 0 0;
font-size: 86%;
color: #1a0dab;
}
.section-box .other-post .readmore::before{
content: '>> ';
} .limg-box{
box-sizing: border-box;
padding: 12px;
margin: 8px 12px;
vertical-align: top;
background: #fff;
box-shadow: 0 0 2px #ccc;
}
.limg-box .item-title{
padding: .15em .2em;
font-size: 105%;
border-bottom: 1px solid #666;
}
.limg-box .inner{
display: table;
width: 100%;
padding-bottom: 12px;
margin-bottom: 12px;
color: #3b3b3b;
border-bottom: 1px dotted #aaa;
}
.limg-box .inner:last-child{
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.limg-box .image,
.limg-box .text{
display: table-cell;
vertical-align: top;
}
.limg-box .image{
width: 30%;
}
.limg-box .image img{
width: 100%;
height: auto;
}
.limg-box .text{
padding-left: .5em;
}
.limg-box .text p{
margin: 0;
font-size: 90%;
}
.limg-box .text .title{
margin-bottom: .5em;
line-height: 120%;
color: #024394;
text-decoration: underline;
}
.limg-box .text .comment{ } .recommended-items{
}
.recommended-items .section-title{
border-top-color: #ff2a00;
position: relative;
}
.recommended-items .section-title.giftbox{
padding-left: 3.1em;
}
.recommended-items .section-title.giftbox::before{
content: '';
display: inline-block;
width: 3em;
height: 3em;
background: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/giftbox-152.png) no-repeat 0 0 / cover;
position: absolute;
left: 0;
top: -.45em;
}
.recommended-items .limg-box{
border: 1px solid #bbb;
border-left: 6px solid #ff2a00;
background-image: linear-gradient(160deg, #fff 60%, #eee);
box-shadow: -1px 1px 0 0 #fff inset;
}
.recommended-items .limg-box .comment,
.recommended-items .limg-box .comment p{
height: 2.4em;
margin: 0;
color: #ff0000;
font-size: 86%;
font-weight: bold;
line-height: 130%;
overflow: hidden;
} .new-post-list{
}
.new-post-list .post-list{
font-size: 80%;
}
.new-post-list .post-list a{
display: block;
padding: .3em .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-top: 1px dotted #ccc;
}
.new-post-list .post-list li:first-child a{
border-top: none;
}
.new-post-list .post-list a:hover{
background: #eee;
} .cashless-search{
}
#cp-category,
#cp-category-g,
#cp-show{
box-sizing: border-box;
width: 100%;
padding: .5em 1em;
border: 3px solid #3aa1d5;
border-radius: 5px;
}
#cp-category,
#cp-category-g{
margin-bottom: .5em;
background: #fff;
}
#cp-show{
display: inline-block;
padding: .5em 1em;
margin-top: 1em;
text-align: center;
font-size: 94%;
color: #fff;
white-space: nowrap;
background: #3aa1d5;
border-radius: 5px;
}
#cp-show.disable{
cursor: not-allowed;
border-color: #888;
background: #888;
pointer-events: none;
} .post-genre .limg-box{
border-left: 6px solid #ffc000;
}
.post-genre .text{
height: 100%;
position: relative;
overflow: hidden;
}
.post-genre .text .comment{
position: absolute;
left: .5em;
top: 0;
}
.post-genre .limg-box .inner:first-of-type{
position: relative;
}
.post-genre .limg-box .inner:first-of-type::before{
content: '最新記事';
display: block;
padding: .25em;
color: #fff;
font-size: 70%;
line-height: 100%;
background: #ff0000;
box-shadow: 1px 1px 1px 0 #aaa;
border-radius: 1px;
position: absolute;
left: -1em;
top: -.5em;
}
.post-genre .continue{
display: block;
padding: .8em 0;
font-size: 90%;
color:#fff;
text-align: center;
background: #ffc000;
text-shadow: 0 0 3px #b8860b;
border-radius: 2px;
transition: all .1s ease 0s;
}
.post-genre .continue:hover{
box-shadow: 0 3px 5px #333;
opacity: .9;
}
.other-ranking .continue-all a,
.post-genre .continue-all a{
box-sizing: border-box;
display: block;
width: 70%;
min-width: 260px;
padding: .8em 0;
margin: 8px auto;
color: #333;
text-align: center;
background: #fff;
border: 2px solid #aaa;
overflow: hidden;
border-radius: 2px;
transition: all .1s ease 0s;
}
.other-ranking .continue-all a::after,
.post-genre .continue-all a::after{
content: '▼';
display: block;
margin-top: .3em;
color: #888;
line-height: 0%;
font-size: 78%;
transform: scale(2, 1);
}
.other-ranking .continue-all a:hover,
.post-genre .continue-all a:hover{
box-shadow: 0 3px 5px #333;
} .other-ranking .section-title{
border-top-color: #00dd00;
}
.other-ranking .limg-box{
border-left: 6px solid #00dd00;
}
.other-ranking .limg-box .image,
.other-ranking .limg-box .text{
vertical-align: middle;
}
.other-ranking .limg-box .inner{
counter-increment: mr-count;
position: relative;
}
.other-ranking .limg-box .inner::before{ display: block;
width: 2.5em;
height: 2.5em;
color: #000;
font-size: 70%;
line-height: 2.5em;
text-align: center;
white-space: nowrap;
background: #fff;
box-shadow: 1px 1px 1px 0 #aaa;
border-radius: 50%;
position: absolute;
left: -.8em;
top: -.8em;
}
.other-ranking .limg-box .inner:nth-child(1)::before{
background-image: linear-gradient(135deg, #ffb200, #ffff8d 20%, #ffff8d 45%, #ffb200 93%);
}
.other-ranking .limg-box .inner:nth-child(2)::before{
background-image: linear-gradient(135deg, #eee, #fefefe 40%, #e3e3e3 93%);
}
.other-ranking .limg-box .image{
width: 22%;
}
.other-ranking .limg-box .inner .title{
height: 2.4em;
margin: 0;
text-decoration: none;
overflow: hidden;
position: relative;
}
.other-ranking .limg-box .inner .title::before,
.other-ranking .limg-box .inner .title::after{
display: inline-block;
font-size: 80%;
position: absolute;
}
.other-ranking .limg-box .inner .title::before{
content: '...';
padding-left: .5em;
background: linear-gradient(to right, transparent,#fff .5em);
right: 0;
bottom: 0;
}
.other-ranking .limg-box .inner .title::after{
content: '';
width: 100%;
height: 100%;
background: #fff;
}
.other-ranking .continue{
display: block;
padding: .5em .8em;
color:#fff;
text-align: center;
background: #00dd00;
border-radius: 2px;
transition: all .1s ease 0s;
}
.other-ranking .continue:hover{
box-shadow: 0 3px 5px #333;
opacity: .9;
}
.other-ranking .continue p{
height: 1em;
margin: 0;
padding: 0;
line-height: 108%;
white-space: nowrap;
overflow: hidden;
}
.other-ranking .continue .readmore{
margin-top: .3em;
font-size: 80%;
}
.other-ranking .continue .readmore::after{
content: ' >>';
} .section-body.card{
position: relative;
}
.section-body.card .section-body-title{
font-size: 110%;
}
.section-body.card .rating{
display: none;
width: 12em;
height: 2.4em;
position: absolute;
right: .5em;
top: .3em;
}
.section-body.card .rating::before,
.section-body.card .rating::after{
content: '';
display: block;
width: 100%;
height: 114%;
background: none no-repeat scroll center 0 / contain;
position: absolute;
left: 0;
top: -64%;
z-index: 10;
}
.section-body.card .rating.rate5::after{
background-image: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/rating-5.png);
}
.section-body.card .rating.rate4::after{
background-image: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/rating-4.png);
}
.section-body.card .rating.rate3::after{
background-image: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/rating-3.png);
}
.section-body.card .rating.rate2::after{
background-image: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/rating-2.png);
}
.section-body.card .rating.rate1::after{
background-image: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/rating-1.png);
}
.section-body.card .rating p{
box-sizing: border-box;
width: 100%;
margin: 0;
font-size: 80%;
text-align: center;
background: #fff;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 3px;
position: absolute;
bottom: 0;
z-index: 0;
}
.section-body.card .rating .rating-point{
font-weight: bold;
color: #ff0000;
}
.section-body.card .card-summary{
display: table;
width: 100%;
height: 100%;
}
.section-body.card .card-summary .face{
text-align: center;
padding: .5rem 0 .8rem 0;
}
.section-body .campaign{
margin: .5em 0;
padding: .3em;
border: 3px double #dda303;
background: #fffce9;
}
.section-body .campaign p{
margin: 0 0 .8em 0;
font-weight: bold;
}
.section-body .campaign p:last-child{
margin-bottom: 0;
}
.section-body.card .card-summary .data table{
width: 100%;
text-align: center;
border-collapse: collapse;
table-layout: fixed; }
.section-body.card .card-summary .data th,
.section-body.card .card-summary .data td{
padding: .5em 0;
border: 1px solid #ccc;
}
.section-body.card .card-summary .data th{
background: #ffecb3;
}
.section-body.card .card-summary .data td{
} .section-body.card .section-body-inner .ability{
width: 101%;
margin: .5em 0;
line-height: 100%;
letter-spacing: -.5em;
}
.section-body.card .ability li{
box-sizing: border-box;
display: inline-block;
width: 32.4%;
margin: 0 .9% 0 0;
font-size: .9rem;
line-height: 180%;
text-align: center;
color: #666;
border: 1px solid #eee;
background: #eee;
letter-spacing: normal;
white-space: nowrap;
overflow: hidden;
}
.section-body.card .ability li.on{
color: #3b3b3b;
border-color: #ffa633;
background: #fee300;
}
.section-body.card .point > ul{
border: 3px solid #aaa;
border-radius: 5px;
background: #ffffdd;
}
.section-body.card .point > ul li{
padding: .5em 0;
margin: 0 .8em;
font-size: 90%;
border-bottom: 1px dotted #aaa;
}
.section-body.card .point > ul li::before{
content: '・';
}
.section-body.card .point > ul li:last-child{
border-bottom: 0;
}
.section-body .button{
display: table;
width: 100%;
}
.section-body .button .official,
.section-body .button .detail{
display: table-cell;
width: 50%;
padding: 5px 0;
font-size: 90%;
}
.section-body .button a{
box-sizing: border-box;
display: block;
padding: 1.3em 0;
text-align: center;
color: #fff;
font-weight: bold;
background: red;
border: 2px solid #fff;
border-radius: 4px;
box-shadow: 0 0 3px #aaa;
transition: all .1s ease 0s;
}
.section-body .button a:hover{
box-shadow: 0 3px 5px #333;
text-shadow: 0 0 3px #333;
opacity: .9;
}
.section-body .button > *:nth-child(2) a{
margin-left: 1.5%;
}
.section-body .button .official a{
background-image: linear-gradient(#ff492b, #e21e1e);
}
.section-body .button .official a:hover{
background-image: linear-gradient(#e21e1e, #ff492b);
}
.section-body .button .detail a{ background-image: linear-gradient(#2791e2, #0064c8);
}
.section-body .button .detail a:hover{
background-image: linear-gradient(#0064c8, #2791e2);
}
.section-body.card .detail-table h2{
padding: .3em .8em;
margin: 0;
color: #fff;
font-size: 100%;
font-weight: normal;
border: #237bff solid;
border-width: 1px 1px 0;
border-radius: 5px 5px 0 0;
box-shadow: 1px 1px 0 0 #60baff inset;
background: #237bff linear-gradient(45deg, #3888ff 30%, #237bff 80%) repeat scroll 0 0;
}
.section-body.card .detail-table table,
.section-body.card .detail-table > ul{
margin-bottom: 1.5em;
}
.section-body.card .detail-table > ul{
padding: .5em 2em;
list-style-type: disc;
border: 1px solid #aaa;
}
.section-body.card .detail-table > ul li{
font-size: 90%;
}
.section-body.card .detail-table table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.section-body.card .detail-table table th,
.section-body.card .detail-table table td{
padding: .5em;
font-size: 90%;
border: 1px solid #0a4fb6;
}
.section-body.card .detail-table table th{
width: 24%;
text-align: center;
background: #ffe247;
background: #ccf0ff;
background-image: linear-gradient(90deg, #a4e4fe, #ccf0ff 40%, #ccf0ff 60%, #a4e4fe);
color: #333;
}
.section-body.card .detail-table table .subhead{
width: 20%;
background: #fffbe3;
}
.section-body .inner-section .content-navi{
padding: .5em .8em;
margin: 1.5em auto;
line-height: 160%;
background: #f6f6f6;
border: 1px dotted #aaa;
}
.section-body .inner-section .content-navi dd{
margin: 0;
}
.section-body .inner-section .content-navi dt{
font-weight: bold;
}
.section-body .inner-section .content-navi ul{
padding-left: 1em;
margin: 0.3em 0 1em;
}
.section-body .inner-section .content-navi ul li{
font-size: 86%;
}
.section-body .inner-section .content-navi ul li::before{
content: '・';
} .section-body .inner-section .content-navi.accordion{
height: 280px;
overflow: hidden;
position: relative;
}
.section-body .inner-section .content-navi.accordion.open{
height: auto;
}
.section-body .inner-section .content-navi.accordion .toggle{
width: 100%;
padding: 2em 0 .5em 0;
text-align: center;
background: linear-gradient(rgba(246,246,246,0), #f6f6f6 3em);
position: absolute;
left: 0;
bottom: 0;
}
.section-body .inner-section .content-navi.accordion.open .toggle{
padding: 0;
position: static;
}
.section-body .inner-section .content-navi.accordion .toggle > button{
box-sizing: border-box;
width: 280px;
max-width: 80%;
padding: .6em 3rem;
color: #333;
font-size: 90%;
font-weight: bold;
background: #fff;
border: 2px solid #333;
border-radius: 50em;
}
.section-body .inner-section .content-navi.accordion .toggle > button::before{
content: '続きを見る▼';
}
.section-body .inner-section .content-navi.accordion.open .toggle > button::before{
content: '目次を閉じる▲';
}   .section-body .inner-section.content h2{
padding: .3em .5em;
font-size: 110%;
line-height: 1.6em;
margin: 1.5em 0 .5em 0;
border-left: 10px solid #ffc000;
background: #efefef;
background: #fffdcc;
}
.section-body .inner-section.content h3{
padding: .2em .5em;
font-size: 110%;
border-bottom: 5px double #ffc000;
border: 5px double #ffc000;
border-width: 4px 0 4px 0;
}
.section-body.card .section-body.card,
.section-box.post .section-body.card{
margin: 24px 0;
border: none;
box-shadow: none;
border-radius: 0;
}
.section-body.card .section-body.card .section-body-title,
.section-box.post .section-body.card .section-body-title{
border: 1px solid #bbb;
border-radius: 0;
background: #ffff8d linear-gradient(45deg, #ffb200, #ffff8d 20%, #ffff8d 45%, #ffb200 93%) repeat scroll 0 0;
box-shadow: 1px 1px 0 0 #fff inset;
}
.section-body.card .section-body.card .section-body-inner,
.section-box.post .section-body.card .section-body-inner{
padding: 12px 0;
} .main-ranking .section-description{
padding: 0 1em;
border: 1px solid #ccc;
background: #fff;
border-radius: 5px;
}
.main-ranking .section-description .period{
font-size: 78%;
font-weight: bold;
text-align: right;
}
.main-ranking .card{
counter-increment: mr-count;
}
.main-ranking .card .section-body-title{
padding-left: 80px;
border-bottom: 1px solid #d0b000;
background: #ffff8d;
background-image: linear-gradient(45deg, #ffb200, #ffff8d 20%, #ffff8d 45%, #ffb200 93%);
position: relative;
}
.main-ranking .card .section-body-title::before{
content: '★'; display: block;
width: 2.33em;
height: 2em;
font-family: 'Lobster', cursive;
font-size: 2em;
font-weight: bold;
line-height: 2em;
text-align: center;
vertical-align: bottom;
color: #e92c00;
overflow: hidden;
position: absolute;
left: -.1em;
top: -.4em;
background: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/ranking_medal.png) 0 0 no-repeat;
background-size: 2.33em auto;
text-shadow:
0 3px 0 #fff,
3px 0 0 #fff,
0 -3px 0 #fff,
-3px 0 0 #fff,
-3px -3px 0 #fff,
3px -3px 0 #fff,
-3px 3px 0 #fff,
3px 3px 0 #fff,
0 0 10px #fff;
}
.main-ranking.count15{ counter-reset: mr-count 16; }
.main-ranking.count14{ counter-reset: mr-count 15; }
.main-ranking.count13{ counter-reset: mr-count 14; }
.main-ranking.count12{ counter-reset: mr-count 13; }
.main-ranking.count11{ counter-reset: mr-count 12; }
.main-ranking.count10{ counter-reset: mr-count 11; }
.main-ranking.count9{ counter-reset: mr-count 10; }
.main-ranking.count8{ counter-reset: mr-count 9; }
.main-ranking.count7{ counter-reset: mr-count 8; }
.main-ranking.count6{ counter-reset: mr-count 7; }
.main-ranking.count5{ counter-reset: mr-count 6; }
.main-ranking.count4{ counter-reset: mr-count 5; }
.main-ranking.count3{ counter-reset: mr-count 4; }
.main-ranking.count2{ counter-reset: mr-count 3; }
.main-ranking.countdown .card{
counter-increment: mr-count -1;
} .section-box.post .post-header{
padding: .5em 20px 0 20px;
color: #666;
font-size: 86%;
text-align: right;
}
.section-box.post .post-header .post-time::before{
content: '\1f504';
margin-right: .3em;
}
.section-box.post .post-header .post-tags::before{
content: '\1f516';
margin-right: .3em;
}
.section-box.post .post-header .post-tags a{
color: #666;
text-decoration: underline;
}
.section-box.post .section-body-inner .eyecatch{
margin: 0;
text-align: center;
}
.section-box.post .section-body-inner .eyecatch .caption{
margin: .3em auto;
font-size: 80%;
}
.section-box.post .section-body-inner .eyecatch .caption,
.section-box.post .section-body-inner .eyecatch .caption a{
color: #666;
}  .section-box.archive .article-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section-box.archive .article-list::after{
display: block;
content: '';
width: 48.5%;
order: 1;
}
.section-box.archive .article-list .item{
width: 48.5%;
margin-bottom: 1.3em;
}
.section-box.archive .article-list .thumb{
margin-bottom: .5em;
overflow: hidden;
border-radius: 3px;
box-shadow: 0 0 2px #ccc;
}
.section-box.archive .article-list .thumb img{
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.section-box.archive .article-list .item-data .title{
padding: 0 .5em;
margin: 0;
color: #333;
font-size: 90%;
font-weight: bold;
overflow: hidden;
word-wrap: break-word;
} #breadcrumb{
margin: 0 12px;
line-height: 100%;
font-size: 80%;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#breadcrumb:before,
#breadcrumb:after{
display: inline-block;
position: absolute;
} #breadcrumb:before{
content: '...';
width: 1em;
height: 1em;
padding-left: .5em;
padding-top: .5em;
background-image: linear-gradient(to right, transparent, #fff .5em);
right: 0;
bottom: .3em;
}
#breadcrumb:after{
content: '';
width: 100%;
height: 100%;
background: #fff;
}
#breadcrumb li{
display: inline-block;
vertical-align: middle;
padding: .3em 0;
margin-left: -.5em;
}
#breadcrumb li::before{
content: '';
box-sizing: border-box;
display: inline-block;
width: .6em;
height: .6em;
margin: 0 .6em;
border: solid #999;
border-width: 2px 2px 0 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#breadcrumb li:first-child{
margin-left: 0;
}
#breadcrumb li:first-child::before{
display: none;
}
#breadcrumb a{
vertical-align: middle;
display: inline-block;
color: #4285f4;
} .side-content{
margin-bottom: 1em;
}
.side-content.menu{
}
.side-title{
margin-left: 12px;
margin-right: 12px;
margin-bottom: 10px;
padding: .5em;
font-size: 110%;
border: 3px solid #333;
border-radius: 16px;
background: #fff;
position: relative;
box-shadow: 2px 3px 0 0 #333;
}
.side-title::before{
content: '';
display: block;
position: absolute;
top: 100%;
left: 14px;
border: 20px solid transparent;
border-top-color: #333;
}
.side-title::after{
content: '';
display: block;
position: absolute;
left: 18px;
bottom: -27px;
border: 14px solid transparent;
border-top-color: #fff;
}
.side-content .limg-box .image{
width: 30%;
}
.side-content .limg-box .text{
font-size: 90%;
line-height: 1.3em;
} .side-content .continue{
display: block;
padding: .8em 0;
color:#fff;
font-size: 90%;
line-height: 100%;
text-align: center;
background: #363636;
border-radius: 2px;
}
.side-content .continue:hover{
box-shadow: 0 3px 5px #333;
}
.side-content .textwidget{
margin: 0 8px 1.6em 8px;
}
.side-content .banner{
max-width: 300px;
margin: 0 auto .5em auto;
}
.side-content .banner img{
width: 100%;
height: auto;
} #content-bottom{
max-width: 1000px;
margin: 0 auto 1em auto;
}
#content-bottom .bottom-nav{
padding: 12px 6px;
margin: 0 12px 1em 12px;
background: #fff;
box-shadow: 0 0 2px #ccc;
}
#content-bottom .bottom-nav .bottom-nav-title{
font-size: 110%;
margin: 0 .4em 1em .4em;
padding: .1em .4em;
border-bottom: 3px double #333;
}
#content-bottom .bottom-nav > ul::after{
content: '.';
height: 0;
visibility: hidden;
display: block;
clear: both;
}
#content-bottom .bottom-nav li{
box-sizing: border-box;
display: block;
width: 50%;
padding: 0 6px;
margin-bottom: .5em;
float: left;
}
#content-bottom .bottom-nav li a{
display: block;
padding: .3em .2em 0 .2em;
color: #333;
font-size: 76%;
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px dotted #333;
}
#content-bottom .bottom-nav li a:hover{
border-bottom-style: solid;
} #main > .index-top,
#content > .post-top,
#main > .post-bottom{
margin: 0 12px;
}
#contact input,
#contact textarea{
max-width: 100%;
}
blockquote{
background-color: #ddd;
padding: 3em 1em;
margin: 1em .5em;
position: relative;
}
blockquote::before,
blockquote::after{
font-size: 600%;
font-family: "ＭＳ Ｐゴシック", sans-serif;
color: #999;
position: absolute;
}
blockquote::before{
content: '“';
left: 0;
top: 0;
}
blockquote::after{
content: '”';
line-height: 0;
right: 0;
bottom: 0;
}
blockquote > p{
margin: 0 0 1em 0;
}
blockquote > p:last-child{
margin-bottom: 0;
}
.fixed-bottom{
width: 100%;
padding: 0;
margin: 0;
position: fixed;
left: 0;
bottom: 0;
z-index: 99999;
}
.fixed-bottom img{
width: 100%;
height: auto;
}
.wpp-views > span{
padding: 0 .5em;
font-size: 90%;
color: #fff;
background: #363636;
border-radius: 5px;
text-shadow: 0 0 .25em #000;
}
.side-content.menu .text.views{
padding-bottom: 1.5em;
position: relative;
}
.side-content.menu .text.views .wpp-views{
position: absolute;
right: 0;
bottom: 0;
}
@media screen and (min-width : 780px){   .sns-share.page-end ul.buttons{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.sns-share.page-end ul.buttons > li{
width: calc(50% - 2.5px);
} .boxlist,
.boxlist .textwidget{
letter-spacing: -.5em;
}
.boxlist *{
letter-spacing: normal;
}
.boxlist .limg-box{
display: inline-block;
width: 32%;
margin: .66%;
}
.recommended-items .limg-box{
display: inline-block;
width: 24%;
margin: .5%;
}
.recommended-items .limg-box .inner,
.recommended-items .limg-box .image,
.recommended-items .limg-box .text{
display: block;
}
.recommended-items .limg-box .image{
width: 90%;
margin: 0 auto;
}
.recommended-items .limg-box .text{
padding-left: 0;
margin-top: .5em;
text-align: center;
}
.recommended-items .limg-box .title{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.recommended-items .limg-box .comment,
.recommended-items .limg-box .comment p{
height: 2.8em;
font-size: 90%;
line-height: 150%;
} .section-body.card .section-body-title{
padding-right: 11.5em;
}
.section-body.card .rating{
display: block;
}
.section-body .campaign{
padding: .5em .8em;
padding-left: 32px;
margin: .8em 0;
position: relative;
}
.section-body .campaign::before{
content: '';
display: inline-block;
width: 64px;
height: 64px;
background: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/giftbox-148.png) no-repeat 0 0 / cover;
position: absolute;
left: -32px;
top: -16px;
}
.section-body.card .card-summary .data table{
font-size: 100%;
}
.section-body.card .point .inner-section-title{
padding-left: 72px;
position: relative;
}
.section-body.card .point .inner-section-title::before{
content: '';
display: block;
width: 100px;
height: 100px;
background: url(https://creditcard-rescue.com/wp-content/themes/apple2/img/point-placard.png) no-repeat 0 0 / cover;
position: absolute;
left: -32px;
top: -42px;
}
.section-body .button .official,
.section-body .button .detail{
font-size: 130%;
} #content-bottom .bottom-nav{
margin-left: .4%;
margin-right: 12px;
}
#content-bottom .bottom-nav li{
width: 20%;
} .inner-section.review #review-list .review-title{
width: auto;
}
.inner-section.review .review-post br{
display: none;
}
}
@media screen and (min-width : 1000px){ .pager{
margin-left: 0;
margin-right: 0;
} #main > .index-top,
#content > .post-top,
#main > .post-bottom{
margin: 0;
}
.sp-only{
display: none;
}   .section-title{
font-size: 180%;
}
.section-body-title{
font-size: 180%;
}
.section-box{
}
.section-wrap,
.section-description,
.section-body{
margin-left: 0;
margin-right: 0;
}
.inner-section .inner-section-title,
.section-body .inner-section.content h2{
padding: .5em .6em;
font-size: 130%;
}
.section-body .inner-section.content h3{
font-size: 120%;
}
.inner-section.content .inner-section-title{
margin-left: -8px;
margin-right: -8px;
}
.inner-section.content{
padding-left: 8px;
padding-right: 8px;
} .main-ranking .card{
margin-top: 32px;
}
.main-ranking .card .section-body-title::before{
width: 105px;
height: 90px;
font-size: 50px;
line-height: 90px;
background-size: 100% auto;
left: -24px;
top: -24px;
} .section-box.post .post-header .post-tags{
display: inline-block;
margin-left: .5em;
} .side-title{
margin-left: 0;
margin-right: 0;
}
.side-content .limg-box a.inner:hover{
text-decoration: underline;
} .section-box.archive .article-list::after{
width: 32.5%;
}
.section-box.archive .article-list .item{
width: 32.5%;
margin-bottom: 2em;
}
.section-box.archive .article-list .item-data .title{
} #breadcrumb{
margin: 0 0 .3em 0;
}
}