@charset "utf-8";

/* BRING IT ON
------------------------------*/
#gn_bio {
	color: #e63178;
}

#bioCatListWrap {
	margin: 20px auto;
	padding: 0 auto;
    overflow: hidden;
    position: relative;
	text-align: center;
	width: 100%;
	background-color: #fff;
}

#bioCatList {
	float: left;
	position: relative;
	left: 50%;
	margin-bottom: 20px;
}

#bioCatList li {
	display: inline; 
	position: relative;
    left: -50%;
	height: 28px;
	float:left;
	color: #fff;
	font-size: 110%;
	background: #2c2c2c;
	margin-right: 8px;
	font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 0.05em;
	font-weight: 700;
	line-height: 2;

}
#bioCatList li.lastChild {
	margin-right: 0;
}
#bioCatList li.active {
	background: #e63178;
	padding: 0 10px;
}

#bioCatList li a {
	color: #fff;
	display: block;
	height: 28px;
	_width: 1px;
	padding: 0 10px;
}
#bioCatList li a:hover {
	background: #e63178;
}

#contentsWrap {
	background:#071340;
	color: #ffffff;
	font-size: 130%;
	text-align: left;
	margin-bottom: 50px;
	padding-bottom: 30px;
}
#bio_title {
	width: 980px;
	height: 395px;
}
#bio_read {
	width: 980px;
	height: 448px;
	margin-bottom: 50px;
}

#bio_introduce {
	width: 920px;
	margin: 0 auto 52px;
}
.bio_intro_txt {
	display: block;
}
.bio_ytbox {
	display: block;
	float: right;
	width: 480px;
	height: 270px;
	margin: 0 0 20px 15px;
	border: #ff1c27 solid 1px; 
}
.bio_notes {
	color: #69c1e5;
	font-size: 77%;
}

#bio_story {
	width: 914px;
	border: #e8c507 solid 3px;
	background: #0691cb;
	margin: 0 auto 30px;
}
#bio_story h3 {
	display: block;
	width: 914px;
	height: 88px;
	margin: 0 0 8px;
}
#bio_story .txt_story {
	display: block;
	width: 854px;
	margin: 0 auto 36px;
}
#bio_story .img_story {
	display: block;
	float: left;
	width: 341px;
	height: 248px;
	margin: 0 15px 15px 0;
}

#bio_creator {
	width: 914px;
	border: #e8c507 solid 3px;
	background: #0691cb;
	margin: 0 auto 30px;
}
#bio_creator h3 {
	display: block;
	width: 914px;
	height: 88px;
	margin: 0 0 8px;
}
#bio_creator .bio_cnt {
	display: block;
	width: 854px;
	margin: 0 auto 36px;
}
#bio_creator .img_creator {
	display: block;
	float: left;
	width: 341px;
	height: 248px;
	margin: 0 15px 0 0;
}
#bio_creator .txt_creator {
	display: block;
	width: 496px;
	margin: 0 0 36px 0;
	float: left;
}
#bio_creator h4 {
	width: 496px;
	font-size: 138%;
	margin-bottom: 27px;
	letter-spacing: 0.15em;
}

#bio_supporter {
	width: 920px;
	margin: 0 auto 22px;
}


#bio_ticket {
	width: 854px;
	border: #ff1c27 solid 3px;
	background: #ffffff;
	color: #000000;
	font-size: 107%;
	margin: 0 auto 30px;
	padding: 30px;
}
#bio_information {
	width: 854px;
	border: #0691cb solid 3px;
	background: #ffffff;
	color: #000000;
	margin: 0 auto;
	padding: 30px;
}
#bio_ticket h3,
#bio_information h3 {
	margin-bottom: 30px;
}
#bio_ticket h4.bio_ticketcounter {
	font-size: 138%;
	color: #0691cb;
	margin-bottom: 10px;
}

#bio_ticket dl {
	margin-bottom: 28px;
}
#bio_information dl {}

#bio_ticket dt,
#bio_information dt {
	float: left;
	display: block;
	margin: 0 5px 0 0;
	color: #ff1c27;
	font-weight: bold;
}
#bio_ticket dd,
#bio_information dd {
	width: auto;
	display: block;
	margin: 0 0 8px 0;
}
#bio_ticket ul {
	display: block;
	width: 100%;
	float: left;
}
#bio_ticket .bio_calender {
	margin-bottom: 16px;
}
#bio_ticket strong.red {
	color: #ff1c27;
	font-weight: bold;
}
#bio_ticket strong {
	color: #212121;
	font-weight: bold;
}
#bio_ticket a {
	color: #212121;
	font-weight: bold;
	text-decoration: underline;
}

