@charset "UTF-8";

/* layout
-------------------------------------------------------------*/
.co_container_box_inner {
  padding: 0;
}
.contents_right {
  width: 770px;
  float: right;
  background: #fff;
}

/* header_area
-------------------------------------------------------------*/
.header_area{
  position: relative;
  text-align: center;
  width: 770px;
  margin: 0 auto;
}
.unum_area{
  position: absolute;
  left: 36%;
  font-size: 31px;
}
.unum1{
  top: 24.5%;
}
.unum2{
  top: 37%;
}
.unum3{
  top: 49%;
  white-space: nowrap;
}

/* tablink_area
-------------------------------------------------------------*/
.tablink_area ul{
  display: table;
  table-layout: fixed;
  width: 770px;
  margin: 0 auto;
}
.tablink_area ul li{
  display: table-cell;
  text-align: center;
}
.tablink_area ul li:first-child{
  text-align: left;
}
.tablink_area ul li:last-child{
  text-align: right;
}
.tablink_area ul li a{
  display: block;
}

/* common
-------------------------------------------------------------*/
section.sections{
  width: 770px;
  margin: 0 auto 40px;
}
.h2title{
  margin: 30px 0 15px;
}
.contents_area{
  margin: 10px 0;
}
.contents_area + .contents_area{
  margin-top: 30px;
}
.fontBig{
  font-size: 170% !important;
}
.fontBig2{
  font-size: 145% !important;
}
.font_red{
  color: #ff7979;
}
.color_gly{
  color: #aaa;
}
.contents_right .more_link{
  text-align: right;
  margin: 2px 0 10px;
  position: relative;
}
.contents_right .more_link:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  margin: -5px 0 0 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #39f;
  box-sizing: border-box;
}
.contents_right .more_link a{
  display: block;
  padding: 0 15px;
  font-size: 13px;
}
.align_c{
  text-align: center;
}
.align_ri{
  text-align: right;
}
.v_fontsize{
  font-size: 26px;
}
.h4title{
  margin: 0 auto 5px;
}
span.strong{
  font-weight:bold;
}
.caption{
  font-size: 10px;
  color: #000;
  display: block;
  text-align: center;
  padding-top: 2px;
}
.caption2{
  font-size: 12px;
  line-height: 14px;
  color: #000;
  display: block;
}
.margint5{
  margin-top:5px;
}

/* appeal
-------------------------------------------------------------*/
.contents_title{
  position: relative;
  margin: 30px 0 0;
  padding: 10px 0 9px;
  text-align: center;
  background-color: #fee0b5;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ffffff), color-stop(0.25, transparent),color-stop(0.5, transparent), color-stop(.5, #ffffff),color-stop(.75, #ffffff), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
}
.title_txt{
  background: #fff;
  color: #ff9600;
  font-weight: bold;
  font-size: 24px;
  line-height: 1em;
  text-align: left;
  width: 95%;
  margin: 0 auto;
  padding: 10px 0 7px 40px;
  border: 1px #fff solid;
  border-radius: 15px;
  box-sizing: border-box;
  letter-spacing: 1px;
}
.point01 .title_txt{
  font-size: 21px;
}
.title_num{
  position: absolute;
  top: -10px;
  left: 10px;
}
.pos_img{
  margin: 10px 0;
  position: relative;
}

