@charset "UTF-8";

/* layout
----------------------------- */
.co_container_box_inner {
margin: 0 auto;
}
.contents_right {
width: 770px;
float: right;
padding-bottom: 10px;
background: #fddbdc;
line-height: 1.4;
text-align: left;
}
.contents_right * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* common
----------------------------- */
.underline {
text-decoration: underline;
text-underline-position: under;
text-decoration-line: underline;
text-decoration-skip-ink: none;
}
.indent_1em {
padding-left: 1em;
text-indent: -1em;
}
.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: 770px;
height:auto;
}
.imgBlock a img:hover {
opacity: 1;
}
/* header
----------------------------- */
.headArea img {
width: 770px;
height: 320px;
}
h1 span {
margin: 0 auto;
padding: 8px 8px 5px;
border-bottom: 2px solid #888;
text-align: left;
font-size: 20px;
font-weight: bold;
width: 100%;
display: inline-block;
}
/* camTerm
----------------------------- */
.camTerm {
margin: 0 auto;
padding: 10px 0;
text-align: center;
font-weight: bold;
font-size: 18px;
color: #000;
}
.camTerm .label:before,
.camTerm .label:after {
content: '■';
}
/* topLead
----------------------------- */
.topLead {
margin: 0 auto;
padding: 10px 25px 20px;
text-align: left;
font-size: 15px;
color: #000;
}
.topLead p {
font-size: 15px;
color: #000;
}
/* linkBtnArea
----------------------------- */
.headArea + .linkBtnArea,
.camTerm + .linkBtnArea,
.topLead + .linkBtnArea {
margin-top: 30px;
}
.linkBtnArea {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width:720px;
margin: 0 auto 20px;
text-align: center;
}
.linkBtnArea a {
height: 42px;
margin: 0 0 10px;
background: #fff;
border: 1px solid #ff2163;
border-radius: 7px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 42px;
font-size: 16px;
color: #ff2163;
text-decoration: none;
}
.linkBtnArea.col2 a {
width: 48%;
}
.linkBtnArea.col3 a {
width: 32%;
}
/* listWrapper
----------------------------- */
.headArea + .listWrapper,
.camTerm + .listWrapper,
.topLead + .listWrapper {
margin-top: 30px;
}
.listWrapper {
width: 720px;
display: inline-block;
margin: 0 25px 30px;
padding: 13px;
background: #fff;
border: 1px solid #ff2163;
}
.listCaptionWrapper {
text-align: center;
}
.listCaptionWrapper::-webkit-details-marker {
display: none;
}
.listCaption {
display: inline-block;
vertical-align: middle;
line-height: 27px;
font-size: 18px;
font-weight: bold;
color: #666;
}
.listCaptionClose,
.listCaptionOpen {
display: inline-block;
line-height: 27px;
font-size: 16px;
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;
}
_:-ms-lang(x)::-ms-backdrop, details .listCaptionClose,
_:-ms-lang(x)::-ms-backdrop, details .listCaptionOpen,
_:-ms-lang(x)::-ms-backdrop, details[open] .listCaptionClose,
_:-ms-lang(x)::-ms-backdrop, details[open] .listCaptionOpen{
display: none;
}
.listInner {
margin-top: 18px;
}
.listInner li {
position: relative;
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #ff2163;
text-decoration: none;
}
.listItem li {
position: relative;
display: block;
margin-bottom: 6px;
padding-left: 13px;
line-height: 20px;
font-size: 16px;
color: #ff2163;
text-decoration: none;
}
.listInner li a {
line-height: 20px;
font-size: 16px;
color: #ff2163;
}
.listItem {
margin-top: 10px;
}
/* camMark
------------------------------*/
.camSecInner .camMark {
max-width: 150px;
margin: 0 auto;
text-align: center;
}
.camSecArea01 .camSecInner .camMark {
max-width: fit-content;
margin: 0 0 5px 0;
text-align: left;
}
.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;
}
.camSecInner .camMark .cs_mark + .cs_mark {
margin-left: 5px;
}
.camSecArea02 .camSecInner .camMark .cs_mark {
margin-bottom: 4px;
}
.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{
width: 150px;
margin: 0 auto 5px;
padding: 5px 0;
border-radius: 4px;
line-height: 14px;
text-align: center;
font-size: 14px;
}
.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: 43px;
padding: 8px 4px;
background: #ff2163;
}
.camSecTitle .secTitle {
line-height: 1.5;
text-align: center;
font-size: 18px;
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 35px;
}
.camSecArea01 .camSecInner + .camSecInner{
margin-top: 20px;
}
.camSecArea01 .camSecInner .eachTitleName {
width: 720px;
margin: 20px auto 0;
padding: 5px 8px;
background: #ff7673;
}
.camSecArea01 .camSecInner .eachTitleName a {
position: relative;
display: block;
line-height: 1.4;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.camSecArea01 .camSecInner .titleBox{
display: flex;
justify-content: space-between;
width: 720px;
margin: 20px auto 0;
padding: 15px;
background: #fff;
border: 1px solid #ccc;
text-align: center;
}
.camSecArea01 .camSecInner .eachTitleName + .titleBox,
.camSecArea01 .camSecInner .eachTitleName + .commentBox {
margin: 0 auto;
}
.camSecArea01 .camSecInner .titleBox a{
position: relative;
display: block;
width: 100%;
}
.camSecArea01 .camSecInner .thumBox{
width: 150px;
vertical-align: top;
text-align: center;
}
.camSecArea01 .camSecInner .thumBox a{
display:block;
margin: 0 auto;
}
.camSecArea01 .camSecInner .thumBox img{
width: 100%;
max-width: 150px;
margin: 0 auto;
}
.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: 523px;
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;
text-decoration: none;
}
.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: 110px;
height: 40px;
background: #fff;
border: 1px solid #b8a98f;
border-bottom: 2px solid #bdb29e;
border-right: 1px solid #bdb29e;
border-radius: 5px;
line-height: 40px;
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #6e5b39;
cursor: pointer;
text-decoration: none;
}
.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: 720px;
margin: 20px auto ;
text-align: center;
}
.camSecArea01 .komaBox a{
display: block;
background-color: #fff;
max-width: 480px;
margin: 0 auto;
}
.camSecArea01 .komaBox img{
width: 100%;
max-width: 480px;
height: auto;
}
.camSecArea01 .commentBox{
width: 720px;
margin: 20px auto 0;
padding: 13px;
background: #fff;
border: 1px solid #ccc;
line-height: 24px;
font-size: 15px;
color: #333;
}
.camSecArea01 .commentBox p{
line-height: 24px;
font-size: 15px;
color: #333;
}
/* camSecArea02
------------------------------*/
.camSecArea02{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 720px;
margin: 25px auto 35px;
text-align: center;
}
.camSecArea02 .camSecInner{
width: 180px;
margin-bottom: 10px;
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 10px;
vertical-align: top;
text-align: center;
}
.camSecArea02 .camSecInner .thumBox a{
position: relative;
display:block;
margin: 0 auto;
background-color: #fff;
}
.camSecArea02 .camSecInner .thumBox img{
max-width: 170px;
max-height: 250px;
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{
margin: 0 5px;
vertical-align: top;
text-align: center;
}
.camSecArea02 .camSecInner .titleName{
width: 100%;
max-height: 38px;
min-height: 19px;
margin: 5px auto 2px;
line-height: 19px;
font-size: 15px;
color: #666;
overflow: hidden;
}
.camSecArea02 .camSecInner .titleName a{
display: block;
font-size: 15px;
color: #333;
}
.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 .authorName a{
display: inline;
font-size: 13px;
color: #666;
}
.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.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: 720px;
margin: 10px auto 0;
padding: 13px;
background: #fff;
border: 1px solid #ccc;
line-height: 24px;
font-size: 15px;
color: #333;
text-align: left;
}
.camSecArea02 .commentBox p {
line-height: 24px;
font-size: 15px;
color: #333;
}
/* imageArea
----------------------------- */
.imageArea {
width:720px;
margin: 0 auto 35px;
}
.imageArea .imageBlock {
width:100%;
text-align: center;
margin: 20px auto;
}
.imageArea .imageBlock a {
display: inline-block;
height: auto;
background-color: #ffffff;
}
.imageArea .imageBlock img {
max-width: 720px;
height: auto;
}
/* freeText
----------------------------- */
.freeText {
width:720px;
margin: 0 auto 35px;
font-size: 15px;
}
/* couponArea2022
----------------------------- */
.contents_right .couponArea2022 .coupon_inner,
.contents_right .couponArea2022 .login {
width: 720px;
margin: 0 auto 30px;
}
.couponArea2022 .coupon_inner .end_date {	/* ★★★ */
padding-top: 10px;
}
/* appealBannerArea
------------------------------*/
.bannerArea {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 720px;
margin: 25px auto 35px;
}
.bannerArea:after {
content: "";
display: block;
width: 50%;
height: 0;
}
.appealBannerArea .bannerArea .imgBlock {
width: 49%;
}
.appealBannerArea .bannerArea .imgBlock:nth-child(odd) {
margin-right: 1%;
}
.appealBannerArea .bannerArea .imgBlock:nth-child(even) {
margin-left: 1%;
}
.appealBannerArea .bannerArea .imgBlock:nth-child(n+3) {
margin-top: 20px;
}
/* detailArea
----------------------------- */
.detailArea {
width: 720px;
margin: 0 auto;
background: #fff;
line-height: 1.4;
}
.detailArea .detailTitle {
padding: 7px;
background: #000;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.detailArea .detail_box {
padding: 15px;
text-align: left;
}
.detailArea .detail_box p {
font-size: 16px;
color: #333;
}
.detailArea .detail_box a {
font-size: 16px;
color: #06f;
text-decoration: underline;
}
.detailArea dl {
text-align: left;
}
.detailArea dt {
font-size: 16px;
font-weight:bold;
color: #333;
}
.detailArea dd + dt {
margin:10px 0 0;
}
.detailArea dt:before {
display: inline;
content: "■";
}
.detailArea dd {
font-size: 16px;
color: #333;
}
.detailArea .detail_scroll {
margin: 0 16px;
padding: 0 10px;
border: 1px solid #333;
height: 120px;
overflow: scroll;
overflow-x: hidden;
}
.detailArea .detail_scroll dt {
font-size: 13px;
font-weight: bold;
margin: 8px 0 0;
}
.detailArea .detail_scroll dt:before {
content: none;
}
.detailArea .detail_scroll dd,
.detailArea .detail_scroll a {
font-size: 13px;
}
.detailArea .detailText {
padding: 8px 8px 4px;
}
/* coupondetailArea
----------------------------- */
.coupondetailArea .couponDetailBox {
width: 720px;
margin: 13px auto 0;
padding: 13px 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
line-height: 20px;
text-align: left;
font-size: 14px;
color: #333;
}
.coupondetailArea .couponDetailBox p {
font-size: 14px;
color: #333;
}
.coupondetailArea .couponDetailBox a{
font-size: 14px;
color: #06f;
text-decoration: underline;
}
.coupondetailArea .couponDetailHead {
margin-top: 13px;
font-weight:bold;
}
.coupondetailArea .couponDetailHead:nth-child(1) {
margin-top: 0;
}
.coupondetailArea .couponDetailBox dl {
margin: 8px 0 0;
padding-bottom: 5px;
border: 1px solid #ddd;
font-size: 14px;
color: #333;
}
.coupondetailArea .couponDetailBox dt{
margin: 0 0 8px;
padding: 8px 5px;
background: #fff9e3;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 14px;
}
.coupondetailArea .couponDetailBox dt:nth-child(1) {
border-top: none;
}
.coupondetailArea .couponDetailBox dd + dt {
margin: 8px 0;
}
.coupondetailArea .couponDetailBox dd {
padding: 0 5px;
font-size: 14px;
}
.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
----------------------------- */
.contents_right .copyright {
width: 720px;
margin: 0 auto;
padding: 10px;
background: #fff;
text-align: center;
}
.contents_right .copyright p {
font-size: 11px;
color: #000;
}
/* btn_areas(sns)
----------------------------- */
.btn_areas {
margin: 15px 25px;
}
.btn_areas img:hover {
opacity:0.7;
}
/* appealArea
----------------------------- */
.appealArea {
margin: 25px auto 0;
}
.appealArea .asideArea,
.appealArea .recommendArea,
.appealArea .recent_title{
width: 720px;
margin: 0 auto 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px 8px 0 0;
}
.appealArea .secTitle {
height: 36px;
padding: 0 8px;
background: #ebebeb;
border-bottom: 1px solid #ebebeb;
border-radius: 7px 7px 0 0;
line-height: 38px;
text-align: left;
font-size: 16px;
font-weight: bold;
color: #333;
}
.appealArea .secTitle h2,
.appealArea .secTitle p {
font-size: 16px;
font-weight: bold;
color: #333;
}
.appealArea .secTitle h2 a,
.appealArea .secTitle p a,
.appealArea .secTitle a {
position: relative;
display: block;
color: #333;
text-decoration: none;
}
.appealArea .rightLink {
position: relative;
float: right;
display: inline-block;
padding-right: 10px;
line-height: 30px;
font-size: 13px;
color: #333;
text-decoration: none;
}
.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 .fixBox {
margin: 0 auto;
padding: 13px 5px;
}
.appealArea .fixBox ul {
width: 100%;
margin: 0 auto;
}
.appealArea .fixBox ul + ul {
margin-top: 15px;
}
.appealArea .fixBox ul:after {
content: " ";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.appealArea .fixBox li {
display: block;
float: left;
width: 118px;
padding: 0 5px;
}
.appealArea .fixBox .genre_name {
margin-bottom: 3px;
}
.appealArea .fixBox .genre_name p {
font-size: 12px;
}
.appealArea .recommendArea .fixBox .genre_name {
display: none;
}
.appealArea .fixBox .thum_box {
height: 165px;
}
.appealArea .rankingArea.fix6Area .thum_box {
height: 187px;
}
.appealArea .fixBox a {
position: relative;
display: block;
height: 162px;
}
.appealArea .fixBox .cam_mark {
position: absolute;
top: 0;
right: 0;
height: 18px;
padding: 0 4px;
background: #fff;
border: 1px solid #d00;
line-height: 18px;
font-size: 10px;
color: #d00;
z-index: 1;
}
.appealArea .fixBox .cam_mark.new{
background: #ec1e0d;
color: #fff;
}
.appealArea .fixBox .thum_box img {
max-width: 100%;
max-height: 100%;
border: 1px solid #eee;
}
.appealArea .fixBox .title_name {
display: block;
height: 16px;
text-align: center;
overflow: hidden;
}
.appealArea .fixBox .title_name a {
display: block;
line-height: 17px;
font-size: 12px;
color: #333;
font-feature-settings: "palt";
}
.appealArea .fixBox .author_name {
display: block;
height: 16px;
text-align: center;
color: #767676;
overflow: hidden;
}
.appealArea .fixBox .author_name a {
display: inline;
line-height: 17px;
font-size: 10px;
color: #767676;
font-feature-settings: "palt";
}
.appealArea .fixBox .review_star {
text-align: center
}
.appealArea .fixBox .btn_box {
margin: 0 auto;
padding: 4px 0;
}
.appealArea .fixBox .btn_box a {
display: block;
width: 100%;
height: 28px;
margin: 0 auto;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #f6f6f6));
background: -webkit-linear-gradient(top, #fff 0%, #f6f6f6 100%);
background: linear-gradient(to bottom, #fff 0%, #f6f6f6 100%);
border: 1px solid #b3b3b3;
border-radius: 4px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
line-height: 26px;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #797979;
text-decoration: none;
font-feature-settings: "palt";
}
.appealArea .fixBox .btn_box a:hover {
background: #fff;
}
.appealArea .scrollTitleBox {
display: flex;
margin: 0 auto;
padding: 13px 5px 5px;
overflow-x: auto;
}
.appealArea .scrollTitleBox + .scrollTitleBox {
padding: 13px 5px;
}
.appealArea .scrollTitleBox.noscroll .title_wrap {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
justify-content: center;
width: 108px;
margin: 0 5px;
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 .recent_title .secTitle {
position: relative;
}
.appealArea .recent_title .secTitle .right_top_link {
position: absolute;
top: 0;
right: 13px;
text-decoration: underline;
font-size: 14px;
color: #333;
cursor: pointer;
}
.appealArea .recent_title .subTitle {
display: none;
}
.appealArea #no_title_hist.recent_title .subTitle {
display: block;
padding: 0 3px;
font-size: 14px;
}
.appealArea .sliderBlock.slick-slider {
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.appealArea .sliderBlock {
height: 235px;
overflow: hidden;
}
.appealArea .sliderBlock .slick-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -30px;
width: 16px;
height: 16px;
border: none;
border-top: 2px solid #999;
border-right: 2px solid #999;
padding: 0;
color: transparent;
background-color: transparent;
outline: none;
cursor: pointer;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.appealArea .sliderBlock .slick-arrow.slick-disabled {
cursor: default;
border-top: 2px solid #e7e7e7;
border-right: 2px solid #e7e7e7;
}
.appealArea .sliderBlock .slick-arrow.slick-prev {
left: 8px;
}
.appealArea .sliderBlock .slick-arrow.slick-next {
right: 8px;
transform: rotate(45deg);
}
.appealArea .slick-slider .slick-track,
.appealArea .slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.appealArea .sliderBlock .slick-list {
position: relative;
display: block;
width: 664px;
overflow: hidden;
margin: 0 auto;
padding: 0;
}
.appealArea .slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.appealArea .slick-track:before,
.appealArea .slick-track:after {
display: table;
content: '';
}
.appealArea .slick-track:after {
clear: both;
}
.appealArea .slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
.appealArea .slick-initialized .slick-slide {
display: block;
}
.appealArea .sliderBlock .slick-slide {
margin: 5px;
}
.appealArea .sliderBlock .slick-slide .thum_box {
position: relative;
height: auto;
margin: 0 auto;
background: #fff;
vertical-align: top;
text-align: center;
}
.appealArea .sliderBlock .thum_box a {
height: 190px;
}
.appealArea .sliderBlock .slick-slide .text_box {
margin: 5px 4px 0;
}
.appealArea .bottomBtns{
padding: 5px 10px 10px;
text-align: right;
}
.appealArea .bottomBtns:before{
content:'⇒';
}
.appealArea .recommendArea .bottomBtns{
display: none;
}
/* endArea
----------------------------- */
.endArea {
margin: 40px auto;
text-align: center;
}
.endArea p {
font-size: 30px;
color: #333;
}
/* notargetArea
----------------------------- */
.notargetArea {
padding: 30px 20px 20px;
}
.notargetArea .messeageBox {
padding: 10px 20px 15px;
background: #fff;
border: 1px solid #ccc;
}
.notargetArea .main {
margin-bottom: 15px;
}
.notargetArea .main.center p {
text-align: center;
font-size: 20px;
}
.notargetArea .main.left p {
text-align: left;
font-size: 18px;
}
.notargetArea .sub {
margin-bottom: 15px;
text-align: left;
}
.notargetArea .sub p {
line-height: 1.4;
font-size: 16px;
}
.notargetArea .loginBtnArea a {
display: block;
width: 300px;
height: 45px;
margin: 0 auto;
background: #d00;
border-left: 2px solid #a60000;
border-bottom: 3px solid #a60000;
border-radius: 4px;
line-height: 47px;
font-size: 22px;
color: #fff;
text-decoration: none;
}
.notargetArea .loginBtnArea a:hover {
opacity: 0.7;
}