@charset "utf-8";
/* CSS Document */


/* -----------------------------------------------------------
	マイページ共通
-------------------------------------------------------------- */

#mypage #main_contents {
	border-top: 4px solid #000;
	background: #f2f2f2;
}

/* -----------------------------------------------------------
	マイページ共通：ヘッダー
-------------------------------------------------------------- */

#mypage #mypage_header {
	width: 1080px;
	padding:0 0 20px 0;
	margin: 0 auto;
	display: flex;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
}

#mypage #mypage_header .user {
	width: 115px;
	padding: 25px 0 0 0;
}

#mypage #mypage_header figure {
	position: relative;
	overflow: hidden;
	width: 97px;
}
#mypage #mypage_header figcaption {
	position: absolute;
	bottom: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 40%;
	background-color: rgba(0,0,0,.8);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
#mypage #mypage_header input {
	cursor: pointer;
}
#mypage #mypage_header figure:hover figcaption {
	bottom: 0;
	left: 0;
	cursor: pointer;
}
#mypage #mypage_header .txt {
	display: inline-block;
	padding: 13px 0 10px 0;
	width: 97px;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color:#FFF;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#mypage #mypage_header .txt:lang(ja) {
	font-size: 1.4em;
}
#mypage #mypage_header .txt input[type="file"] {
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	font-size: 100px;
	cursor: pointer;
}
#mypage #mypage_header figcaption a{
	display:block;
	width: 140px;
	height: 200px;
	color:#FFF;
	text-decoration:none;
}

#mypage #mypage_header .user_profile {
	width: 580px;
	padding: 27px 128px 0 0;
}
#mypage #mypage_header .user_profile .profile_top {
	display: flex;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
}
#mypage #mypage_header .user_profile .profile_bottom {
	margin: 15px 25px 0 0;
	font-size: 1.2em;
	color: #737373;
	line-height: 1.8;
}

#mypage #mypage_header .user_profile .name {
	margin: 3px 15px 0 0;
	font-size: 1.8em;
	font-weight: bold;
}
#mypage #mypage_header .user_profile .sns_area {
}

#mypage #mypage_header .number {
	width: 257px;
	padding: 37px 0 0 0;
}
#mypage #mypage_header .number li {
	float: left;
	width: 127px;
	padding: 5px 0 2px 0;
	font-size: 1.1em;
	text-align: center;
	border-right: 1px solid #e7e7e7;
}
#mypage #mypage_header .number li:last-child {
	border-right: none;
}
#mypage #mypage_header .number li em {
	display: inline-block;
	padding: 10px 0;
	font-size: 2.2em;
	font-weight: bold;
}
#mypage #mypage_header .number li span {
	background: #fc0;
	border-radius: 5px;
	padding: 5px 10px;
	color: #000;
	font-weight: bold;
}

/* -----------------------------------------------------------
	下層ページ　マイページ共通：ナビ
-------------------------------------------------------------- */

#mypage #mypage_nav {
	width: 1080px;
	margin: 0 auto;
}

#mypage #mypage_nav ul {
	margin: 0 0 0 -12px;
}

#mypage #mypage_nav li {
	float: left;
	margin: 0 0 0 12px;
	font-size: 1.6em;
	text-align: center;
	background: #eee;
}
#mypage #mypage_nav li a {
	display: block;
	width: 170px;
	height: 50px;
	color: #333;
	padding: 18px 0 0 0;
	text-align: center;
	text-decoration: none;

	border: 2px solid #000;
	border-bottom: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mypage #mypage_nav li:hover {
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	background: #000;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mypage #mypage_nav li:hover:lang(ja) {
	font-size: 2em;
}
#mypage #mypage_nav li a:hover {
	color: #fff;
	padding: 15px 0 0 0;
	border: 2px solid #000;
}
#mypage #mypage_nav li.select {
	display: block;
	width: 170px;
	height: 50px;
	font-size: 1.8em;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 15px 0 0 0;
	background: #000;

	border: 2px solid #000;
	border-bottom: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mypage #mypage_nav li.select:lang(ja) {
	font-size: 2em;
}
#mypage #mypage_nav li .balloon {
	position: relative;
	top: -65px;
	left: 60px;
}
#mypage #mypage_nav li .balloon span {
	width: 30px;
	height: 28px;
	padding: 8px 0 0 0;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	background: #FF62AE;
	border-radius: 17px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	position: absolute;
}
#mypage #mypage_nav li span::after {
	content: "";
	border-top: 13px solid #FF62AE;
	border-right: 20px solid transparent;
	position: absolute;
	bottom: -5px;
	left: 5px;
	width: 0;
	height: 0;
}




/* -----------------------------------------------------------
	トップページ（漫画の棚）・レビュー登録（review）・棚の並び替え
-------------------------------------------------------------- */