#bio_banner {
	margin: 0 auto 30px auto;
	display: block;
	width: 764px;
}




/* FORM
------------------------------*/
/* store layout
------------------------------*/
#step {
	width: 920px;
	margin: 0 auto;
}

/* ----- */

#stepWrap #cartTableWrap table th {
	width: auto;
	color: #fff;
	text-align: center;
	background: #212121;
	padding: 8px 0;
	border-right: 1px solid #fff;
}

#stepWrap #cartTableWrap table td {
	 padding: 20px;
	 text-align: center;
	 vertical-align: middle;
	 padding: 20px;
	 border-right: 1px solid #d7d7d7;
	 border-bottom: 1px solid #d7d7d7;	 
} 

#stepWrap #cartTableWrap table td.itemCartImg {
	width: 125px;
	border-right: none;
	border-left: 1px solid #d7d7d7;
}

#stepWrap #cartTableWrap table td.itemCartName {
	width: 281px;
	padding-left: 0;
	text-align: left;
}
#stepWrap #cartTableWrap table td.itemCartName2 {
	padding-left: 0;
	text-align: left;
}

#stepWrap #cartTableWrap table td.totalPrice,
#stepWrap #cartTableWrap table td.itemPrice {
	width: 129px;
	font-weight: bold;
}
#stepWrap #cartTableWrap table td.totalPrice2,
#stepWrap #cartTableWrap table td.itemPrice2 {
	width: 100px;
	font-weight: bold;
}

#stepWrap #cartTableWrap table td.itemPer {
	width: 87px;
}
#stepWrap #cartTableWrap table td.itemPer2 {
	width: 40px;
}

#stepWrap #cartTableWrap table td.nullTd {
	background: #ddd;
	border: 1px solid #d7d7d7;
	padding: 0;
}
#stepWrap #cartTableWrap table td.nullTd span {
	display: block;
	height: 5px;
}

#stepWrap #cartTableWrap table .totalTable td,
#stepWrap #cartTableWrap table .priceTable td,
#stepWrap .PurchaseConfWrap2 table .priceTable td {
	text-align: right;
	border-left: 1px solid #d7d7d7;
	font-weight: bold;
}

#stepWrap #cartTableWrap table .otherFeesTable td {
	text-align: right;
	border-left: 1px solid #d7d7d7;
	padding: 10px 20px 8px;
}

#stepWrap #cartTableWrap table .priceTable td,
#stepWrap .PurchaseConfWrap2 table .priceTable td {
	border-top:0px solid #ddd;
/*	border-top:10px solid #ddd;*/
	padding: 10px 20px 8px;
}

#stepWrap #cartTableWrap table .totalTable td {
	font-size: 120%;
	color: #e63178;
	padding: 10px 20px;
}

/* ----- */

#stepWrap {
	text-align: left;
	width: 920px;
	margin: 40px auto 0;
}

#stepWrap p {
	font-size: 130%;
}

#stepWrap table {
	width: 100%;
	border: 1px solid #d7d7d7;
	font-size: 130%;
	margin: 30px 0 40px;	
}

#stepWrap table caption {
	padding-bottom: 10px;
}

#stepWrap table th {
	width: 229px;
	padding: 15px 20px;
	font-weight: normal;
	text-align: left;
	background: #f3f3f3;
	border-bottom: 1px solid #d7d7d7;
}
#stepWrap table.type2 th {
	padding: 20px;
}

#stepWrap table th .rbx {
	line-height: 1.1em;
	background-position: 7px 0;
	padding-left: 22px;
}
#stepWrap table th .rbx_on {background-position: 7px -25px}

#stepWrap table td {
	padding: 15px 30px;
	vertical-align: middle;
	border-bottom: 1px solid #d7d7d7;
}
#stepWrap table.type2 td {
	padding:20px 30px;
}

#stepWrap table td.oneLine {
	padding:25px 30px;
}

#stepWrap input.w172 {
	width: 156px;
}
#stepWrap input.w150 {
	width: 134px;
}
#stepWrap input.w387 {
	width: 371px;
}
#stepWrap input.w80 {
	width: 64px;
}

#stepWrap table td p {
	font-size: 100%;
}

#stepWrap table .txtBtn {
	font-size: 90%;
}

