/* 無料登録ページとログインページ */
.join_wrap{
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}
.join_wrap h1 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	margin: 24px 0;
}
.login_midashi {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	padding: 24px 0 8px;
	border-top: solid 2px #ccc;
}
.login_btn_wrap {
	width: 100%;
	min-width: 120px;
	max-width: 432px;
	margin: 0 auto 32px;
	text-align: center;
}
.login_btn_wrap a {
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	background: #7EB802;
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin: 0 auto;
	text-decoration: none;
	cursor: pointer;
}
/*登録ステップ*/
.join_step_wrap {
	list-style-type: none;
	text-align: center;
	margin-bottom: 24px;
}
.join_step_wrap li {
	display: inline-block;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1;
}
.join_step_wrap li:not(:first-child) {
	position: relative;
	padding-left: 20px;
}
.join_step_wrap li:not(:first-child):before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent #999;
	position: absolute;
	top: 50%;
	left: 8px;
	margin-top: -4px;
}
.step_now {
	color: #81c31f!important;
	font-weight:bold;
}
/*入力フォーム*/
.input_outer_wrap {
	margin-bottom: 24px;
	position: relative;
}
.input_form_square {
	border: solid 1px #999;
	border-radius: 8px;
	box-sizing: border-box;
	position: relative;
	margin-bottom: 8px;
}
.input_form_square input {
	width: 100%;
	padding: 15px;
	font-size: 14px;
	border: solid 1px transparent;
	border-radius: 7px;
	outline: none;
	box-sizing: border-box;
	transition: 0.3s;
}
.input_form_square input:focus {
	border: solid 1px #999;
}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
::placeholder {
	color: #999;
}
.input_delete_btn {
	font-size: 22px;
	color: #666;
	position: absolute;
	top: 50%;
	right: 2%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
}
.pass_hidden {
	letter-spacing: 2.5px;
}
/*情報入力画面*/
.join_form_wrap {
	font-size: 14px;
}
.join_form_wrap li {
	padding-bottom: 32px;
}
.join_form_wrap h2 {
	background: none;
	margin: 0;
	padding: 0 0 4px 0;	
}
.join_form_wrap h2.bottom_space12 {
	padding: 0 0 12px 0;	
}
.join_form_wrap h2 p:first-of-type {
	font-size: 14px;	
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
}
.join_form_wrap h2.hl_small {
	margin-top: 10px;
}
.join_form_wrap h2.hl_small p:first-of-type {
	font-size: 12px;	
}
.required_mark {
	display: inline-block;
	margin-left: 8px;
}
.required_mark span {
	color: #fff;
	background: #444;
	border-radius: 2px;
	padding: 2px 6px;
	font-size: 10px;
	transform: scale(0.8);
	display: block;
}
.pw_input {
	position: relative;
}
.pw_eye {
	position: absolute;
	right: 1px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	width: 20px;
	padding: 15px;
	cursor: pointer;
}
.join_form_wrap input[type="text"],
.join_form_wrap input[type="password"] {
	font-size: 14px;
	padding: 15px;
	border: solid 1px #999;
	border-radius: 2px;
	outline: none;
	width: 100%;
	box-sizing: border-box;
}
.join_form_wrap select {
	background: #fff;
}
.nickname_input_wrap {
	position: relative;
	display: inline-block;
	width: calc(100% - 76px);
	vertical-align: middle;
}
.nickname_delete_btn {
	font-size: 22px;
	color: #666;
	position: absolute;
	top: 50%;
	right: 1%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	cursor: pointer;
	display: none;
}
.nickname_wrap a {
	color: #fff;
	background: #8FC31F;
	padding: 15px 0;
	width: 70px;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	text-decoration: none;
	box-sizing: border-box;
	border-radius: 4px;
}
.form_radio_wrap li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.form_radio_wrap li:not(:last-of-type) {
	margin: 0 32px 0 0;
}
.form_radio_wrap li input {
	position: absolute;
	visibility: hidden;
}
.form_radio_wrap li label {
	display: inline-block;
	float: none;
	height: 48px;
	line-height: 48px;
	vertical-align: top;
	cursor: pointer;
}
.radio_btn {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: 28px;
}
.radio_btn::before {
	position: absolute;
	content: '';
	top: 12px;
	left: 0;
	display: block;
	border-radius: 50%;
	border: solid 2px #ccc;
	width: 18px;
	height: 18px;
}
.form_radio_wrap li input:checked+.radio_btn::before {
	border: solid 2px #80BB00;	
}
.form_radio_wrap li input:checked+.radio_btn::after {
	position: absolute;
	content: '';
	top: 16px;
	left: 4px;
	display: block;
	border-radius: 50%;
	background-color: #80BB00;
	width: 14px;
	height: 14px;
}
.birthday_wrap .birth{
	padding: 0 6px;
}
.join_form_wrap select{
	font-size: 14px;
	border: solid 1px #999;
	border-radius: 2px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.join_form_wrap .select_wrap {
	display: inline-block;
	position: relative;
}
.join_form_wrap .select_wrap:after {
	position: absolute;
	content: "";
	display: block;
	top: 50%;
	right: 10px;
	width: 6px;
	height: 6px;
	margin-top: -6px;
	border-top: solid 2px #80BB00;
	border-right: solid 2px #80BB00;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	pointer-events: none;
}
.join_form_wrap select[name="birth_y"] {
	width: 84px;
	padding: 15px 34px 15px 14px;
}
.join_form_wrap select[name="birth_m"],
.join_form_wrap select[name="birth_d"] {
	width: 60px;
	padding: 15px 14px;
}
.caution {
	font-size: 12px;
	color: #747474;
	padding-top: 8px;
}
.birthday_wrap .caution{
	padding-bottom: 32px;
}
.kiyaku_wrap {
	font-size: 12px;
	text-align: center;
}
.kiyaku_wrap a {
	padding: 17px;
}
/*ボタン*/
/*灰色枠線の丸ボタン*/
.back_btn_wrap {
	width: 100%;
	min-width: 120px;
	max-width: 432px;
	margin: 0 auto 32px;
}
.back_btn_wrap a {
	width: 100%;
	display: block;
	background: #fff;
	border-radius: 100px;
	border: 2px solid #dfdfdf;
	box-sizing: border-box;
	color: #444 !important;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding: 12px;
	text-decoration: none;
}
.square_gray_btn {
	width: 100%;
	min-width: 120px;
	max-width: 432px;
	margin: 0 auto;
}
.square_gray_btn a{
	color: #444;
	background: #eee;	
	font-size: 14px;
	font-weight: bold;
	height: 48px;
	line-height: 48px;
	border-radius: 4px;
	text-decoration: none;
	display: block;
	text-align: center;
}
/*フォーム送信の四角い緑ボタン*/
.input_btn {
	width: 100%;
	margin: 0 auto;
	margin-top: 32px;
	margin-bottom: 32px;
	height: 48px;
	line-height: 48px;
	background: #87C20A;
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	display: block;
	cursor: pointer;
}
/*SNSログイン用四角ボタン*/
.exauth_btn_square {
	display: flex;
	align-items: center;
	width: 100%;
	height: 60px;
	border-radius: 6px;
	vertical-align: middle;
	box-sizing: border-box;
	color: #fff;
	text-align: left;
	margin: 16px 0;
	padding: 16px;
}
.exauth_icon{
	width: 60px;
	text-align: center;
}
.exauth_icon img {
	vertical-align: middle;
}
.exauth_name {
	width: calc(100% - 76px);
	text-align: center;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.exauth_mail {
	background: #fff;
	border: solid 1px #A0A0A0;
}
.exauth_passkey {
	background:  var(--background-ui-green-low);
	border: solid 1px #A0A0A0;
}
.exauth_google {
	background: #fff;
	border: solid 1px #A0A0A0;
}
.exauth_line {
	background: #06C755;
	border: solid 1px #06C755;
}
.exauth_yahoo {
	background: #FF0033;
	border: solid 1px #FF0033;
}
.exauth_x {
	background: #000;
	border: solid 1px #000;
}
.exauth_google .exauth_name {
	color: #444!important;
}
.exauth_google img {
	width: 26px;
}
.exauth_line img {
	width: 28px;
}
.exauth_yahoo img {
	width: 38px;
}
.exauth_x img {
	width: 24px;
}

/*エラー画面*/
.err_msg_wrap {
	font-size: 14px;
	max-width: 500px;
	margin: 0 auto;
	margin-bottom: 32px;
}
.err_msg_wrap p{
	margin-bottom: 8px;
}
.err_msg {
	font-size: 14px;
	text-align: center;
}
/*テキストcss*/
.join_wrap .message {
	font-size: 14px;
	margin-bottom: 32px;
	text-align: center;
}
@media screen and (max-width:320px) {
	.join_step_wrap li {
		font-size: 10px;
	}
}
@media screen and (max-width:350px) {
	.join_form_wrap h2 p:first-of-type {
		font-size: 12px;
	}
	.join_form_wrap input[type="text"],
	.join_form_wrap input[type="password"],
	.radio_btn, .birth{
		font-size: 12px;
	}	
	.join_form_wrap select[name="birth_y"] {
		width: 68px;
		padding: 14px 24px 14px 8px;
	}
	.join_form_wrap select[name="birth_m"],
	.join_form_wrap select[name="birth_d"] {
		width: 54px;
		padding: 14px 8px;
	}
}
@media screen and (max-width:376px) {
	.birthday_wrap .birth {
		padding: 0 3px;
	}
	.form_radio_wrap li:not(:last-of-type) {
		margin: 0px 16px 0 0;
	}
}

/* 退会ページ：20231013追加 */
.quit_wrap {
	line-height: 1.6;
	background: #fff;
}
span.color_red {
	color: #E34D4D;
}
.bottom_btn {
	margin-top: 32px;
	margin-bottom: 16px;
}
.copyright {
	color: #949494;
	font-size: 12px;
	text-align: center;
}




/*login*/

.btn_margin_bottom {
	margin-bottom: 24px;
}
/*メッセージ js*/
.js-system-login_msg_disp_on {
	width:100%;
	background: #ededed;
	border-radius: 5px;
	padding: 8px;
	box-sizing:border-box;
	font-size: 14px;
	margin-bottom:16px;
}

/*renta login フォーム*/
/* 『#:normal_main』 */
.login_input_wrap {
	margin-bottom:16px;
}
.login_input_title {
	font-size:14px;
	font-weight: bold;
	margin-bottom:8px;
}
.input_caution {
	font-size: 12px;
	color: #747474;
	margin: 4px 0 16px;
}
.login_text_link_wrap {
	text-align:center;
}
.login_text_link {
	font-size: 12px;
	font-weight: bold;
}
.text-link_allow_next {
	position: relative;
	padding-right: 18px;
}
.text-link_allow_next:after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	display: block;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: solid 2px var(--text-link-blue);
	border-right: solid 2px var(--text-link-blue);
	box-sizing: border-box;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	z-index: 3;
}
.login_btn {
	width: 100%;
	margin-bottom: 16px;
}
.login_btn[disabled] {
	opacity: .5;
}
.last_login_desc_text {
	font-size: 14px;
	text-align: center;
	margin-bottom: 16px;
}

/* 他サービスログイン */
/* 『#:login_exauth』 */
.exauth_login_wrap {
	font-size: 0;
	margin-bottom: 24px;
}
.exauth_login_wrap h3{
	font-size: 14px;
	color: #444;
	font-weight: bold;
	padding-top: 24px;
	margin: 24px 0 16px;
	border-top: solid 1px #ccc;
	text-align: center;
}

/* パスキー（pk_main / pkstep_main） */
[data-passkey-only][hidden] {
	display: none !important;
}
.pk_login_info {
	font-size: 12px;
	color: #747474;
	text-align: right;
	margin-bottom: 16px;
	line-height: 1.6;
}
.msg {
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 16px;
	background: var(--background-medium);
	color: var(--text-body);
}
.msg.ng {
	background: var(--background-ui-red-low);
	color: var(--ui-red);
}
.msg.ok {
	background: var(--background-ui-green-low);
}
.msg[data-msg=""] {
	display: none;
}
.pk_desc_text {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 16px;
}
.pk_point {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
	padding: 16px;
	background: var(--background-ui-green-low);
	border-radius: 4px;
}
.pk_link {
	margin-bottom: 16px;
}
.pk_empty {
	font-size: 14px;
	color: #747474;
	padding: 16px 0;
	border-bottom: solid 1px #ccc;
}
.pk_item_btn {
	margin-top: 8px;
	text-align: right;
}
.pk_btn_small {
	display: inline-block;
	font-size: 12px;
	padding: 6px 14px;
	margin-left: 8px;
	border-radius: 4px;
	border: solid 1px #ccc;
	background: #fff;
	color: #444;
	cursor: pointer;
}
.pk_btn_small.pk_btn_delete {
	border-color: var(--ui-red);
	color: var(--ui-red);
}
.pk_item_name {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 4px;
	word-break: break-all;
}
.pk_item_info {
	font-size: 12px;
	color: #747474;
	line-height: 1.6;
}
/* おすすめの案内 */
.pk_banner {
	border: solid 2px #80bb00;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 24px;
}
.pk_banner_title {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 8px;
}
.pk_banner .login_btn:last-child {
	margin-bottom: 0;
}
.pk_banner .pk_desc_text {
	margin-bottom: 12px;
}
/* パスキーの一覧 */
.pk_list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border-top: solid 1px #ccc;
}
.pk_item {
	padding: 12px 0;
	border-bottom: solid 1px #ccc;
}
/* ログインエラーメッセージ */
.login_error_msg {
	padding: 24px 0;
	font-size: 14px;
}

/* まだ登録してない方 */
/* 『#:join_entry』 */
.login_join_wrap .login_text_link_wrap {
	margin-bottom: 24px;
}
.login_join_btn_wrap {
	margin-bottom: 16px;
}

.freeread_join_wrap{
	margin-bottom: 24px;
}
/* この作品を読むには会員登録が必要です */
.border_bottom{
	padding-bottom: 24px;
	border-bottom: solid 2px #CCCCCC;
}