@charset "utf-8";

/* layout
-----------------------------------------------*/
body {
  font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.contentsWrapper {
  width: 990px;
  padding: 24px 0 1px;
  margin: 0 auto;
  background: #fff;
  text-align: center;
}
.contentsWrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.contentsArea {
  float: right;
  width: 770px;
}
a:hover {
  text-decoration: none;
  opacity: .7;
}
a:hover img {
  opacity: 1;
}

/* sideNaviArea
-----------------------------------------------*/
#sideNaviArea *,
#sideNaviArea *:before,
#sideNaviArea *:after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#sideNaviArea {
  display: block;
  float: left;
  width: 180px;
  text-align: left;
  font-size: 0;
}
#sideNaviArea .naviBlock {
  width: 100%;
}
#sideNaviArea .naviBlock + .naviBlock {
  margin-top: 24px;
}
#sideNaviArea .naviBlock.btnNewRegist {
  display: flex;
  margin-top: 8px;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 4px;
  background: #FFF5E0;
}
#sideNaviArea .naviBlock.btnNewRegist .text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
#sideNaviArea .naviBlock.btnNewRegist .text .main {
  color: var(--fg_main);
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
#sideNaviArea .naviBlock.btnNewRegist .text .attention {
  position: relative;
  width: 1px;
  height: 14px;
}
#sideNaviArea .naviBlock.btnNewRegist .text .attention:before {
  content: "";
  display: inline;
  position: absolute;
  width: 1px;
  height: 14px;
  background: var(--fg_sub);
}
#sideNaviArea .naviBlock.btnNewRegist .text .attention.left:before {
  transform: rotate(-30deg);
}
#sideNaviArea .naviBlock.btnNewRegist .text .attention.right:before {
  transform: rotate(30deg);
}
#sideNaviArea .naviBlock.btnNewRegist .registBtn {
  display: flex;
  height: 38px;
  padding: 0 12px 0 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}
#sideNaviArea .naviBlock.btnNewRegist .registBtn.regist {
  background: var(--bg_button_accent_main);
  border: 1px solid var(--border_button_accent_main);
  color: var(--fg_inverse);
}
#sideNaviArea .naviBlock.btnNewRegist .registBtn.login {
  background: var(--bg_button_main);
  border: 1px solid var(--border_button_accent_main);
  color: var(--fg_accent_main);
}
#sideNaviArea .naviBlock.btnNewRegist .registBtn .main {
  flex: 1 0 0;
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
#sideNaviArea .naviBlock.btnNewRegist .registBtn .sub img {
  width: 5.833px;
  height: 10px;
  aspect-ratio: 7/12;
}
#sideNaviArea .naviBlock.navBanner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
#sideNaviArea .naviBlock.navBanner + .naviBlock.navBanner {
  margin-top: 8px;
}
#sideNaviArea .naviBlock.navBanner img {
  width: 100%;
  height: auto;
  aspect-ratio: 75/37;
}
#sideNaviArea .naviBlock.guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
#sideNaviArea .naviBlock .title {
  color: var(--fg_main);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
#sideNaviArea .naviBlock ul.linkArea {
  display: flex;
  width: 100%;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 4px;
  background: var(--bg_muted);
}
#sideNaviArea .naviBlock ul.linkArea li {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}
#sideNaviArea .naviBlock ul.linkArea li a {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 1 0 0;
  text-decoration: none;
}
#sideNaviArea .naviBlock ul.linkArea li .main {
  flex: 1;
  color: var(--fg_main);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
#sideNaviArea .naviBlock ul.linkArea li .sub img {
  height: 8px;
  width: auto;
  aspect-ratio: 7/12;
}
#sideNaviArea .naviBlock.navBanner + .naviBlock.btnQuestionnaire {
  margin-top: 8px;
}
#sideNaviArea .naviBlock.btnQuestionnaire {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#sideNaviArea .naviBlock.btnQuestionnaire a {
  display: flex;
  padding: 12px 7px 12px 11px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--border_button_accent_main);
  background: var(--bg_button_main);
  text-decoration: none;
}
#sideNaviArea .naviBlock.btnQuestionnaire .main {
  display: flex;
  justify-content: center;
  flex: 1 0 0;
  flex-direction: column;
  color: var(--fg_accent_main);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-align: left;
}
#sideNaviArea .naviBlock.btnQuestionnaire .main .btn_text_sub {
  font-size: 12px;
}
#sideNaviArea .naviBlock.btnQuestionnaire .sub img {
  width: 5.833px;
  height: 10px;
  aspect-ratio: 7/12;
}
#sideNaviArea .naviBlock.searctAllTitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
#sideNaviArea .naviBlock ul.linkArea .myMenuLinkArea {
  display: flex;
  width: 100%;
  padding-bottom: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid var(--border_main);
}
#sideNaviArea .naviBlock ul.linkArea .myMenuLinkArea + li {
  padding-top: 4px;
}
#sideNaviArea .naviBlock.searchGenre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
#sideNaviArea .naviBlock .menuServiceAcmenu {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-radius: 4px;
  background: var(--bg_muted);
}
#sideNaviArea .naviBlock .menuServiceSubtitle {
  position: relative;
  height: 41px;
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  color: var(--fg_main);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  cursor: pointer;
  text-decoration: none;
}
#sideNaviArea .naviBlock .menuServiceSubtitle:hover {
  opacity: .7;
}
#sideNaviArea .naviBlock summary.menuServiceSubtitle:before,
#sideNaviArea .naviBlock summary.menuServiceSubtitle:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 14px;
  width: 1px;
  height: 12px;
  background: var(--fg_sub);
  transition: all 0.15s;
}
#sideNaviArea .naviBlock summary.menuServiceSubtitle:after {
  transform: rotate(90deg);
}
#sideNaviArea .naviBlock details[open] > summary.menuServiceSubtitle:before {
  background: transparent;
}
#sideNaviArea .naviBlock .menuServiceSubcontents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  padding: 12px 0;
  border-top: 1px solid var(--border_main);
}
#sideNaviArea .naviBlock .menuServiceSubcontents a {
  display: flex;
  width: 100%;
  height: 17px;
  padding: 0 12px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  color: var(--fg_main);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  text-decoration: none;
}
#sideNaviArea .naviBlock .menuServiceSubcontents a .main {
  flex: 1 0 0;
  color: var(--fg_sub);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
#sideNaviArea .naviBlock .menuServiceSubcontents a .sub img {
  height: 8px;
  width: auto;
  aspect-ratio: 7/12;
}
#sideNaviArea .naviBlock .menuServiceSubtitle a {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px;
  color: var(--fg_main);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  border-top: 1px solid #e5e5e5;
}
#sideNaviArea .naviBlock .menuServiceSubtitleOnly {
  display: flex;
  width: 100%;
  height: 41px;
  align-items: center;
  padding: 12px;
  gap: 4px;
  align-self: stretch;
  color: var(--fg_main);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  text-decoration: none;
}
#sideNaviArea .naviBlock .menuServiceSubtitleOnly .main {
  flex: 1 0 0;
  color: var(--fg_sub);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