#stepWrap table .attention2,
#stepWrap table .attention {
	display: block;
	font-size: 90%;
	color: #e63178;
	margin-top: 12px;
}
#stepWrap table .attention2 {
	font-size: 100%;
	color: #212121;
}
#stepWrap table #autoAdd .attention {
	margin: 6px 0 0 15px;
}

/* ----- */

.stepCon .txtArea {
	width: 862px;
	height: 196px;
	padding: 6px 8px 4px;
	font-size: 13px;
	margin: 15px 0 5px;
	line-height: 1.65;
	letter-spacing: 0px;
	border: 1px solid #212121;
}

.stepCon {
	font-size: 130%;
	margin: 30px  0 40px;
}

.stepCon dt {
	font-weight: bold;
	margin-bottom: 10px;
}

.stepCon dd {
	border: 1px solid #d7d7d7;
	padding: 15px 20px;
}

.stepCon .attention {
	font-size: 90%;
	color: #e63178;
}


#mailmagaWrap .rbx {
	line-height: 1.1em;
	margin-bottom: 1em;
	width: 263px;
}
#mailmagaWrap .lastChild {
	margin-bottom: 0;
}



/* form (_old layout 共通)
------------------------------*/
.inputTxt {
	border: 1px solid #212121;
	width: 252px;
	height:14px;
	padding: 6px 8px 4px;
	vertical-align: middle;
	font-size: 100%;
}
.inputTxt:disabled {
	border: 1px solid #c1c1c1;
	background: #c1c1c1;
}

.cbx {
	display: block;
	height:17px;
	cursor: pointer;
	overflow: hidden;
	background: url(../img/img_checkbox.gif) no-repeat 0 1px;
	padding: 0 0 0 18px;
	line-height: 1.6em;
}
.cbx_on {background-position: 0 -24px}

.rbx {
	display: block;
	height:13px;
	cursor: pointer;
	background: url(../img/img_radiobutton.png) no-repeat 0 0;
	padding-left: 13px;
	line-height: 1.6em;
	
}
.rbx_on {background-position: 0 -25px}

.rbx input[type=radio],
.cbx input[type=checkbox] {
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	position: absolute;
	left: 79px;
}

span.customSelect {
	width: 252px;
	height:14px;
	border: 1px solid #212121;
	padding: 6px 8px 4px;
	vertical-align: middle;
	font-size: 100%;
	background:url(../img/img_select_down.png) no-repeat 97% 50%;
	
	overflow:hidden; 
}

select:disabled + span.customSelect {
	border: 1px solid #c1c1c1;
	background: #c1c1c1 url(../img/img_select_down.png) no-repeat 97% 50%;
}

span.customSelectInner {
	/*line-height: 1.1em;*/
	margin-top: -4px;
	
	width:240px;
}



/* form (_old shopping)
------------------------------*/
#contentsWrap {
	/*padding-bottom: 70px;*/
}

h2 {
	text-align: left;
	margin: -20px 0 0 0;
	/*margin: 50px 30px 30px;*/
}

#loginPageCon1 {
	width: 920px;
	margin: 0 auto; 
}

#memberArea {
	width:450px;
	height: 320px;
	padding:30px 0;
	background: #f3f3f3;
	float:left;
	text-align: center;
	position: relative;
}

#notMemArea h3,
#memberArea h3 {
	margin-bottom: 28px;
}

#memberArea p {
	width: 390px;
	font-size: 130%;
	margin: 0 auto;
	text-align: left;
}

#memberArea table {
	width: 390px;
	margin: 24px auto;
}

#memberArea table th {
	font-weight: normal;
	width: 110px;
	padding: 10px 0;
	text-align: left;
	font-size: 130%;
}

#memberArea table td {
	padding: 10px 0;
	text-align: left;
	font-size: 130%;
}

.loginPageBtn {
	position: absolute;
	bottom: 30px;
	left: 30px;
}

#memberArea .loginPageBtn p,
#notMemArea .loginPageBtn p {
	text-align: center;
	margin-top: 8px;
}

#loginButton {
	display: block;
	width: 390px;
	height:42px;
	margin: 0 auto;
	border: 0;
	background: url(../img/btn_login_off.gif) no-repeat 0 0;
	cursor: pointer;
}

#loginButton:hover {
	background: url(../img/btn_login_on.gif) no-repeat 0 0;
}

#notMemArea {
	width: 448px;
	height: 318px;
	padding:30px 0;
	border:1px solid #b5b5b5;
	float:right;
	position: relative;
}