/* point01 */
.point01 .contents_title{
  margin-top: 20px;
}
/* slick_slider */
.slider_title_area{
  margin: 15px 0 10px;
}
ul.slider:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.slider_title_area ul li{
  display: block;
  width: 89px;
  vertical-align: top;
  padding-right: 7px;
  float: left;
}
.slider_title_area ul li:last-child{
  padding-right: 0;
}
.slider_title_area .genre_name_w{
  margin: 0 auto 3px;
  width: 85px;
  background: #FFF;
  border: 1px solid #0088CF;
  border-radius: 2px;
  text-align: center;
  font-size: 11px;
  color: #0088CF;
}
.slider_title_area .genre_name_w a{
  display: block;
  text-decoration: none;
}
.genre_name_w:hover{
  background: #f3f3f3;
}
.slider_title_area li .slider_thum{
  display: table-cell;
  height: 130px;
  vertical-align: middle;
  text-align: center;
  border: #DDDDDD solid 1px;
  box-sizing: border-box;
  background: #FFFFFF;
}
.slider_title_area li .slider_thum img{
  width: 100%;
  max-height: 128px;
}
.slider_title_area li .slider_title{
  height: 23px;
  margin: 0 auto;
  padding: 3px 4px 10px;
  overflow: hidden;
}
.slider_title_area li .slider_title a{
  display: block;
  height: 22px;
  line-height: 1.2;
  font-size: 10px;
  color: #626D77;
  overflow: hidden;
}
/* comicArea magazine_logo */
section.comicArea ul{
  margin: auto;
}
section.comicArea ul li{
  width: 103px;
  float: left;
  text-align: center;
  overflow: hidden;
  margin: 0 5px 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #FFF;
}
section.comicArea ul li:nth-child(7n){
  margin: 0 0 5px 0;
}
.magazine_logo figure div.thumb a{
  display: block;
  padding: 4px 0 5px;
}
.magazine_logo figure div.thumb img{
  width: 95%;
  height: auto;
}

/* point02 */
.contents_area.point02 .pos_img{
  margin: 20px 0 40px;
}
.point02_txt1{
  position: absolute;
  top: 14px;
  left: 475px;
  font-size: 23px;
}
.point02_txt2{
  position: absolute;
  top: 70px;
  left: 475px;
  font-size: 23px;
}
.point02_txt1 span,
.point02_txt2 span{
  font-size: 140%;
}
.point02_imgl{
  position: absolute;
  bottom: 0;
  left: 310px;
}
.point02_imgr{
  position: absolute;
  bottom: 0;
  right: 20px;
}

/* point04 */
section.contents_area.point04{
  margin-bottom: 50px;
}
.point04.table{
  display: table;
  border-collapse: separate;
  border-spacing: 10px 7px;
  margin-top: 15px;
}
.point04.subtitle{
  background: #ff9600;
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  line-height: 1em;
  letter-spacing: 1px;
  width: 225px;
  text-align: center;
  padding: 7px 0 5px;
  border: 1px #ff9600 solid;
  border-radius: 20px;
  display: table-cell;
  vertical-align: middle;
}
.point04.subtxt{
  display: table-cell;
  font-size: 19px;
  vertical-align: middle;
}
.point04_arrow{
  position: relative;
  text-align: center;
  color: #ffd9b7;
  font-size: 26px;
  line-height: 1em;
  height: 30px;
}
.point04_arrow:after{
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -15px;
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: #ffc896 transparent transparent transparent;
  box-sizing: border-box;
}
.point04.align_c{
  font-size: 18px;
}

/* thum7 */
ul.thum7_text_box{
  margin: 10px auto;
}
ul.thum7_text_box li{
  display: block;
  width: 101px;
  float: left;
  text-align: center;
  padding-right: 9px;
}
ul.thum7_text_box li:last-child{
  padding: 0;
}
ul.thum7_text_box .genre_name_w{
  margin: 0 auto 4px;
  width: 98px;
  background: #FFF;
  border: 1px solid #ff7b0f;
  border-radius: 2px;
  text-align: center;
  font-size: 12px;
  color: #ff7b0f;
}
.h_long_thum_w figure img{
  max-height: 140px;
  max-width: 102px;
  border: 1px #ddd solid;
  box-sizing: border-box;
}
p.icon{
  margin-top: 3px;
}
p.icon img{
  width: 100%;
  height: auto;
}

/* point05 */
a.point05_link1{
  display: inline-block;
}
.reviewnum_area{
  position: absolute;
  top: 42px;
  left: 62px;
  font-size: 18px;
  font-weight: bold;
  color: #433;
  z-index: 1;
}
.reviewnum_area span{
  font-size: 135%;
}

/* no_member
-------------------------------------------------------------*/
.no_member{
  background: #FFF;
  text-align: center;
  margin-bottom: 40px;
}
.no_member a{
  display: block;
}
.no_member img{
  width: 640px;
  height: auto;
}