#shelf_total_num {
	display: none;
}
#mypage #main_top_contents {
	padding: 0 0 100px 0;
	border-top: 4px solid #000;
	background: url(../img/bg_mypage.png?20170202);
}
#mypage #mypage_top {
}

#mypage .comic_menu {
	width: 1080px;
	margin: 0 auto;
}
#mypage .comic_menu ul {
	float: left;
	height: 60px;
	margin: 15px 0 0 0;
	border: 2px solid #432203;
	border-radius: 3px;
	display: block;
	box-shadow: 0 1px rgba(255,255,255,0.5);
}
#mypage .comic_menu li {
	float: left;
	background: rgba(255,255,255,0.65);
	border-left: 1px solid #432203;
	box-shadow: 1px 1px rgba(255,255,255,0.5) inset;
}
#mypage .comic_menu li:hover {
	background: rgba(204,102,0,0.3);
}
#mypage .comic_menu li.ov {
	background: rgba(204,102,0,0.3);
}
#mypage .comic_menu li:first-child {
	border-left: none;
}
#mypage .comic_menu li a {
	width: 118px;
	padding: 9px 0 7px;
	font-size: 1.3em;
	color: #493721;
	text-align: center;
	line-height: 1.2;
	display: inline-block;
	text-decoration: none;
}
#mypage .comic_menu li.ov a {
	color: #FFF;
}
#mypage .comic_menu li a:hover {
	color: #fff;
}
#mypage .comic_menu li a.ov{
	background: rgba(204,102,0,0.1);
}
#mypage .comic_menu li a span {
	font-size: 1.85em;
	font-weight: bold;
}
#mypage .comic_menu .option {
	float: right;
	margin: 15px 0 0 0;
}
#mypage .comic_menu #searchform_container {
	float: left;
}
#mypage .comic_menu input#word {
	width: 180px;
	height: 30px;
	font-size: 1.3em;
	padding: 0 5px;
	border: 2px solid #442307;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
#mypage .comic_menu input#submit {
	width: 36px;
	height: 34px;
	border: medium none;
	background-position: -390px -100px;
	cursor: pointer;
}
#mypage .comic_menu .option p.change {
	float: left;
	margin: -3px 0 0 0;
}
#mypage .comic_menu .option p.change a {
	color: #fff;
	font-size: 1.4em;
}
#mypage .comic_menu .option p.change i {
	width: 24px;
	height: 24px;
	margin: 0 5px 0 0;
	display: inline-block;
	background-position: -330px -5px;
	position: relative;
	top: 8px;
}

#mypage .comic_shelf {
	width: 1120px;
	min-height: 260px;
	margin: 0 auto;
	background: url(../img/bg_mypage_shelf.png) repeat-y;
}
#mypage .comic_shelf ul {
	width: 965px;
	margin: 25px auto;
}
#mypage .comic_shelf li {
	float: left;
	width: 140px;
	height: 200px;
	margin: 0 25px 61px 0;
}
#mypage .comic_shelf li:nth-child(6n) {
	margin: 0 0 60px 0;
}
#mypage .comic_shelf li .evaluation {
	height: 23px;
	background: rgba(0,0,0,0.8);
	position: relative;
	top: -23px;
	text-align: center;
	z-index:100;
}
#mypage .comic_shelf li p.star {
	float: none;
	display: inline-block;
	margin: 1px 10px 0 0;
	font-size: 1.2em;
	color: #fff;
	font-weight: bold;
}
#mypage .comic_shelf li p.star i {
	margin: 0 4px 0 0;
	position: relative;
	top: 3px;
}
#mypage .comic_shelf li p.heart {
	display: inline-block;
	margin: 0 0 0 0;
	font-size: 1.2em;
	color: #fff;
	font-weight: bold;
}
#mypage .comic_shelf li p.heart i {
	width: 15px;
	height: 13px;
	margin: 0 5px 0 0;
	display: inline-block;
	background-position: -70px -5px;
	position: relative;
	top: 3px;
}



#mypage .comic_shelf li figure {
	position: relative;
	overflow: hidden;
	width: 140px;
}
#mypage .comic_shelf li figcaption {
	position: absolute;
	bottom: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
#mypage .comic_shelf li figure:hover figcaption {
	bottom: 0;
	left: 0;
	cursor: pointer;
}

#mypage .comic_shelf li figcaption .txt{
	padding:125px 10px 10px 10px;
	width:100px;
	color:#FFF;
	font-weight:normal;
	font-size:1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height:1.6;
}
#mypage .comic_shelf li figcaption .txt span{
	color:#DDD;
	font-size:1.0em;
}

