@charset "utf-8";

/*

 * base_box
 * relation_box
 * info_box
 * paragraph
 * amount

 * game_list
 * campaign_list
 * topic_list
 * friend_list
 * link_list

 * tab_box
 * toggle_box
 * sort_menu

 * button
 * arrow_link

 * form
 * finish_box
 * empty_box

 * control_box
 * inbox
 * pageing
 * overlay

 * wswg

 * system_error

 * bx.slider controls


*/



/* ================================================================================
/* 	base_box
/* ================================================================================ */

.base_box {
}

/* main */


/* aside */
.aside .base_box .body {
	margin-top: 10px;
}


/* head
/* -------------------------------------------------------------------------------- */
.base_box > .head {
	padding: 10px 20px;

	font-size: 16px;
	font-weight: bold;
	line-height: 20px;

	color: #fff;
	background: #666;
}
.base_box > .head .label {
	display: inline-block;
}


/* aside
/* .................................................. */
.aside .base_box > .head {
	padding: 15px 10px;

	background: #444;
}
.aside .base_box > .head .label > span {
	padding-left: 3px;
	font-size: 14px;
	font-weight: normal;
}
.aside .base_box > .foot {
	padding: 0 20px;
}


/* body
/* -------------------------------------------------------------------------------- */
/* paragraph
/* .................................................. */
.base_box > .body.paragraph {
	padding: 20px 0;

	font-size: 12px;
	line-height: 1.5;
}


/* ================================================================================
/* 	info_box
/* ================================================================================ */
.tog_contents .info_box {
	margin-bottom: 48px;
}

/* head
/* .................................................. */
.tog_contents .info_box .head .label {
	font-size: 20px;
	line-height: 1.3;
}

/* list
/* .................................................. */
.tog_contents .info_box ul {
	margin-top: 20px;
}
.tog_contents .info_box ul li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 10px;

	line-height: 1.5;
}
.tog_contents .info_box ul li:before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}



/* ================================================================================
/* 	relation_box
/* ================================================================================ */
.relation_box {
}

.relation_box .head {
	overflow: hidden;

	border-bottom: 3px solid #666;
}

.relation_box .head .label {
	float: left;
	margin-bottom: 8px;

	font-size: 16px;
}



/* ================================================================================
/* 	paragraph
/* ================================================================================ */
.paragraph p {
	margin-top: 0;

	font-size: 12px;
	line-height: 1.6;
}


/* ================================================================================
/* amount
/* ================================================================================ */
dl.amount {
	position: relative;

	margin: 0;
	padding: 12px 20px;

	font-size: 14px;

	overflow: hidden;
}
dl.amount ~ .amount {
	border-top: 1px dotted #666;
}
dl.amount dt {
	float: left;
	padding: 0;

	color: #000;
	background:#fff;
}
dl.amount dt img {
	width: 103px;
	height: 20px;

	vertical-align: middle;
}
dl.amount dt span {
	position: relative;

	padding: 0 0 0 30px;

	font-weight: bold;
	line-height: 26px;
}
dl.amount dt span:before {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\e60b";
	position: absolute;

	font-size: 24px;
	line-height: 22px;

	left: 0;
	top: 0;
	bottom: 0;

	color: #8a8a8a;
}
dl.amount dd {
	float: right;
	min-width: 65px;

	font-size: 24px;
	font-weight: bold;
	line-height: 26px;

	text-align: right;
	font-family: "Avenir-Heavy","Avenir","Roboto";
	word-break: break-all;
}
dl.amount dd .unit {
	margin-left: 6px;

	font-size: 24px;
	font-weight: bold;
	vertical-align: baseline;
}


/* button
/* .................................................. */
.tog_contents .aside .user .button a {
	margin: 1px 20px;
}


/* ================================================================================
/* 	game_list
/* ================================================================================ */
.game_list {
	overflow: hidden;
	margin-left: -2px;
}

.game_list .item {
	position: relative;

	float: left;
	width: 167px;
	margin-left: 1px;

	text-decoration: none;
}

/* figure
/* .................................................. */
.game_list .item .figure {
	position: relative;
	z-index: 0;

	display: block;
}
.game_list .item .figure img {
	position: relative;
	z-index: -1;

	margin: 8px 2px 9px;
}

.game_list .item:hover .figure img {
	opacity: 0.7;
}

/* NEW */
.game_list .item.st_new:before,
.game_list .item.st_new:after,
.game_list .item.st_update .figure:before,
.game_list .item.st_update .figure:after {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	position: absolute;
	z-index: 1;

	font-size: 47px;
}
.game_list .item.st_new:before {
	content: "\e620";
	top: 8px;
	left: 8px;

	color: #f57;
	text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1), 5px 5px 8px rgba(0, 0, 0, 0.1);
}
.game_list .item.st_new:after {
	content: "\e621";
	top: 8px;
	left: 8px;

	color: #fff;
}
.game_list .item.st_update .figure:before {
	content: "\e62e";
	bottom: 17px;
	right: 8px;

	color: #000;
}
.game_list .item.st_update .figure:after {
	content: "\e62f";
	bottom: 17px;
	right: 9px;

	color: #fff;
}

