@charset "UTF-8";
/*================================================================
	= Project		=RING BELL
	= Date			=2013.10
	= TargetHTML	=login.html
  ================================================================*/


@import url("reset.css");
@import url("base.css");
/*@import url(headfoot.css);*/



/* clearFix */
#login-page #news:after,
#login-main .slides:after,
#login-page .selects:after,
#specialArea:after
{
	content: ""; 
	display: block; 
	clear: both;
}



/*================================================================
	01.login
  ================================================================*/


body {
	padding-top	: 50px;
}


/* メインナビのカスタマイズ ---------------------- */


#login-page #sgMainNav {
	top		: 20px;
}


/* NEWS ------------------------------------------ */


#news {
	position	: absolute;
	top			: 20px;
	left		: 50px;
	width		: 70%;
	height		: 30px;
	line-height	: 30px;
	margin		: 0;
	z-index		: 995;
	overflow	: hidden;
}

	#news dt {
		float	: left;
		width	: 7em;
		text-align	: right;
		color		: #7c6641;
		font-size	: 1.2rem;
		font-size	: 12px;
	}

	#news dd {
		margin-left	: 8em;
		color: #7c6641;
	}

#news .caution dt {
	color:#BB0D10;
}

#news .caution dd {
	color:#BB0D10;
}

/* -------------------------------------------------------------------
	メインエリア 
---------------------------------------------------------------------- */


#login-main {
	display		: block;
	position	: relative;
	width		: 100%;
	margin		: 20px 0 50px 0;
	padding		: 0;
	overflow	: hidden;
}


/* スライドショー本体 ---------------------------- */


#login-main .slides {
	display		: block;
	position	: relative;
	width		: 980px;
	height		: 490px;
	overflow	: hidden;
	margin		: 0;
	padding		: 0;
	background-color	: #000000;
	zoom		: 1;
}

	#login-main .slides ul {
		position	: relative;
	}

		#login-main .slides ul li {
			display		: none;
			position	: absolute;
			top			: 0;
			left		: 0;
		}

			#login-main .slides ul li img {
				width			: 100%;
				vertical-align	: bottom;
			}


/* スライドショー選択部分 ------------------------ */


#login-page .selects {
		position	: relative;
		padding		: 5px 0;
		background	: rgba(0,0,0,0.8);
		zoom		: 1;
}

	#login-page .selects ul {
		position	: relative;
		float		: left;
		left		: 50%;
	}

		#login-page .selects ul li {
			display			: block;
			position	: relative;
			float		: left;
			left		: -50%;
			margin		: 0 4px;
			width		: 90px;
			height		: 45px;
			overflow	: hidden;
			border		: 5px solid #000;
			cursor		: pointer;
		}

		#login-page .selects ul li:hover { border-color:#666; }
		#login-page .selects ul li.sel   { border-color:#900; }


			#login-page .selects ul li img {
				width		: 100%;
			}


/* ログイン入力部分 ------------------------------ */


#login-page #login-sec {
	display		: block;
	position	: absolute;
	top			: 0;
	left		: 0;
	left		: -245px;
	width		: 245px !important;
	height		: 490px;
	color		: #999999;