#mypage .comic_shelf li figcaption a{
	display:block;
	width: 140px;
	height: 200px;
	color:#FFF;
	text-decoration:none;
}

#mypage .comic_shelf li figcaption .txt:after{
	content:'';
	position:absolute;
	top:35px;
	left:50%;
	margin-left:-40px;
	width:75px;
	height:72px;
	background:url(../img/icon.png?20170401) no-repeat;
	background-position:-360px -5px;
}



/* レビュー投稿 */

#mypage .review_contribution {
	width: 770px;
	margin: 25px auto 0;
	background: #f9f1e8;
	border-radius: 5px;
	padding: 30px 20px;
}
#mypage .review_contribution h2 {
	margin-top: 5px;
	padding-bottom: 23px;
	width: 600px;
	float: left;
	font-size: 1.6em;
}
#mypage .review_contribution h2 span {
	display: inline-block;
 	margin-right: 0.3em;
	font-size: 1.75em;
}
#mypage .review_contribution h3 {
	margin: 3px 0 0;
	color: #333;
	font-size: 1.6em;
	font-weight: bold;
}
#mypage .review_contribution h3 span.attention {
	padding-left: 10px;
	color: #777;
	font-size: 0.75em;
	font-weight: normal;
}
#mypage .review_contribution #btn_submit {
	border-color: #ccc;
	border-bottom-width: 3px;
	background: #f1f1f1;
	background -moz-linear-gradient(top, f9f9f9 0%, #f1f1f1);
	background -webkit-linear-gradient(linear, left top , left bottom, from(#f9f9f9), to(#f1f1f1));
	color: #333;
	text-shadow: none;
}
#mypage .review_contribution .header_btn {
	float: right;
	width: 158px;
	font-size: 1.4em;
}
#mypage .review_contribution .footer_btn {
	display: block;
	float: none;
	margin: 30px auto 0;
	width: 245px;
	height: 55px;
	border-radius: 7px;
}
#mypage .review_contribution .header_btn:active {
	border-bottom-width: 1px;
}
#mypage .review_contribution_thumbnails {
	width: 170px;
	min-height: 245px;
	padding: 0 20px 25px 0;
	float: left;
}
#mypage .review_contribution_questions {
	float: left;
	width: 580px;
}
#mypage .review_contribution_questions .status_labels,
#mypage .review_contribution .tag_candidates .tag_labels {
	padding: 15px 0 25px;
}
#mypage .review_contribution_questions .status_labels span,
#mypage .review_contribution .tag_candidates .tag_labels span {
	display: inline-block;
	background: #ffe8cc;
	padding: 5px 8px;
	border: 1px solid #d0c2a6;
	border-radius: 3px;
	color: #8a5f26;
	font-size: 1.2em;
	cursor: pointer;
}
#mypage .review_contribution_questions .status_labels span:hover,
#mypage .review_contribution_questions .status_labels span.selected,
#mypage .review_contribution .tag_candidates .tag_labels span:hover,
#mypage .review_contribution .tag_candidates .tag_labels span.selected {
	background: #c68539;
	border-color: #a97b19;
	color: #fff;
}
#mypage .review_contribution_questions .status_labels label.favorite {
	position: relative;
	top: 3px;
	color: #007fe1;
	font-size: 1.2em;
}
#mypage .review_contribution_questions .status_labels label.favorite input[type=checkbox] {
	position: relative;
	top: -1px;
}
#mypage .review_contribution_questions_booknum h3 {
	float: left;
	width: 400px;
}
#mypage .review_contribution_questions .read_book_number_input {
	float: right;
	height: 35px;
	color: #444;
	font-size: 1.6em;
	font-weight: bold;
	text-align: right;
}
#mypage .review_contribution_questions .read_book_number_input input {
	width: 3em;
	height: 19px;
	border: none;
	border-radius: 5px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3) inset;
	font-size: 1.125em;
	font-weight: bold;
	text-align: right;
	padding: 7px 5px 5px;
	vertical-align: text-bottom;
}
#mypage .review_contribution_questions .read_slider_box_button {
	position: relative;
	top: 2px;
	display: block;
	float: left;
	width: 24px;
	height: 19px;
	padding: 5px 0 0;
	border: 1px solid #ccc;
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #f1f1f1;
	background -moz-linear-gradient(top, f9f9f9 0%, #f1f1f1);
	background -webkit-linear-gradient(linear, left top , left bottom, from(#f9f9f9), to(#f1f1f1));
	color: #777;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
#mypage .review_contribution_questions .read_slider_box_button:active {
	top: 3px;
	border-bottom-width: 1px;
}
#mypage .review_contribution_questions #read_slider {
	float: left;
	margin: 10px 20px 25px 15px;
	background: #ded2c7;
	border: none;
	width: 493px;
	height: 10px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3) inset;
	cursor: pointer;
}
#mypage .review_contribution_questions #read_slider .ui-slider-handle,
#mypage .review_contribution_questions #read_slider .ui-state-focus,
#mypage .review_contribution_questions #read_slider .ui-state-active {
	top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #ffddb4 !important;
	border: 5px solid #c28238;
	cursor: pointer;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
