/*----------------------------- */
/* NET TSUTAYA COMMON [ HEADER ] */
/* (includes GLOBALNAV) */
/*----------------------------- */
#cosmo_header .sp_cosmo_header {
  border: none;
}
#cosmo_header .sp_cosmo_header .header-logo_area {
  padding-right: 50px;
}
#cosmo_header .sp_cosmo_header .header-logo_area p.header-logo_tsite {
  padding-right: 10px;
}

/* アイコン画像のサイズ指定 追加 for 1806 */
#cosmo_header .sp_cosmo_header.cosmo_header_new ul.header-user_tnav > li.header-user_menu_login.login a{
  background-size: 46px 30px;
}
#cosmo_header .sp_cosmo_header.cosmo_header_new ul.header-user_tnav > li.header-user_menu_login a{
  background-size: 46px 30px;
}
#cosmo_header .sp_cosmo_header.cosmo_header_new .wrsp-nav-btn{
  background-size: 33px 30px  !important;
}

/* ログイン後のヘッダーメニュー内のTポイントロゴ横のマージン追加 */
.topint_img{
  margin-right: 5px;
}

/*

 * reset
 * tog_header
 * tog_footer

*/



/* ================================================================================
/* reset
/* ================================================================================ */

html, body {
	height: auto;
	margin: 0;
	padding: 0;

	background: #fff;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

div, p, form {
	margin: 0;
	padding: 0;

	font-size: 100%;
}

/* table
/* .................................................. */
.tog_box table {
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.tog_box th, td {
	padding: 0;
}

/* head
/* .................................................. */
.tog_box h1,
.tog_box h2,
.tog_box h3,
.tog_box h4,
.tog_box h5,
.tog_box h6 {
	margin: 0;
	padding: 0;

	font-size: 100%;
}

/* list
/* .................................................. */
.tog_box ul,
.tog_box ol,
.tog_box li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* image
/* .................................................. */
.tog_box img {
	vertical-align: middle;
}

/* text
/* .................................................. */
.tog_box em {
	font-style: normal;
}

/* link
/* .................................................. */
a:link,
a:visited,
a:hover {
	color: inherit;
	text-decoration: none;
}


.tog_box {
	background: #fff;
	font-size: 12px;
	line-height: 1;
}

/* ================================================================================
/* tog_header
/* ================================================================================ */

.tog_header {
	position: relative;

	display: block;

	font-size: 14px;
	line-height: 20px;
	word-break: break-all;

	color: #fff;
	background: #000;
}
.tog_header .game_header {
	position: relative;
	overflow: hidden;
	padding: 5px 15px;

	font-size: 11px;
	color: #999;
}

.tog_header .page_title {
	padding: 10px 15px;
	border-top: 1px solid #444;
}

/* aside link
/* -------------------------------------------------------------------------------- */
.tog_header [class*="icn_"]:not(.arrow_link) {
	display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 132px;
	font-size: 12px;
	font-weight: normal;
	background: #BFBFBF;
}
.tog_header .icn_r18:not(.arrow_link) {
	background: #FF4650;
}
.tog_header [class*="icn_"] a {
	position: relative;
	display: block;
	color: #000;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	line-height: 1;
}
.tog_header .icn_r18:not(.arrow_link) a,
.tog_header [class*="icn_"].arrow_link a {
	color: #fff;
}
@media (max-width: 335px) {
	.tog_header [class*="icn_"]:not(.arrow_link) {
		width: 110px;
	}
	.tog_header [class*="icn_"]:not(.arrow_link) a {
		font-size: 10px;
	}
	
}

/* icon */
.tog_header [class*="icn_"] a:before {
	content: "";

	display: inline-block;
	height: 16px;
	width: 16px;
	margin-right: 5px;
	background: url(../res-etc-place-s/common/images/icon/icn_general_min.svg) no-repeat 0 0;
	background-size: cover;
	vertical-align: -3px;
}
.tog_header .icn_r18 a:before {
	background: url(../res-etc-place-s/common/images/icon/icn_r18_w.svg) no-repeat 0 0;
}

/* arrow */
.tog_header [class*="icn_"].arrow_link {
	float: right;
}
.tog_header [class*="icn_"].arrow_link a {
	line-height: 20px;
}
.tog_header [class*="icn_"].arrow_link a:before {
	content: none;
}
.tog_header .arrow_link a:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;

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

	font-size: 12px;

	color: #dedede;
}

/* ================================================================================
/* tog_footer
/* ================================================================================ */

.tog_footer {
	padding: 5px 15px;

	font-size: 10px;

	border-bottom: 1px solid #c6c6c6;
}

/* link */
.tog_footer ul {
	overflow: hidden;
}
.tog_footer ul li {
	float: left;
	display: inline-block;
	height: 12px;
	padding: 0 15px 0 0;
	margin: 5px 15px 5px 0;
	overflow: hidden;

	border-right: 1px solid #000;
}
.tog_footer ul li:last-child {
	border: 0 none;
}

.tog_footer a {
	text-decoration: none;
}

/* text */
.tog_footer span {
	display: block;
	margin: 5px 0;
}


/* ================================================================================
/* header, fotter なし
/* ================================================================================ */

.no_header .game_header em a {
	padding: 0;
	color: #999;
}
#cosmo_footer.no_footer {
	border-top: 1px solid #c6c6c6;
}

/*

 * font

 * froating navigation

 * base_box
 * relation_box
 * paragraph
 * alert_box

 * game_list
 * link_list
 * amount_box
 * activity_list

 * tab_box
 * toggle_box

 * button
 * arrow_link

 * form_box
 * finish_box
 * banner_box
 * step_box

 * message_box
 * page_box
 * overlay

 * social


*/



/* ================================================================================
/* font
/* ================================================================================ */

/* Google Fonts Roboto
/* .................................................. */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

/* icon font
/* .................................................. */
@font-face {
	font-family: 'icons_tog';
	src: url('../res-etc-place-s/common/fonts/icons_tog.ttf?-y9kt9g') format('truetype');
	font-weight: normal;
	font-style: normal;
}

[class^="icn_"]:before,
[class^="icn_"] a:before,
[class^="icn_"] span:before,
[class^="icn_"] .item:before,
[class^="icn_"] a:after,
[class*=" icn_"]:before,
[class*=" icn_"] a:before,
[class*=" icn_"] span:before,
[class*=" icn_"] .item:before,
[class*=" icn_"] a:after,
.form_select:before,
.form_select: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;
}

/* alert */
.icn_alert a:before,
.icn_alert .item:before {
	content: "\e600";
}