#sideNaviArea .naviBlock .menuServiceSubtitleOnly .sub img {
  height: 8px;
  width: auto;
  aspect-ratio: 7/12;
}
#sideNaviArea .naviBlock.searchPoikatsu,
#sideNaviArea .naviBlock.searchOther {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

/* top
-----------------------------------------------*/
#topSliderBanner .swiper-slide {
  width: 722px;
  margin: 0 4px;
}
#topSliderBanner .swiper-slide:not(.swiper-slide-active) {
  filter: brightness(.7);
}
#topSliderBanner .swiper-container:not(.swiper-container-initialized) .swiper-slide {
  filter: brightness(1);
}
#topSliderBanner .swiper-slide img {
  width: 100%;
}
.contentsArea nav.commonTopNavi {
  margin: 16px auto 0;
}
#informationArea2026 {
  width: 722px;
  margin: 16px auto;
}
#memberJoinBanner a {
  width: 722px;
  margin: 16px auto;
}

/* secArea
-----------------------------------------------*/
.secArea {
  display: flex;
  width: 100%;
  margin: 48px auto 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.secArea .secTitle {
  width: 100%;
  padding: 0 24px;
}
.secArea .secTitle a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  justify-content: space-between;
  color: var(--fg_main);
}
.secArea .secTitle .titleGroup {
  display: flex;
  flex-direction: column;
}
.secArea .secTitle .titleTxt {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  color: var(--fg_main);
}
.secArea .secTitle .titleGroup .titleTxt {
  align-items: flex-start;
  flex-direction: column;
  line-height: 25px;
}
.secArea .secTitle .titleTxt .subTxt.small {
  font-size: 16px;
}
.secArea .secTitle .titleTxt .detailTitleTxt {
  display: flex;
  color: var(--fg_main);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.secArea .secTitle .titleTxt .mainTitleTxt {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  color: var(--fg_main);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 35px;
}
.secArea .secTitle .titleGroup .titleTxt .mainTitleTxt .subTxt {
  color: var(--fg_main);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.secArea .secTitle .rightLinkMore {
  display: flex;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 100px;
  background: var(--bg_sub);
}
.secArea .secTitle .rightLinkMore img {
  width: auto;
  height: 15px;
  aspect-ratio: 7/12;
  margin-left: 3px;
  margin-bottom: 1px;
}
.secArea .subTitle {
  display: flex;
  width: 100%;
  padding: 0 24px;
  align-items: center;
  gap: 16px;
}
.secArea .subTitle a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
}
.secArea .subTitle .titleTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  color: var(--fg_main);
  font-size: 20px;
  font-weight: 700;
  line-height: 160%;
}
.secArea .subTitle .rightLinkMore {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 100px;
  background: var(--bg_main);
}
.secArea .subTitle .rightLinkMore img {
  width: 7px;
  height: auto;
  aspect-ratio: 7/12;
}
.titlePack {
  display: flex;
  width: 100%;
  gap: 24px;
  flex-wrap: wrap;
  flex-direction: column;
}
.secArea .titleArea {
  display: flex;
  width: 100%;
  padding: 0 24px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px 16px;
}
.secArea .titleArea li {
  display: flex;
  flex-flow: column;
  gap: 8px;
  width: calc((100% - 64px) / 5);
}
.secArea.title6 .titleArea li {
  width: calc((100% - 80px) / 6);
}
.secArea .titleArea li.rank {
  padding-top: 4px;
}
.secArea .titleArea .keywordItem {
  position: relative;
  height: 22px;
  margin-bottom: 2px;
  padding: 2px;
  background: var(--bg_main);
  border: 1px solid var(--fg_muted);
  border-radius: 100px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.16);
  text-align: center;
}
.secArea .titleArea .keywordItem:before,
.secArea .titleArea .keywordItem:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.secArea .titleArea .keywordItem:before {
  border: solid 6px transparent;
  border-top: solid 6px var(--fg_muted);
}
.secArea .titleArea .keywordItem:after {
  margin-top: -2px;
  border: solid 7px transparent;
  border-top: solid 7px var(--bg_main);
}
.secArea .titleArea .keywordItem .keywordTxt {
  color: var(--fg_main);
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.secArea .titleArea .genreName {
  height: 22px;
  border: 1px solid var(--fg_muted);
  color: var(--fg_main);
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}
.secArea .titleArea .genreName a {
  display: block;
  color: var(--fg_main);
  text-decoration: none;
}
.secArea .titleArea .genreName.genreBoy {
  border: 1px solid #8fcaf8;
  color: #2196f3;
}
.secArea .titleArea .genreName.genreBoy a {
  color: #2196f3;
}
.secArea .titleArea .genreName.genreGirl {
  border: 1px solid #ffb6bb;
  color: #ff6e78;
}
.secArea .titleArea .genreName.genreGirl a {
  color: #ff6e78;
}
.secArea .titleArea .newDate {
  margin-bottom: -4px;
  color: var(--fg_accent_main);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.secArea .titleArea .linkArea {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 8px;
  color: initial;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  text-decoration: none;
}
.secArea .titleArea .thumBox {
  position: relative;
  background: var(--bg_sub);
}
.secArea .titleArea .camMark {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0;
  z-index: 1;
}
.secArea .titleArea .camMark .camIcon {
  display: flex;
  height: 20px;
  align-items: center;
  padding: 4px 6px;
  background: var(--bg_main);
  border: 1px solid var(--fg_brand);
  border-radius: 100px;
  line-height: 20px;
  color: var(--fg_brand);
  font-size: 11px;
  font-weight: bold;
}
.secArea .titleArea .thumBox .thumbnail {
  aspect-ratio: 128/171;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.secArea .titleArea .thumBox .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.secArea .thumbnail.noimage img {
  width: 100%;
  max-width: 125px;
  height: auto;
  aspect-ratio: 1/1;
}
.secArea .titleArea .rankNum {
  position: absolute;
  top: -6px;
  right: -2px;
  z-index: 1;
}
.secArea .titleArea .rankNum .rankIcon {
  width: auto;
  height: 34px;
}
.secArea .titleArea .labelItem .labelIcon {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0;
  z-index: 1;
}
.secArea .titleArea .labelItem .labelIcon img {
  width: 100%;
  height: 100%;
}
.secArea .titleArea .labelItem .labelIcon.precede,
.secArea .titleArea .labelItem .labelIcon.original {
  left: 0;
  margin: auto;
}
.secArea .titleArea .labelItem .labelIcon.novel,
.secArea .titleArea .labelItem .labelIcon.lightnovel {
  max-width: 56px;
}
.secArea .titleArea .bookTextBox {
  display: flex;
  flex-flow: column;
  gap: 8px;
}
.secArea .titleArea .bookTextBox .titleName {
  line-height: 16px;
  color: var(--fg_main);
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.secArea .titleArea .bookTextBox .titleName .newMark {
  width: 22px;
  margin-right: 4px;
  object-fit: cover;
}
.secArea .titleArea .bookTextBox .valueItem {
  font-size: 11px;
}
.secArea .titleArea .bookTextBox .valueItem.free {
  color: var(--fg_free);
}
.secArea .titleArea .bookTextBox .valueItem.trial {
  color: var(--fg_sub);
}
.secArea .titleArea .bookTextBox .reviewItem {
  display: flex;
  align-items: center;
  gap: 4px;
}
.secArea .titleArea .bookTextBox .reviewItem .reviewStar {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  color: var(--fg_main);
}
.secArea .titleArea .bookTextBox .reviewItem .reviewStarIcon {
  width: 12px;
  height: auto;
}
.secArea .titleArea .bookTextBox .reviewItem .reviewNum {
  color: var(--fg_sub);
  font-size: 13px;
  line-height: 1;
}
.secArea .titleArea .viewerBtnBox a {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 4px;
  color: var(--fg_main);
  text-decoration: none;
}
.secArea .titleArea .viewerBtnBox .free {
  background:  var(--bg_button_free);
  border: 1px solid transparent;
}
.secArea .titleArea .viewerBtnBox .trial {
  background: var(--bg_main);
  border: 1px solid var(--border_button_main);
}
.secArea .titleArea .viewerBtnBox .cart {
  background: var(--fg_accent_main);
}
.secArea .titleArea .viewerBtnBox .btnTxt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.secArea .titleArea .viewerBtnBox .btnTxt .viewerIcon {
  width: 15px;
  height: auto;
}
.secArea .titleArea .viewerBtnBox .btnTxtDate {
  font-size: 10px;
  line-height: 1;
}
.secArea .titleArea .viewerBtnBox.column2 {
  display: flex;
  gap: 4px;
}
.secArea .titleArea .viewerBtnBox.column2 a {
  width: 50%;
}
.secArea .titleArea .viewerBtnBox.column2 .cartIcon {
  width: 18px;
}

/* registerArea
-----------------------------------------------*/
.contentsArea .registerArea {
  display: flex;
  margin: 48px 24px 0;
  padding: 24px 40px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--yellow94);
}
.contentsArea .registerArea .registerHeading {
  position: relative;
  color: var(--fg_main);
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.76px;
}
.contentsArea .registerArea .registerHeading:before,
.contentsArea .registerArea .registerHeading:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 1px;
  background-color: var(--fg_muted);
}
.contentsArea .registerArea .registerHeading:before {
  left: -24px;
  transform: translateY(-50%) rotate(60deg);
}
.contentsArea .registerArea .registerHeading:after {
  right: -20px;
  transform: translateY(-50%) rotate(-60deg);
}
.contentsArea .registerArea .registerHeading span {
  color: var(--fg_accent_main);
}
.contentsArea .registerArea .registerCard {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 20px 32px 24px 32px;
  background: var(--bg_main);
  border: 1px solid var(--border_main);
  border-radius: 4px;
}
.contentsArea .registerArea .registerCard .benefitRow {
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.contentsArea .registerArea .registerCard .badgeNotice {
  display: flex;
  padding: 4px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--fg_accent_sub);
  color: #FFE68E;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 105%;
}
.contentsArea .registerArea .registerCard .benefitTxt {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fg_main);
  text-align: center;
  font-size: 22px;
  line-height: 100%;
}
.contentsArea .registerArea .registerCard .benefitTxt .appealTxt {
  color: var(--fg_accent_sub);
  text-align: center;
  font-size: 27px;
  font-weight: 700;
  line-height: 100%;
}
.contentsArea .registerArea .registerCard .btnRegist a {
  display: flex;
  width: 400px;
  height: 50px;
  margin: 0 auto;
  padding: 16px 12px 16px 16px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 4px;
  background: linear-gradient(180deg, #FF7025 0%, #FA5B21 100%);
  text-decoration: none;
}
.contentsArea .registerArea .registerCard .btnRegist .buttonTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  color: var(--bg_main);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 100%;
}
.contentsArea .registerArea .registerCard .btnRegist .rightLinkMore img {
  width: 7px;
  height: 12px;
}
.contentsArea .registerArea .registerCard .btnBeginner a {
  display: flex;
  height: 42px;
  padding: 12px 14px;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--border_main);
  background: var(--bg_main);
  text-decoration: none;
}
.contentsArea .registerArea .registerCard .btnBeginner .buttonTxt {
  display: flex;
  gap: 8px;
  color: var(--fg_main);
  font-size: 15px;
  line-height: 120%;
}
.contentsArea .registerArea .registerCard .btnBeginner .buttonTxt img {
  width: 11px;
  height: auto;
  aspect-ratio: 11/13;
}
.contentsArea .registerArea .registerCard .btnBeginner .rightLinkMore {
  height: 18px;
}
.contentsArea .registerArea .registerCard .btnBeginner .rightLinkMore img {
  width: 4px;
  height: 7px;
  aspect-ratio: 4/7;
}

