@charset "UTF-8";

/* layout
-----------------------------------------------*/
.co_container {
text-align: center;
background: #FFF;
}
.contents_right {
text-align: center;
float: right;
width: 780px;
}

/* select_btn
-----------------------------------------------*/
.select_area ul{
display: inline-block;
}
.margin_bottom5 {
margin-bottom: 5px;
}
.select_area li{
list-style: none;
background: #FFF;
border: 1px solid #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float: left;
height: 50px;
margin: 5px 3px;
padding: 0 5px;
text-align: center;
vertical-align: middle;
width: 175px;
}
.select_area .genre_cell{
display: table-cell;
width: 175px;
height: 50px;
line-height:50px;
text-align: center;
vertical-align: middle;
font-size: 13px;
font-weight: bold;
color:#333;
}
.select_area li a:hover{
text-decoration:none;
}
.girl_css .select_area li.selected{
background: #FFE5EE;
}
.boy_css .select_area li.selected{
background: #DBF0FF;
}
.boyslove_css .select_area li.selected{
background: #C2E6F3;
}
.teenslove_css .select_area li.selected{
background: #FCE796;
}

/* contents
-----------------------------------------------*/
.title_area {
text-align: left;
margin: 0 auto;
}
.girl_css .title_area {
background: #FF6E78;
border: 1px solid #FF3B49;
}
.boy_css .title_area {
background: #0185E5;
border: 1px solid #006CBB;
}
.boyslove_css .title_area {
background: #00AAE6;
border: 1px solid #008EC0;
}
.teenslove_css .title_area {
background: #FC0;
border: 1px solid #EDBD00;
}
.contents_right .title_area .main_title {
padding-left: 8px;
margin: 0;
color: #FFF;
font-weight: bold;
font-size: 12px;
text-align: left;
line-height: 28px;
position: relative;
}
.contents_right .title_area .main_title img {
width: 28px;
margin: 0 6px 2px 0;
}
.contents_right .title_area .main_title .font_14 {
font-size: 17px;
vertical-align: middle;
}
.banner_area ul {
margin: 0 -15px 0 11px;
}
.banner_area .banner_box {
float: left;
display: inline;
text-align: center;
overflow: hidden;
margin: 0 15px 15px 0;
}
.banner_area .banner_img {
}
.banner_area .banner_img img {
width: 240px;
}
.banner_area .banner_title {
width: 230px;
height: 16px;
text-align: center;
padding: 3px 5px;
overflow: hidden;
}
.banner_area .banner_title a {
display: block;
height: 18px;
line-height: 18px;
font-size: 14px;
}
.big_banner_area ul {
margin: 0 -15px 0 11px;
}
.big_banner_area .banner_box {
float: left;
display: inline;
width:49%;
text-align: left;
overflow: hidden;
margin: 0 0 15px 0;
}
.big_banner_area .banner_img {
}
.big_banner_area .banner_img img {
width: 369px;
}
.big_banner_area .banner_title {
text-align: center;
padding: 3px 5px;
height: 12px;
overflow: hidden;
}
.big_banner_area .banner_title a {
font-size: 14px;
}

/* new_regist
-----------------------------------------------*/
.new_regist{
border: 1px solid #FFBC58;
text-align: center;
padding: 5px 0;
background: #FFFBE9;
border-radius: 3px;
margin: 3px;
}
.new_regist a{
text-decoration: none;
}
.new_regist_text{
font-size: 10px;
margin-bottom: 8px;
margin-top: 5px;
}
.new_regist .coupon_text{
margin-top: -5px;
font-size: 10px;
color: #F03;
}
.new_regist_btn{
border: 1px solid #f90;
background: #f90;
color: #fff;
border-radius: 3px;
padding: 10px 0;
font-size: 18px;
font-weight: bold;
margin: 5px;
}
.new_regist_btn:hover{
background: #fc0;
}

/* more_link
-----------------------------------------------*/
.more_link {
padding:0 10px 5px 0;
font-size: 14px;
text-align:right;
}
.more_link a,
.more_link a:hover {
color: #FEB6FD;
}

/* to_genre_top
-----------------------------------------------*/
.bnr_genretopLink {
margin: 0 auto;
padding: 4px 2% 12px;
background: #fff;
text-align: right;
}
.bnr_genretopLink a {
position: relative;
display: inline-block;
padding-right: 13px;
font-size: 13px;
color: #333;
line-height: 1;
}
.bnr_genretopLink a:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
right: 1%;
width: 6px;
height: 6px;
margin-top: -4px;
border-top: 1px solid #0066c0;
border-right: 1px solid #0066c0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.bnr_genretopLink.girl a:after {
border-top: 1px solid #FF6E78;
border-right: 1px solid #FF6E78;
}
.bnr_genretopLink.boy a:after {
border-top: 1px solid #0185E5;
border-right: 1px solid #0185E5;
}
.bnr_genretopLink.tl a:after {
border-top: 1px solid #FFC926;
border-right: 1px solid #FFC926;
}
.bnr_genretopLink.bl a:after {
border-top: 1px solid #01AAE6;
border-right: 1px solid #01AAE6;
}
.bnr_genretopLink.sexy a:after {
border-top: 1px solid #DA4FA8;
border-right: 1px solid #DA4FA8;
}
/* to_genre_top
-----------------------------------------------*/
.bottom_more_links {
display: flex;
justify-content: center;
}
.bnr_more_link.link_btn {
margin: 5px 8px 20px;
width: 50%;
}
.bnr_more_link.link_btn a{
position: relative;
display: block;
padding: 15px 30px 15px 20px;
background: #fff;
border-radius:8px;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #333;
line-height: 1;
}
.bnr_more_link.link_btn a:hover{
opacity: .7;
text-decoration: none;
}
.more_link_girl .bnr_more_link.link_btn a {
color:#FF6E78;
border:solid 1px #FF6E78;
}
.more_link_boy .bnr_more_link.link_btn a {
color:#0185E5;
border:solid 1px #0185E5;
}
.more_link_tl .bnr_more_link.link_btn a {
color:#f9a629;
border:solid 1px #FFC926;
}
.more_link_bl .bnr_more_link.link_btn a {
border:solid 1px #01AAE6;
color:#01AAE6;
}
.more_link_sexy .bnr_more_link.link_btn a {
color:#DA4FA8;
border:solid 1px #DA4FA8;
}