#mypage .review_contribution_questions #read_slider .ui-slider-range {
	background: #e6b071;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3) inset;
}
#mypage .review_contribution_questions .star_select {
	margin: 15px 0 25px;
	font-size: 1.6em;
}
#mypage .review_contribution_questions .star_select #form_point {
	margin: 0;
	width: 260px;
	height: 40px;
	padding: 6px 5px;
	background-position: 240px 17px;
}
#mypage .review_contribution .comment {
	padding: 20px;
	border: none;
	border-radius: 7px;
	width: 730px;
	height: 280px;
	margin: 20px 0 17px;
	font-size: 1.4em;
	line-height: 1.5;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3) inset;
}
#mypage .review_contribution .option_checks {
	font-size: 1.4em;
	text-align: right;
}
#mypage .review_contribution .option_checks input[type=checkbox] {
	position: relative;
	top: -1px;
	left: -2px;
}
#mypage .review_contribution .tag_candidates {
	margin: 20px 0;
}
#mypage .review_contribution .tag_candidates .tag_labels select {
	display: none;
}


/*		棚の並び替え	　*/

#mypage .comic_search {
	width: 1080px;
	margin: 0 auto;
}
#mypage .comic_search #searchform_container {
	float: left;
	margin: 15px 0 20px 0;
}
#mypage .comic_search select {
	width: 225px;
	height: 30px;
	padding: 2px 10px;
	margin: 0;
	font-size: 1.3em;
	background: #fff url(../img/icon_arrow.png) no-repeat 200px 11px;
	border-radius: 5px;
	border: 2px solid #442307;
}
#mypage .comic_search #submit {
	width: 13em;
	height: 30px;
	color: #fff;
	background: #442307;
	border-radius: 5px;
	border: 2px solid #442307;
}
#mypage .comic_search #submit:hover {
	cursor: pointer;
}
#mypage .comic_search .btn_end {
	float: right;
	margin: 15px 0 0 0;
}


/* -----------------------------------------------------------
	編集
-------------------------------------------------------------- */

#mypage #mypage_edit {
	width: 800px;
	margin: 45px auto;
}
#mypage #mypage_edit h2 {
	font-size: 3em;
	float: left;
}
#mypage #mypage_edit p.attention {
	float: right;
	font-size: 1.4em;
	color: #666;
	margin: 14px 0 0 0;
}
#mypage #mypage_edit span {
	color: #BD5657;
	display: inline-block;
	margin: 0 5px 0 0;
}
#mypage #mypage_edit .edit_area {
	padding: 45px 0 45px 30px;
	margin: 25px 0 0 0;
	background: #fff;
	border-radius: 3px;
}
#mypage #mypage_edit .edit_table {
	width: 100%;
}
#mypage #mypage_edit .edit_table th {
	width: 220px;
	font-size: 1.6em;
	text-align: left;
	vertical-align: middle;
}
#mypage #mypage_edit .edit_table th.optional {
	padding: 0 0 0 18px;
}
#mypage #mypage_edit .edit_table th span {
	font-size: 0.85em;
	position: relative;
	top: -2px;
}
#mypage #mypage_edit .edit_table td {
	padding: 10px 0 10px 0;
}
#mypage #mypage_edit .edit_table td p.name {
	margin: 0 0 0 15px;
	font-size: 1.2em;
	color: #666;
	display: inline-block;
}
#mypage #mypage_edit .edit_table td.gender {
	font-size: 1.6em;
	color: #666;
	display: inline-block;
	margin: 0 0 10px 0;
}
#mypage #mypage_edit .edit_table td.gender label {
	margin: 0 10px 0 0;
}
#mypage #mypage_edit .edit_table td.gender input {
	vertical-align: 1px;
	margin: 0 5px 0 0;
}

#mypage #mypage_edit input[type=text],
#mypage #mypage_edit input[type=password] {
	width: 390px;
	height: 35px;
	font-size: 1.5em;
	margin: 0 0 0 0;
	padding: 1px 5px;
	border: 1px #ccc solid;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