/*	background-color:rgba(0,0,0,0.8); */
	background	: url(img/black.png);
	z-index		: 100;
}

	#login-page #login-sec h1 {
		margin		: 0;
		padding		: 40px 0 30px;
		text-align	: center;
	}

	#login-page #login-sec h2 {
		color		: #94713b;
		padding		: 0 5px 10px 20px;
		font-size	: 18px; font-size: 1.8rem;
		font-family	: "リュウミン B-KL";
	}

	#login-page #login-sec p.txt {
		margin:0;
		padding:0 5px 10px 20px;
		font-family: "新ゴ R";
	}

	#login-page #login-sec dl {
		margin		: 20px 0 0;
		padding		: 0 5px 10px 25px;
		color		: #ffffff;
	}

		#login-page #login-sec dl dt {
			display:none;
			padding-top:10px;
		}
		#login-page #login-sec dl dd { padding-top:10px;}
	#login-page #login-sec .btn {
		margin:0 0 0 90px;
		display:block;
		width:100px;
		height:30px;
		color:#907768;
		/*background:#000000;*/
		text-align: right;
	}
	#login-page #login-sec input[type=text] {
		width:178px;
		height: 30px;
		padding: 0 5px;
		background: #000 !important;
		border:0;
		border:1px solid #66553c;
		line-height: 28px;
		color:#ffffff;
	}
	#login-page #login-sec input[type=password] {
		width:178px;
		height: 30px;
		padding: 0 5px;
		background: #000 !important;
		border:0;
		border:1px solid #66553c;
		line-height: 28px;
		color:#ffffff;
	}
	#login-page #login-sec input[type=image] {
	}
	#login-page #login-sec input::-webkit-input-placeholder {  /* PLACEHOLDER */
		color: #ffffff;
		opacity:1.0;
	}
	#login-page #login-sec input::-moz-placeholder {
		color: #ffffff;
		opacity:1.0;
	}
	#login-page #login-sec input:-ms-input-placeholder {  
		color: #ffffff !important;
		opacity:1.0 !important;
	} 

	#login-page #login-sec .links {
		position:absolute;
		bottom:20px;
		left:20px;
		width:220px;
	}
		#login-page #login-sec .links a {
			color:#999999;
			font-size:9pt;
			text-decoration:none;
		}
		#login-page #login-sec .links a:hover {
			color:#ffffff;
			text-decoration:underline;
		}

#login-page #login-sec .errorMes p {
	padding: 0;
}

/* スライドショー選択部分 ------------------------ */


/*
#login-page #select-nav {
	display		: block;
	position	: relative;
	margin		: 0 auto !important;
	height		: 75px !important;
	background-color:rgba(0,0,0,0.8);
}

	#login-page #select-nav ul {
		padding		: 5px;
		font-size	: 0;
		line-height	: 0;
	}

	#login-page #select-nav ul li {
		margin:5px auto 0;
		text-align:center;
		float: left:
	}

	#login-page #select-nav ul li a:hover img { border-color:#900;}
	#login-page #select-nav ul li.sel a img { border-color:#900;}
	#login-page footer#sg-footer {
		border-top	: 0;
		margin-top	: 0;
	}

*/








		
#login-page #news-asd {
	margin:50px 10px 10px 10px;
	padding:10px;
	background:#222222;
}







/* error mes */
#errorMes {
	display		: none;
	position: absolute;
	left: 230px;
	width: 220px;

	min-height	: 55px;

	padding: 8px;
	color: #f9707e;
	font-size: 12px; font-size: 1.2rem;
	line-height: 150%;
	border: 1px solid #f9707e;
	background-color: #000000;

	z-index:20;
}
#errorMes.gift {
	bottom: 130px;
}
#errorMes.pin {
	display: none;
	top: 300px;
}
#errorMes:before,
#errorMes:after {
	display: block;
	content: '';
	position: absolute;
	width: 0px;
	height: 0px;
	border-style: solid;
}
#errorMes:before {
/*	top: 50%; */

	bottom	: 45px;
	left: -16px;
	margin-top: -10px;
	border-width: 10px 15px 10px 0;
	border-color: transparent #f9707e transparent transparent;
}
#errorMes:after {
/*	top: 50%; */

	bottom	: 45px;
	left: -14px;
	margin-top: -9px;
	border-width: 9px 14px 9px 0;
	border-color: transparent #000000 transparent transparent;
}


/* ---------------------------------------------------
	002-top.html
------------------------------------------------------ */

/* clearFix */
#top-page #container section:after {
	content		: "."; 
	display		: block; 
	height		: 0; 
	clear		: both; 
	visibility	: hidden;
}
#top-page #container h1 { display:none;}
#top-page #container section { zoom:1;}


/* Slide Show ------------- */