/* data
/* .................................................. */
.game_list .item .data {
	position: relative;

	display: block;
	height: 87px;
	padding: 10px;

	background: #e4e4e4;
}

.game_list.tog_override-style .item .data,
.game_list.tog_override-style .item .data a:link {
	color: #000!important;
}

.game_list .item .data .item_title {
	display: block;
	padding: 0 5px;

	font-weight: bold;
	line-height: 1.5;
	word-break: break-all;
}
.game_list .item:hover .data {
	text-decoration: underline;
	color: #000;
}

.game_list .item .data .item_tag {
	position: absolute;

	bottom: 5px;
	right: 5px;
	display: block;
}



/* ================================================================================
/* 	campaign_list
/* ================================================================================ */
.campaign_list {
	margin-bottom: 30px;
}
.campaign_list .item {
	position: relative;

	margin: 20px 0;
	overflow: hidden;

	line-height: 1.3;
}

/* figure
/* .................................................. */
.campaign_list .item .figure {
	float: left;
	width: 398px;
}
.campaign_list .item a:hover img {
	opacity: 0.7;
}

/* data
/* .................................................. */

/* title */
.campaign_list .item .title {
	display: block;
	margin-bottom: 10px;

	font-size: 16px;
	font-weight: bold;
	word-break: break-all;
}
.campaign_list .item .title a:hover {
	color: #999;
}

/* date */
.campaign_list .item .date {
	font-size: 14px;
	font-weight: bold;
}

/* description */
.campaign_list .item .description {
	line-height: 1.6;
	margin-top: 10px;
	word-break: break-all;
}

/* with figre */
.campaign_list .item .figure + .data {
	padding: 0 0 0 420px;
}



/* ================================================================================
/* 	topic_list
/* ================================================================================ */

.topic_list .item {
	position: relative;
	display: block;
	overflow: hidden;

	text-decoration: none;
	border-bottom: 1px solid #c6c6c6;
}


/* figure
/* -------------------------------------------------------------------------------- */
.topic_list .figure {
	position: absolute;
	top: 10px;
	left: 20px;

	width: 80px;
	height: 80px;

	overflow: hidden;
	background: #fff;
}

.topic_list .item .figure img {
	margin: -6px 0 0 -6px;
}
.topic_list a.item:hover .figure img {
	opacity: 0.7;
}


/* data
/* -------------------------------------------------------------------------------- */
.topic_list .data {
	padding: 15px 20px;
	word-break: break-all;
}

.topic_list .figure + .data {
	min-height: 100px;
	margin-left: 120px;

	background: #e4e4e4;
}

/* Chrome Firefox IE9+ */
@media only screen {
	.topic_list .figure + .data {
		min-height: 100px;
	}
}

.topic_list .st_update .data .description {
	margin-right: 10px;
}
.topic_list .st_update .data:before,
.topic_list .st_update .data:after {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	position: absolute;
	z-index: 1;

	font-size: 47px;
}
.topic_list .item.st_update .data:before {
	content: "\e62e";
	bottom: 8px;
	left: 60px;

	color: #000;
}
.topic_list .item.st_update .data:after {
	content: "\e62f";
	bottom: 8px;
	left: 58px;

	color: #fff;
}

/* date
/* .................................................. */
.topic_list .date {
	float: right;
	margin-left: 20px;

	font-size: 10px;
}

/* tag
/* .................................................. */
.topic_list .tag {
	margin-top: 6px;

	vertical-align: middle;
}

/* count
/* .................................................. */
.topic_list .count {
	color: #000;
}
.topic_list .count:before {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\e605";

	margin-right: 4px;

	font-size: 16px;
}

/* title
/* .................................................. */
.topic_list .title {
	display: block;

	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
}
.topic_list a:hover .title {
	text-decoration: underline;
}


/* description
/* .................................................. */
.topic_list .description {
	display: block;
	margin-top: 6px;

	line-height: 1.4;
}



/* ================================================================================
/* 	friend_list
/* ================================================================================ */
.friend_list {
	overflow: hidden;
	margin-left: -2px;
}

.friend_list .item {
	float: left;
	width: 167px;
	margin-left: 1px;

	text-decoration: none;
}

/* figure
/* -------------------------------------------------------------------------------- */
.friend_list .item .figure {
	position: relative;
	z-index: 1;

	display: block;
	padding: 20px;

	text-align: center;
}
.friend_list .item .figure img {
	position: relative;
	z-index: -1;

	height: 90px;
}

.friend_list .item a.figure:hover img {
	opacity: 0.7;
}

/* data
/* -------------------------------------------------------------------------------- */
.friend_list .item .data {
	padding: 10px 0 0;
	background: #e4e4e4;
}