/* step4_area
-------------------------------------------------------------*/
/* cm_main_wrapper slider */
#cm_main_wrapper{
  width:100%;
  margin-bottom: 20px;
}
#cm_main_wrapper:after{
  content: " ";
  display: block;
  clear: both;
}
#cm_main_wrapper #cm_main_right{
  background: #FFF;
  position:relative;
  margin:auto;
  width: 100%;
  text-align:center
}
#cm_main_wrapper .cm_main_movie_1,
#cm_main_wrapper .cm_main_movie_2,
#cm_main_wrapper .cm_main_movie_3,
#cm_main_wrapper .cm_main_movie_4{
  padding: 0;
}
#cm_main_right .slick-slider{
  margin-bottom: 0;
}
#cm_main_wrapper .slick-slide{
  height: 500px;
}
#cm_main_wrapper .slick-slide:focus{
  outline: none;
}
#cm_main_wrapper .slick-slide img{
  width: 100%;
  max-width: 770px;
  height: auto;
  text-align: center;
  margin: 0 auto;
}
#cm_main_wrapper .slick-prev{
  left: 30px;
  z-index:100;
  width: 37px;
  height: 37px;
}
#cm_main_wrapper .slick-next{
  right: 30px;
  z-index:99;
  width: 37px;
  height: 37px;
}
#cm_main_wrapper .slick-prev:before,
#cm_main_wrapper .slick-next:before{
  font-size: 37px;
  color: #FF7B0F;
}
#cm_main_wrapper .slick-dots{
  position: absolute;
  bottom: -10px !important;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
  z-index: 20000;
}
.slick-dots li.slick-active button:before{
  opacity: 0.7;
  color: #FF7B0F !important;
}

/* payments_area */
.pc_payments_area{
  width: 770px;
  margin: 0 auto;
}
.payments_area{
  width: 770px;
  display: table;
  margin: 3px auto;
  border: 2px #ff9600 solid;
  box-sizing: border-box;
  border-radius: 3px;
}
.pc_payments_area .payments_area{
  float: left;
  width: 365px;
  height: 187px;
}
.pc_payments_area .payments_area:first-child{
  width: 400px;
}
.pc_payments_area .payments_area:last-child{
  margin-left: 5px;
}
.carrier_paybox{
  display: table-cell;
}
.carrier_paybox.left{
  background: #ff9600;
  width: 102px;
  vertical-align: top;
  padding-top: 15px;
}
.carrier_paybox.left img{
  width: 100%;
  height: auto;
}
.carrier_paybox.right{
  padding: 8px;
}
.kind{
  display: inline-block;
  vertical-align: middle;
}
.payments_attention {
  margin-top: 8px;
}
.payments_attention p {
  font-size: 13px;
  font-weight: bold;
}

/* credit */
.credit_payment {
  padding-top: 3px;
}
.kind.credit{
  float: left;
  padding: 3px;
}
.kind.credit img {
  width: 84px;
  height: auto;
}

/* carrier */
.carrier_payment .payment_area + .payment_area {
  margin-top: 7px;
}
.kind.carrier1 {
  display: block;
}
.kind.carrier2 {
  display: block;
}
.kind.carrier1 span, .kind.carrier2 span, .kind.carrier3 span{
  display: inline-block;
  width: 150px;
  padding: 7px 0;
  background: #D72853;
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  margin-bottom: 1px;
}
.kind.carrier2 span{
  background: #EA6924;
}
.kind.carrier3 span{
  background: #4D4B4B;
}

/* other */
.other_payment.lpap {
  margin-top: 3px;
}
.kind.others4 img {
  height: 50px;
  width: auto;
}
.kind.others4 + .kind.others4 {
/*  margin-left: 15px;*/
}
.kind.others4 {
  width: 180px;
  text-align: center;
}
.other_payment + .other_payment {
  margin-top: 8px;
}
.kind.others2 {
  padding: 0 3px 3px;
}
.kind.others2 img {
  height: 76px;
  width: auto;
}
.kind.others2.rp img {
  border-radius: 5px;
}
.kind.others1{
  float: left;
  padding: 3px;
}
.kind.others1 + .kind.others1 {
  padding: 3px 6px;
}
.kind.others1 img {
  width: 76px;
  height: auto;
}
.rpaywidget_wrapper {
  margin-left: 3px;
  overflow: hidden;
}
iframe#rakuten_point_parts {
  padding: 5px 5px 5px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* howto_area