/* arrow */
.icn_arrow_left a:before,
.icn_arrow_left .item:before {
	content: "\e601";
}
.icn_arrow_right a:after {
	content: "\e602";
}
.icn_arrow_up a:after {
	content: "\e61c";
}
.icn_arrow_bottom a:after {
	content: "\e62b";
}
.icn_under a:after {
	content: "\e628";
}

.icn_change a:before,
.icn_change .item:before {
	content: "\e603";
}
.icn_change_bg a:before,
.icn_change_bg .item:before {
	content: "\e604";
}
.icn_comments a:before,
.icn_comments .item:before {
	content: "\e605";
}
.icn_comments_bg a:before,
.icn_comments_bg .item:before {
	content: "\e606";
}
.icn_friendlist a:before,
.icn_friendlist .item:before {
	content: "\e607";
}
.icn_friendlist_bg a:before,
.icn_friendlist_bg .item:before {
	content: "\e608";
}
.icn_game a:before,
.icn_game .item:before {
	content: "\e609";
}
.icn_game_search a:before,
.icn_game_search .item:before {
	content: "\e60a";
}
.icn_gold a:before,
.icn_gold span:before,
.icn_gold .item:before {
	content: "\e60b";
}
.icn_golds a:before,
.icn_golds .item:before {
	content: "\e60c";
}
.icn_golds_gb a:before,
.icn_golds_gb .item:before {
	content: "\e60d";
}
.icn_help_send a:before,
.icn_help_send .item:before {
	content: "\e60e";
}
.icn_home a:before,
.icn_home .item:before {
	content: "\e60f";
}
.icn_mail a:before,
.icn_mail .item:before {
	content: "\e610";
}
.icn_presents a:before,
.icn_presents .item:before {
	content: "\e611";
}
.icn_smile a:before,
.icn_smile .item:before {
	content: "\e612";
}

/* user */
.icn_user_arrow a:before,
.icn_user_arrow .item:before {
	content: "\e613";
}
.icn_user_arrow_bg a:before,
.icn_user_arrow_bg .item:before {
	content: "\e614";
}
.icn_user_friends a:before,
.icn_user_friends .item:before {
	content: "\e615";
}
.icn_user_friends_bg a:before,
.icn_user_friends_bg .item:before {
	content: "\e616";
}
.icn_user_plus a:before,
.icn_user_plus .item:before {
	content: "\e617";
}
.icn_user_plus_bg a:before,
.icn_user_plus_bg .item:before {
	content: "\e618";
}
.icn_user_search a:before,
.icn_user_search .item:before {
	content: "\e619";
}
.icn_user_search_bg a:before,
.icn_user_search_bg .item:before {
	content: "\e61a";
}

.icn_lock a:before,
.icn_lock .item:before {
	content: "\e61b";
}
.icn_unlock a:before,
.icn_unlock .item:before {
	content: "\e626";
}
.icn_rankup a:before {
	content: "\e61e";
}

.icn_check a:after {
	content: "\e61f";
}

.icn_new a:after {
	content: "\e622";
}

.icn_require a:after {
	content: "\e623";
}

.icn_pencil a:before {
	content: "\e625";
}

.icn_review:before {
	content: "\e627";
}

.icn_maintenance a:before,
.icn_maintenance .item:before {
	content: "\e629";
}
.icn_info a:before,
.icn_info .item:before {
	content: "\e62a";
}
.icn_register .item:before,
.icn_register a:before {
	content: "\e632";
}
.icn_help .item:before {
	content: "\e633";
}

/* overlay */
.icn_close span:before {
	content: "\e624";
}

/* game start */
.st_accept.button.icn_game .item:before {
	padding-right: 10px;
	font-size: 19px;

	vertical-align: top;
}



/* ================================================================================
/* yahoo_login
/* ================================================================================ */
.yahoo_login {
	display: block;
	width: 196px;
	margin: 15px auto;

}
.yahoo_login img {
	text-align: center;
}



/* ================================================================================
/* froating navigation
/* ================================================================================ */