/* name
/* .................................................. */
.friend_list .item .data .user_name {
	display: block;
	margin: 0 10px 10px;
	max-width: 100%;
	overflow: hidden;

	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* blood / address_region
/* .................................................. */
.friend_list .item .data dl {
	margin: 10px;
	overflow: hidden;
}
.friend_list .item .data dt {
	float: left;
	display: block;
}
.friend_list .item .data dt:after {
	content: "：";
}
.friend_list .item .data dd {
	padding-left: 48px;
}

/* profile */
.friend_list .item .data .icn_arrow_right {
	display: block;
	margin: 10px 10px 0;
	padding: 10px 0;

	border-top: 1px solid #c6c6c6;
}
.friend_list .item .data .icn_arrow_right a {
	position: relative;
	display: block;
	padding-right: 20px;

	text-align: right;
	text-decoration: none;
}
.friend_list .item .data .icn_arrow_right a:hover {
	text-decoration: underline;
}
.friend_list .item .data .icn_arrow_right a:after {
	position: absolute;
	top: 0;
	right: 0;
}

/* button
/* .................................................. */
.friend_list .item .data .button {
	background: #fff;
}
.friend_list .item .data .button:after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
}
.friend_list .item .data .button a {
	float: left;
	width: 100%;
	height: 30px;
	padding: 7px;

	font-size: 12px;
	line-height: 14px;
}
.friend_list .item .data .button a ~ a {
	margin-left: 1px;
}
.friend_list .item .data .button a {
	height: 30px;
	padding: 7px;

	font-size: 12px;
	line-height: 14px;
}



/* ================================================================================
/* 	link_list
/* ================================================================================ */
.link_list {
	margin: 20px 0 0;
}

.link_list li {
	margin: 12px 0 0;
}

.link_list li a {
	position: relative;

	display: inline-block;
	padding-left: 15px;

	font-size: 12px;
	text-decoration: none;
}
.link_list li a:hover {
	text-decoration: underline;
}

.link_list li a:before {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\e602";

	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;

	font-size: 10px;
	line-height: 12px
}



/* ================================================================================
/* 	toggle_box
/* ================================================================================ */

/* head
/* .................................................. */
.toggle_box .head {
	position: relative;

	display: block;
	padding: 10px 15px;
	overflow: hidden;

	color: #fff;
	background: #8e8e8e;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.toggle_box .head:hover {
	opacity: 0.7;
}

/* label */
.toggle_box .head .label {
	float: none;
	display: block;

	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
}

/* arrow */
.toggle_box .head span {
	position: absolute;
	top: 0;
	right: 12px;
	bottom: 0;

	display: block;
	width: 20px;
	height: 20px;
	margin: auto;

	font-size: 12px;
	line-height: 20px;
}
.toggle_box .head span:after {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\e61c";

	position: absolute;
	top: 0;
	right: 8px;
	bottom: 0;

	display: inline-block;
	height: 12px;
	margin: auto;
}

/* body
/* .................................................. */
.toggle_box .body {
	overflow: hidden;

	background: #c6c6c6;
}


/* close
/* -------------------------------------------------------------------------------- */

/* head
/* .................................................. */
/* icon */
.toggle_box.st_close .head span:after {
	content: "\e61d";
}

/* body
/* .................................................. */
.toggle_box.st_close .body {
	height: 0;
	padding: 0;
}


/* transition
/* -------------------------------------------------------------------------------- */

/* head
/* .................................................. */
.toggle_box .head {
	-webkit-transition: background 200ms;
	transition: background 200ms;
}

/* body
/* .................................................. */
.toggle_box .body {
	-webkit-transition: padding-top,padding-bottom,height,border 200ms;
	transition: padding-top,padding-bottom,height,border 200ms;
}



/* ================================================================================
/* 	sort_menu
/* ================================================================================ */

.sort_menu {
	width: 200px;
	margin: 0 auto;
	overflow: hidden;
}
.sort_menu a {
	float: left;
	display: block;
	width: 100px;
	height: 32px;

	font-weight: bold;
	line-height: 26px;
	text-align: center;
	text-decoration: none;

	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;

	color: #666;
	background: #e4e4e4;
}
.sort_menu a:hover {
	opacity: 0.7;
}

.sort_menu .st_current a {
	color: #000;
	background: #c6c6c6;
	border-bottom-color: #000;
}


/* ================================================================================
/* 	button
/* ================================================================================ */

.button a,
.button .btn_disable {
	position: relative;

	display: block;
	padding: 9px;

	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.1em;

	color: #fff;
	background: #8e8e8e;
	border: 1px solid transparent;
}
.button a:hover {
	opacity: 0.7;
}
.button a:after {
	position: absolute;
	top: 0;
	right: 7px;
	bottom: 0;

	display: inline-block;
	height: 12px;
	margin: auto;

	font-size: 12px;
}

/* accept */
.button.st_accept a {
	background: #039;
}
.button.st_accept .btn_submit:hover {
	background: #4c70b7;
	opacity: 1;
}