#top-page #container #main-sec {
	display:block;
	position:relative;
	overflow:hidden;
	margin:0;
	padding:0;
	border:0;
	background:#aaaaaa;
}
	#top-page #container #main-sec h2 { display:none;}
	#top-page #container #main-sec ul.imgs {
		display:block;
		position:relative;
		width:720px;
		height:400px;
		margin:0 auto;
		overflow:hidden;
	}
		#top-page #container #main-sec ul.imgs li a {
			width:718px;
			height:398px;
			line-height:398px;
		}
	#top-page #container #main-sec ul.navi {
		position:relative;
		left:50%;
		float:left;
		margin-top:-30px;
	}
		#top-page #container #main-sec ul.navi li {
			position:relative;
			left:-50%;
			float:left;
			margin:0 2px;
		}
		#top-page #container #main-sec ul.navi li a {
			display:block;
			width:15px;
			height:15px;
			line-height:15px;
			text-align:center;
			text-decoration:none;
			border:1px solid #a0a0a0;
			background:#f0f0f0;
		}

/* add */
#data {
	display: table;
	height: 28px;
	padding: 20px 0 0;
}
#data dt {
	padding: 10px;
	display: table-cell;
	line-height: 1.4;
	width: 60px;
	color: #d3af73;
	font-size: 1.2rem;
	font-size: 12px;
	vertical-align: middle;
}
#data dd {
	padding: 10px;
	display: table-cell;
	width: 880px;
	color: #7c6641;
	font-size: 1.1rem;
	font-size: 11px;
	vertical-align: middle;
}


#message {
	position: absolute;
	top: 11px;
	right: 12px;
	z-index	: 10;
}



#login-sec .txt {
	line-height: 1.4;
	color: #94713b;
	font-size: 1.2rem;
	font-size: 12px;
}
#bnrArea {
	margin-top: 20px;
	padding: 50px 0;
	border: 1px solid #9f893f;
	line-height: 1.4;
	color: #fff;
	font-size: 1.2rem;
	font-size: 12px;
	text-align: center;
}


/* -------------------------------------------------------------------
	特集
---------------------------------------------------------------------- */



#specialArea {
	display		: block;
	position	: relative;
	margin		: 0 0 10px 0;
	overflow	: hidden;
	zoom		: 1;
}

#specialArea h2 {
	display		: block;
	height		: 53px;
	margin		: 0 0 10px 0;
	background	: url(img/login/special_title.png) 0 0 no-repeat;
	overflow	: hidden;
	text-indent	: -9999px;
}

#specialArea ul {
	display		: block;
	position	: relative;
	float		: left;
	left		: 50%;
	margin		: 0;
	padding		: 0;
}

	#specialArea ul li {
		position	: relative;
		float		: left;
		left		: -50%;
		margin		: 0 5px;
		padding		: 0;
		list-style-type	: none;
	}

		#specialArea li img{
			vertical-align	: bottom:
		}

		#specialArea li span.new {
			display		: block;
			position	: absolute;
			left		: -2px;
			top			: 10px;
			width		: 51px;
			height		: 19px;
			overflow	: hidden;
			text-indent	: -9999px;
			background	: url(img/login/special_new.png) 0 0 no-repeat;
		}


/* おすすめ (2014.6.16追加) ---------------------- */

#recommendArea {
	display		: block;
	position	: relative;
	margin		: 0;
	padding		: 0;
	zoom		: 1;
}

	#recommendArea h2 {
		height		: 38px;
		margin		: 50px 0 10px 0;
		padding		: 0;
		background	: url(img/login/recommends_title.png) 0 0 no-repeat;
		overflow	: hidden;
		text-indent	: -9999px;
	}

	#recommendArea ul {
		margin		: 0;
		padding		: 0;
	}

	#recommendArea ul li {
		margin		: 0 0 10px;
		padding		: 0;
		list-style: none;
	}