#mypage #mypage_edit select {
	width: 130px;
	height: 30px;
	font-size: 1.5em;
	margin: 0 0 10px 0;
	padding: 1px 5px;
	border: 1px #ccc solid;
	background: #fff url(../img/icon_arrow.png) no-repeat 110px 11px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#mypage #mypage_edit .birth {
	position: relative;
	height: 40px;
}
#mypage #mypage_edit .birth span {
	position: absolute;
	color: #666;
}
#mypage #mypage_edit .birth .birth_month {
	top: 10px;
	left: 0;
}
#mypage #mypage_edit .birth .birth_month:lang(ja) {
	left: 170px;
}
#mypage #mypage_edit .birth .birth_month::after {
	content: "/";
	display: block;
	font-size: 1.5em;
	position: absolute;
	bottom: 13px;
	right: -23px;
}
#mypage #mypage_edit .birth .birth_month:lang(ja)::after {
	content: "月";
}
#mypage #mypage_edit .birth .birth_year {
	top: 10px;
	left: 170px;
}
#mypage #mypage_edit .birth .birth_year:lang(ja) {
	left: 0;
}
#mypage #mypage_edit .birth .birth_year:lang(ja)::after {
	content: "年";
	display: block;
	font-size: 1.5em;
	position: absolute;
	bottom: 13px;
	right: -23px;
}
#mypage #mypage_edit textarea {
	font-size: 1.5em;
	padding: 1px 5px;
	border: 1px #ccc solid;
	border-radius: 3px;
}
#mypage #mypage_edit input#btn_submit {
	display: block;
	width: 328px;
	height: 54px;
	padding: 0px 0 0 0;
	margin: 50px auto 0;
}

#mypage #mypage_edit .edit_table .linked_provider {
	display: inline-block;
	position: relative;
	/*width: 130px;*/
	height: 40px;
	border-radius: 5px;
}
#mypage #mypage_edit .edit_table .linked_provider--fb {
	background: #3b579d url(/assets/img/fb_logo_blue_58.png) no-repeat 2px 3px / 29px 29px;
	border-bottom: 2px solid #20356b;
}
#mypage #mypage_edit .edit_table .linked_provider--tw {
	background: #55acee url(/assets/img/twitter_logo_white.png) no-repeat 8px 7px / 29px 29px;
	border-bottom: 2px solid #348dd1;
}
#mypage #mypage_edit .edit_table .linked_provider a {
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 13px 20px 0 42px;
	color: #fff;
	font-size: 1.7em;
	text-decoration: none;
}


/* -----------------------------------------------------------
	マイニュース
-------------------------------------------------------------- */

#mypage #mypage_news {
	width: 1080px;
	margin: 45px auto;
}
#mypage #mypage_news h2 {
	font-size: 3em;
	float: left;
}
#mypage #mypage_news h2 > span {
	font-size: 0.6em;
}
#mypage #mypage_news .right {
	float: right;
	position: relative;
	top: 10px;
}
#mypage #mypage_news .right p.select {
	font-size: 1.3em;
}
#mypage #mypage_news .news_area {
	margin: 30px 0;
}
#mypage .news_area ul {
}
#mypage .news_area li {
	height: 100px;
	padding: 15px;
	margin: 0 0 15px 0;
	background: #fff;
	border-radius: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none;
}
#mypage .news_area .news_left {
	float: left;
	padding: 0 15px 0 0;
}
#mypage .news_area .news_right p.info {
	font-size: 1.2em;
}
#mypage .news_area .news_right p.info span {
	min-width: 85px;
	height: 20px;
	padding: 4px 6px 0;
	margin: 0 10px 0 0;
	text-align: center;
	font-weight: bold;
	color: #fff;
	display: inline-block;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mypage .news_area .news_right p.info span.thankyou {
	background: #FF78A1;
}
#mypage .news_area .news_right p.info span.follow {
	background: #56B128;
}
#mypage .news_area .news_right p.info span.new_review {
	background: #48B9BD;
}
#mypage .news_area .news_right p.info span.up_review {
	background: #FCA442;
}
#mypage .news_area .news_right p.detail {
	font-size: 1.4em;
	margin: 10px 0 0 0;
}
#mypage .news_area .news_right p.detail a {
	font-weight: bold;
}


/* -----------------------------------------------------------
	感想/評価一覧
-------------------------------------------------------------- */