/* disabled */
.main .button .btn_disable {
	display: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.main .button.st_disabled .btn_submit {
	display: none;
}
.main .button.st_disabled .btn_disable {
	display: block;

	color: #c6c6c6;
	background: #e4e4e4;
}

/* main
/* .................................................. */
.main .button a,
.main .button.st_disabled .btn_disable {
	display: inline-block;
	width: 150px;
}

.main .button a.long {
	width: 170px;
}

/* aside
/* .................................................. */
.aside .button a {
	display: block;
}



/* ================================================================================
/* 	arrow_link
/* ================================================================================ */

.arrow_link a {
	position: relative;
	display: block;

	font-size: 12px;
	text-decoration: none;
	line-height: 20px;
}

.main .arrow_link a {
	padding: 20px 30px;
}

.main .arrow_link a.ver_r18 {
	color: #f24657;
}

.aside .arrow_link a {
	padding: 20px;
}


/* more
/* -------------------------------------------------------------------------------- */
.arrow_link.icn_arrow_right a {
	padding-right: 18px;

	text-align: right;
}
.arrow_link.icn_arrow_right a:after {

	position: absolute;
	top: 0;
	right: -2px;
	bottom: 0;

	display: inline-block;
	margin: auto;
	height: 12px;
}
.arrow_link.align_left {
	display: block;

	text-align: left;
}
.arrow_link.align_right {
	display: block;

	text-align: right;
}
.arrow_link.align_left a,
.arrow_link.align_right a {
	display: inline-block;
}
.arrow_link.align_left a:hover,
.arrow_link.align_right a:hover {
	text-decoration: underline;
}


/* back
/* -------------------------------------------------------------------------------- */
.arrow_link.icn_arrow_left a {
	padding-left: 18px;

	text-align: left;
}
.arrow_link.icn_arrow_left a:before {

	position: absolute;
	top: 0;
	left: -2px;
	bottom: 0;

	display: inline-block;
	margin: auto;
	height: 12px;
}



/* ================================================================================
/* 	form
/* ================================================================================ */

.form_box table {
	width: 100%;
	margin: 0;
}
.form_box table th {
	padding: 12px 0;
}
.form_box table td {
	padding: 0 0 10px 10px;
}
.form_box table td > p {
	margin-top: 10px;
}

.paragraph + .form_box {
	margin-top: 30px;
	padding-top: 30px;

	border-top: 1px  dotted #666;
}
.paragraph + .form_box.st_confirm {
	padding-top: 20px;
}

.form_box .add , .form_box .delete{
    font-weight: bold;
    width: 50px;
    height: 27px;
    color: #000;
    background: #c6c6c6;
    padding: 8px 0;
    text-align: center;
}

.form_box .add:hover{
    opacity: 0.7;
}

.form_box .delete:hover{
    opacity: 0.7;
}

.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
}
.-disabled{
    cursor: default;
    color: #c6c6c6!important;
    background: #e4e4e4!important;
}

.-disabled:hover{
    opacity: 1!important;
}

.fileupload{
    padding-bottom: 10px;
}


/* require
/* -------------------------------------------------------------------------------- */
.form_box .st_require .label {
	position: relative;

	padding-right: 40px;
}
.form_box .st_require .label:before {
	content: "";
	position: absolute;
	top: 10px;
	right: 0;

	display: block;
	width: 28px;
	height: 13px;
	margin: auto;

	background: #fff;
}
.form_box .st_require .label:after {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\e623";

	position: absolute;
	top: 10px;
	right: 0;

	display: block;
	width: 30px;
	height: 15px;
	margin: auto;

	font-size: 30px;
	line-height: 15px;
	vertical-align: middle;

	color: #d71313;
}


/* error
/* -------------------------------------------------------------------------------- */
.form_box .error,
.form_box p.e_cont,
.form_box p.e_req {
	display: none;
	margin: 10px 0;

	line-height: 1.4;

	color: #d71313;
}

.form_box .st_error .error,
.form_box .st_error.e_req p.e_req,
.form_box .st_error.e_cont p.e_cont {
	display: block;
}

.form_box .st_error .error .__zenkaku {
	display: none;
}
.form_box .st_error.__zenkaku .error .__zenkaku {
	display: block;
}
.form_box .st_error.__zenkaku .error .req {
	display: none;
}


/* confirm
/* -------------------------------------------------------------------------------- */
.form_box.st_confirm td p {
	width: 676px;
	margin: 10px 0;
	line-height: 1.6;
	word-wrap: break-word;
	word-break: break-all;
}
.form_box.st_confirm .button.submit {
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px dotted #666;
}
.form_box.st_confirm .button .btn_return {
	top: 20px;
}


/* button
/* -------------------------------------------------------------------------------- */
.form_box .button {
	position: relative;

	margin-top: 10px;

	text-align: center;
}

/* button - cancel */
.main .button .btn_return {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;

	display: block;
	width: 92px;
	height: 40px;
	margin: auto;

	color: #000;
	background: #c6c6c6;
}
.main .button .btn_return:before {
	content: "";

	position: absolute;
	top: 0;
	left: -11px;
	bottom: 0;

	height: 40px;
	margin: auto 0;

	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 10px solid #c6c6c6;
}
.main .button .btn_return.left {
	position: relative;
	margin: 0;
}

/* button - next */
.main .button .btn_next {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border: unset;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0;
	width: 150px;
}
.main .button .btn_next .btn_body,
.main .button .btn_next .btn_icn {
	border: 1px solid transparent;
	padding: 9px 0;
}
.main .button .btn_next .btn_body {
	background: #039;
	width: 130px;
}
.main .button .btn_next .btn_icn {
	height: 40px;
	background: #4e66ae;
	position: relative;
	width: 20px;
}
.main .button .btn_next .btn_icn::after {
	content: "\e602";
	position: absolute;
	top: 0;
	left: 5px;
	bottom: 0;
	display: inline-block;
	height: 12px;
	max-width: 12px;
	margin: auto;
	font-size: 12px;
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
}


