@charset "UTF-8";
/* layout
----------------------------- */
.bgWrapper {
background: #fddbdc;
}
.mainContent {
width: 100%;
max-width: 480px;
margin: 0 auto;
padding-bottom: 20px;
}
.mainContent * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* common
----------------------------- */
.underline {
text-decoration: underline;
}
.indent_1em {
padding-left: 1em;
text-indent: -1em;
}
.inlineBlock {
display: inline-block;
}
.y_marker {
display: inline-block;
margin-bottom: 2px;
background: linear-gradient(transparent 60%, #ffeb3b 40%);
}
/* imgBlock
----------------------------- */
.imgBlock {
width: 100%;
margin: 0 auto;
text-align: center;
}
.imgBlock a {
display: block;
}
.imgBlock img {
width: 100%;
max-width: 480px;
height: auto;
}
/* header
----------------------------- */
.headArea img {
width: 100%;
height: auto;
}
h1 span {
height: auto;
font-weight: bold;
vertical-align: middle;
position: relative;
font-size: 16px;
padding: 6px 0 0 6px;
border-bottom: 1px solid #CCC;
width: 100%;
display: inline-block;
}
/* camTerm
----------------------------- */
.camTerm {
margin: 0 auto;
padding: 10px 5px;
line-height: 1.2;
text-align: center;
font-weight: bold;
font-size: 16px;
color: #000;
}
.camTerm .inlineBlock.label {
display: block;
}
.camTerm .label:before,
.camTerm .label:after {
content: '■';
}
/* topLead
----------------------------- */
.topLead {
margin: 0 auto;
padding: 10px 10px 20px;
text-align: left;
font-size: 14px;
color: #000;
}
.topLead p {
font-size: 14px;
color: #000;
}
.topLead img {
width: 100%;
height: auto;
}
/* linkBtnArea
----------------------------- */
.headArea + .linkBtnArea,
.camTerm + .linkBtnArea,
.topLead + .linkBtnArea {
margin-top: 20px;
}
.linkBtnArea {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 96%;
margin: 0 auto 20px;
text-align: center;
}
.linkBtnArea a {
height: 46px;
margin: 0 0 10px;
background: #fff;
border: 1px solid #ff2163;
border-radius: 7px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
color: #ff2163;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.1;
padding: 2px;
}
.linkBtnArea.col2 a {
width: 48%;
}
.linkBtnArea.col3 a {
width: 32%;
}
/* listWrapper
----------------------------- */
.headArea + .listWrapper,
.camTerm + .listWrapper,
.topLead + .listWrapper {
margin-top: 30px;
}
.listWrapper {
display: inline-block;
margin: 0 10px 30px;
padding: 10px 8px;
background: #fff;
border: 1px solid #ff2163;
}
.listCaptionWrapper {
text-align: center;
}
.listCaptionWrapper::-webkit-details-marker {
display: none;
}
.listCaption {
display: inline-block;
vertical-align: middle;
font-size: 16px;
font-weight: bold;
color: #666;
}
.listCaptionClose,
.listCaptionOpen {
display: inline-block;
line-height: 27px;
font-size: 14px;
color: #666;
cursor: pointer;
}
.listCaptionClose span,
.listCaptionOpen span {
color: #ff2163;
}
details .listCaptionClose {
display: none;
}
details .listCaptionOpen {
display: inline-block;
}
details[open] .listCaptionClose {
display: inline-block;
}
details[open] .listCaptionOpen {
display: none;
}
.listInner {
margin-top: 18px;
}
.listInner li {
position: relative;
display: block;
margin-bottom: 10px;
color: #ff2163;
text-decoration: none;
}
.listItem li {
position: relative;
display: block;
margin-bottom: 6px;
padding-left: 8px;
line-height: 20px;
font-size: 14px;
color: #ff2163;
text-decoration: none;
}
.listInner li a {
color: #ff2163;
}
.listItem {
margin-top: 10px;
}
/* camMark
------------------------------*/
.camSecInner .camMark {
max-width: 150px;
margin: 0 auto 5px;
text-align: center;
}
.camSecArea01 .camSecInner .camMark {
max-width: fit-content;
margin: 0 0 5px 0;
text-align: left;
}
.camSecArea02 .camSecInner .camMark {
max-width: 130px;
}
.camSecInner .camMark .cs_mark {
display: inline-block;
height: 18px;
background: #fff;
border-radius: 2px;
vertical-align: middle;
line-height: 18px;
text-align: center;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
}
.camSecArea01 .camSecInner .camMark .cs_mark {
margin-right: 5px;
}
.camSecInner .camMark .cs_mark+.cs_mark {
margin-left: 5px;
}
.camSecArea01 .camSecInner .camMark .cs_mark+.cs_mark {
margin-left: unset;
}
.camSecInner #cs_1 {
width: 52px;
padding: 0 0 0 4px;
border: 1px solid #36c;
font-size: 14px;
color: #36c;
letter-spacing: 4px;
}
.camSecInner #cs_1:after {
content: "無料";
display: block;
clear: both;
white-space: nowrap;
overflow: hidden;
}
.camSecInner #cs_2 {
width: 71px;
border: 1px solid #36c;
color: #36c;
letter-spacing: -1px;
}
.camSecInner #cs_2:after {
content: "立読み増量";
display: block;
clear: both;
white-space: nowrap;
overflow: hidden;
}
.camSecInner #cs_3 {
position: relative;
width: 49px;
padding: 0 3px 0 18px;
border: 1px solid #f06;
text-align: left;
color: #f06;
}
.camSecInner #cs_3:before {
position: absolute;
top: 2px;
left: 4px;
content: url(/sol/cc/images/search/icon_darrow.png);
}
.camSecInner #cs_3:after {
content: "値下げ";
display: block;
clear: both;
white-space: nowrap;
overflow: hidden;
}
.camSecInner #cs_4 {
width: 75px;
border: 1px solid #63f;
color: #63f;
letter-spacing: -2px;
}
.camSecInner #cs_4:after {
content: "ポイント還元";
display: block;
clear: both;
white-space: nowrap;
overflow: hidden;
}
.camSecInner #cs_5 {
width: 69px;
border: 1px solid #390;
color: #390;
letter-spacing: -1px;
}
.camSecInner #cs_5:after {
content: "お得パック";
display: block;
clear: both;
white-space: nowrap;
overflow: hidden;
}
/* appealTxt
------------------------------*/
.camSecInner .appealTxt {
max-width: 150px;
margin: 0 auto 5px;
padding: 5px 0;
border-radius: 4px;
line-height: 14px;
text-align: center;
font-size: 14px;
}
.camSecArea01 .camSecInner .appealTxt {
margin: 0 0 5px;
}
.camSecArea02 .camSecInner .appealTxt {
max-width: 130px;
}
.camSecInner .appealTxt.bg_rd {
background: #ff0226;
border: 1px solid #ff0226;
color: #fff;
}
.camSecInner .appealTxt.bg_bl {
background: #0046ff;
border: 1px solid #0046ff;
color: #fff;
}
.camSecInner .appealTxt.bg_gr {
background: #00b200;
border: 1px solid #00b200;
color: #fff;
}
.camSecInner .appealTxt.bg_or {
background: #f80;
border: 1px solid #f80;
color: #fff;
}
.camSecInner .appealTxt.bg_pk {
background: #ff60df;
border: 1px solid #ff60df;
color: #fff;
}
.camSecInner .appealTxt.bg_pk2 {
background: #f69;
border: 1px solid #f69;
color: #fff;
}
.camSecInner .appealTxt.bg_lb {
background: #01b7e5;
border: 1px solid #01b7e5;
color: #fff;
}
.camSecInner .appealTxt.bg_id {
background: #4b0082;
border: 1px solid #4b0082;
color: #fff;
}
.camSecInner .appealTxt.bg_pp {
background: #800080;
border: 1px solid #800080;
color: #fff;
}
.camSecInner .appealTxt.bg_ye {
background: #fff000;
border: 1px solid #ff0226;
color: #ff0226;
}
.camSecInner .appealTxt.bg_ppye {
background: #9400d3;
border: 1px solid #9400d3;
color: #ff0;
}
.camSecInner .appealTxt.bg_wh {
background: #fff;
border: 1px solid #06f;
color: #06f;
}
.camSecInner .appealTxt.bg_whpp {
background: #fff;
border: 1px solid #90c;
color: #90c;
}
.camSecInner .appealTxt.bg_whpk {
background: #fff;
border: 1px solid #f69;
color: #f69;
}
.camSecInner .appealTxt.bg_rd a,
.camSecInner .appealTxt.bg_bl a,
.camSecInner .appealTxt.bg_gr a,
.camSecInner .appealTxt.bg_or a,
.camSecInner .appealTxt.bg_pk a,
.camSecInner .appealTxt.bg_pk2 a,
.camSecInner .appealTxt.bg_lb a,
.camSecInner .appealTxt.bg_id a,
.camSecInner .appealTxt.bg_pp a {
color: #fff;
}
.camSecInner .appealTxt.bg_ye a {
color: #ff0226;
}
.camSecInner .appealTxt.bg_ppye a {
color: #ff0;
}
.camSecInner .appealTxt.bg_wh a {
color: #06f;
}
.camSecInner .appealTxt.bg_whpp a {
color: #90c;
}
.camSecInner .appealTxt.bg_whpk a {
color: #f69;
}
/* camSecTitle
------------------------------*/
.camSecTitle {
min-height: 32px;
padding: 8px 4px;
background: #ff2163;
}
.camSecTitle .secTitle {
line-height: 1.5;
text-align: center;
font-size: 16px;
color: #fff;
}
/* camSubTitle
------------------------------*/
.camSubTitle {
min-height: 32px;
padding: 8px 4px;
background: #e9f8ff;
}
.camSubTitle .subTitle {
line-height: 1.5;
text-align: center;
font-size: 14px;
color: #ff2163;
}
/* camSecArea01
------------------------------*/
.camSecArea01 {
margin: 0 auto 25px;
}
.camSecArea01 .camSecInner+.camSecInner {
margin-top: 20px;
}
.camSecArea01 .camSecInner .eachTitleName {
width: 96%;
margin: 10px auto 0;
padding: 8px;
background: #ff7673;
}
.camSecArea01 .camSecInner .eachTitleName a {
position: relative;
display: block;
line-height: 1.4;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.camSecArea01 .camSecInner .titleBox {
display: flex;
justify-content: space-between;
width: 96%;
margin: 10px auto;
padding: 8px;
background: #fff;
border: 1px solid #ccc;
}
.camSecArea01 .camSecInner .eachTitleName + .titleBox,
.camSecArea01 .camSecInner .eachTitleName + .commentBox {
margin: 0 auto 10px;
}
.camSecArea01 .camSecInner .titleBox a {
display: block;
width: 100%;
}
.camSecArea01 .camSecInner .thumBox {
margin: 0 2% 0 auto;
vertical-align: top;
}
.camSecArea01 .camSecInner .thumBox a {
position: relative;
display: block;
margin: 0 auto;
}
.camSecArea01 .camSecInner .thumBox img {
width: 100%;
max-width: 150px;
margin: 0 auto;
}
@media screen and (max-width: 375px) {
.camSecArea01 .camSecInner .thumBox img {
max-width: 130px;
}
}
@media screen and (max-width: 350px) {
.camSecArea01 .camSecInner .thumBox img {
max-width: 85px;
}
}
.camSecArea01 .camSecInner .icon_precede {
position: absolute;
bottom: 0;
left: 0;
line-height: 0;
}
.camSecArea01 .camSecInner .icon_precede img {
opacity: 0.8;
}
.camSecArea01 .camSecInner .textBox {
width: 70%;
vertical-align: top;
text-align: left;
}
.camSecArea01 .camSecInner .authorName {
margin-bottom: 8px;
padding-bottom: 5px;
border-bottom: 1px dotted #ccc;
line-height: 18px;
font-size: 13px;
color: #444;
word-break: break-all;
}
.camSecArea01 .camSecInner .titleName a,
.camSecArea01 .camSecInner .authorName a {
width: 100%;
overflow: hidden;
}
.camSecArea01 .camSecInner .titleName a {
display: block;
color: #2763ac;
}
.camSecArea01 .camSecInner .authorName a {
display: inline;
color: #444;
}
.camSecArea01 .camSecInner .reviewStar {
margin-bottom: 5px;
line-height: 14px;
font-size: 12px;
color: #666;
}
.camSecArea01 .camSecInner .reviewStar img {
margin-bottom: 3px;
height: 14px;
}
.camSecArea01 .camSecInner .reviewStar a {
color: #2763ac;
}
.camSecArea01 .camSecInner .reviewAvg {
color: #666;
}
.camSecArea01 .camSecInner .introTxt {
margin-bottom: 15px;
line-height: 20px;
text-align: left;
}
.camSecArea01 .camSecInner .introTxt a {
font-size: 13px;
color: #666;
word-break: break-word;
}
.camSecArea01 .camSecInner .btnBox {
text-align: right;
}
.camSecArea01 .camSecInner .btnBox a {
display: inline-block;
width: 90px;
height: 30px;
background: #fff;
border: 1px solid #b8a98f;
border-bottom: 2px solid #bdb29e;
border-right: 1px solid #bdb29e;
border-radius: 5px;
line-height: 30px;
vertical-align: middle;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #6e5b39;
cursor: pointer;
}
.camSecArea01 .camSecInner .btnBox .blank {
display: inline-block;
width: 90px;
height: 30px;
vertical-align: middle;
}
.camSecArea01 .camSecInner .btnBox a+a {
margin-left: 5px;
}
.camSecArea01 .komaBox {
width: 96%;
margin: 10px auto;
text-align: center;
}
.camSecArea01 .komaBox a {
display: block;
}
.camSecArea01 .komaBox img {
width: 100%;
max-width: 460px;
height: auto;
}
.camSecArea01 .commentBox {
width: 96%;
margin: 10px auto;
padding: 8px;
background: #fff;
border: 1px solid #ccc;
line-height: 24px;
font-size: 14px;
color: #333;
}
.camSecArea01 .commentBox p {
line-height: 24px;
font-size: 14px;
color: #333;
}
/* camSecArea02
------------------------------*/
.camSecArea02 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 96%;
margin: 15px auto 10px;
text-align: center;
}
.camSecArea02 .camSecInner {
width: 50%;
margin: 0 0 15px;
text-align: center;
}
.camSecArea02 .camSecInner .titleBox {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
text-align: center;
}
.camSecArea02 .camSecInner .titleBox a {
display: block;
width: 100%;
}
.camSecArea02 .camSecInner .thumBox {
width: 170px;
height: 250px;
margin: 0 auto 5px;
vertical-align: top;
text-align: center;
}
.camSecArea02 .camSecInner .thumBox a {
position: relative;
display: block;
margin: 0 auto;
}
.camSecArea02 .camSecInner .thumBox img {
max-width: 168px;
max-height: 248px;
margin: 0 auto;
}
.camSecArea02 .camSecInner .icon_precede {
position: absolute;
bottom: 0;
left: 0;
line-height: 0;
}
.camSecArea02 .camSecInner .icon_precede img {
opacity: 0.8;
}
.camSecArea02 .camSecInner .textBox {
width: 170px;
margin-top: auto;
vertical-align: top;
text-align: center;
}
.camSecArea02 .camSecInner .titleName {
width: 100%;
max-height: 38px;
min-height: 19px;
margin-bottom: 2px;
line-height: 19px;
font-size: 15px;
color: #666;
overflow: hidden;
}
.camSecArea02 .camSecInner .authorName {
width: 100%;
max-height: 32px;
min-height: 16px;
line-height: 16px;
font-size: 13px;
color: #333;
word-break: break-all;
overflow: hidden;
}
.camSecArea02 .camSecInner .titleName.color_bk,
.camSecArea02 .camSecInner .authorName.color_bk {
color: #000000;
}
.camSecArea02 .camSecInner .titleName.color_wh,
.camSecArea02 .camSecInner .authorName.color_wh {
color: #ffffff;
}
.camSecArea02 .camSecInner .titleName a {
display: block;
color: #333;
}
.camSecArea02 .camSecInner .authorName a {
display: inline;
color: #666;
}
.camSecArea02 .camSecInner .titleName.color_bk a,
.camSecArea02 .camSecInner .authorName.color_bk a {
color: #000000;
}
.camSecArea02 .camSecInner .titleName.color_wh a,
.camSecArea02 .camSecInner .authorName.color_wh a {
color: #ffffff;
}
.camSecArea02 .commentBox {
width: 100%;
margin: 0 auto 10px;
padding: 8px;
background: #fff;
border: 1px solid #ccc;
line-height: 24px;
font-size: 14px;
color: #333;
text-align: left;
}
.camSecArea02 .commentBox p {
line-height: 24px;
font-size: 14px;
color: #333;
}
@media screen and (max-width: 375px) {
.camSecArea02 .camSecInner .thumBox {
width: 146px;
height: 215px;
}
.camSecArea02 .camSecInner .thumBox img {
max-width: 146px;
max-height: 215px;
}
.camSecArea02 .camSecInner .textBox {
width: 146px;
}
}
/* imageArea
----------------------------- */
.imageArea {
width: 100%;
max-width: 480px;
margin: 0 auto 20px;
}
.camSubTitle + .imageArea,
.camSecTitle + .imageArea {
margin-top: 13px;
}
.imageArea .imageBlock {
width: 96%;
margin: 0 auto;
text-align: center;
}
.imageArea .imageBlock + .imageBlock {
margin-top: 13px;
}
.imageArea .imageBlock a {
display: inline-block;
height: auto;
background-color: #ffffff;
}
.imageArea .imageBlock img {
width: 100%;
max-width: 375px;
height: auto;
}
/* freeText
----------------------------- */
.freeText {
width:96%;
margin: 0 auto 20px;
font-size: 14px;
}
/* couponArea2022
----------------------------- */
.mainContent .couponArea2022 .coupon_inner,
.mainContent .couponArea2022 .login {
width: 96%;
margin: 0 auto 20px;
}
.couponArea2022 .coupon_inner .end_date {
padding-top: 10px;
}
/* appealBannerArea
------------------------------*/
.appealBannerArea .camSubTitle + .bannerArea,
.appealBannerArea .camSecTitle + .bannerArea {
margin-top: 13px;
}
.appealBannerArea .bannerArea {
width: 100%;
max-width: 480px;
margin: 0 auto 20px;
}
.appealBannerArea .bannerArea .imgBlock {
width: 96%;
}
.appealBannerArea .bannerArea .imgBlock + .imgBlock {
margin: 13px auto 0;
}
/* detailArea
----------------------------- */
.detailArea {
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.detailArea .detail_box {
width: 96%;
margin: 0 auto;
background: #fff;
font-size: 14px;
}
.detailArea .detail_box p {
font-size: 14px;
color: #333;
}
.detailArea .detail_box a {
color: #06f;
text-decoration: underline;
}
.detailArea dl {
padding: 10px 5px;
text-align: left;
}
.detailArea dt {
font-size: 14px;
font-weight: bold;
color: #333;
}
.detailArea dd+dt {
margin: 10px 0 0;
}
.detailArea dt:before {
display: inline;
content: "■";
}
.detailArea dd {
font-size: 14px;
color: #333;
}
.detailArea .detail_scroll {
margin: 0 16px;
padding: 0 10px;
border: 1px solid #333;
height: 120px;
line-height: 1.4;
overflow: scroll;
overflow-x: hidden;
}
.detailArea .detail_scroll dt {
margin: 8px 0 0;
font-size: 13px;
font-weight: bold;
}
.detailArea .detail_scroll dt:before {
content: none;
}
.detailArea .detail_scroll dd,
.detailArea .detail_scroll a {
font-size: 13px;
}
.detailArea .detailText {
width: 96%;
margin: 20px auto 0;
padding: 7px 5px 3px;
background-color: #fff;
}
/* coupondetailArea
----------------------------- */
.coupondetailArea .couponDetailBox {
width: 96%;
margin: 10px auto;
padding: 8px 5px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
text-align: left;
font-size: 12px;
color: #333;
}
.coupondetailArea .couponDetailBox p {
font-size: 12px;
color: #333;
}
.coupondetailArea .couponDetailBox a {
font-size: 12px;
color: #06f;
text-decoration: underline;
}
.coupondetailArea .couponDetailHead {
margin-top: 8px;
font-weight: bold;
}
.coupondetailArea .couponDetailHead:nth-child(1) {
margin-top: 0;
}
.coupondetailArea .couponDetailBox dl {
margin: 3px 0 0;
padding-bottom: 5px;
border: 1px solid #ddd;
font-size: 12px;
color: #333;
}
.coupondetailArea .couponDetailBox dt {
margin: 0 0 5px;
padding: 8px 5px;
background: #fff9e3;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 12px;
}
.coupondetailArea .couponDetailBox dt:nth-child(1) {
border-top: none;
}
.coupondetailArea .couponDetailBox dd+dt {
margin: 5px 0;
}
.coupondetailArea .couponDetailBox dd {
padding: 0 5px;
font-size: 12px;
}
.coupondetailArea .couponDetailBox dd.arrow {
position: relative;
padding: 0 5px 0 17px;
}
.coupondetailArea .couponDetailBox .arrow:after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 8px;
margin: -3px 0 0 0;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #333;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.coupondetailArea .couponDetailBox .detail_note {
margin-top: 8px;
}
/* copyright
----------------------------- */
.mainContent .copyright {
width: 96%;
margin: 0 auto;
padding: 10px;
background: #fff;
text-align: center;
}
.mainContent .copyright p {
font-size: 11px;
color: #000;
}
/* btn_areas(sns)
----------------------------- */
.btn_areas {
width: 100%;
max-width: 480px;
margin: 20px auto 0;
}
.btn_areas ul {
margin-left: 2%;
}
/* appealArea
----------------------------- */
.appealArea {
width: 100%;
max-width: 480px;
margin: 0 auto;
padding-bottom: 20px;
}
.appealArea .asideArea,
.appealArea .res3Area {
width: 96%;
margin: 20px auto 0;
background: #fff;
}
.appealArea .secTitle {
padding: 0 5px;
background: #fff;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #dadada;
box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: left;
}
.appealArea .secTitle h2,
.appealArea .secTitle p {
height: 40px;
line-height: 40px;
font-size: 14px;
font-weight: bold;
color: #333;
}
.appealArea .history .secTitle p {
display: inline-block;
}
.appealArea .secTitle h2 a,
.appealArea .secTitle p a {
position: relative;
display: block;
color: #333;
}
.appealArea .rightLink {
position: relative;
float: right;
display: inline-block;
padding-right: 10px;
line-height: 40px;
font-size: 13px;
color: #333;
}
.appealArea .rightLink:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
right: 3px;
width: 6px;
height: 6px;
margin-top: -4px;
border-top: 1px solid #666;
border-right: 1px solid #666;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.appealArea .resBox {
width: 98%;
margin: 0 auto;
padding: 8px 0;
}
.appealArea .resBox ul {
width: 100%;
}
.appealArea .resBox ul+ul {
margin-top: 20px;
}
.appealArea .resBox ul li a {
display: block;
width: 100%;
}
.appealArea .resBox .genre_name {
text-align: center;
font-size: 14px;
}
.appealArea .resBox .genre_name.hq p {
font-size: 13px;
letter-spacing: -2px;
}
@media screen and (max-width: 414px) {
.appealArea .resBox .genre_name,
.appealArea .resBox .genre_name.hq p {
font-size: 12px;
}
}
@media screen and (max-width: 375px) {
.appealArea .resBox .genre_name.hq p {
font-size: 11px;
}
}
@media screen and (max-width: 360px) {
.appealArea .resBox .genre_name.hq p {
font-size: 10px;
}
}
.appealArea .resBox .thum_box {
float: left;
width: 31.3%;
margin: 0 1%;
vertical-align: top;
text-align: center;
}
.appealArea .resBox .thum_box a {
position: relative;
display: block;
max-width: 180px;
margin: 0 auto;
}
.appealArea .resBox .cam_mark {
position: absolute;
top: 0;
right: 2%;
width: auto;
height: 17px;
padding: 2px;
background: #fff;
border: 1px solid #f00;
box-sizing: border-box;
-webkit-box-sizing: border-box;
line-height: 11px;
font-size: 11px;
color: #f00;
}
.appealArea .resBox .cam_mark.new {
background: #ec1e0d;
color: #fff;
}
.appealArea .resBox .thum_box img {
width: 94%;
max-width: 180px;
margin: 0 auto;
}
.appealArea .resBox .thum_box.con img {
max-width: 125px;
}
.appealArea .resBox .text_box {
float: left;
width: 31.3%;
margin: 0 1%;
vertical-align: top;
text-align: left;
}
.appealArea .resBox .title_name,
.appealArea .resBox .author_name {
height: 14px;
line-height: 14px;
text-align: center;
font-size: 12px;
overflow: hidden;
}
.appealArea .resBox .title_name {
margin: 8px 4px 0;
color: #626d77;
}
.appealArea .resBox .author_name {
margin: 0 4px;
color: #9f9f9f;
word-break: break-all;
}
.appealArea .resBox .title_name a,
.appealArea .resBox .author_name a {
width: 100%;
overflow: hidden;
}
.appealArea .resBox .title_name a {
display: block;
font-weight: normal;
color: #626d77;
}
.appealArea .resBox .author_name a {
display: inline;
color: #9f9f9f;
overflow: hidden;
}
.appealArea .resBox .review_star {
line-height: 16px;
text-align: center;
font-size: 12px;
}
.appealArea .resBox .review_star img {
width: 15px;
height: 14px;
}
.appealArea .resBox .btn_box {
margin: 4px 5px 0;
}
.appealArea .resBox .btn_box+.btn_box {
margin: 7px 5px 0;
}
.appealArea .resBox .btn_box a {
display: block;
max-width: 180px;
margin: 0 auto;
padding-top: 2px;
background: #f9f9f9;
border: 1px solid #b3b3b3;
border-radius: 4px;
line-height: 26px;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #333;
}
.appealArea .saleRecommend {
width: 96%;
margin: 20px auto 0;
text-align: center;
}
.appealArea .saleRecommend .bannerArea .small {
padding: 13px 0 0;
background: #fff;
}
.appealArea .saleRecommend .bannerArea .small:last-of-type {
padding: 13px 0;
border-bottom: 1px solid #E2E2E2;
}
.appealArea .saleRecommend .bannerArea a {
display: inline-block;
}
.appealArea .saleRecommend .bannerArea .small a {
float: left;
width: 48%;
margin: 0 1%;
}
.appealArea .saleRecommend .bannerArea .small img {
width: 98%;
max-width: 225px;
}
.appealArea .scrollTitleBox {
display: flex;
margin: 0 auto;
padding: 8px 0;
overflow-x: auto;
}
.appealArea .scrollTitleBox+.scrollTitleBox {
padding: 0 0 8px;
}
.appealArea .scrollTitleBox.noscroll .title_wrap {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
justify-content: center;
width: 29.3%;
margin: 0 2%;
list-style: none;
}
.appealArea .scrollTitleBox .thum_box,
.appealArea .scrollTitleBox .text_box {
width: 100%;
max-width: 180px
}
.appealArea .scrollTitleBox .thum_box a {
position: relative;
display: block;
margin: 0 auto;
text-align: center;
}
.appealArea .scrollTitleBox .thum_box .cam_mark {
position: absolute;
top: 0;
right: 2%;
width: auto;
height: 17px;
padding: 2px;
background: #fff;
border: 1px solid #f00;
box-sizing: border-box;
-webkit-box-sizing: border-box;
line-height: 11px;
font-size: 11px;
color: #f00;
}
.appealArea .scrollTitleBox .thum_box .cam_mark.new {
background: #ec1e0d;
color: #fff;
}
.appealArea .scrollTitleBox .thum_box img {
width: 100%;
max-width: 180px;
object-fit: cover;
}
.appealArea .scrollTitleBox .thum_box.con img {
max-width: 125px;
}
.appealArea .scrollTitleBox .text_box {
margin-top: auto;
}
.appealArea .scrollTitleBox .title_name,
.appealArea .scrollTitleBox .author_name {
height: 14px;
line-height: 14px;
text-align: center;
font-size: 12px;
overflow: hidden;
}
.appealArea .scrollTitleBox .title_name {
margin: 8px 4px 0;
color: #626d77;
}
.appealArea .scrollTitleBox .author_name {
margin: 0 4px;
color: #9f9f9f;
word-break: break-all;
}
.appealArea .scrollTitleBox .title_name a,
.appealArea .scrollTitleBox .author_name a {
width: 100%;
overflow: hidden;
}
.appealArea .scrollTitleBox .title_name a {
display: block;
font-weight: normal;
color: #626d77;
}
.appealArea .scrollTitleBox .author_name a {
display: inline;
color: #9f9f9f;
overflow: hidden;
}
.appealArea .scrollTitleBox .btn_box {
margin: 4px 5px 0;
}
.appealArea .scrollTitleBox .btn_box a {
display: block;
max-width: 180px;
height: 30px;
margin: 0 auto;
padding-top: 2px;
background: #f9f9f9;
border: 1px solid #b3b3b3;
border-radius: 4px;
line-height: 28px;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #333;
}
.appealArea .scrollTitleBox .btn_box span.blank {
display: block;
max-width: 180px;
height: 30px;
margin: 0 auto;
padding-top: 2px;
line-height: 26px;
}
.appealArea .scrollTitleBox::-webkit-scrollbar {
height: 3px;
}
.appealArea .scrollTitleBox::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 6px;
}
.appealArea .scrollTitleBox::-webkit-scrollbar-track {
background: transparent;
}
.appealArea .history .noCheck {
display: none;
padding: 10px 8px;
text-align: left;
font-size: 14px;
}
.appealArea .bottomBtns {
background: #fff;
border-top: 1px solid #dadada;
text-align: right;
font-size: 12px;
}
.appealArea .bottomBtns a,
.appealArea .bottomBtns a:hover {
position: relative;
display: block;
padding: 11px 15px 11px 4px;
color: #333;
}
.appealArea .bottomBtns a:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
right: 8px;
width: 6px;
height: 6px;
margin-top: -4px;
border-top: 1px solid #666;
border-right: 1px solid #666;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* endArea
----------------------------- */
.endArea {
margin: 40px auto;
text-align: center;
}
.endArea p {
font-size: 18px;
color: #333;
}
/* notargetArea
----------------------------- */
.notargetArea {
padding: 10px 0;
}
.notargetArea .messeageBox {
width: 94%;
margin: 0 auto;
padding: 8px 4px 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
}
.notargetArea .main {
margin-bottom: 8px;
}
.notargetArea .main p {
font-size: 16px;
}
.notargetArea .sub p {
font-size: 11px;
}
.notargetArea .loginBtnArea {
margin: 15px 0 5px;
text-align: center;
}
.notargetArea .loginBtnArea a {
display: block;
width: 80%;
max-width: 300px;
margin: 0 auto;
background: #d00;
color: #fff;
font-size: 18px;
height: 38px;
line-height: 41px;
border-radius: 4px;
border-left: 2px solid #a60000;
border-bottom: 3px solid #a60000;
}