.bnr_more_link.link_btn a:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
right: 14px;
width: 6px;
height: 6px;
margin-top: -5px;
border-top: 2px solid #f60;
border-right: 2px solid #f60;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.more_link_girl .bnr_more_link.link_btn a:after {
border-top: 2px solid #FF6E78;
border-right: 2px solid #FF6E78;
}
.more_link_boy .bnr_more_link.link_btn a:after {
border-top: 2px solid #0185E5;
border-right: 2px solid #0185E5;
}
.more_link_tl .bnr_more_link.link_btn a:after {
border-top: 2px solid #FFC926;
border-right: 2px solid #FFC926;
}
.more_link_bl .bnr_more_link.link_btn a:after {
border-top: 2px solid #01AAE6;
border-right: 2px solid#01AAE6;
}
.more_link_sexy .bnr_more_link.link_btn a:after {
border-top: 2px solid #DA4FA8;
border-right: 2px solid #DA4FA8;
}

/* sideNaviArea
-----------------------------------------------*/
#sideNaviArea *,
#sideNaviArea *:before,
#sideNaviArea *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sideNaviArea {
float: left;
width: 182px;
text-align: left;
}
#sideNaviArea .naviBlock + .naviBlock {
margin-top: 20px;
}
#sideNaviArea .naviBlock.navBanner + .naviBlock.navBanner {
margin-top: 8px;
}
#sideNaviArea .navBanner a {
display: block;
}
#sideNaviArea .navBanner a + a {
margin-top: 8px;
}
#sideNaviArea .navBanner img {
width: 100%;
height: auto;
}
#sideNaviArea .naviBlock .title {
font-size: 14px;
font-weight: bold;
height: 28px;
line-height: 28px;
border-bottom: 2px solid #ddd;
margin-bottom: 6px;
padding-left: .3em;
}
#sideNaviArea .linkArea {
line-height: 2;
}
#sideNaviArea .linkArea li {
padding: 0 .3em;
}
#sideNaviArea .linkArea a {
display: block;
color: #333;
font-size: 12px;
}
#sideNaviArea .linkArea .mark {
padding-left: 1.3em;
position: relative;
}
#sideNaviArea .linkArea .mark + .linkTitle {
border-top: 1px solid #d4d4d4;
margin-top: 6px;
padding-top: 6px;
}
#sideNaviArea .linkArea .child:before {
display: block;
content: "└";
position: absolute;
top: 1px;
left: 0;
}
#sideNaviArea .linkArea .mark .check:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
margin: -4px 2px 0 5px;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #ff8c2f;
}
#sideNaviArea .linkArea .mark .list:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
margin: -4px 2px 0 5px;
border-style: solid;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #777;
}
#sideNaviArea .linkArea + .moreLink {
border-top: 1px solid #d4d4d4;
margin-top: 6px;
padding-top: 6px;
}
#sideNaviArea .moreLink {
font-size: 12px;
text-align: right;
padding-right: 10px;
}
#sideNaviArea .moreLink a {
color: #ff6600;
}
#sideNaviArea .naviBlock .sub_title {
padding: 0 .3em;
font-weight: bold;
height: 26px;
line-height: 26px;
}
#sideNaviArea .naviBlock ul + .sub_title {
margin-top: 5px;
border-top: 1px solid #eee;
padding-top: 5px;
height: 31px;
}
#sideNaviArea .btnNewRegist {
background: #fffbe9;
border: 1px solid #ffbc58;
border-radius: 3px;
padding: 8px 0 10px;
text-align: center;
}
#sideNaviArea .btnNewRegist.new2 {
padding: 10px 0 4px;
}
#sideNaviArea .btnNewRegist .text {
margin: 0 auto 3px;
font-size: 10px;
}
#sideNaviArea .btnNewRegist .registBtn {
display: block;
width: 90%;
height: 44px;
line-height: 44px;
margin: 0 auto;
background: #f90;
border: 1px solid #f90;
border-radius: 3px;
font-size: 18px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#sideNaviArea .btnNewRegist .link {
margin-top: 6px;
}
#sideNaviArea .naviBlock.navMagazineLogo li {
display: flex;
}
#sideNaviArea .naviBlock.navMagazineLogo li a {
width: 49%;
padding: 2px 0;
}
#sideNaviArea .naviBlock.navMagazineLogo li a + a {
margin-left: 2%;
}
#sideNaviArea .naviBlock.navMagazineLogo ul + .moreLink {
border-top: 1px solid #d4d4d4;
margin-top: 6px;
padding-top: 6px;
}
#sideNaviArea .naviBlock.btnQuestionnaire {
display: block;
background: #fffaf2;
border: 1px solid #ffb630;
border-radius: 3px;
}
#sideNaviArea .naviBlock.btnQuestionnaire a {
display: block;
padding: 6px;
color: #333;
font-size: 12px;
line-height: 1.4;
}
#sideNaviArea .naviBlock.btnQuestionnaire a + a {
border-top: 1px solid #ffb630;
}
#sideNaviArea .naviBlock.btnQuestionnaire .btn_text {
font-weight: bold;
}