/* textbox
/* -------------------------------------------------------------------------------- */
.form_box input[type=text],
.form_box input[type=password] {
	-webkit-appearance: none;

	display: block;
	width: 100%;
	height: 36px;
	padding: 10px;

	font-size: 14px;
	line-height: 20px;

	border: 1 solid #c6c6c6;
	border-radius: 0;
}
.form_box .st_error input[type=text],
.form_box .st_error input[type=password] {
	border: 1px solid #d71313;
}


/* textarea
/* -------------------------------------------------------------------------------- */
.form_box textarea {
	-webkit-appearance: none;

	display: block;
	width: 100%;
	height: 100px;
	padding: 10px;

	font-size: 14px;
	line-height: 20px;

	border: 1 solid #c6c6c6;
	border-radius: 0;
}
.form_box .st_error textarea {
	border: 1px solid #d71313;
}


/* selectbox
/* -------------------------------------------------------------------------------- */
.form_box select {
	padding: 5px;
	min-width: 306px;
	max-width: 676px;
}


/* checkbox
/* -------------------------------------------------------------------------------- */
.form_box input[type="checkbox"] {
}

/* Chrome Firefox IE9+ */
@media only screen {

	.form_box input[type="checkbox"] + label {
		cursor: pointer;
	}

	.form_box input[type="checkbox"] + label:before {
		content: "";

		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;

		width: 16px;
		height: 16px;
		margin: auto;

		border: 1px solid #000;
	}
	.form_box input[type="checkbox"]:checked + label:after {
		font-family: 'icons_tog';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		vertical-align: middle;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		content: "\e61f";

		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;

		display: block;
		width: 16px;
		height: 16px;
		margin: auto;

		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}

	.form_box input[type="checkbox"] {
		display: none;
	}

	/* disabled */
	.form_box input[type="checkbox"]:disabled + label {
		cursor: default;
	}
	.form_box input[type="checkbox"]:disabled + label:before {
		border: 1px solid #c6c6c6;
	}
	.form_box input[type="checkbox"]:disabled + label:after {
		color: #c6c6c6;
	}
}


/* radio
/* -------------------------------------------------------------------------------- */
.form_box input[type="radio"] {
}

/* Chrome Firefox IE9+ */
@media only screen {

	.form_box input[type="radio"] + label {
		position: relative;

		display: inline-block;
		min-height: 18px;
		padding-left: 30px;

		line-height: 18px;

		cursor: pointer;

		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.form_box input[type="radio"] + label:before,
	.form_box input[type="radio"] + label:after {
		content: "";

		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;

		display: block;
	}
	.form_box input[type="radio"] + label:before {
		width: 18px;
		height: 18px;
		margin: auto 0;

		background: #e4e4e4;
		border-radius: 18px;
	}
	.form_box input[type="radio"] + label:after {
		width: 8px;
		height: 8px;
		margin: auto 5px;

		background: #c6c6c6;
		border-radius: 8px;
	}

	.form_box input[type="radio"]:checked + label:after {
		background: #000;
	}

	.form_box input[type="radio"] {
		display: none;
	}

}


/* either
/* -------------------------------------------------------------------------------- */

.form_box .form_either label {
	margin-right: 12px;
}

/* Chrome Firefox IE9+ */
@media only screen {

	.form_box .form_either {
		position: relative;

		display: inline-block;
		width: 120px;
		height: 30px;
		padding: 1px;
		overflow: hidden;

		vertical-align: middle;

		background: #fff;
		border: 1px solid #c6c6c6;
	}

	.form_box .form_either input[type="radio"] + label {
		z-index: 1;

		float: left;
		display: block;
		width: 50%;
		margin-right: 0;

		font-size: 11px;
		text-align: center;
		line-height: 26px;

		color: #666;
		border: 1px solid #fff;

		/* cancel radio style */
		position: static !important;
		min-height: initial;
		min-height: auto;
		padding: 0;
	}
	.form_box .form_either input[type="radio"]:checked + label {
		color: #fff;
	}

	/* current text */
	.form_box .form_either input[type="radio"]:checked + label:after {
		content: attr(data-label);
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 1;

		width: 50%;
		height: 26px;

		line-height: 28px;

		color: #fff;

		/* cancel radio style */
		margin: 0 !important;
		border-radius: 0;
		background: transparent;
		border: 1px solid transparent;
	}
	.form_box .form_either input[type="radio"] + label:after {
		/* cancel radio style */
		margin: 0 !important;
		border-radius: 0;
		background: transparent;
		border: 1px solid transparent;
	}
	.form_box .form_either input[type="radio"]:checked:first-child + label:after {
		left: 0;
	}
	.form_box .form_either label + input[type="radio"]:checked + label:after {
		right: 0;

		/* cancel radio style */
		left: auto;
	}

	/* current background */
	.form_box .form_either label:last-child:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 0;

		width: 50%;
		height: 26px;
		margin: auto;

		background: #000;
		border: solid #fff;
		border-width: 0 1px;

		-webkit-transition: left 200ms;

		transition: left 200ms;
	}
	.form_box .form_either input[type="radio"]:checked + label + input[type="radio"] + label:before {
		left: 0;

		/* cancel radio style */
		border-radius: 0;
	}

	.form_box .form_either input[type="radio"] + label + input[type="radio"]:checked + label:before {
		left: 50%;

		/* cancel radio style */
		border-radius: 0;
	}

	.form_box .form_either input[type="radio"]:first-child + label:before,
	.form_box .form_either label:last-child:after {
		/* cancel radio style */
		content: none;
	}
}