/* asideBannerArea
-----------------------------------------------*/
.secArea.asideBannerArea {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
}
.secArea.asideBannerArea .bannerStyle {
  display: flex;
  width: 100%;
  padding: 0 24px;
  gap: 16px;
}
.secArea.asideBannerArea .bannerStyle.big2 a {
  width: calc((100% - 16px) / 2);
}
.secArea.asideBannerArea .bannerStyle.big2 a:nth-child(n+3) {
  display: none;
}
.secArea.asideBannerArea .bannerStyle.small3 {
  gap: 24px;
}
.secArea.asideBannerArea .bannerStyle.small3  a {
  width: calc((100% - 48px) / 3);
}
.secArea.asideBannerArea.long a {
  width: 722px;
  height: auto;
  aspect-ratio: 77/8;
  margin: 0 auto;
}
.secArea.asideBannerArea.wide a {
  width: 480px;
  height: auto;
  aspect-ratio: 32/5;
  margin: 0 auto;
}
.secArea.asideBannerArea img {
  width: 100%;
  height: auto;
}
#toukatsuBanner {
  margin: 16px auto 0;
}

/*tabSliderArea
------------------------------*/
.secArea.tabSliderArea {
  overflow: hidden;
  padding-bottom: 0;
}
.secArea.tabSliderArea .tabMenu {
  position: relative;
  padding: 0 24px;
}
.secArea.tabSliderArea .tabMenu .swiper-slide {
  width: auto;
}
.secArea.tabSliderArea .tabMenu .tabSlideNav {
  display: inline-block;
  width: auto;
  padding: 8px 12px;
  border-radius: 100px;
  color: var(--fg_sub);
}
.secArea.tabSliderArea .tabMenu .tabSlideNav .mainTxt {
  height: 22px;
  font-size: 16px;
  line-height: 22px;
}
.secArea.tabSliderArea .tabMenu .tabSlideNav .subTxt {
  font-size: 11px;
}
.secArea.tabSliderArea .tabMenu .on .tabSlideNav{
  background: var(--bg_accent_main);
}
.secArea.tabSliderArea .tabMenu .on .tabSlideNav .mainTxt {
  color: var(--fg_accent_main);
  font-weight: bold;
}
.secArea.tabSliderArea .tabMenu .swiper-button {
  position: absolute;
  display: flex;
  width: 24px;
  height: 38px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 100px;
  top: 50%;
  margin-top: -19px;
  color: transparent;
  cursor: pointer;
  background: url(/sol/auto/images/fix/common_cmoa/icon/202606/arrow/icon_arrow.svg) no-repeat;
  background-position: 50% 50%;
}
.secArea.tabSliderArea .tabMenu .swiper-button.swiper-button-disabled {
  display: none;
}
.secArea.tabSliderArea .tabMenu .swiper-button.swiper-button-prev {
  left: 0;
  transform: scaleX(-1);
}
.secArea.tabSliderArea .tabMenu .swiper-button.swiper-button-next {
  right: 0;
}
.secArea.tabSliderArea .tabMenu .swiper-button:after {
  display: none;
}
.secArea.tabSliderArea .tabSlider {
  padding: 0 24px;
}
.secArea.tabSliderArea .tabSlider .swiper-container {
  width: 722px;
}
.secArea.tabSliderArea .tabSlider .swiper-slide {
  opacity: 0.3;
  height: 0;
}
.secArea.tabSliderArea .tabSlider .swiper-slide.swiper-slide-active,
.secArea.tabSliderArea .tabSlider .swiper-slide.on {
  opacity: 1;
  height: 100%;
}
.secArea.tabSliderArea .tabSlider .titleArea {
  padding: 0;
}