#notMemArea h4 {
	margin-bottom: 20px;
}

#notMemArea p {
	width: 390px;
	font-size: 130%;
	margin: 0 auto;
	text-align: left;
}

#loginPageCon2 {
	width: 448px;
	margin: 20px auto 0;
	padding: 30px 0;
	border: 1px dashed #212121;
}

#loginPageCon2 h3 {
	margin-bottom: 30px;
}
#loginPageCon2 p {
	margin-bottom: 30px;
}

span.yearSbx {
	width: 64px;
	background:url(../../common/img/img_select_down.png) no-repeat 65px 50%;
}
span.daySbx,
span.monthSbx {
	width: 44px;
	background:url(../../common/img/img_select_down.png) no-repeat 45px 50%;
}

span.pbm {
	width:82px;
	background:url(../../common/img/img_select_down.png) no-repeat 82px 50%;
}

#deliveDatetime {
	margin: 15px 0 0;
}

#autoAdd {
	margin-top: 20px;
}

.sexWrap .rbx {
	width:41px;
	float:left;
	margin-top: 5px;
	margin-right: 15px;
	line-height: 1.1em;
	vertical-align: top;
	position: relative;
}

/* ----- */

#cartTableWrap {
	border-bottom: 1px solid #d7d7d7;
}



/* PurchaseConf
------------------------------*/
#historySummaryWrap {
	margin: 0 auto 50px auto;
	padding: 10px 20px;
	border: 1px solid #d7d7d7;
	background-color: #f9f9f9;
	font-size: 130%;
}

#stepWrap #cartTableWrap .PurchaseConfWrap table td.itemNumber2 {
	width: 20px;
	text-align: left;
}

#stepWrap #cartTableWrap .PurchaseConfWrap table td.itemName2 {
	width: 320px;
	text-align: left;
}

#stepWrap #cartTableWrap .PurchaseConfWrap table td.itemClassifi {
	width: 70px;
}

#stepWrap .PurchaseConfWrap2 table {
	margin-bottom: -10px;
}
#stepWrap .PurchaseConfWrap2 table th {
	width: auto;
	color: #fff;
	text-align: center;
	background: #212121;
	padding: 8px 0;
	border-right: 1px solid #fff;
}
#stepWrap .PurchaseConfWrap2 table td {
	 padding: 20px;
	 text-align: center;
	 vertical-align: middle;
	 padding: 20px;
	 border-right: 1px solid #d7d7d7;
	 border-bottom: 1px solid #d7d7d7;	 
} 

#stepWrap .PurchaseConfWrap2 table td.nullTd {
	background: #ddd;
	border: 1px solid #d7d7d7;
	padding: 0;
}
#stepWrap .PurchaseConfWrap2 table td.nullTd span {
	display: block;
	height: 5px;
}

#stepWrap #cartTableWrap .PurchaseConfWrap table td.itemPrice2 {
	text-align: right;
}
#stepWrap #cartTableWrap .PurchaseConfWrap table td.itemPer2 {
	width: 30px;
}
#stepWrap #cartTableWrap .PurchaseConfWrap table td.totalPrice2 {
	text-align: right;
}
#stepWrap .PurchaseConfWrap2 table td.itemNumber2 {
	width: 20px;
	text-align: left;
}
#stepWrap .PurchaseConfWrap2 table td.itemName2 {
	text-align: left;
}
#stepWrap .PurchaseConfWrap2 table td.itemPrice2 {
	width: 169px;
	text-align: right;
}
#stepWrap .PurchaseConfWrap2 table td.itemPer2 {
	width: 60px;
}

.addressee1 {
	margin: 0;
}
.addressee2 {
	border-bottom: 1px solid #d7d7d7;
}

#stepWrap .mailDistribution table th {
	width: auto;
	color: #fff;
	text-align: center;
	background: #212121;
	padding: 8px 0;
	border-right: 1px solid #fff;
}
#stepWrap .mailDistribution table td {
	 padding: 20px;
	 text-align: center;
	 vertical-align: middle;
	 padding: 20px;
	 border-right: 1px solid #d7d7d7;
	 border-bottom: 1px solid #d7d7d7;	 
}
#stepWrap .mailDistribution table td.mailProcessDate {
	width: 130px;
	text-align: left;
}
#stepWrap .mailDistribution table td.mailNotification {
	width: 120px;
}
#stepWrap .mailDistribution table td.mailSubject {
	text-align: left;
}