.tog_nav {
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;

	background: #000;
}
.tog_nav ul {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.tog_nav.st_hidden {
	display: none;
}

.tog_nav li {
	display: table-cell;
}
.tog_nav li ~ li {
	border-left: 1px solid #282828;
}
.tog_nav li.icn_game_search {
	border-right: 1px solid #666;
}
.tog_nav li.icn_register {
	background:#003288;
}
.tog_nav .icn_register a {
	color: #fff;
}
.tog_nav .icn_register a:before {
	color: transparent;
	background: url(../res-etc-place-s/common/images/icon/icn_register.svg) no-repeat center center;
}

/* link */
.tog_nav a {
	position: relative;
	display: block;
	padding: 7px 0;

	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;

	color: #999;
}

a.text-link {
	text-decoration: underline;
}

/* icon */
.tog_nav a:before {
	display: block;
	margin: auto auto 5px;
	line-height: 30px;

}
.tog_nav .icn_home a:before {
	font-size: 24px;
}

/* png icon */
.tog_nav .icn_mygame {
	background: url(../res-etc-place-s/common/images/icon/icn_mygame.png)no-repeat center 7px;
	background-size: 30px 30px;
	-webkit-background-size: 30px 30px;
}
.tog_nav .icn_mygame a:before {
	content: "　";
	font-size: 23px;
}
.tog_nav .icn_smile a:before {
	font-size: 23px;
}
.tog_nav .icn_game_search a:before {
	font-size: 22px;
}
.tog_nav .icn_register a:before {
	font-size: 25px;
}
.tog_nav .icn_unlock a:before {
	font-size: 24px;
}

/* check */
.tog_nav .icn_check a:after {
	position: absolute;
	top: 6px;
	right: 7px;

	font-size: 16px;
	color: #f57;
}



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

.base_box {
	border-bottom: 1px solid #c6c6c6;
}
.base_box:last-child {
	border-bottom: 0 none;
}


/* head
/* -------------------------------------------------------------------------------- */
.base_box > .head {
	min-height: 40px;
	padding: 10px 15px;

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

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



/* ================================================================================ */
/* relation_box
/* ================================================================================ */
.relation_box {
	margin: 10px 15px 15px;
}
.relation_box .label {
	padding-bottom: 6px;

	border-bottom: 3px solid #666;

	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
}



/* ================================================================================
/* paragraph
/* ================================================================================ */
.paragraph {
	padding: 12px 15px;
}
.step_box + .paragraph {
	padding-top: 0;
}
.paragraph p {
	font-size: 12px;
	line-height: 1.5;
	word-break: break-all;
}
.paragraph p ~ p {
	margin-top: 5px;
}
.paragraph + .button a {
	margin-top: 0;
}
.detail_box .paragraph {
	border-bottom: 1px solid #c6c6c6;
}




/* ================================================================================
/* alert_box
/* ================================================================================ */
.alert_box {
	font-weight: bold;
	color: #d70101;
}
.alert_box .link_list li {
	margin-left: 25px;
	padding: 8px 0 8px 5px;

	line-height: 1.5;
	border-top: none;
	word-break: break-all;
}
.alert_box .link_list li .item:before {
	top: -2px;
	left: -25px;
	width: 22px;
	height: 22px;

	font-size: 22px;
	color: #d70101;
}
.alert_box .link_list li.system_error {
	margin-left: 15px;
	padding-left: 0;
	list-style-type: disc;
}


/* ================================================================================
/* maincarousel_box
/* ================================================================================ */
.maincarousel_box {
	position: relative;
}
.maincarousel_box .figure {
	position: relative;
	height: 180px;
}
.maincarousel_box .figure img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	max-width: 320px;
	max-height: 180px;

	margin: auto;
}



/* ================================================================================
/* game_list
/* ================================================================================ */

[class^="game_list"],
[class*=" game_list"] {
	display: block;
	overflow: hidden;

	border-bottom: 1px solid #c6c6c6;
}

[class^="game_list"] .item,
[class*=" game_list"] .item {
	position: relative;

	display: block;
}

[class^="game_list"] .item,
[class*=" game_list"] .item {
	position: relative;

	display: block;

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

/* date
/* .................................................. */
[class^="game_list"] .date,
[class*=" game_list"] .date {
	display: block;
	font-size: 10px;
}

/* name
/* .................................................. */
[class^="game_list"] .name,
[class*=" game_list"] .name {
	display: block;
	font-weight: bold;
	word-break: break-all;
}

/* description
/* .................................................. */
[class^="game_list"] .description,
[class*=" game_list"] .description {
	display: block;
	word-break: break-all;
}

/* tag
/* .................................................. */
[class^="game_list"] .item_tag,
[class*=" game_list"] .item_tag {
	display: block;
	overflow: hidden;
}
[class^="game_list"] .item_tag img,
[class*=" game_list"] .item_tag img {
	float: left;
}
[class^="game_list"] .item_tag img ~ img,
[class*=" game_list"] .item_tag img ~ img {
	margin-left: 2px;
}


/* line
/* -------------------------------------------------------------------------------- */
.game_list-line .item {
	display: table;
	border-collapse: collapse;

	width: 100%;

	border-top: 1px solid #c6c6c6;
}

/* figure */
.game_list-line .figure {
	display: table-cell;

	width: 90px;
	padding: 6px 0;

	text-align: center;
	vertical-align: top;

}

/* data */
.game_list-line .data {
	display: table-cell;
	padding: 10px 12px;

	vertical-align: top;

	background: #e4e4e4;
}

.game_list-line .data .description {
	margin-top: 5px;
}
.game_list-line .data .description + .item_tag {
	margin-top: 8px;
}

/* banner
/* .................................................. */
.game_list-line.banner .item {
	display: block;
	background: #e4e4e4;
}
.game_list-line.banner .figure {
	display: block;
	width: 100%;
	padding: 0;
}
.game_list-line.banner .figure img {
	display: block;
	margin: 0 auto;
}


/* tile
/* -------------------------------------------------------------------------------- */
.game_list-tile .item {
	float: left;
	background: #e4e4e4;
	text-align: center;
}

.game_list-tile .figure {
	display: block;
}

/* minimum
/* .................................................. */
.game_list-tile.minimum {
	display: table;
	overflow: visible;
	table-layout: fixed;
	width: 100%;
}
.game_list-tile.minimum .item {
	display: table-cell;
	float: none;
	padding: 15px 5px 12px;

	background: none;
}
.game_list-tile.minimum .item .figure {
	width: 70px;
	height: 70px;
	margin: 0 auto;

	overflow: hidden;
}
.game_list-tile.minimum .item .figure img {
	margin: -8px 0 0 -8px;
}
.game_list-tile.minimum .name{
	padding-top: 5px;
	font-size: 10px;
	font-weight: normal;
}
.game_list-tile.minimum.no_foot {
	border-bottom: none;
}

/* ranking
/* .................................................. */
.rank .game_list-tile {
	border-top: 1px solid #ccc;
}

/* item */
.rank .game_list-tile .item {
	position: relative;
	width: 159px;
	height: 245px;
	counter-increment: rank;
}
.rank .game_list-tile .item ~ .item {
	border-left: 1px solid #ccc
}

/* badge */
.rank .game_list-tile .item:before {
	content: counter(rank);
	position: absolute;
	top: 0;
	left: 0;

	display: block;
	width: 39px;
	height: 54px;

	line-height: 40px;
	font-family: "Avenir-Heavy", "Avenir", "roboto", sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 1px #4e4e4e;

	background: url(../res-etc-place-s/common/images/img_ranking.png) no-repeat;
	background-size: 195px 54px;
	background-position: -117px 0;
}
.rank .game_list-tile .item:nth-child(1):before {
	content:"";
	background-position: -0 0;
}
.rank .game_list-tile .item:nth-child(2):before {
	content:"";
	background-position: -39px 0;
}
.rank .game_list-tile .item:nth-child(3):before {
	content:"";
	background-position: -78px 0;
}

/* figure */
.rank .game_list-tile .figure {
	padding: 0;
}

/* data */
.rank .game_list-tile .data {
	display: block;
	padding: 0 15px;
}
.rank .game_list-tile .item_tag {
	position: absolute;
	bottom: 10px;
	left: 19px;

	width: 124px;
	height: 35px;
	overflow: hidden;
}
.rank .game_list-tile .item_tag img {
	margin: 2px 2px 0 0;
}


/* new */
.game_list-line .item.st_new .figure:before,
.game_list-line .item.st_new .figure:after,
.game_list-line .item.st_update .data:before,
.game_list-line .item.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;
	top: 7px;
	left: 5px;
	z-index: 1;
	font-size: 37px;
}
.game_list-line .item.st_new .figure:before {
	content: "\e62d";
	color: #f57;
	text-shadow:
		2px 2px 3px rgba(0, 0, 0, 0.2),
		2px 2px 3px rgba(0, 0, 0, 0.2);
}
.game_list-line .item.st_new .figure:after {
	content: "\e62e";
	color: #fff;
}


/* update */
.game_list-line .item.st_update .data {
	position :relative;
}
.game_list-line .item.st_update .data:before,
.game_list-line .item.st_update .data:after {
	content: "\e62f";
	display: block;
	top: 0px;
	right: 0;
	left: auto;

	font-size: 36px;
	color: #000;
}
.game_list-line .item.st_update .data:after {
	content: "\e630";
	color: #fff;
}
.game_list-line .item.st_update .date:first-child,
.game_list-line .item.st_update .name:first-child {
	margin-right: 20px;
}


/* ================================================================================
/* link_list
/* ================================================================================ */

ul[class^="link_list"],
ul[class*=" link_list"] {
	margin: 0 15px;
}
ul[class^="link_list"] li,
ul[class*=" link_list"] li {
	position: relative;
}
ul[class^="link_list"] li ~ li,
ul[class*=" link_list"] li ~ li {
	border-top: 1px dotted #666;
}
ul[class^="link_list"].has_foot li:last-child,
ul[class*=" link_list"].has_foot li:last-child {
	border-bottom: 1px dotted #666;
}
ul[class^="link_list"] div,
ul[class*=" link_list"] div {
	display: table;
	width: 100%;
	word-break: break-all;
}

ul[class^="link_list"] a,
ul[class*=" link_list"] a,
.detail_box .head .item {
	position: relative;

	display: table-cell;
	padding: 10px 0;

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

ul[class^="link_list"] div[class^="icn_"] a,
ul[class^="link_list"] div[class*=" icn_"] a,
ul[class*=" link_list"] div[class^="icn_"] a,
ul[class*=" link_list"] div[class*=" icn_"] a,
.detail_box div[class^="icn_"] .item {
	padding-left: 50px;
}

ul[class^="link_list"] a:before,
ul[class^="link_list"] span:before,
ul[class*=" link_list"] a:before,
ul[class*=" link_list"] span:before,
.detail_box .head .item:before,
.amount_box dt span:before {
	position: absolute;
	top: 0;
	left: 10px;
	bottom: 0;

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

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

	color: #8a8a8a;
}

ul[class^="link_list"] .st_new a:after,
ul[class*=" link_list"] .st_new a:after {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;

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

	content: "\e622";

	margin-left: 6px;

	font-size: 32px;
	line-height: 18px;
	vertical-align: top;

	color: #ff5577;
}

ul[class^="link_list"] a span,
ul[class*=" link_list"] a span {
	display: block;
	font-size: 12px;
	font-weight: normal;
}

/* arrow
/* -------------------------------------------------------------------------------- */
.link_list-arrow div[class^="icn_"],
.link_list-arrow div[class*=" icn_"] {
	height: 60px;
}
.link_list-arrow li a {
	display: table-cell;

	font-size: 14px;
	font-weight: bold;
	vertical-align: middle;
}
.link_list-arrow li a:before {
	left: 0;

	width: 40px;
	height: 40px;
	margin: auto;

	font-size: 40px;
	line-height: 40px;

	color: #8a8a8a;
}
.link_list-arrow li a:after,
.link_list-arrow li .item: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: "\e602";

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

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



/* news */
/* .................................................. */
.news .item .date,
.news .item .category {
	display: inline-block;
	padding-bottom: 7px;

	font-size: 10px;
	word-break: break-all;
}
.news .item .category {
	padding-left: 5px;

	overflow: hidden;
	white-space: nowrap;

	text-overflow: ellipsis;
	vertical-align: bottom;
}
.news .item em {
	display: block;
}


/* gold
/* .................................................. */
.gold .body {
	padding: 15px 0;
}

.gold .body > a {
	display: block;
	margin: 0 15px 5px;

	text-align: center;
}


/* gold-info
/* .................................................. */
.gold ul[class^="link_list"] a span, ul[class*=" link_list"] a span {
	padding-right: 15px;
}

/* detail_box
/* .................................................. */
.detail_box .head {
	padding-right: 15px;
	border-bottom: 1px solid #c6c6c6;
}
.detail_box .head .item {
	display: block;
	word-break: break-all;
}
.detail_box .head em {
	display: block;
	margin-top: 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
}

.wswg_content {
	padding: 10px 15px;
	line-height: 1.5;
	border-bottom: 1px solid #c6c6c6;
	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: 10px 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: 18px;
}
.wswg_content small {
	font-size: 10px;
}

.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: 20px;}
.wswg_content h2 {font-size: 18px;}
.wswg_content h3 {font-size: 16px;}
.wswg_content h4 {font-size: 14px;}
.wswg_content h5 {font-size: 12px;}
.wswg_content h6 {font-size: 10px;}

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

/* ================================================================================
/* amount_box
/* ================================================================================ */
.amount_box{
	min-height: 45px;
	margin: 0;
	padding: 10px 0 5px;

	font-size: 14px;

	border-top: 2px solid #666;
	overflow: hidden;
	line-height: 1.3;

}
.amount_box > dt > span,
.amount_box > dd {
	width: auto;
	line-height: 24px;
	font-weight: bold;
}
.amount_box dt {
	float: left;
	padding: 0;

	color: #000;
	background:#fff;
}
.amount_box dt span {
	position: relative;
	display: block;
	padding: 0 0 0 30px;

	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	line-height: 24px;
	text-decoration: none;
}
.amount_box dt span:before {
	left: 0;
	bottom: auto;
}
.amount_box dd {
	float: right;
	min-width: 65px;
	margin: 0 10px 0 0;

	font-size: 24px;

	text-align: right;
	font-family: "Avenir-Heavy", "Avenir", "roboto", sans-serif;
	word-break: break-all;
}
.amount_box dd .unit {
	padding-left: 3px;
}

/* t-point
/* .................................................. */
ul[class^="link_list"] .t_point,
ul[class*=" link_list"] .t_point {
	margin-top: 10px;
	padding: 10px 0 10px 0;
}
ul[class^="link_list"] .t_point:before,
ul[class*=" link_list"] .t_point:before {
	display: none;
}


/* ================================================================================
/* info_list
/* ================================================================================ */
ul[class^="info_list"],
ul[class*=" info_list"] {
	margin: 15px 15px 0;
}
ul[class^="info_list"] li,
ul[class*=" info_list"] li {
	overflow:hidden;
	padding-bottom: 5px;

	border-top: 2px solid;
}
ul[class^="info_list"].has_link li:last-child,
ul[class*=" info_list"].has_link li:last-child {
	border-bottom: 2px solid;
}

/* figure
/* .................................................. */
ul[class^="info_list"] li > .figure,
ul[class*=" info_list"] li > .figure {
	float: left;
	display: block;
	width: 50px;
	padding: 8px 0 0 3px;
}

/* data
/* .................................................. */
ul[class^="info_list"] li > .figure + .data,
ul[class*=" info_list"] li > .figure + .data {
	display: block;
	padding-left: 50px;
	word-break: break-all;
}

ul[class^="info_list"] li > .data span,
ul[class*=" info_list"] li > .data span {
	display: block;

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

/* name */
ul[class^="info_list"] li > .data .name,
ul[class*=" info_list"] li > .data .name {
	display: block;
	margin: 3px 0;
	line-height: 1.3;
}
ul[class^="info_list"] li > .data .name:first-child,
ul[class*=" info_list"] li > .data .name:first-child {
	margin-top: 10px;
	font-weight: bold;
}
/* data */
ul[class^="info_list"] li > .data dl,
ul[class*=" info_list"] li > .data dl {
	display: block;
	margin: 5px 0 10px;
	overflow: hidden;

	font-size: 12px;
	line-height: 1.5;
}
/* link */
ul[class^="info_list"] li > .data .icn_arrow_right,
ul[class*=" info_list"] li > .data .icn_arrow_right {
	position: relative;

	display: block;
	overflow: hidden;

	border-top: 1px dotted #666;
}
ul[class^="info_list"] li > .data .icn_arrow_right a,
ul[class*=" info_list"] li > .data .icn_arrow_right a {
	display: table;
	width: 100%;
	padding: 10px 0 5px;

	text-decoration: none;
}
ul[class^="info_list"] li > .data .icn_arrow_right a span,
ul[class*=" info_list"] li > .data .icn_arrow_right a span {
	display: table-cell;
}
ul[class^="info_list"] li > .data .icn_arrow_right a:after,
ul[class*=" info_list"] li > .data .icn_arrow_right a:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;

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

	font-size: 12px;
}
ul[class^="info_list"] li > .data .icn_arrow_right .figure,
ul[class*=" info_list"] li > .data .icn_arrow_right .figure {
	display: block;
	float: left;

	width: 45px;
	height: 45px;
	overflow: hidden;
}
ul[class^="info_list"] li > .data .icn_arrow_right:not(.topic) .figure img,
ul[class*=" info_list"] li > .data .icn_arrow_right:not(.topic) .figure img {
	margin: -5px 0 0 -5px;
}
ul[class^="info_list"] li > .data .icn_arrow_right .data,
ul[class*=" info_list"] li > .data .icn_arrow_right .data {
	padding: 0 15px 0 10px;

	font-weight: bold;
	vertical-align: middle;
}
ul[class^="info_list"] li > .data .icn_arrow_right .figure + .data,
ul[class*=" info_list"] li > .data .icn_arrow_right .figure + .data {
	width: 100%;
}


/* info_list-activity
/* -------------------------------------------------------------------------------- */
/* description */
.info_list-activity li > .data span.description {
	margin-bottom: 10px;
	font-weight: bold;
}
.info_list-activity li > .data span.description .des_content {
	display: block;
	margin-top: 3px;
	font-weight: normal;
	word-break: break-all;
}

/* time */
.info_list-activity li > .data span.date {
	margin-top: 10px;
	font-size: 10px;
}

/* info_list-user
/* -------------------------------------------------------------------------------- */
/* name */
.info_list-user li > .data span.name {
	font-weight: bold;
}
.info_list-user li > .data .user_data {
	margin: 5px 0 10px;
	overflow: hidden;
}

/* blood, address_region */
.info_list-user li > .data dt {
	display: inline-block;
}
.info_list-user li > .data dd {
	display: inline-block;
	margin: 0;
	word-break: break-all;
}

.info_list-user li > .data dl[class^="user_"] {
	float: left;
	width: 50%;
	margin: 0;
}
.info_list-user li > .data dl[class^="user_"] dt:after{
	content: "：";
}

.info_list-user li > .data dl.user_game {
	display: block;
	width: 100%;
	margin-top: 3px;
	clear: left;
}
.info_list-user li > .data .profile {
	margin-bottom: 10px;
	line-height: 1.3;
}


/* link
/* .................................................. */
.info_list-user li > .data .icn_arrow_right {
	clear: both;
	margin-bottom: 1px;
}

/* button
/* .................................................. */
.info_list-user li .btn_box {
	overflow: hidden;
	display: block;
	padding-left: 50px;
}

.info_list-user li .btn_box.half .button {
	float: left;
	width: 50%;
}
.info_list-user li .btn_box .button .item {
	margin: 0 2px 15px 0;
}
.info_list-user li .btn_box .button:last-child .item {
	margin-right: 0;
}

/* arrow_bottom */
.button.icn_arrow_bottom .item {
	margin-top: 0;
}
.game_list-line + .button.icn_arrow_bottom .item,
.message_history + .button.icn_arrow_bottom .item{
	margin-top: 15px;
}


/* info_list-terminal
/* -------------------------------------------------------------------------------- */

/* name */
.info_list-terminal li .name {
	display: block;
	margin: 15px 5px 10px;

	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
}

/* data */
.info_list-terminal li .data {
	border-top: 1px dotted #666;
}
.info_list-terminal li .data table {
	width: 100%;
	margin: 15px 0;
}
.info_list-terminal li .data th {
	width: 100px;
	padding: 5px 10px;

	text-align: left;
	font-size: 12px;
	font-weight: bold;
}
.info_list-terminal li .data td {
	padding: 5px 0;

	font-size: 12px;
	word-break: break-all;
	font-family: "Avenir-Heavy", "Avenir", "robot", sans-serif;
}

/* button
/* .................................................. */
.info_list-terminal li .button .item {
	margin: 0 0 15px;
}

/* ================================================================================
/* tab_box
/* ================================================================================ */

.tab_box {
	position: relative;
	padding-top: 40px;
}

/* head
/* .................................................. */
.tab_box .category > .head {
	position: absolute;
	top: 0;

	display: table;
	height: 40px;
	width: 25%;

	background: #e4e4e4;
}
.tab_box .category ~ .category > .head {
	border-left: 1px solid #fff;
}

/* current */
.tab_box .category.st_current > .head > .label {
	padding-top: 3px;

	background: #c6c6c6;
	border-bottom: 3px solid #000;
}

/* single		|-------| */
.tab_box.single .category > .head {
	left: 0;
	right: 0;

	width: 100%;
}

/* half			|---|---| */
.tab_box.half .category:nth-child(1) > .head {
	left: 0;
	right: inherit;

	width: 50%;
}
.tab_box.half .category:nth-child(2) > .head {
	left: inherit;
	right: 0;

	width: 50%;
}

/* trisect	|--|-|--| */
.tab_box.trisect .category:nth-child(1) > .head {
	left: 0;
	right: inherit;

	width: 33.5%;
}
.tab_box.trisect .category:nth-child(2) > .head {
	left: 33.5%;
	right: inherit;

	width: 34%;
	margin: auto;
}
.tab_box.trisect .category:nth-child(3) > .head {
	left: inherit;
	right: 0;

	width: 33.5%;
}

/* quarter	|-|-|-|-| */
.tab_box.quarter .category:nth-child(1) > .head {
	left: 0;
	right: inherit;

	width: 25%;
}
.tab_box.quarter .category:nth-child(2) > .head {
	left: 25%;
	right: inherit;

	width: 25%;
}
.tab_box.quarter .category:nth-child(3) > .head {
	left: 50%;
	right: inherit;

	width: 25%;
}
.tab_box.quarter .category:nth-child(4) > .head {
	left: inherit;
	right: 0;

	width: 25%;
}

/* fifth	|-|-|-|-|-| */
.tab_box.fifth .category:nth-child(1) > .head {
	left: 0;
	right: inherit;

	width: 20%;
}
.tab_box.fifth .category:nth-child(2) > .head {
	left: 20%;
	right: inherit;

	width: 20%;
}
.tab_box.fifth .category:nth-child(3) > .head {
	left: 40%;
	right: inherit;

	width: 20%;
}
.tab_box.fifth .category:nth-child(4) > .head {
	left: 60%;
	right: inherit;

	width: 20%;
}
.tab_box.fifth .category:nth-child(5) > .head {
	left: inherit;
	right: 0;

	width: 20%;
}


.tab_box .category > .head .label {
	display: table-cell;

	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

/* body
/* .................................................. */
.tab_box .category > .body,
.tab_box .category > .foot {
	display: none;
}

/* current */
.tab_box .category.st_current > .body,
.tab_box .category.st_current > .foot {
	display: block;
}



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

.toggle_box ~ .toggle_box {
	margin-top: 5px;
}

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

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

	color: #fff;
	background: #000;
}
.toggle_box > .head .label {
	float: left;

	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	word-break: break-all;
}
.toggle_box > .head span {
	float: right;
	padding-right: 12px;

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

/* arrow */
.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
/* .................................................. */
.toggle_box.st_close .head {
	background: #8e8e8e;
}

/* 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 {
	transition: background 200ms;
}

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



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

.button .item {
	position: relative;

	display: block;
	margin: 15px;
	padding: 10px 10px;

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

	color: #fff;
	background: #8e8e8e;
}
.button .item:after {
	position: absolute;
	top: 0;
	right: 8px;
	bottom: 0;

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

	font-size: 12px;

}

/* plural */
.button.plural .item {
	margin-bottom: 5px;
}
.button.plural + .button .item,
.button.plural + .button > .item {
	margin-top: 0;
}

/* accept */
.button.st_accept .item {
	padding: 15px;

	font-size: 16px;

	background: #039;
}

/* close */
.button.icn_close > .item,
.button.icn_arrow_left .item {
	padding: 9px;

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

	border: 1px solid #c6c6c6;
	background: #fff;
	color: #000;
}
.button.icn_close > .item:before {
	padding-right: 10px;
	font-size: 10px;
}

/* return */
.button.icn_arrow_left .item:before {
	padding-right: 6px;
	font-size: 13px;
}

/* disabled */
.button .btn_disable {
	display: none;
	background: #e4e4e4;
	color: #c6c6c6;
}
.button.st_disabled .item {
	display: none;
}
.button.st_disabled .item.btn_disable {
	display: block;
}

/* next */
.button .btn_next.item {
	align-items: center;
	display: flex;
	font-size: 14px;
	padding: 0;
}
.button .btn_next.item .btn_body,
.button .btn_next.item .btn_icn {
	padding: 5px 0;
}
.button .btn_next.item .btn_body {
	background: #039;
	width: 107px;
}
.button .btn_next.item .btn_icn {
	height: 30px;
	background: #4c70b7;
	position: relative;
	width: 18px;
}
.button .btn_next .btn_icn::after {
	content: "\e602";
	position: absolute;
	top: 0;
	left: 6px;
	bottom: 0;
	display: inline-block;
	height: 10px;
	max-width: 10px;
	margin: auto;
	font-size: 10px;
	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;
}


/* ================================================================================
/* arrow_link
/* ================================================================================ */
.arrow_link a {
	position: relative;
	display: block;
	padding: 10px 15px;

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

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

.arrow_link + .arrow_link {
	border-top: 1px solid #c6c6c6;
}

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

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

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

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


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

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

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

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


/* link_list
/* -------------------------------------------------------------------------------- */
ul[class^="link_list"] + .arrow_link {
	margin: 0 15px;

	border-top: 1px dotted #666;
}
ul[class^="link_list"] + .arrow_link a {
	padding: 10px 0;
}

/* more
/* .................................................. */
ul[class^="link_list"] + .arrow_link.icn_arrow_right a {
	padding-right: 15px;
}
ul[class^="link_list"] + .arrow_link.icn_arrow_right a:after {
	right: 0;
}

/* back
/* .................................................. */
ul[class^="link_list"] + .arrow_link.icn_arrow_left a {
	padding-left: 15px;
}
ul[class^="link_list"] + .arrow_link.icn_arrow_left a:before {
	left: 0;
}



/* ================================================================================
/* form_box
/* ================================================================================ */
.form_box .base_box {
	border-bottom: 0 none;
}
.form_box .base_box .head {
	color: #000;
	background: #e4e4e4;
}
.form_box .base_box .body {
	position: relative;
	padding: 10px 15px 15px;
	word-break: break-all;
}
.form_box .base_box .body > p {
	line-height: 1.5;
}
.form_box .base_box + .button .item {
	margin-top: 0;
}

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

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

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

	background: #fff;

}
.form_box .base_box.st_require .head .label:after {
	font-family: 'icons_tog';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;

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

	content: "\e623";

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

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

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

	color: #d71313;
}

/* textbox
/* -------------------------------------------------------------------------------- */
input[type="hidden"] {
	height: 0;
	margin: 0;
	padding: 0;
	overflow:hidden;
}


/* textbox
/* -------------------------------------------------------------------------------- */
.form_textbox input {
	-webkit-appearance: none;

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

	font-size: 16px;

	border: 1px solid #c6c6c6;
	border-radius: 0;
	-webkit-border-radius: 0;
}

.form_textbox.st_disabled p{
	height: 30px;
	padding: 0 5px;
	font-size: 16px;
	line-height: 30px;
}
/* error */
.st_error .form_textbox input {
	border: 1px solid #d70101;
}

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

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

	font-size: 16px;

	border: 1px solid #c6c6c6;
	border-radius: 0;
	-webkit-border-radius: 0;
}

/* error */
.st_error textarea {
	border: 1px solid #d70101;
}



/* selectbox
/* -------------------------------------------------------------------------------- */
.form_select {
	position: relative;
}
.form_select select {
	-webkit-appearance: none;
	display: block;

	width: 100%;
	height: 30px;
	padding: 0 5px;

	font-size: 16px;

	border: 1px solid #484848;
	border-radius: 4px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d2d2d2));
	background: -moz-linear-gradient(top, #fff, #d2d2d2);
}
.form_select:before {
	content:"";
	position: absolute;
	top: 0;
	right: 0;

	display: block;
	width: 25px;
	height: 100%;

	border: 1px solid #484848;
	border-radius: 0 3px 3px 0;
	background: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#5a5a5a));
	background: -moz-linear-gradient(top, #9a9a9a, #5a5a5a);
}
.form_select:after {
	content: "\e62c";
	position: absolute;
	top: 50%;
	bottom: 0;
	right: 8px;

	display: block;
	height: 9px;
	width: 9px;
	margin-top: -4px;

	color: #fff;
	font-size: 9px;
	text-shadow:
		0 0 #444,
		1px 0px #444,
		0px 2px #444,
		-1px 0 #444;
}
/* error */
.st_error select {
	border: 1px solid #d70101;
}
.st_error .form_select:before {
	border-color: #d70101 #d70101 #d70101 #484848;
}


/* checkbox
/* -------------------------------------------------------------------------------- */
.form_checkbox {
	position: relative;

	min-height: 20px;
	padding: 0;
}
.form_checkbox input[type="checkbox"] {
	display: none;
}
.form_checkbox input[type="checkbox"] + label {
	display: block;
	padding-left: 30px;

	font-size: 12px;
	line-height: 20px;
}
.form_checkbox input[type="checkbox"] + label: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: "\e620";
	position: absolute;
	top: 0;
	left: 0;

	margin-right: 10px;

	font-size: 20px;
	vertical-align: middle;
}
.form_checkbox input[type="checkbox"]:checked + label:before {
	content: "\e621";
}
.form_checkbox input[type="checkbox"]:disabled + label:before {
	color: #e4e4e4;
}
/* error */
.st_error .form_checkbox input[type="checkbox"] + label:before {
	color: #d70101;
}