/* bannerSliderArea
-----------------------------------------------*/
.secArea .bannerSliderArea {
  position: relative;
  width: 100%;
  padding: 0 24px 19px;
}
.secArea .bannerSliderArea .swiper-slide img {
  width: 100%;
  height: auto;
}
.secArea .bannerSliderArea .swiper-button2 {
  position: absolute;
  top: 50%;
  display: flex;
  width: 44px;
  height: 44px;
  margin-top: -30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 100px;
  border: 1px solid var(--border_accent_main);
  background: url(/sol/auto/images/fix/common_cmoa/icon/202606/arrow/icon_arrow_or.svg) no-repeat;
  background-position: 52% 50%;
  background-color: var(--bg_main);
  background-size: auto 15px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
  color: transparent;
}
.secArea .bannerSliderArea .swiper-button2:hover {
  opacity: .7;
}
.secArea .bannerSliderArea .swiper-button2:hover img {
  opacity: 1;
}
.secArea .bannerSliderArea .swiper-button2.swiper-button-prev {
  left: 8px;
  transform: scaleX(-1);
  background-position: 54% 50%;
}
.secArea .bannerSliderArea .swiper-button2.swiper-button-next {
  right: 8px;
}
.secArea .bannerSliderArea .swiper-button2.swiper-button-disabled {
  display: none;
}
.secArea .bannerSliderArea .swiper-button2:after {
  display: none;
}
.secArea .bannerSliderArea .swiper-pagination {
  display: flex;
  width: 722px;
  height: 3px;
  bottom: 0;
  flex-wrap: nowrap;
}
.secArea .bannerSliderArea .swiper-pagination .swiper-pagination-bullet {
  display: flex;
  height: 3px;
  width: 100%;
  border-radius: 0;
}
.secArea .bannerSliderArea .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--bg_control_accent_main);
}

/* bottomBtns
-----------------------------------------------*/
.contentsArea .bottomBtns {
  display: flex;
  width: 100%;
  padding: 1px 0;
  margin: 0 auto;
}
.secArea .tabSlider .bottomBtns {
  margin: 24px auto 0;
}
.contentsArea .bottomBtns a {
  display: flex;
  flex: 1 0 0;
  height: 50px;
  margin: 0 auto;
  padding: 16px 16px 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--border_button_main);
  background: var(--bg_button_main);
  text-decoration: none;
}
.contentsArea .bottomBtns:not(.column2):not(.column3):not(.column4) a {
  min-width: 400px;
  flex: inherit;
}
.contentsArea .bottomBtns .buttonTxt {
  flex: 1 0 0;
  color: var(--fg_main);
  font-size: 15px;
  line-height: 18px;
}
.contentsArea .bottomBtns .buttonIconTxt {
  display: flex;
  flex: 1 0 0;
  gap: 8px;
  color: var(--fg_main);
  font-size: 15px;
  line-height: 18px;
  justify-content: center;
  align-items: center;
}
.contentsArea .bottomBtns .rightLinkMore img {
  width: 8px;
  height: auto;
  aspect-ratio: 4/7;
}
.secArea .bottomBtns.column2 {
  display: flex;
  padding: 1px 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.secArea.bottomBtnsArea .bottomBtns.column2 {
  padding: 1px 24px;
}
.secArea .bottomBtns.column2 a {
  border: 1px solid var(--border_button_main);
  border-radius: 0;
}
.secArea .bottomBtns.column2 a:first-child {
  border-top-left-radius: 4px;
}
.secArea .bottomBtns.column2 a:nth-child(2) {
  border-top-right-radius: 4px;
}
.secArea .bottomBtns.column2 a:nth-child(2n+2) {
  border-left: none;
}
.secArea .bottomBtns.column2 a:nth-child(n+3) {
  border-top: none;
}
.secArea .bottomBtns.column2 a:nth-last-child(2):nth-child(2n+1) {
  border-bottom-left-radius: 4px;
}
.secArea .bottomBtns.column2 a:nth-last-child(2):nth-child(2n+2) {
  border-bottom-right-radius: 4px;
}
.secArea .bottomBtns.column2 a:last-child {
  border-bottom-right-radius: 4px;
}
.secArea .bottomBtns.column2 a:last-child:nth-child(2n+1) {
  border-bottom-left-radius: 4px;
}
.secArea .bottomBtns.column4 {
  display: flex;
  padding: 1px 24px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.secArea .bottomBtns.column4 a {
  border-right: none;
  border-radius: 0;
}
.secArea .bottomBtns.column4 a:first-child {
  border-radius: 4px 0 0 4px;
}
.secArea .bottomBtns.column4 a:last-child {
  border-right: 1px solid var(--border_button_main);
  border-radius: 0 4px 4px 0;
}
.contentsArea .bottomBtns.or a {
  border-radius: 4px;
  border: 1px solid var(--border_button_accent_main);
  background: var(--bg_button_main,);
}
.contentsArea .bottomBtns.or a .buttonTxt {
  color: var(--fg_accent_main);
}

/* .listArea
-----------------------------------------------*/
.secArea .reviewPack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.secArea .listArea {
  display: flex;
  width: 100%;
  padding: 0 24px;
}
.secArea .listArea li {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
}
.secArea .listArea .thumbnail {
  flex-shrink: 0;
  width: 131px;
  height: auto;
  aspect-ratio: 128/171;
  overflow: hidden;
  background: var(--bg_sub);
  text-align: center;
}
.secArea .listArea .thumbnail a {
  display: block;
}
.secArea .listArea .thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 128/171;
  object-fit: contain;
}
.secArea .listArea .bookTextBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  text-align: left;
  justify-content: center;
}
.secArea .listArea .bookTextBox .titleCaption {
  position: relative;
  display: flex;
  padding: 8px 16px;
  align-items: center;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--border_accent2_muted);
  background: var(--bg_accent2_muted);
  color: var(--fg_staffRecommend);
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
}
.secArea .listArea .bookTextBox .titleCaption:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  margin-top: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 13px solid var(--border_accent2_muted);
  border-left: 0;
}
.secArea .listArea .bookTextBox .titleCaption:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  margin-top: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 13px solid var(--bg_accent2_muted);
  border-left: 0;
}
.secArea .listArea .bookTextBox .commentBlock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}
.secArea .listArea .bookTextBox a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
  color: var(--fg_main);
  align-items: flex-start;
  text-decoration: none;
}
.secArea .listArea .bookTextBox .titleName {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
  color: var(--fg_main);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}