-------------------------------------------------------------*/
.maincontent p{
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

/* howto1 */
.app_install_btn_area{
  margin: 10px auto;
  width: 350px;
}
.app_install_btn_area a{
  display: block;
  color: #FFF;
  text-decoration: none;
}
.app_install_btn_area a:hover{
  text-decoration: none;
}
.app_install_btn{
  position: relative;
  padding: 8px 0;
  background: #F90;
  line-height: 22px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-indent: -5px;
  color: #fff;
  border-radius: 3px;
  box-sizing: border-box;
}
.app_install_btn img{
  margin-right: 5px;
  box-shadow: 0px 0px 2px #FFF;
  border-radius: 8px;
}
.arrow{
  position: absolute;
  top: 18px;
  right: 8px;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #FFF;
  box-sizing: border-box;
}
/* howto1 app */
.explain_area{
  margin: 20px;
}
.explain_area h3{
  margin-bottom: 5px;
  padding-left: 7px;
  border-bottom: 2px solid #F90;
  line-height: 22px;
  font-size: 17px;
  font-weight: bold;
  text-align: left;
}
.ex_detail{
  width: 730px;
  margin: 0 auto;
}
.ex_detail ul {
  display: flex;
  flex-wrap: wrap;
}
.howto1 .ex_detail li {
  width: calc(48% - 1px);
  height: 76px;
  padding: 1%;
  border-bottom: 1px #ffeed5 solid;
  border-right: 1px #ffeed5 solid;
  box-sizing: border-box;
}
.howto1 li .ex_d_imgbox {
  padding-right: 5px;
  float: left;
}
.howto1 li .ex_d_txtbox {
  padding: 3px 5px 0 0;
  margin-left: 65px;
  font-size: 13px;
}
/* howto2 */
table.point_pay_method_list_inner_table{
  width: 100%;
  background: #FFF;
  margin: 20px auto 4px;
  border-top: 1px solid #CDCDCD;
  font-size: 14px;
}
table.point_pay_method_list_inner_table th{
  text-align: center;
  border-bottom: 1px solid #CDCDCD;
  border-left: 1px solid #CDCDCD;
  background:#F2F2F2;
}
table.point_pay_method_list_inner_table th:first-child{
  border-left: none;
}
table.point_pay_method_list_inner_table td:first-child{
  border-left: none;
  padding: 6px 0 4px;
}
table.point_pay_method_list_inner_table td{
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #CDCDCD;
  border-left: 1px solid #CDCDCD;
  padding: 5px;
}
table.point_pay_method_list_inner_table td div{
  font-size: 16px;
}
table.point_pay_method_list_inner_table td.corse_img{
  background:#FEFBEC;
  text-align:left;
}
.padding_div{
  padding: 5px 0;
}
.point_point_text{
  font-size: 120%;
  color: #F60;
  font-weight: bold;
  margin-left: 10px;
}

/* howto3 */
section#prArea {
  background: #ff9600;
  border: 1px #ff9600 solid;
}

/* no_regist
-------------------------------------------------------------*/
.no_regist{
  text-align: center;
  margin-bottom: 20px;
}
.no_regist a{
  display: block;
}
.no_regist img{
  width: 654px;
  height: auto;
}

/* faq
-------------------------------------------------------------*/
.maincontent .help_top {
  width: 55%;
  background: #ffffe2;
  background: -webkit-gradient(linear, center top, center bottom, from(#fffffc), to(#ffffe2));
  color: #242424;
  font-weight: bold;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  margin: 5px auto 20px auto;
  border: 1px solid #C4C4C4;
  border-radius: 5px;
}
h2.faq_title.bg_or{
  border-top: 2px solid #FF9E00;
}
a:hover{
  opacity: 0.7;
}
.faq .maincontent a{
  text-decoration: none;
}

.btn2_area li {
  height: 54px;
}