#mypage #mypage_reviews {
	width: 1080px;
	margin: 45px auto;
}
#mypage #mypage_reviews h2 {
	font-size: 3em;
	float: left;
}
#mypage #mypage_reviews h2 > span {
	font-size: 0.6em;
}
#mypage #mypage_reviews .right {
	float: right;
	position: relative;
	top: 10px;
}
#mypage #mypage_reviews .right p.select {
	font-size: 1.3em;
}
#mypage #mypage_reviews .reviews_area {
	margin: 30px 0;
}
#mypage .reviews_area > ul {
}
#mypage .reviews_area > ul > li {
	height: 135px;
	padding: 15px;
	margin: 0 0 15px 0;
	background: #fff;
	border-radius: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#mypage .reviews_area .reviews_left {
	float: left;
	padding: 0 15px 0 0;
}
#mypage .reviews_area .reviews_right {
	float: right;
	width: 950px;
}
#mypage .reviews_right .container {
	float: left;
	width: 850px;
}
#mypage .reviews_right h3 {
	float: left;
	font-size: 1.6em;
	margin: 3px 15px 10px 0;
}
#mypage .reviews_right .btn_evaluation {
	display: inline-block;
	position: relative;
	top: -5px;
}
#mypage .reviews_right .btn_evaluation a {
	padding: 8px 16px 8px 16px;
	font-size: 1.2em;
}
#mypage .reviews_right .btn_evaluation a:active {
	position: static;
	top: 0;
	margin: 2px 0 0 0;
}
#mypage .reviews_right .heart {
	float: right;
	display: inline-block;
	width: 66px;
	height: 62px;
	background-image: url(../img/icon.png);
	background-position: -5px -100px;
	position: relative;
	top: -3px;
	right: 7px;
}
#mypage .reviews_right .heart a {
	font-size: 2em;
	color: #fff;
	font-weight: bold;
	padding: 18px 13px;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
}

#mypage .reviews_right .netabare::before {
	content: "";
	width: 58px;
	height: 59px;
	display: inline-block;
	background-image: url(../img/icon.png);
	background-position: -80px -120px;
	position: relative;
	top: -18px;
	left: 37px;
}
#mypage .reviews_area .reviews_right .star {
	float: left;
	margin: 4px 0 0 0;
}
#mypage .reviews_area .reviews_right .info {
}
#mypage .reviews_area .reviews_right .info p {
	font-size: 1.2em;
	display: inline-block;
	margin: 8px 0 0 15px;
	color: #a0a0a0;
}
#mypage .reviews_area .reviews_right .info a {
	font-weight: bold;
}
#mypage .reviews_area .reviews_right p.story {
	clear: both;
	font-size: 1.3em;
	padding: 4px 0 0 0;
	line-height: 1.5;
}


/* -----------------------------------------------------------
	メッセージ
-------------------------------------------------------------- */

#mypage #mypage_message {
	width: 1080px;
	margin: 45px auto;
}
#mypage #mypage_message h2 {
	font-size: 3em;
	float: left;
}
#mypage #mypage_message h2 span {
	font-size: 0.6em;
}
#mypage #mypage_message .right {
	float: right;
	position: relative;
	top: 10px;
}
#mypage #mypage_message .right p.select {
	font-size: 1.3em;
}
#mypage #mypage_message .right select {
	width: 150px;
	height: 28px;
	padding: 0 5px;
	margin: 0 0 0 10px;
	font-size: 1em;
	background: #fff url(../img/icon_arrow.jpg) no-repeat 130px 11px;
	border-radius: 3px;
	border: 1px solid #dcdcdc;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#mypage .message_area {
	margin: 30px 0;
}
#mypage .message_area ul {
}
#mypage .message_area li {
	margin: 0 0 18px 0;
	min-height: 95px;
	clear: both;
}
#mypage .message_area ul:first-child li:first-child {
	margin: 0 0 38px 0;
}
#mypage .message_area .message_left {
	float: left;
}
#mypage .message_area .message_right {
	float: right;
	width: 930px;
	padding: 18px 15px;
	margin: 0 0 0 auto;
	border-radius: 5px;
	border: 1px solid #ccc;
	background: #fff;
	position: relative;
}
#mypage .message_area .message_right::before,
#mypage .message_area .message_right::after {
	right: 100%;
	top: 40px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#mypage .message_area .message_right::before {
	border-color: rgba(204, 204, 204, 0);
	border-right-color: #ccc;
	border-width: 10px;
	margin-top: -10px;
}
#mypage .message_area .message_right::after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 9px;
	margin-top: -9px;
}
#mypage .message_area .message_right h3 {
	float: left;
	font-size: 1.6em;
}
#mypage .message_area .message_right p.delete {
	float: right;
	font-size: 1.2em;
	color: #aaa;
}
#mypage .message_area .message_right p.delete a {
	color: #aaa;
}
#mypage .message_area .message_right p.delete a:hover {
	color: #333;
	text-decoration: underline;
}
#mypage .message_area .message_right p.comment {
	font-size: 1.6em;
	margin: 13px 0 0 0;
	line-height: 1.5;
}
#mypage .message_area p.comment img {
	max-width: 100%;
}
#mypage .message_area p.comment cite {
	font-size: 0.8em;
	color: #999;
}
#mypage .message_area p.comment cite a {
	color: #999;
}
#mypage .message_area .message_right input[type=text] {
	float: left;
	width: 730px;
	height: 42px;
	font-size: 1.3em;
	margin: 7px 15px 7px 5px;
	padding: 0 15px;
	border: 1px #ccc solid;
	border-radius: 3px;
}
#mypage .message_area .message_right input[type=submit] {
	width: 138px;
	height: 44px;
	padding: 0px 0 0 0;
	margin: 7px 0 7px 0;
}
#mypage .message_area .message_left_others {
	float: left;
	width: 930px;
	padding: 18px 15px;
	margin: 0 0 0 auto;
	border-radius: 5px;
	border: 1px solid #ccc;
	background: #FFFFE7;
	position: relative;
}
#mypage .message_area .message_left_others::after {
	content: '';
	display: block;
	position: absolute;
	border-left: 12px solid #FFFFE7;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	right: -10px;
	top: 20px;
}
#mypage .message_area .message_left_others::before {
	content: '';
	display: block;
	position: absolute;
	border-left: 12px solid #ccc;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	right: -12px;
	top: 20px;
}
#mypage .message_area .message_left_others h3 {
	float: left;
	font-size: 1.6em;
}
#mypage .message_area .message_left_others p.delete {
	float: right;
	font-size: 1.2em;
	color: #aaa;
}
#mypage .message_area .message_left_others p.delete a {
	color: #aaa;
}
#mypage .message_area .message_left_others p.delete a:hover {
	color: #333;
	text-decoration: underline;
}
#mypage .message_area .message_left_others p.comment {
	font-size: 1.6em;
	margin: 13px 0 0 0;
	line-height: 1.5;
}
#mypage .message_area .message_right_others {
	float: right;
}