.secArea .listArea .bookTextBox .titleName img {
  width: 25px;
  height: auto;
}
.secArea .listArea .bookTextBox .reviewItem {
  display: flex;
  padding-bottom: 2px;
  align-items: center;
  gap: 4px;
}
.secArea .listArea .bookTextBox .reviewItem .reviewStar {
  display: flex;
  align-items: center;
  gap: 2px;
  align-self: stretch;
}
.secArea .listArea .bookTextBox .reviewItem .reviewStar img {
  width: 13px;
  height: auto;
  aspect-ratio: 1/1;
}
.secArea .listArea .bookTextBox .reviewItem .reviewPoint {
  color: var(--fg_main);
  font-size: 13px;
  font-weight: 700;
  line-height: 120%;
}
.secArea .listArea .bookTextBox .reviewItem .reviewNum {
  color: var(--fg_main);
  font-size: 11px;
  line-height: 120%;
}
.secArea .listArea .topArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
.secArea .listArea .topArea .thumbnail {
  width: 219px;
  height: auto;
  align-self: stretch;
  aspect-ratio: 75/37;
}
.secArea .listArea .topArea .thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 75/37;
  object-fit: contain;
}
.secArea .listArea .infoTxtItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
#reviewTitle.secArea .listArea .infoTxtItem {
  padding: 12px;
  border-radius: 4px;
  background: var(--bg_accent2_muted);
}
.secArea .listArea .bookTextBox .infoTxtItem .infoBubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}
.secArea .listArea .bookTextBox .infoTxtItem .infoBubble .infoHeadline {
  color: var(--fg_accent_main);
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
}
.secArea .listArea .infoTxtItem .infoBubble .infoTxt {
  display: -webkit-box;
  max-height: calc(22px * 3);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  align-self: stretch;
  overflow: hidden;
  color: var(--fg_main);
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}
.secArea .listArea .bookTextBox .infoTxtItem .infoBubble .infoTxt {
  max-height: calc(22px * 2);
  -webkit-line-clamp: 2;
}
.secArea .listArea .infoTxtItem input.toggleCheckbox {
  display: none;
}
.secArea .listArea .toggleCheckbox:checked + .infoBubble .infoTxt {
  -webkit-line-clamp: unset; 
  max-height: none;
}
.secArea .listArea .toggleButton {
  display: none;
  width: 200px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin: 4px auto 0;
  padding: 8px 16px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border_button_main);
  border-radius: 100px;
  color: var(--fg_sub);
  font-size: 12px;
  line-height: 14px;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
.secArea .listArea .toggleButton:hover {
  opacity: .7;
}
.secArea .listArea .toggleButton .closeTxt,
.secArea .listArea .toggleButton .openTxt {
  display: flex;
  align-items: center;
  gap: 6px;
}
.secArea .listArea .toggleButton .closeTxt .arrowIcon,
.secArea .listArea .toggleButton .openTxt .arrowIcon {
  width: 7px;
  height: 12px;
  transform: rotate(90deg);
}
.secArea .listArea .toggleButton .closeTxt .arrowIcon {
  width: 7px;
  height: 12px;
  transform: rotate(-90deg);
}
.secArea .listArea .toggleButton .closeTxt {
  display: none;
}
.secArea .listArea .toggleCheckbox:checked + .infoBubble .openTxt {
  display: none;
}
.secArea .listArea .toggleCheckbox:checked + .infoBubble .closeTxt {
  display: flex;
}
.secArea .listArea.directionColumn {
  gap: 32px;
}
.secArea .listArea.directionColumn a {
  color: var(--fg_main);
}
.secArea .listArea.directionColumn li {
  position: relative;
  display: flex;
  width: calc((100% - 64px) / 3);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}
.secArea .listArea.directionColumn li + li:before {
  position: absolute;
  top: 0;
  left: -16px;
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #ccc;
}
.secArea .listArea.directionColumn .toggleButton {
  width: 160px;
}

/* listArea.news
-----------------------------------------------*/
.secArea .listArea.news {
  display: flex;
  width: 100%;
  padding: 0 24px;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 16px 24px;
}
.secArea .listArea.news li {
  width: calc((100% - 24px) / 2);
  padding-bottom: 16px;
}
.secArea .listArea.news li:nth-child(-n+2) {
  border-bottom: 1px solid var(--border_main);
  border-radius: 0;
}
.secArea .listArea.news.noBorder li {
  border-bottom: none;
}
.secArea .listArea.news li a.linkArea {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--fg_main);
  text-decoration: none;
}
.secArea .listArea.news li .thumbnail {
  display: flex;
  width: 114px;
  height: 114px;
  justify-content: center;
  align-items: center;
  background: var(--bg_sub);
}
.secArea .listArea.news li .thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.secArea .listArea.news .bookTextBox {
  gap: 4px;
}
.secArea .listArea.news .bookTextBox .titleName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  align-self: stretch;
  overflow: hidden;
  color: var(--fg_main);
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}
.secArea .listArea.news .bookTextBox .infoTxt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  overflow: hidden;
  color: var(--fg_main);
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 21px;
}

/* #keywordTxt
-----------------------------------------------*/
.secArea .keywordBlock {
  display: flex;
  padding: 0 24px;
  align-items: center;
  align-content: center;
  gap: 10px;
  align-self: stretch;
  flex-wrap: wrap;
}
.secArea .keywordBlock .keywordBox {
  display: flex;
}
.secArea .keywordBlock .keywordBox a {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--border_button_muted);
  background: var(--bg_button_sub);
  color: var(--fg_main);
  text-align: center;
  font-size: 14px;
  line-height: 17px;
}

/* #isekaicomicTitle + #isekailightnovelTitle
-----------------------------------------------*/
#isekaicomicTitle + #isekailightnovelTitle {
  margin-top: 24px;
}
#isekaicomicTitle + #anotherworldBanner,
#isekailightnovelTitle + #anotherworldBanner {
  margin-top: 24px;
}

/* #precedeBanner + #precedeSelectTitle
-----------------------------------------------*/
#precedeBanner + #precedeSelectTitle {
  margin-top: 24px;
}

/* #autopurchaseBanner + #registBanner + #brandingBanner1
-----------------------------------------------*/
#autopurchaseBanner + #registBanner {
  margin-top: 24px;
}
#autopurchaseBanner + #brandingBanner1 {
  margin-top: 24px;
}
/*originalTitle
------------------------------*/
#originalTitle.secArea {
  gap: 16px;
  width: 722px;
  margin: 48px 24px 0;
  padding: 24px;
  background-image:  url(/sol/auto/images/fix/static/top/cmoaoriginal/202606/bg_top_pc.png?v=1),url(/sol/auto/images/fix/static/top/cmoaoriginal/202606/bg_bottom_pc.png), linear-gradient(to right, #f5f5f5 1px, transparent 1px), linear-gradient(to bottom, #f5f5f5 1px, transparent 1px);
  background-color: #fff;
  background-position: top right, bottom left, left top, left top;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: contain, contain, 13px 13px, 13px 13px;
  border-radius: 4px;
  border: 1px solid #FF7025;
}
#originalTitle.secArea .secTitle {
  padding: 0;
}
#originalTitle.secArea .secTitle img {
  display: block;
  width: 300px;
  height: auto;
}
#originalTitle.secArea .originalTitlePack {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--fg_muted);
  background: var(--bg_main);
}
#originalTitle.secArea .titleArea {
  padding: 0;
  gap: 16px;
}