/** ============================================================================

	TOPバナーsection   2018.8.29追加

================================================================================ **/



	.bannerSection {
		display:block;
		position:relative;
		margin:70px 0 0 0;
		padding:0;

		color:#ffffff;
		font-family:メイリオ, Meiryo, "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size:10pt;
		font-weight:normal;
		line-height:1.5;
		letter-spacing:-1em;

		border:1px solid #ffffff;
		background-color:#000000;
	}
	.bannerSection:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


	.bannerSection > header {
		display:inline-block;
		vertical-align:middle;
		letter-spacing:normal;

		position:relative;
		float:left;
		width:40%;
		margin:0;
		padding:40px 5%;

		background-color:rgba(0,0,0,0.8);
	}


	.bannerSection > header h1 {
		margin:20px 0 0 0;
		padding:0;
		line-height:1.2;
		text-align:center;

		font-family : "リュウミン R-KL", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		font-weight:normal;
		font-size:30pt;
	}

/*
	.bannerSection > header h1 br {
		display:none;
	}
*/

	.bannerSection > header h2 {
		margin:0;
		padding:0;
		line-height:1.4;
		text-align:center;

		font-family : "リュウミン R-KL", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		font-weight:normal;
		font-size:13pt;
	}


	.bannerSection > header h3 {
		margin:20px 0 0 0;
		padding:0;
		text-align:center;

		font-family : "リュウミン R-KL", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		font-weight:normal;
		font-size:10pt;
	}



	/* More Button ------------------------------- */

	.bannerSection > header .more {
		margin:20px 10% 0;
		padding:0;
	}

	.bannerSection > header .more a {
		display:block;
		position:relative;
		margin:0;
		padding:4px;

		font-size:11pt;
		color:#ffffff;
		text-decoration:none;
		background-color:transparent;
		transition:1s;
	}
	.bannerSection > header .more a:visited {
		color:#ffffff;
		text-decoration:none;
		background-color:transparent;
	}