/* radio
/* -------------------------------------------------------------------------------- */
.form_radiobox {
	position: relative;

	min-height: 20px;
}
.form_radiobox input[type="radio"] {
	display: none;
}
.form_radiobox input[type="radio"] + label {
	position: relative;
	display: inline-block;
	padding-left: 23px;

	font-size: 12px;
}
.form_radiobox input[type="radio"] + label:after {
	content: "";
	position: absolute;
	top: -1px;
	left: 4px;

	display: block;
	width: 13px;
	height: 13px;

	border: 3px solid #e4e4e4;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	background: #c6c6c6;
}
.form_radiobox input[type="radio"]:checked + label:after {
	background: #000;
}


/* either
/* -------------------------------------------------------------------------------- */
.form_either {
	position: relative;

	display: block;
	width: 100px;
	height: 30px;
	padding: 1px;
	overflow: hidden;

	border: 1px solid #c6c6c6;
}
.form_either input[type="radio"] {
	display: none;
}
.form_either label {
	float: left;
	display: block;
	width: 50%;
	z-index: 1;

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

	color: #666;
	border: 1px solid #fff;
}
.form_either input[type="radio"]:checked + label {
	color: #fff;
}

/* current text */
.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;
}
.form_either input[type="radio"]:checked:first-child + label:after {
	left: 0;
}
.form_either label + input[type="radio"]:checked + label:after {
	right: 0;
}