/* #yomuoshi
------------------------------*/
#yomuoshi {
  display: flex;
  width: 722px;
  margin: 48px 24px;
  padding: 16px;
  background-image: url(/sol/auto/images/fix/static/top/yomuoshi/202606/bg_top_pc.png), url(/sol/auto/images/fix/static/top/yomuoshi/202606/bg_bottom_pc.png);
  background-color: #e3f5c8;
  background-position: top center, bottom center;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}
#yomuoshi .PackArea {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 8px;
  border: 2px solid #FFF;
}
#yomuoshi .secTitle {
  padding: 0;
  text-align: left;
}
#yomuoshi .secTitle a {
  display: inline-block;
  width: auto;
}
#yomuoshi .secTitle img {
  width: 320px;
  height: auto;
  aspect-ratio: 320/49;
}
#yomuoshi .komaArea {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 16px;
  flex-direction: column;
  align-items: center;
}
#yomuoshi .komaArea .linkArea {
  display: flex;
  width: 400px;
  flex-direction: column;
  gap: 12px;
}
#yomuoshi .komaArea .linkArea .thumBox {
  display: flex;
}
#yomuoshi .komaArea .linkArea .thumBox img {
  width: 400px;
  height: auto;
}
#yomuoshi .komaArea .bookTextBox .titleName {
  color: var(--fg_main);
  text-align: center;
  font-size: 15px;
  line-height: 160%;
}

/* #newreleaseTitle
------------------------------*/
#newreleaseTitle .swiper-button {
  display: none;
}

/* #comicmagazineTitle
------------------------------*/
#comicmagazineTitle .swiper-button {
  display: none;
}

/* #searchGenre
------------------------------*/
.secArea .searchGenreMenu,
.secArea .hideGenreMenu {
  display: flex;
  width: 100%;
  padding: 0 24px;
  gap: 24px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.secArea .searchGenreMenuInner {
  display: flex;
  flex-direction: column;
  width: calc((100% - 24px) / 2);
  gap: 8px;
}
.secArea .searchGenreMenuInner .subTitle {
  padding: 0;
}
.secArea .searchGenreMenuInner .subTitle a {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  color: var(--fg_main);
}
.secArea .searchGenreMenuInner .subTitle a .titleTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  color: var(--fg_main);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}
.secArea .searchGenreMenuInner .subTitle a .rightLinkMore {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 100px;
  background: var(--bg_sub);
}
.secArea .searchGenreMenuInner .subTitle a .rightLinkMore img {
  width: auto;
  height: 12px;
  aspect-ratio: 7/12;
}
.secArea .searchGenreMenuInner .bottomBtns {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  margin: auto;
  padding: 1px 0;
  flex-wrap: wrap;
}
.secArea .searchGenreMenuInner .bottomBtns a {
  flex: initial;
  width: calc(100% /2);
  padding: 16px 12px;
  border-radius: 0;
  border: 1px solid var(--border_button_main);
  margin: 0;
}
.secArea .searchGenreMenuInner .bottomBtns .buttonTxt {
  flex: 1 0 0;
  color: var(--fg_main);
  text-align: center;
  font-size: 13px;
  line-height: 18px;
}
.secArea.searchGenre .menuOpenBtn,
.secArea.searchGenre .menuCloseBtn {
  display: flex;
  width: 100%;
  margin-top: 8px;
  padding: 0 24px;
  justify-content: space-around;
}
.secArea.searchGenre .menuOpenBtn .openTxt,
.secArea.searchGenre .menuCloseBtn .closeTxt {
  display: flex;
  width: 300px;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 100px;
  border: 1px solid var(--border_button_main);
  background: var(--bg_button_main);
  cursor: pointer;
}
.secArea.searchGenre .menuOpenBtn .openTxt:hover,
.secArea.searchGenre .menuCloseBtn .closeTxt:hover {
  opacity: .7;
}
.secArea.searchGenre .menuOpenBtn .openTxt:hover img,
.secArea.searchGenre .menuCloseBtn .closeTxt:hover img {
  opacity: 1;
}
.secArea.searchGenre .menuOpenBtn .openTxt span,
.secArea.searchGenre .menuCloseBtn .closeTxt span {
  color: var(--fg_sub);
  font-size: 14px;
  line-height: 16px;
}
.secArea.searchGenre .menuOpenBtn .openTxt img {
  width: 7px;
  height: auto;
  transform: rotate(90deg);
}
.secArea.searchGenre .menuCloseBtn .closeTxt img {
  width: 7px;
  height: auto;
  transform: rotate(270deg);
}
.secArea.searchGenre .hideGenreMenu,
.secArea.searchGenre .menuCloseBtn {
  display: none;
}
.secArea.searchGenre.is-open .hideGenreMenu,
.secArea.searchGenre.is-open .menuCloseBtn {
  display: flex;
}
.secArea.searchGenre.is-open .menuOpenBtn {
  display: none;
}

/* cmoaService
-----------------------------------------------*/
.contentsArea .cmoaService {
  display: flex;
  padding: 24px;
  margin: 48px 24px 0;
  flex-direction: column;
  align-items: flex-start;
  background: var(--bg_accent2_muted);
}
.contentsArea .cmoaService .secTitle {
  display: flex;
  color: var(--fg_main);
}
.contentsArea .cmoaService .secTitle .titleTxt {
  color: var(--fg_main);
  font-size: 20px;
  font-weight: 700;
  line-height: 160%;
}
.contentsArea .cmoaService .secLead {
  margin-top: 2px;
  color: var(--fg_main);
  font-size: 14px;
  line-height: 160%;
}
.contentsArea .cmoaService .listArea {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin-top: 8px;
}
.contentsArea .cmoaService .listArea li {
  display: flex;
  width: calc((100% - 32px) / 3);
}
.contentsArea .cmoaService .listArea li a {
  display: flex;
  padding: 16px 12px 16px 16px;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--border_button_main);
  background: var(--bg_button_main);
  color: var(--fg_main);
  text-decoration: none;
}
.contentsArea .cmoaService .listArea .buttonTxtGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}
.contentsArea .cmoaService .listArea .buttonTxtGroup .buttonTxt img {
  width: 20px;
  height: auto;
  aspect-ratio: 1/1;
}
.contentsArea .cmoaService .listArea .buttonTxtGroup .buttonTxt {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  color: var(--fg_main);
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
}
.contentsArea .cmoaService .listArea .buttonTxtGroup .buttonSubTxt {
  color: var(--fg_main);
  font-size: 14px;
  line-height: 160%;
  text-align: left;
}
.contentsArea .cmoaService .listArea li .rightLinkMore {
  display: flex;
  width: 22px;
  height: 22px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 48px;
  background: var(--bg_sub);
}
.contentsArea .cmoaService .listArea li .rightLinkMore img {
  width: 5px;
  height: auto;
  aspect-ratio: 5/8;
}