/* Delivery
------------------------------*/
#deliveryWrap {
	width: 920px;
	margin: 40px auto -40px auto;
	text-align: left;
}

.btnDelivery {
	margin: 20px 0 40px 0;
}

#deliveryWrap p {
	font-size: 130%;
}

#deliveryWrap table {
	width: 100%;
	margin: 15px 0 40px 0;
}

#deliveryWrap th {
	color: #fff;
	font-size: 130%;
	font-weight: normal;
	background: #212121;
	padding: 8px 0;
	border-right: 1px solid #fff;
	vertical-align: middle;	
	text-align: center;
}

#deliveryWrap td {
	padding: 15px 30px;
	font-size: 130%;
	vertical-align: middle;
	border-top: 1px solid #d7d7d7;
	border-right: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;	 
}

#deliveryWrap td.nullTd {
	background: #ddd;
	border: 1px solid #d7d7d7;
	padding:0;
}
#deliveryWrap td.nullTd span {
	display: block;
	height: 5px;
}

.addressNumber {
	background: #f3f3f3;
	text-align: center;
	width: 20px;
	border-right: none;
	border-left: 1px solid #d7d7d7;	
}

.addressTitle {
	text-align: center;
	width: 90px;
}

.destinationAddress {
	text-align: left;
	padding: 0 auto;
}

.addressChange {
	text-align: center;
	width: 60px;
}

.addressDelete {
	text-align: center;
	width: 60px;
}



/* Contact
---------------------*/
.contact_txtArea {
	width: 570px;
	height: 196px;
	padding: 6px 8px 4px;
	font-size: 13px;
	margin: 15px 0 5px;
	line-height: 1.65;
	letter-spacing: 0px;
	border: 1px solid #212121;
}

.h2_desc {
	margin-top: -10px;
}



/* Complete
------------------------------*/

#stepWrap h3 {
	font-size: 200%;
	margin-bottom: 30px;
}

#completeWrap {
	margin-bottom: 40px;
}

#completeWrap dt {
	font-size: 130%;
	margin-bottom: 10px;
}

#completeWrap dd {
	border: 1px solid #d7d7d7;
	padding: 30px;
	font-size: 130%;
}

#convNumWrap {
	font-size: 120%;
	margin:20px 0;
}

#completeWrap dd dl {
	margin-top: 20px;
}

#completeWrap dd dt {
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0;
}

#completeWrap dd dd {
	border: none;
	padding:0;
	font-size: 100%;
}

#completeWrap dd dd ol {
	padding-left: 20px;
}

#completeWrap dd dd ol li {
	list-style: decimal;
}

.completeTxt {
	margin-bottom: 60px; 
}
.completeTxt p {
	margin-bottom: 1em;
}



/* Change Card, Select Card
---------------------*/
#stepWrap .changeCard_th {
	width: 44px;
}



/* stepWrap a link
---------------------*/
/*#stepWrap a {
	color: #e63178;
}

#stepWrap a:hover {
	color:#fff;
	background: #e63178;
} */



/* NEXT BACK BTN
---------------------*/

#btnNext {
	display: block;
	width: 450px;
	height:42px;
	margin: 0 auto;
	border: 0;
	background: url(../../common/img/btn_next.gif) no-repeat 0 0;
	cursor: pointer;
}
#btnNext:hover {
	background: url(../../common/img/btn_next.gif) no-repeat 0 -50px;
}

.btnWrap {
	margin-top: 30px;
}
.btnWrap li {
	float:left;
	margin-right: 20px;
}
.btnWrap li.lastChild {
	margin-right: 0;
}



/* ERROR
---------------------*/
.errorList {
	margin-bottom: 8px;
}

.errorList li {
	color:#e63178;
	font-weight: bold;
}

span.error,
input.error,
textarea.error {
	border: 2px solid #e63178;
	background-color: #ffc8de;
}

label.error {
	background-color: #ffc8de;
}



/* SPIN
---------------------*/
.spinWrap {
	position: relative;
	width: 50px;
	height: 78px;
	margin: 0 auto;
}

.spinWrap input {
	width: 46px;
	height: 28px;
	font-size: 110%;
	text-align: center;
	position: absolute;
	top: 23px;
	left: 0;
	z-index: 999;
}

.spinWrap img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 998;
}



/* 
---------------------*/
span.w168 {
	width:152px;
}
span.w98 {
	width:82px;
}