/* current background */
.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;

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

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


/* has_either
/* .................................................. */
.has_either {
	overflow: hidden;
}

.has_either .form_either {
	float: right;
}
.form_either.st_disabled p {
	border: 1px solid #000;
	background: #000;

	color: #fff;
	font-size: 11px;
	text-align: center;
	line-height: 26px;
}
.has_either .form_either + [class^="form"] {
	margin-right: 110px;
}


/* either
/* -------------------------------------------------------------------------------- */
/* error */
.input_error {
	display: none;
}
.st_error .input_error{
	display: block;
}
.st_error .input_error li {
	display:none;
	margin: 0;
	padding-bottom: 5px;

	font-size: 12px;
	color: #d70101;
}
.st_error.e_req .input_error li.req {
	display: block;
}
.st_error.e_cont:not(.e_req) .input_error li.cont {
	display: block;
}
.st_error.e_zenkaku:not(.e_req) .input_error li.zenkaku {
	display: block;
}
.st_error .input_error li:before {
	content: "※";
}

.form_box .add , .form_box .delete{
    font-weight: bold;
	font-size: 14px;
    color: #000;
    background: #c6c6c6;
    padding: 10px;
    text-align: center;
}

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

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

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

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

.fileupload_btn{
	font-size: 1.4rem;
}