/* freePickUpTitle
-----------------------------------------------*/
#freePickUpTitle {
  display: flex;
  width: 100%;
  margin: 48px auto 0;
  padding: 24px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  background: var(--bg_accent3_muted);
}
#freePickUpTitle .secArea {
  margin: 0 auto;
}
#freePickUpTitle .secArea .secTitle .rightLinkMore {
  background: var(--bg_main);
}
#freePickUpTitle .komaArea {
  display: flex;
  margin: 0 24px;
  padding: 24px 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  background: #fffbf3;
}
#freePickUpTitle .komaArea a.linkArea {
  display: flex;
  width: 400px;
}
#freePickUpTitle .komaArea .linkArea .thumBox img {
  width: 100%;
  max-width: 400px;
  height: auto;
}
#freePickUpTitle .komaArea .bookTextBox {
  display: flex;
  width: 400px;
  margin: 0 auto;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
#freePickUpTitle .komaArea .bookTextBox .titleName {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
}
#freePickUpTitle .komaArea .bookTextBox .titleName a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  overflow: hidden;
  color: var(--fg_main);
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 160%;
}
#freePickUpTitle .komaArea .bookTextBox .viewerBtnBox {
  display: flex;
}
#freePickUpTitle .komaArea .bookTextBox .viewerBtnBox a {
  display: flex;
  width: 131px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--bg_button_free);
}
#freePickUpTitle .komaArea .bookTextBox .viewerBtnBox .btnTxt {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 3px;
  align-self: stretch;
  flex-wrap: wrap;
  color: var(--fg_main);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
#freePickUpTitle .komaArea .bookTextBox .viewerBtnBox .btnTxt img {
  width: 15px;
  height: auto;
}

/* #komaThumb
-----------------------------------------------*/
#komaThumb {
  padding: 24px 0;
  background: var(--bg_boy_accent_main);
}
#komaThumb .sliderContainer {
  width: 100%;
  padding: 0 24px 22px;
  position: relative;
}
#komaThumb .swiper-slide {
  width: calc((100% / 3) + 20px);
}
#komaThumb .sliderContainer .thumBox {
  width: 260px;
  height: auto;
  aspect-ratio: 3/4;
  background: #EFEFEF;
}
#komaThumb .sliderContainer .thumBox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#komaThumb .sliderContainer .bookTextBox {
  margin-top: 8px;
  text-align: left;
}
#komaThumb .sliderContainer .bookTextBox .titleName {
  display: block;
  color: #26303D;
  font-size: 14px;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.154px;
}
#komaThumb .sliderContainer .bookTextBox .infoTxt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: #26303D;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 130%;
  letter-spacing: -0.132px;
}
#komaThumb .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  bottom: 0;
  height: 6px;
  line-height: 6px;
}
#komaThumb .swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #fff;
  opacity: 1;
}
#komaThumb .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 4px;
  background: var(--bg_control_accent_main);
}
#komaThumb .swiper-button {
  position: absolute;
  top: 50%;
  display: flex;
  width: 44px;
  height: 44px;
  margin-top: -30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 100px;
  border: 1px solid var(--border_accent_main);
  background: var(--bg_main);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
  color: transparent;
}
#komaThumb .swiper-button:before {
  content: "";
  display: block;
  position: absolute;
  clear: both;
  top: 50%;
  right: 17px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-top: 3px solid var(--fg_accent_main);
  border-right: 3px solid var(--fg_accent_main);
  transform: rotate(45deg);
}
#komaThumb .swiper-button.swiper-button-prev {
  left: 8px;
  transform: scaleX(-1);
}
#komaThumb .swiper-button.swiper-button-next {
  right: 8px;
}
#komaThumb .swiper-button:hover {
  opacity: .7;
}

/* #precedeSpecialArea
-----------------------------------------------*/
#precedeSpecialArea {
  display: flex;
  width: 100%;
  max-width: 722px;
  margin: 48px auto 0;
  padding: 24px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
#precedeSpecialArea.male {
  background: var(--bg_boy_accent_main);
}
#precedeSpecialArea.female {
  background: var(--bg_accent_main);
}
#precedeSpecialArea #precedeTitle {
  margin: 0 auto;
}
#precedeSpecialArea .rightLinkMore {
  background: var(--bg_main);
}
#precedeSpecialArea #precedeBanner {
  margin: 16px auto 0;
}
#precedeSpecialArea #precedeSelectTitle {
  margin-top: 0;
}
#precedeSpecialArea .swiper-pagination {
  width: 674px;
}

/* recent_title
-----------------------------------------------*/
.recent_title {
  display: flex;
  width: 100%;
  margin: 48px auto 0;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}
.recent_title .secTitle {
  display: flex;
  padding: 0 24px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.recent_title .secTitle .title_name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  color: var(--fg_main);
  font-size: 22px;
  font-weight: 700;
  line-height: 35px;
}
.recent_title .secTitle .right_top_link {
  position: relative;
  padding-right: 16px;
  color: var(--fg_sub);
  font-size: 15px;
  line-height: 140%;
  cursor: pointer;
}
.recent_title .secTitle .right_top_link:before {
  content: "";
  display: block;
  position: absolute;
  clear: both;
  top: 50%;
  right: 3px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-top: 1px solid var(--fg_sub);
  border-right: 1px solid var(--fg_sub);
  transform: rotate(45deg);
}
.recent_title .secTitle .right_top_link:hover {
  opacity: .7;
}
.recent_title .fixBox .subTitle {
  text-align: left;
  padding: 0 24px;
  color: var(--fg_main);
}
#title_hist_box.recent_title .fixBox .subTitle {
  display: none;
}
.recent_title .sliderBlock {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 24px;
}
.recent_title .sliderBlock .slick-arrow {
  position: absolute;
  top: 50%;
  display: flex !important;
  width: 44px;
  height: 44px;
  margin-top: -30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 100px;
  border: 1px solid var(--border_accent_main);
  background: url(/sol/auto/images/fix/common_cmoa/icon/202606/arrow/icon_arrow_or.svg) no-repeat;
  background-position: 52% 50%;
  background-color: var(--bg_main);
  background-size: auto 15px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
  color: transparent;
  font-size: 0;
  z-index: 1;
}
.recent_title .sliderBlock .slick-arrow:hover {
  opacity: .7;
}
.recent_title .sliderBlock .slick-arrow.slick-next {
  right: 8px;
}
.recent_title .sliderBlock .slick-arrow.slick-prev {
  left: 8px;
  transform: scaleX(-1);
}
.recent_title .sliderBlock .slick-arrow.slick-next {
  right: 8px;
}
.recent_title .sliderBlock .slick-arrow.slick-disabled {
  display: none !important;
  border: 1px solid #CCD3DC;
  opacity: 0.7;
  background: var(--bg_main);
}
.recent_title .sliderBlock .slick-arrow.slick-disabled:before {
  border-color: var(--fg_disabled);
}
.recent_title .sliderBlock .slider_box {
  display: flex;
  margin-right: 16px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 1;
}
.recent_title .sliderBlock .slider_box:last-child {
  margin-right: 0;
}
.recent_title .sliderBlock .slick-list {
  overflow: hidden;
}
.recent_title .sliderBlock .slick-track {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
}
.recent_title .sliderBlock .slider_box .thum_box {
  position: relative;
  background: var(--bg_sub);
}
.recent_title .sliderBlock .slider_box .thum_box a {
  display: block;
  position: relative;
  aspect-ratio: 128/171;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg_sub);
}
.recent_title .sliderBlock .slider_box .thum_box .cam_mark {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  height: 20px;
  align-items: center;
  padding: 4px 6px;
  background: var(--bg_main);
  border: 1px solid var(--fg_brand);
  border-radius: 100px;
  line-height: 20px;
  color: var(--fg_brand);
  font-size: 11px;
  font-weight: bold;
  z-index: 1;
}
.recent_title .sliderBlock .slider_box .thum_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.recent_title .sliderBlock .slider_box .text_box {
  display: flex;
  flex-flow: column;
  gap: 8px;
}
.recent_title .sliderBlock .slider_box .text_box .title_name {
  display: flex;
  color: var(--fg_main);
  font-size: 13px;
  text-align: left;
}
.recent_title .sliderBlock .slider_box .text_box .title_name a {
  display: block;
  line-height: 16px;
  color: var(--fg_main);
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
.recent_title .sliderBlock .slider_box .text_box .author_name {
  display: none;
}
.recent_title .bottomBtns {
  margin-top: 8px;
}
.recent_title .bottomBtns a {
  position: relative;
  display: flex;
  width: 400px;
  margin: 0 auto;
  padding: 16px 16px 16px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--border_button_main);
  background: var(--bg_button_main);
  color: var(--fg_main);
  font-size: 15px;
  line-height: 120%;
  text-decoration: none;
}
.recent_title .bottomBtns a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  clear: both;
  top: 50%;
  right: 16px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-top: 3px solid var(--fg_sub);
  border-right: 3px solid var(--fg_sub);
  transform: rotate(45deg);
}