/* has_either table
/* .................................................. */
.form_box .has_either {
	width: 150px;

	text-align: right;
	vertical-align: middle;
}



/* ================================================================================
/* 	finish_box
/* ================================================================================ */
/* paragraph
/* -------------------------------------------------------------------------------- */
.finish_box .paragraph {
	display: table;
	width: 100%;
	height: 240px;
	margin-bottom: 30px;
}
.finish_box .paragraph .inner {
	display: table-cell;

	font-size: 14px;
	line-height: 1.5;
}
.finish_box .paragraph .head {
	font-size: 18px;
}


/* paragraph
/* -------------------------------------------------------------------------------- */
.finish_box .banner_box {
	margin-bottom: 30px;
	border-bottom: 0 none;
}


/* foot_navi_box
/* -------------------------------------------------------------------------------- */
.hero .foot_navi_box,
.finish_box .foot_navi_box {
	text-align: center;
}



/* ================================================================================
/* 	empty_box
/* ================================================================================ */
.empty_box {
	line-height: 1.5;
}
.tog_contents .aside .tab_box.activity .category .body .empty_box {
	padding: 20px;
	border-bottom: 1px dotted #666;
}
.tog_contents .aside .base_box.activity .body .empty_box {
	padding: 20px;
	border-bottom: 1px dotted #666;
}
.tog_contents .aside .base_box.information .body .empty_box {
	margin-top: -10px;
	padding: 20px;
	border-bottom: 1px dotted #666;
}


/* ================================================================================
/* 	control_box
/* ================================================================================ */

.control_box {
	position: relative;
	z-index: 1;

	padding: 11px 13px;

	border: 1px solid #c6c6c6;
}
.control_box:after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
}

/* list_control
/* -------------------------------------------------------------------------------- */
.control_box .list_control {
	float: left;
	margin: 5px 0;

	line-height: 16px;
}
.control_box .list_control:before,
.control_box .list_control:after {
	content: "";
	position: absolute;
}
.control_box .list_control:before {
	left: 19px;
	bottom: -10px;

	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #c6c6c6;
}
.control_box .list_control:after {
	left: 20px;
	bottom: -9px;

	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid #fff;
}

.control_box .list_control a {
	padding: 0 9px 0 0;
}
.control_box .list_control a ~ a {
	padding-left: 9px;

	border-left: 1px solid #666;
}
.control_box .list_control a:hover {
	color: #999;
}

/* button
/* -------------------------------------------------------------------------------- */
.control_box .button {
	float: left;
	margin-left: 5px;
}
.control_box .button a {
	width: 100px;
	height: 26px;
	padding: 4px;

	font-size: 12px;
	line-height: 16px;
	letter-spacing: normal;
}

.control_box .button.st_disabled a,
.control_box .button .btn_disable {
	display: none;
}
.control_box .button.st_disabled .btn_disable {
	display: inline-block;
	width: 100px;
	height: 26px;
	padding: 4px;

	font-size: 12px;
	line-height: 16px;
	letter-spacing: normal;
}



/* ================================================================================
/* 	inbox
/* ================================================================================ */

.inbox {
	position: relative;
	z-index: 0;
}

.inbox table {
	table-layout: fixed;
	width: 100%;
	margin: 0;
}

.inbox table tr {
	background: #f2f2f2;
}

.inbox table td {
	line-height: 1.3;
	vertical-align: middle;

	border-bottom: 1px dotted #666;
}

.inbox table td label {
	position: absolute;

	cursor: pointer;
}

/* checkbox
/* -------------------------------------------------------------------------------- */
.inbox table .checkbox {
	padding: 20px;
	width: 56px;

	text-align: center;
}
.inbox table .checkbox label {
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
}


/* summary
/* -------------------------------------------------------------------------------- */
.inbox table .summary {
	padding: 0;
}
.inbox table .summary a {
	display: block;
	padding: 20px 0;

	word-wrap: break-word;
	text-decoration: none;
}
.inbox table .summary .date {
	font-size: 10px;
}

/* 既読
/* .................................................. */
.inbox table .st_unread {
	background: #fff;
}
.inbox table .st_unread .title {
	font-weight: bold;
}



/* ================================================================================
/* 	pageing
/* ================================================================================ */
.page_box {
	padding: 30px 0;
	text-align: center;
}
.page_box div {
	margin-bottom: 15px;

	font-size: 12px;
}