.fileupload{
    padding-bottom: 1rem;
}

.error{
	display: none;
	color: #d70101;
}

.st_error .error{
	display: block;
}

/* ================================================================================
/* finish_box
/* ================================================================================ */
.finish_box .head h2 {
	margin: 15px;

	font-size: 16px;
	line-height: 1.3;
}
.finish_box .body {
	margin: 15px 0;
}
.finish_box .body .note {
	padding: 0 15px;
	font-size: 12px;
	line-height: 1.5;
}
.finish_box .body p + p {
	margin-top: 10px;
}
.finish_box .foot {
	border-top: 1px solid #c6c6c6;
}


/* ================================================================================
/* banner_box
/* ================================================================================ */
.banner_box {
	padding: 15px 0;
	text-align: center;
}
.banner_box a {
	display: inline-block;
}
.banner_box a ~ a {
	margin-top: 10px;
}
.banner_box .banner{
 width: calc(100vw - 30px);
}
.banner_box .banner img{
	width: 100%;
}

/* ================================================================================
/* step_box
/* ================================================================================ */
.step_box {
	display: table;
	table-layout: fixed;

	width: 100%;
	margin: 0 0 15px;
}
.head .step_box + h3 {
	margin-top: 25px;
}
.step_box div {
	display: table-cell;
	height: 30px;

	background: #444;

	text-align: center;
	color: #fff;
	font-family: Helvetica;
	font-size: 12px;
}
.step_box span {
	position: relative;
	display: block;
	line-height: 30px;

	overflow: hidden;
}
.step_box .current {
	background: #666;
}
.step_box div + div span:before,
.step_box div + div span:after {
	content: "";

	position: absolute;
	top: -3px;
	left: 0;
	display: block;

	border: transparent solid;
	border-left-color: #666;
	border-width: 18px 0 18px 10px;
}
.step_box div + div span:after {
	left: -2px;
	border-left-color: #444;
}
.step_box .current + div span:after {
	border-left-color: #666;
}