/* #notbuy
-----------------------------------------------*/
#notbuy {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}
#notbuy .secTitle {
  display: flex;
  width: 100%;
  margin: 48px auto 0;
}
#notbuy .secTitle a {
  display: flex;
  width: 100%;
  padding: 0 24px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
#notbuy .secTitle .titleTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  color: var(--fg_main);
  font-size: 22px;
  font-weight: 700;
  line-height: 35px;
}
#notbuy .secTitle .rightLinkMore {
  position: relative;
  padding-right: 16px;
  color: var(--fg_sub);
  font-size: 15px;
  line-height: 140%;
  cursor: pointer;
}
#notbuy .secTitle .rightLinkMore:before {
  content: "";
  display: block;
  position: absolute;
  clear: both;
  top: 50%;
  right: 3px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-top: 1px solid var(--fg_sub);
  border-right: 1px solid var(--fg_sub);
  transform: rotate(45deg);
}
#notbuy .resBox {
  display: flex;
}
#notbuy .resBox ul {
  display: flex;
  width: 100%;
  padding: 0 24px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px 16px;
}
#notbuy .resBox ul:after {
  display: none;
}
#notbuy .resBox li {
  display: flex;
  flex-flow: column;
  gap: 8px;
  width: calc((100% - 64px) / 5);
}
#notbuy .resBox li:nth-child(n+6) {
  display: none;
}
#notbuy .resBox li .thumBox {
  position: relative;
  display: flex;
  color: initial;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  background: var(--bg_sub);
  text-decoration: none;
}
#notbuy .resBox li .thumBox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#notbuy .resBox li .thumBox a {
  aspect-ratio: 128/171;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#notbuy .resBox li .thumBox .camMark {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  height: 20px;
  align-items: center;
  padding: 4px 6px;
  background: var(--bg_main);
  border: 1px solid var(--fg_brand);
  border-radius: 100px;
  line-height: 20px;
  color: var(--fg_brand);
  font-size: 11px;
  font-weight: bold;
  z-index: 1;
}
#notbuy .resBox li .titleName {
  display: flex;
  flex-flow: column;
  gap: 8px;
}
#notbuy .resBox li .titleName a {
  line-height: 16px;
  color: var(--fg_main);
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#notbuy .bottomBtns {
  margin-top: 8px;
}
#notbuy .bottomBtns a {
  position: relative;
  display: flex;
  width: 400px;
  margin: 0 auto;
  padding: 16px 16px 16px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--fg_accent_main);
  background: var(--bg_button_main);
  color: var(--fg_accent_main);
  font-size: 15px;
  line-height: 120%;
  text-decoration: none;
}
#notbuy .bottomBtns a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  clear: both;
  top: 50%;
  right: 16px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-top: 3px solid var(--fg_accent_main);
  border-right: 3px solid var(--fg_accent_main);
  transform: rotate(45deg);
}
#notbuy .bottomBtns a + a {
  display: none;
}

/* recent_sale
-----------------------------------------------*/
.recent_sale {
  display: flex;
  width: 100%;
  margin: 48px auto 0;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}
.recent_sale .secTitle {
  display: flex;
  padding: 0 24px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.recent_sale .secTitle .title_name {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  color: var(--fg_main);
  font-size: 22px;
  font-weight: 700;
  line-height: 160%;
}
.recent_sale .secTitle .right_top_link {
  position: relative;
  padding-right: 16px;
  color: var(--fg_sub);
  font-size: 15px;
  line-height: 140%;
  cursor: pointer;
}
.recent_sale .secTitle .right_top_link:before {
  content: "";
  display: block;
  position: absolute;
  clear: both;
  top: 50%;
  right: 3px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-top: 1px solid var(--fg_sub);
  border-right: 1px solid var(--fg_sub);
  transform: rotate(45deg);
}
.recent_sale .secTitle .right_top_link:hover {
  opacity: .7;
}
.recent_sale .subTitle {
  text-align: left;
  padding: 0 24px;
  color: var(--fg_main);
}
#cam_hist_area .subTitle {
  display: none;
}
.recent_sale ul {
  display: flex;
  padding: 0 26px;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
}
.recent_sale ul:after {
  content: "";
  display: none;
}
.recent_sale li {
  width: calc((100% - 48px) / 4);
}
.recent_sale li a {
  display: block;
}
.recent_sale li img {
  width: 100%;
  height: auto;
}
.recent_sale .bottomBtns {
  margin-top: 8px;
}
.recent_sale .bottomBtns a {
  position: relative;
  display: flex;
  width: 400px;
  margin: 0 auto;
  padding: 16px 16px 16px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--border_button_main);
  background: var(--bg_button_main);
  color: var(--fg_main);
  font-size: 15px;
  line-height: 120%;
  text-decoration: none;
}
.recent_sale .bottomBtns a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  clear: both;
  top: 50%;
  right: 16px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-top: 3px solid var(--fg_sub);
  border-right: 3px solid var(--fg_sub);
  transform: rotate(45deg);
}