.page_box .pages {
	position: relative;
	width: 608px;
	margin: 0 auto;
}
.page_box .pages > div {
	margin:0 auto;
	height: 27px;
	overflow: hidden;
}

/* ul
/* .................................................. */
.page_box ul {
	margin: 0 auto;
	font-size: 0;
	overflow: hidden;
}
.page_box ul li {
	float: left;
	border-left: 1px solid #fff;
}
.page_box ul li a,
.page_box ul li span {
	display: block;

	width: 26px;
	line-height: 26px;


	font-size: 12px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}
.page_box ul li a {
	background: #e4e4e4;
}
.page_box ul li a:hover {
	text-decoration: underline;
	color: #000;
}

/* current */
.page_box ul li.st_current span {
	background: #000;
	color: #fff;
}


/* prev next */

.page_box .prev,
.page_box .next {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40px;
	color: transparent;
	background: #000;
	border: none;
}
.page_box .next {
	left: auto;
	right: 0;
}
.page_box .prev.st_disabled,
.page_box .next.st_disabled {
	background: #e4e4e4;
}
.page_box .prev:before,
.page_box .next:before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7px 0 0 -12px;
	content: "";
	display: block;
	border: 7px solid transparent;
	border-right-color: #fff;
}
.page_box .next:before {
	margin: -7px 0 0 -2px;
	border-right-color: transparent;
	border-left-color: #fff;
}



/* ================================================================================
/* 	overlay
/* ================================================================================ */

/* window
/* .................................................. */
.overlay {
	position: fixed;
	top: 96px;
	left: 0;
	right: 0;
	z-index: 100;

	display: none;
	width: 1136px;
	min-height: 200px;
	margin: 0 auto;

	background: #fff;
}

/* head */
.overlay .head {
	padding: 15px 30px 14px;
}

.overlay .head .btn_close {
	position: relative;
	padding-right: 0;

	font-size: 11px;
	font-weight: normal;

	cursor: pointer;
}
.overlay .head .btn_close:hover {
	text-decoration: underline;
}
.overlay .head .btn_close:before {
	position: absolute;
	left: -20px;
	top: 5px;
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	content: "\e624";

	margin-right: 8px;
	font-size: 10px;
	font-weight: normal;
}

/* body */
.overlay .body {
	padding: 30px;

	max-height: 360px;
	overflow-y: auto;
}

/* paragraph */
.overlay .body .paragraph {
	margin: 0 20px 18px;
}
.overlay .body .paragraph p {
	margin-top: 0;

	font-size: 16px;
	line-height: 1.4;
}

/* foot */
.overlay .foot {
	position:relative;
}
.overlay .foot .button {
	padding: 10px 0;

	text-align: center;

	background: #c6c6c6;
}
.overlay .foot .icn_close {
	padding: 9px;
	font-size: 12px;
	font-weight: normal;
	background: #fff;
	color: #000;
}
.overlay .foot .icn_close:hover {
color: #039;
}
.overlay .foot .icn_close:before {
	content: "\e624";
	padding-right: 15px;
	vertical-align: -1px;
}
.overlay .foot .btn_return {
	left: 30px;
	background: #9e9e9e;
}
.overlay .foot .btn_return:hover {
	background: #8e8e8e;
}
.overlay .foot .btn_return:before {
	border-right-color: #9e9e9e;
}
.overlay .foot .btn_return:hover:before {
	border-right-color: #8e8e8e;
}

/* screen
/* .................................................. */
.overlay_screen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;

	display: none;

	background: #000;
}


/* overlay - friend
/* -------------------------------------------------------------------------------- */
.overlay.friend {
	width: 640px;
}
.overlay.friend .body {
	max-height: 396px;
}

/* paragraph */
.overlay.friend .paragraph p.note {
	margin-top: 10px;
	font-size: 12px;
}

/* avatar */
.overlay.friend .avatar {
	text-align: center;
	margin: 24px 0;
}
.overlay.friend .avatar img {
	height: 150px;
	width: auto;
}
.overlay.friend .avatar_name {
	position: relative;

	display: inline-block;
	min-width: 200px;
	padding: 10px 20px;
	margin-top: 20px;

	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 18px;

	background: #e4e4e4;
}
.overlay.friend .avatar_name span {
	display: inline-block;
	max-width: 480px;
	overflow: hidden;

	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
}
.overlay.friend .avatar_name:before {
	content: "";

	position: absolute;
	top: -10px;
	left: 0;
	right: 0;

	display: block;
	width: 0;
	height: 0;
	margin: auto;

	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #e4e4e4;
}

.overlay.friend .name {
	display: block;

	text-align: center;
}
.overlay.friend .name div {
	display: inline-block;
	padding: 20px;
	overflow: hidden;

	font-size: 16px;

	border: 1px solid #c6c6c6;
}
.overlay.friend .name div span {
	display: inline-block;
	max-width: 505px;
	overflow: hidden;

	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
}