/* ================================================================================
/* message_box
/* ================================================================================ */
.message_box {
	position: relative;
	margin: 15px;

	border: 5px solid #e4e4e4;
	border-radius: 8px;
	-webkit-border-radius: 8px;

	background: #e4e4e4;
	font-size: 12px;
}
.mine .message_box {
	border-color: #cce0ee;
	background-color: #cce0ee;
}


/* head
/* -------------------------------------------------------------------------------- */
.message_box .head {
	padding: 5px 10px 15px;
	background: #e4e4e4;

}
.message_box .head {
	word-break: break-all;
	overflow: hidden;
}
.message_box .head .name {
	float: left;
	padding-top: 5px;

	font-weight: bold;
}
.message_box .head .date {
	display: block;
	float: right;
	padding-top: 5px;

	text-align: right;
}

/* mine */
.mine .message_box .head {
	background: #cce0ee;
}


/* body
/* -------------------------------------------------------------------------------- */
.message_box .body {
	padding: 15px 10px;
	border-radius: 0 0 5px 5px;

	background: #fff;
	line-height: 1.5;
	word-break: break-all;
}
.message_box .body a {
	color: #0000EE;
	text-decoration: underline;
}


/* massege_form
/* -------------------------------------------------------------------------------- */
.message_form_box {
	border-bottom: 1px solid #c6c6c6;
}
.message_form_box .body {
	padding: 15px;
	background: #e4e4e4;
}
.message_form_box .form_textarea textarea {
	border: none;
}
.message_form_box .button .item {
	margin: 15px 0;
}
.message_form_box .note {
	font-size: 10px;
}
.message_form_box .note a {
	text-decoration: underline;
}



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

	font-size: 12px;
}