/* -----------------------------------------------------------
	フォロー
-------------------------------------------------------------- */

#mypage #mypage_following {
	width: 1080px;
	margin: 45px auto;
}
#mypage #mypage_following h2 {
	font-size: 3em;
	float: left;
}
#mypage #mypage_following h2 > span {
	font-size: 0.6em;
}
#mypage #mypage_following .right {
	float: right;
	position: relative;
	top: 10px;
}
#mypage #mypage_following .right p.select {
	font-size: 1.3em;
}
#mypage #mypage_following .follow_area {
	margin: 30px 0;
}
#mypage .follow_area ul {
	margin: 0 0 0 -66px;
}
#mypage .follow_area li {
	float: left;
	width: 220px;
	height: 380px;
	margin: 0 0 0 66px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#mypage .follow_area li .name {
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	padding:0 0 15px 0;
}

#mypage .follow_area li .name span i{
	margin: 0 0 0 3px;
	display: inline-block;
	position: relative;
}
#mypage .follow_area li .name span.icon01 i{
	width: 21px;
	height: 20px;
	background-position: -130px -5px;
	top: 5px;
}
#mypage .follow_area li .name span.icon01:hover i{
	background-position: -130px -30px;
}
#mypage .follow_area li .name span.icon02 i{
	width: 21px;
	height: 19px;
	background-position: -130px -60px;
	top: 5px;
}
#mypage .follow_area li .name span.icon03 i{
	width: 20px;
	height: 21px;
	background-position: -130px -90px;
	top: 5px;
}


#mypage .follow_area li .name p.name_follower {
	float: left;
	margin: 8px 0 11px 0;
	font-size: 1.4em;
	font-weight: bold;
}


/* PowerTip Plugin */
#powerTip {
	cursor: pointer;
	background-color: #333; /* fallback for browsers that dont support rgba */
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 3px;
	color: #FFF;
	display: none;
	padding: 10px;
	position: absolute;
	white-space: nowrap;
	z-index: 2;
	margin:0 0 0 2px;
	font-size:1.2em;
}
#powerTip.n:before{
	content: "";
	position: absolute;
}
#powerTip.n:before{
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	left: 50%;
	margin-left: -5px;
}
#powerTip.n:before {
	border-top: 6px solid rgba(0, 0, 0, 0.8);
	bottom: -6px;
}

/* 吹き出し */
#mypage .follow_area li .panel-wrap {
	position: relative;
	padding: 0;
	border-right:none;
	display:inline-block;
}
#mypage .follow_area li .panel-wrap a {
	font-size: 0.9em;
	text-decoration:underline;
}
#mypage .follow_area li a.panel-btn {
	display:inline-block;
	position: relative;
	color: #cfdae4;
	text-decoration: none;
}
#mypage .follow_area li .panel{
	display: none;
	position: absolute;
	top: 42px;
	left: -86px;
	z-index: 1;
	width: 200px;
	margin: 0 0 0 0;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 5px;
	box-shadow: 0 2px 5px 1px rgba(0,0,0,.2);
}
#mypage .follow_area li .panel:before {
	content: "";
	position: absolute;
	top: -16px;
	left: 93px;
	height: 0;
	width: 0;
	border: 6px solid transparent;
	border-bottom: 10px solid #FFF;
}
#mypage .follow_area li .panel ul.follow_list{
	list-style: none;
	padding:5px 0 0 0;
}