/* R18メールマガジン受信設定モーダル
/* -------------------------------------------------------------------------------- */
.overlay_noclick {
	position: fixed;
	top: 96px;
	left: 0;
	right: 0;
	z-index: 100;

	display: block;
	width: 500px;
	min-height: 200px;
	margin: 0 auto;

	background: #fff;
}

.overlay_noclick .paragraph {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 10px;
}

.overlay_noclick .button a {
	display: inline-block;
	width: 150px;
}

.overlay_screen_noclick {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	display: block;
	opacity: 0.8;

	background: #000;
}

.email_subscription .form_box {
  text-align: center;
}

.email_subscription .form_box label {
	padding: 0 30px;
	font-size: 14px;
}


/* ================================================================================
/* 	wswg_content
/* ================================================================================ */

.wswg_content {
	margin-top: 20px;
	padding: 20px;
	line-height: 1.5;
	font-size: 14px;
	border-top: 1px dotted #666;
	word-break: break-all;
}

.wswg_content > * {
	margin: 5px 0;
}

.wswg_content strong {
	font-weight: bold;
}

.wswg_content em {
	font-style: italic;
}

.wswg_content u,
.wswg_content ins {
	text-decoration: underline;
}

.wswg_content s,
.wswg_content del {
	text-decoration: line-through;
}
.wswg_content ol,
.wswg_content ul {
	margin: 20px 0;
}
.wswg_content ul li {
	position: relative;
	padding-left: 15px;
}

.wswg_content ul li:before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}

.wswg_content ol {
	margin-left: 22px;
}

.wswg_content ol li {
	list-style-type: decimal;
}

.wswg_content .marker {
	display: inline-block;
	margin: 1px 0;
	padding: 2px 3px;
	background: #c6c6c6;
	color: #fff;
}

.wswg_content big {
	font-size: 20px;
}
.wswg_content small {
	font-size: 12px;
}

.wswg_content code,
.wswg_content kbd,
.wswg_content samp {
	display: inline-block;
	margin: 1px 3px;
	padding: 0px 3px;
	background: #eee;
	border:1px solid #ccc;
}

.wswg_content var {font-style: normal;}

.wswg_content cite {
	padding: 0 3px;
	font-family: italic;
}

.wswg_content q {
	padding: 0 3px;
	font-family: italic;
}
.wswg_content q:before{
	content: "“";
}
.wswg_content q:after {
	content: "”";
}

.wswg_content h1 {font-size: 22px;}
.wswg_content h2 {font-size: 20px;}
.wswg_content h3 {font-size: 18px;}
.wswg_content h4 {font-size: 16px;}
.wswg_content h5 {font-size: 14px;}
.wswg_content h6 {font-size: 12px;}

.wswg_content pre {
	margin: 20px 0;
	padding: 10px 20px;
	background: #eee;
	border:1px solid #ccc;
}
.wswg_content address {
	font-style: italic;
}
.wswg_content > div {
	margin: 20px 0;
	padding: 15px 20px;
}


/* ================================================================================
/* 	system_error
/* ================================================================================ */
.system_error {
	padding: 0 0 30px;
}
.system_error li {
	position: relative;
	display: block;
	padding-left: 10px;
	font-weight: bold;
	color: #d70101;
	line-height: 1.5;
	word-break: break-all;
}
.system_error li:before {
	content: "・";
	position: absolute;
	top: 0;
	left: -5px;
}


/* ================================================================================
/* 	bx.slider controls
/* ================================================================================ */
.slider_box {
	position: relative;
	padding-bottom: 31px;

	background: #e4e4e4;
}
.slider_box .current .scene a {
	position: relative;
}
.slider_box .current .scene a img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	margin: auto;
}
.slider_box .bx-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;

	height: 30px;
}

.tog_box .slider_box .bx-controls {
	position: relative;
	height: 40px;
}

/* bx-pager */
.slider_box .bx-pager {
	position: absolute;
	top: 0;
	left: 30px;
	right: 30px;
	bottom: 0;
	z-index: 0;

	display: block;
	height: 10px;
	margin: auto;
	text-align: center;
}
.slider_box .bx-pager .bx-pager-item {
	display: inline-block;
	margin: 0 8px;
}
.slider_box .bx-pager a {
	display: inline-block;
	width: 10px;
	height: 0;
	padding: 10px 0 0;
	overflow: hidden;

	line-height: 10px;

	border-radius: 10px;

	background: #999;
}
.slider_box .bx-pager a.active {
	background: #000;
}
/* bx-controls-direction */
.slider_box .bx-controls-direction a {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;

	width: 30px;
	height: 0;
	padding: 30px 0 0;
	margin: auto;
	overflow: hidden;

	background: #000;
}
.slider_box .bx-controls-direction a:hover {
	opacity: 0.7;
}
.slider_box .bx-controls-direction a:after {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	display: block;
	width: 14px;
	height: 14px;
	margin: auto;

	font-size: 14px;

	color: #fff;
}

.slider_box .bx-controls-direction a.bx-prev {
	left: 0;
}
.slider_box .bx-controls-direction a.bx-prev:after {
	content: "\e601";
}

.slider_box .bx-controls-direction a.bx-next {
	right: 0;
}
.slider_box .bx-controls-direction a.bx-next:after {
	content: "\e602";
}