/* ul
/* .................................................. */
.page_box .pages {
	position: relative;
	height: 40px;
	margin: 0 15px;
}
.page_box .pages > div {
	margin: 0 auto;
	overflow: hidden;
}
.page_box ul {
	margin: 0px auto;
	overflow: hidden;
}
.page_box ul li {
	display: block;
	float: left;
	border-left: 1px solid #fff;
}
.page_box ul li a {
	display: block;
	width: 40px;

	line-height: 40px;

	font-size: 12px;
	text-align: center;
	overflow: hidden;
}

.page_box ul li a {
	background: #e4e4e4;
}

/* current */
.page_box ul li.st_current a {
	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
/* ================================================================================ */
.overlay_box {
	width: 100%;

	background: #fff;
}
.js_overlay.st_hidden {
	display: none;
}
.overlay {
	position: fixed;
	top: 100%;
	left:0;
	width: 100%;

	z-index: 9999;
	height: 100%;
	overflow-y: auto;

	background: #fff;
	transition: top 600ms;
	-webkit-transition: top 600ms;
	-moz-transition: top 600ms;
}
.overlay.visible {
	top: 0;
}
/* head
/* .................................................. */

.overlay_box > .head {
	position: relative;

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

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

	color: #fff;
	background: #000;
}
.overlay_box > .head .page_title {
	float: left;
}
.overlay_box > .head > span {
	float: right;
	font-size: 12px;
	font-weight: normal;
}
.overlay_box > .head > span > span {
	position: relative;

	display: inline-block;
	padding: 0 0 0 20px;

	text-decoration: none;
}

/* icon */
.overlay_box > .head > span > span:before {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;

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

	font-size: 10px;
	color: #fff;
}

/* body
/* -------------------------------------------------------------------------------- */
.overlay_box >.body {
	padding-bottom: 15px;
	font-size: 12px;
}

/* note
/* .................................................. */
.overlay_box > .body .note {
	margin: 13px 15px 20px;

	line-height: 1.5;
	word-break: break-all;
}
.overlay_box > .body .note_sub {
	display: block;
	margin-top: 5px;

}

/* item
/* .................................................. */
.overlay_box > .body > .item {
	width: 150px;
	margin: 0 auto;
}
.overlay_box .figure {
	text-align: center;
}
.overlay_box > .body > .item > .data {
	position: relative;

	margin-top: 25px;
	padding: 10px 5px;

	background: #e4e4e4;
	text-align: center;
}
.overlay_box .data:before {
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;

	width: 20px;
	height: 10px;
	margin: 0 auto;

	border: 10px solid transparent;
	border-bottom-color: #e4e4e4;
	content: "";
}

/* R18メールマガジン受信設定モーダル
/* -------------------------------------------------------------------------------- */

.R18_email_subscription.overlay {
	top: 0;
}

.R18_email_subscription.overlay .form_radiobox {
	text-align: center;
}

.R18_email_subscription.overlay .form_radiobox li {
	display: inline-block;
	padding: 0 15px;
}

.R18_email_subscription.overlay .form_radiobox li label {
	font-size: 14px;
	font-weight: bold;
}


/* ================================================================================
/* social
/* ================================================================================ */
.js_social {
	padding: 15px;
	background: #e4e4e4;
}

/* ================================================================================
/* 以下webview用ﾃﾝﾌﾟﾚｰﾄcss
/* ================================================================================ */
.body-point {
	height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tog_header_dummy {
	background-color: #000;
	height: 30px;
	width: 100%;
}

.button .bg-blue {
	background: #039;
}


/* ================================================================================
/* error_404
/* ================================================================================ */


/* finish_box
/* -------------------------------------------------------------------------------- */
.finish_box .head h2 {
	margin-bottom: 0;
}
.finish_box .body.paragraph {
	margin: 0;
}


/* base_box
/* -------------------------------------------------------------------------------- */
.base_box .body.paragraph .button .item {
	margin: 10px 0 0;
}


/* arrow_link
/* -------------------------------------------------------------------------------- */
.tog_contents > .arrow_link:last-child {
	margin-bottom: 15px;
	border-bottom: 1px solid #c6c6c6;
}