#mypage .follow_area li .panel ul.follow_list li {
	border-bottom: none;
	height:100%;
}
#mypage .follow_area li .panel ul.follow_list li:first-child {
	padding:7px 0 0 0;
}
#mypage .follow_area li .panel ul.follow_list li:last-child {
	border-bottom: none;
	padding:0 0 7px 0;
}

#mypage .follow_area li .panel ul.follow_list li a{
	padding:8px 15px 8px 15px;
	display:block;
	color: #777;
	text-align:left;
	text-decoration:none;
	font-weight:normal;
}
#mypage .follow_area li .panel ul.follow_list li a:hover{
	background:none;
	width:170px;
	color: #999;
}


#mypage .follow_area li p.follower {
	float: left;
	font-size: 1.2em;
	color: #777;
	margin: 8px 15px 0 0;
}
#mypage .follow_area li .btn_follow {
	float: left;
}
#mypage .follow_area li .following {
	float: left;
	margin: 7px 0 1px 0;
}
#mypage .follow_area li .follow_release {
	float: left;
	margin: 7px 0 1px 0;
}

#mypage .follow_area li p.profile {
	font-size: 1.2em;
	color: #777;
	margin: 12px 0 0 0;
	line-height: 1.4;
}



/* -----------------------------------------------------------
	新刊情報
-------------------------------------------------------------- */

#mypage .newbook_more a {
	display: block;
	background: url(/assets/img/icon_arrow3.png) no-repeat 50% 20px;
	border-radius: 10px;
	margin: 10px auto 5px;
	padding: 80px 10px 10px;
	color: #777;
	font-size: 2em;
	text-align: center;
	text-decoration: none;
}
#mypage .newbook_more a:hover {
	background-color: #ddd;
}
#mypage .newbook_area {
	width: 100%;
	padding: 15px 0;
	border-radius: 6px;
	background: #fff;
	color: #333;
}
#mypage .newbook_area__month_row,
#mypage .newbook_area__unit {
	margin: 0 7px;
	padding: 22px 17px;
	border-top: 1px solid #ddd;
	line-height: 1;
}
#mypage .empty {
	height: 30px;
	max-height: 30px;
	overflow: hidden;
	transition: .8s .05s;
	-webkit-transition: .8s .05s;
}
#mypage .empty:hover {
	height: auto;
	max-height: 40em;
}
#mypage .newbook_area__month_row {
	padding-top: 60px;
	padding-bottom: 12px;
	font-size: 4.8em;
	font-weight: bold;
}
#mypage .newbook_area__month_row:first-child,
#mypage .newbook_area__unit:first-child {
	border-top: none;
}
#mypage .sun .newbook_area__date_wrap.newbook_area__date_wrap,
#mypage .holiday .newbook_area__date_wrap.newbook_area__date_wrap {
	color: #ff5b5b;
}
#mypage .sat .newbook_area__date_wrap {
	color: #5ba8ff;
}
#mypage .current {
	background: #fffde0;
}
#mypage .newbook_area__date_wrap {
	width: 65px;
	float: left;
	text-align: center;
}
#mypage .newbook_area__date_wrap__month {
	font-size: 2.4em;
	font-weight: bold;
}
#mypage .newbook_area__date_wrap__day {
	font-size: 4em;
	font-weight: bold;
}
#mypage .newbook_area__date_wrap__week {
	font-size: 1.8em;
}
#mypage .newbook_area__comic_wrap {
	width: 927px;
	float: left;
	padding: 0 20px;
}
#mypage .newbook_area__comic_wrap ul {
	width: 100%;
}
#mypage .newbook_area__comic_wrap ul li {
	width: 150px;
	float: left;
	font-size: 2em;
	text-align: center;
	color: #1979c5;
	line-height: 1.1;
}
#mypage .newbook_area__comic_wrap ul li img {
	margin-bottom: 5px;
}
#mypage .newbook_area__comic_wrap__read {
	display: block;
	padding: 5px;
	color: #666;
	text-decoration: none;
}
#mypage .newbook_area__comic_wrap__read .bg_icon {
	display: inline-block;
	background: url(/assets/img/sp/icon.png) no-repeat -390px -306px;
	width: 22px;
	height: 24px;
	margin: 0 5px 0 0;
	position: relative;
	top: 3px;
}
#mypage .read .newbook_area__comic_wrap__read .bg_icon {
	background-position: -420px -306px;
}