/*	.bannerSection > header .more a:hover {
		color:#ffffff;
		text-decoration:none;
		background-color:#6a4d1b;
	}*/

	.bannerSection > header .more a span {
		display:block;
		margin:0;
		padding:0;
		transition:1s;
	}

	.bannerSection > header .more a span:nth-of-type(1) { position:absolute; left :0; top   :0; width:15px; height:15px; border-left:2px solid #ffffff; border-top:2px solid #ffffff; }
	.bannerSection > header .more a span:nth-of-type(2) { position:absolute; right:0; top   :0; width:15px; height:15px; border-right:2px solid #ffffff; border-top:2px solid #ffffff; }
	.bannerSection > header .more a span:nth-of-type(3) { position:absolute; left :0; bottom:0; width:15px; height:15px; border-left:2px solid #ffffff; border-bottom:2px solid #ffffff; }
	.bannerSection > header .more a span:nth-of-type(4) { position:absolute; right:0; bottom:0; width:15px; height:15px; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff; }
	.bannerSection > header .more a span:nth-of-type(5) { padding:10px; position:relative; padding:10px; text-align:center; background-color:#222222; color:#ffffff; text-decoration:none; }


/*	.bannerSection > header .more a:hover span:nth-of-type(1) { width:55%; height:55%; }
	.bannerSection > header .more a:hover span:nth-of-type(2) { width:55%; height:55%; }
	.bannerSection > header .more a:hover span:nth-of-type(3) { width:55%; height:55%; }
	.bannerSection > header .more a:hover span:nth-of-type(4) { width:55%; height:55%; }
	.bannerSection > header .more a:hover span:nth-of-type(5) { background-color:transparent; color:#ffffff; text-decoration:none; }
*/


	/* Image ------------------------------------- */

	.bannerSection > .image {

		display:inline-block;
		display:none;
		vertical-align:middle;

		position:relative;
		float:right;
		width:50%;
		margin:0;
		padding:0;
	}

	.bannerSection img {
		width:auto;
		max-width:100%;
		vertical-align:bottom;
	}



	/* Copyright --------------------------------- */

	.bannerSection .copy {
		display:block;
		position:absolute;
		right:40px;
		bottom:5px;
		margin:0;
		padding:0;
		letter-spacing:normal;
		white-space:nowrap;

		color:#aaaaaa;
		font-size:9pt;
	}



	/* outer frame ------------------------------- */

	.bannerSection .waku span {
		display:block;
		position:absolute;
		margin:0;
		padding:0;
	}

	.bannerSection .waku span:nth-of-type(1) { width:20px; height:20px; left :-1px; top   :-1px; background-color:#000000; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; }
	.bannerSection .waku span:nth-of-type(2) { width:20px; height:20px; right:-1px; top   :-1px; background-color:#000000; border-left :1px solid #ffffff; border-bottom:1px solid #ffffff; }
	.bannerSection .waku span:nth-of-type(3) { width:20px; height:20px; left :-1px; bottom:-1px; background-color:#000000; border-right:1px solid #ffffff; border-top   :1px solid #ffffff; }
	.bannerSection .waku span:nth-of-type(4) { width:20px; height:20px; right:-1px; bottom:-1px; background-color:#000000; border-left :1px solid #ffffff; border-top   :1px solid #ffffff; }
	.bannerSection .waku span:nth-of-type(5) { width:14px; height:14px; left :-1px; top   :-1px; background-color:#ffffff; }
	.bannerSection .waku span:nth-of-type(6) { width:14px; height:14px; right:-1px; top   :-1px; background-color:#ffffff; }
	.bannerSection .waku span:nth-of-type(7) { width:14px; height:14px; left :-1px; bottom:-1px; background-color:#ffffff; }
	.bannerSection .waku span:nth-of-type(8) { width:14px; height:14px; right:-1px; bottom:-1px; background-color:#ffffff; }





/** ============================================================================

	宝塚チケット   2018.5.15追加

================================================================================ **/



	#takarazukaSection {
		color:#ffffff;
		background-color:#000000;
		background-image:url(../contents/img/takarazuka/main.jpg);
		background-position:right center;
		background-repeat:no-repeat;
		background-size:contain;
	}

	#takarazukaSection > header {
		background-color:rgba(0,0,0,0.8);
	}



	/* More Button ------------------------------- */

/*
	#takarazukaSection > header .more a {
		display:block;
		position:relative;
		margin:0;
		padding:4px;

		font-size:11pt;
		color:#ffffff;
		text-decoration:none;
		background-color:transparent;
		transition:1s;
	}
	#takarazukaSection > header .more a:visited {
		color:#ffffff;
		text-decoration:none;
		background-color:transparent;
	}
	#takarazukaSection > header .more a:hover {
		color:#ffffff;
		text-decoration:none;
		background-color:#6a4d1b;
	}

	#takarazukaSection > header .more a span {
		display:block;
		margin:0;
		padding:0;
		transition:1s;
	}

	#takarazukaSection > header .more a span:nth-of-type(1) { position:absolute; left :0; top   :0; width:15px; height:15px; border-left:2px solid #ffffff; border-top:2px solid #ffffff; }
	#takarazukaSection > header .more a span:nth-of-type(2) { position:absolute; right:0; top   :0; width:15px; height:15px; border-right:2px solid #ffffff; border-top:2px solid #ffffff; }
	#takarazukaSection > header .more a span:nth-of-type(3) { position:absolute; left :0; bottom:0; width:15px; height:15px; border-left:2px solid #ffffff; border-bottom:2px solid #ffffff; }
	#takarazukaSection > header .more a span:nth-of-type(4) { position:absolute; right:0; bottom:0; width:15px; height:15px; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff; }
	#takarazukaSection > header .more a span:nth-of-type(5) { position:relative; padding:10px; text-align:center; background-color:#222222; color:#ffffff; text-decoration:none; }


	#takarazukaSection > header .more a:hover span:nth-of-type(1) { width:55%; height:55%; }
	#takarazukaSection > header .more a:hover span:nth-of-type(2) { width:55%; height:55%; }
	#takarazukaSection > header .more a:hover span:nth-of-type(3) { width:55%; height:55%; }
	#takarazukaSection > header .more a:hover span:nth-of-type(4) { width:55%; height:55%; }
	#takarazukaSection > header .more a:hover span:nth-of-type(5) { background-color:transparent; color:#ffffff; text-decoration:none; }
*/



	/* Image ------------------------------------- */

/*
	#takarazukaSection > .image {

		display:inline-block;
		display:none;
		vertical-align:middle;

		position:relative;
		float:right;
		width:50%;
		margin:0;
		padding:0;
	}

	#takarazukaSection img {
		width:auto;
		max-width:100%;
		vertical-align:bottom;
	}
*/


	/* Copyright --------------------------------- */

/*
	#takarazukaSection .copy {
		display:block;
		position:absolute;
		right:40px;
		bottom:5px;
		margin:0;
		padding:0;
		letter-spacing:normal;
		white-space:nowrap;

		color:#aaaaaa;
		font-size:9pt;
	}
*/


	/* outer frame ------------------------------- */

/*
	#takarazukaSection .waku span {
		display:block;
		position:absolute;
		margin:0;
		padding:0;
	}

	#takarazukaSection .waku span:nth-of-type(1) { width:20px; height:20px; left :-1px; top   :-1px; background-color:#000000; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; }
	#takarazukaSection .waku span:nth-of-type(2) { width:20px; height:20px; right:-1px; top   :-1px; background-color:#000000; border-left :1px solid #ffffff; border-bottom:1px solid #ffffff; }
	#takarazukaSection .waku span:nth-of-type(3) { width:20px; height:20px; left :-1px; bottom:-1px; background-color:#000000; border-right:1px solid #ffffff; border-top   :1px solid #ffffff; }
	#takarazukaSection .waku span:nth-of-type(4) { width:20px; height:20px; right:-1px; bottom:-1px; background-color:#000000; border-left :1px solid #ffffff; border-top   :1px solid #ffffff; }
	#takarazukaSection .waku span:nth-of-type(5) { width:14px; height:14px; left :-1px; top   :-1px; background-color:#ffffff; }
	#takarazukaSection .waku span:nth-of-type(6) { width:14px; height:14px; right:-1px; top   :-1px; background-color:#ffffff; }
	#takarazukaSection .waku span:nth-of-type(7) { width:14px; height:14px; left :-1px; bottom:-1px; background-color:#ffffff; }
	#takarazukaSection .waku span:nth-of-type(8) { width:14px; height:14px; right:-1px; bottom:-1px; background-color:#ffffff; }
*/



/** ============================================================================

	歌舞伎チケット   2018.5.15追加

================================================================================ **/



	#kabukiSection {
		color:#231815;
		border-color:#cbbf98;
		background-color:#e8e3d6;
		background-image:url(../contents/img/kabuki/banner.jpg);
		background-position:right center;
		background-repeat:no-repeat;
		background-size:50% auto;
	}

	#kabukiSection > header {
		background-color:#e8e3d6;
		background-image:url(../contents/img/kabuki/bg.jpg);
	}

/*	#kabukiSection > header .more a:hover {
		color:#231815;
		background-color:#ffffff;
	}*/

	#kabukiSection > header .more a span:nth-of-type(1),
	#kabukiSection > header .more a span:nth-of-type(2),
	#kabukiSection > header .more a span:nth-of-type(3),
	#kabukiSection > header .more a span:nth-of-type(4) { border-color:#a91a0f; }
/*	#kabukiSection > header .more a:hover span:nth-of-type(5) { color:#231815; }*/

	#kabukiSection .waku span:nth-of-type(1),
	#kabukiSection .waku span:nth-of-type(2),
	#kabukiSection .waku span:nth-of-type(3),
	#kabukiSection .waku span:nth-of-type(4) { border-color:#cbbf98; }
	#kabukiSection .waku span:nth-of-type(5),
	#kabukiSection .waku span:nth-of-type(6),
	#kabukiSection .waku span:nth-of-type(7),
	#kabukiSection .waku span:nth-of-type(8) { background-color:#cbbf98; }