@charset "utf-8";

/*==================================================================
	Parts Module
===================================================================*/

/* common
------------------------------------------*/
.red,
.caution { color:#990014; }
.emphasis {
	text-decoration:underline;
	font-weight:bold;
	color:#990014;
}
.emphasis.border {
	padding:0.5em;
	border:1px solid #990014;
	text-decoration:none;
}
#title {
	background:#990014;
	font-size:26px;
	color:#FFF;
}
#title span,
#topicPath {
	display:block;
	max-width:980px;
	margin:0 auto;
	padding:20px 0;
}
#title i { margin-right:0.5em; }

@media screen and (max-width:980px) {
	#title { font-size:16px; }
	#title span { padding:20px 10px; }
}

/* パンくず
------------------------------------------*/
#topicPath { letter-spacing:-0.4em; }
#topicPath a { color:#990014; }
#topicPath a:hover {
	text-decoration:none;
	color:#000;
}
#topicPath li {
	display:inline-block;
	letter-spacing:normal;
}
#topicPath li:after {
	font-family: 'FontAwesome';
	content:"\f105";
	margin:0 0.5em;
}
#topicPath li:last-child:after { display:none; }

@media screen and (max-width:980px) {
	#topicPath { display:none; }
}

/* 見出し
------------------------------------------*/
.headline {
	margin-bottom:1em;
	font-size:20px;
}
@media screen and (max-width:980px) {
	.headline { font-size:16px; }
}

/* ボタン
------------------------------------------*/
.btnArea {
	position:relative;
	margin-bottom:50px;
	padding:0 10px;
}
.btnArea ul {
	text-align:center;
	letter-spacing:-0.4em;
}
.btnArea li {
	display:inline-block;
	padding:0 10px;
	letter-spacing:normal;
}
.btnArea span { display:table; }
.btnArea button {
	display:table-cell;
	min-width:210px;
	height:60px;
	outline:none;
	border:none;
	border-radius:30px;
	background:#990014;
	vertical-align:middle;
	font-size:20px;
	color:#FFF;
	cursor:pointer;
}
.btnArea .gray button { background:#999; }
.btnArea .blue button { background:#00B7B1; }
.btnArea button:hover { opacity:0.7; }
.btnArea i { margin-right:5px; }
.btnArea p {
	position:absolute;
	left:0;
	bottom:0;
}
.btnArea p a:hover { text-decoration:none; }

.sBtn {
	float:right;
	padding:4px 15px;
	border:none;
	border-radius:6px;
	background:#990014;
	text-decoration:none;
	text-align:center;
	white-space:nowrap;
	color:#FFF;
	cursor:pointer;
}
.sBtn:hover { opacity:0.7; }
.sBtn.chenge:before {
	font-family: 'FontAwesome';
	content:"\f040";
	margin-right:5px;
}

@media screen and (max-width:980px) {
	.btnArea {
		margin-bottom:0;
		padding:0;
		font-size:14px;
	}
	.btnArea li {
		width:50%;
		padding:0 5px;
	}
	.btnArea span { width:100%; }
	.btnArea button {
		width:100%;
		min-width:inherit;
		height:40px;
		border-radius:20px;
		font-size:14px;
	}
	.btnArea button:hover,
	.sBtn:hover { opacity:1; }
	.btnArea p {
		position:static;
		padding-top:10px;
	}
	.sBtn {
		float:none;
		display:block;
		margin-top:10px;
		font-size:14px;
	}
}

/* ページャー
------------------------------------------*/
.resultPager {
	padding:20px;
	letter-spacing:-0.4em;
}
.resultPager li {
	display:inline-block;
	margin:0 4px;
	letter-spacing:normal;
}
.resultPager a {
	padding:2px 10px;
	border:1px solid #CCC;
	text-decoration:none;
	font-size:18px;
}
.resultPager a:hover {
	border:1px solid #990014;
	color:#990014;
}
.resultPager .active a {
	border:1px solid #990014;
	background:#990014;
	text-decoration:none;
	color:#FFF;
}

@media screen and (max-width:980px) {
	.resultPager li { margin:0 4px; }
	.resultPager a {
		padding:2px 6px;
		font-size:14px;
	}
}

/* 角丸BOX
------------------------------------------*/
.roundBox {
	max-width:680px;
	margin:0 auto 20px;
	padding:20px;
	border:1px solid #999;
	border-radius:30px;
	text-align:left;
}
.roundBox h1 {
	margin-bottom:1em;
	font-size:20px;
	color:#990014;
}
.roundBox h1 i { margin-right:5px; }
.roundBox h1 span {
	margin-left:1em;
	font-size:14px;
	font-weight:bold;
	color:#000;
}
.roundBox table { width:100%; }
.roundBox th,
.roundBox td {
	padding:0.5em 1em;
	border:1px solid #CCC;
}
.roundBox th {
	width:1%;
	background:#F5F5F5;
	white-space:nowrap;
}
.roundBox ol {
	overflow-y:scroll;
	max-height:150px;
	padding-right:1em;
	font-size:14px;
}
.roundBox li { margin-bottom:1em; }
.roundBox input,
.roundBox select {
	padding:0.5em;
	border:1px solid #CCC;
}

@media screen and (max-width:980px) {
	.roundBox {
		padding:10px;
		border-radius:20px;
	}
	.roundBox h1 { font-size:14px; }
	.roundBox th,
	.roundBox td,
	.roundBox li {
		width:auto;
		min-width: 5em;
		white-space:normal;
		font-size:12px;
	} 
}


/*==================================================================
	Page style
===================================================================*/
#main {
	display:block;
	position:relative;
	max-width:980px;
	margin:0 auto;
	font-size:16px;
	zoom:1;
}
#main:after {
	display:block;
	clear:both;
	content:"";
}
#main .section {
	padding:50px 0;
	text-align:center;
}
#main .section .txt p { margin-bottom:1em; }

@media screen and (max-width:980px) {
	#main {
		padding:0 10px;
		font-size:14px;
	}
	#main .section { padding:20px 0; }
	#main .section > .txt {
		display:inline-block;
		margin:0 auto;
	}
	#main .section > .txt p { text-align:left; }
}

/* プログラム検索～予約完了
------------------------------------------*/
#stepFlow {
	text-align:center;
	letter-spacing:-0.4em;
}
#stepFlow li {
	display:inline-block;
	min-width:160px;
	margin:0 1px;
	padding:20px 0;
	transform:skewX(-10deg);
	background:#999;
	letter-spacing:normal;
	color:#FFF;
}
#stepFlow .active {
	position:relative;
	background:#990014;
	z-index:100;
}
#stepFlow .active:after {
	display:block;
	content:"";
	position:absolute;
	top:50%;
	right:-18px;
	width: 0;
	height: 0;
	margin-top:-8px;
	border-style: solid;
	border-width: 16px 0 0 20px;
	border-color: transparent transparent transparent #990014;
	transform:skewX(10deg);
}
#stepFlow li:last-child:after { display:none !important; }
#stepFlow span {
	display:block;
	position:relative;
	transform:skewX(10deg);
}
@media screen and (max-width:980px) {
	#stepFlow { display:none; }
}

#infoArea {
	display:block;
	max-width:980px;
	margin:0 auto;
	padding:5px 0;
	text-align:center;
}
#infoArea a { color:#0000ff; }

@media screen and (max-width:980px) {
	#infoArea { font-size:14px; }
	#infoArea .section { padding:5px 0; }
}

#selectArea .inputBox {
	position:relative;
	max-width:520px;
	margin:0 auto 20px;
	border:1px solid #999;
	text-align:left;
	font-size:20px;
/* 疑似要素(▼)にイベントを持てないため画像に置き換え ******/
	background-image: url("../img/arrow_down.png") ;
	background-repeat:no-repeat;
	background-position : 98% 50%;
/***********************************************************/

}
#selectArea .inputBox:after {
	font-family: 'FontAwesome';
/* 疑似要素(▼)にイベントを持てないため画像に置き換え *******
	content:"\f0d7";
************************************************************/
	position:absolute;
	top:50%;
	right:20px;
	margin-top:-10px;
	line-height:1;
	font-size:20px;
	color:#990014;

}

#selectArea select { width:100%; }
.customSelect { padding:10px 20px; }
#selectArea  .btnArea button { padding:0 30px; }

@media screen and (max-width:980px) {
	#selectArea { font-size:14px; }
	#selectArea .inputBox  {
		margin-bottom:10px;
		font-size:12px;
	}
	#selectArea .inputBox:after { right:10px; }
	#selectArea .btnArea li { width:auto; }
	.customSelect { padding:10px; }
}

#dispLoading {
    text-align: center;
    display: inline-block;
    width: 100%;
    position: absolute;
}

#dispLoading .loading_s {
    position: relative;
    top: -10px;
}

#resultArea .resultHeadline {
	margin-bottom:20px;
	padding:1em;
	border:1px dashed #999;
	border-radius:4px;
	background:#F8F8F8;
	font-size:20px;
}
#resultArea .resultHeadline span {
	margin-right:0.5em;
	font-weight:bold;
	color:#990014;
}
#resultArea .resultHeadline br { display:none; }

@media screen and (max-width:980px) {
	#resultArea .resultHeadline {
		font-size:16px;
    }
    #dispLoading {
        padding-right: 20px;
    }
}
#entryList {
	max-width:680px;
	margin:0 auto;
	text-align:left;
	font-size:20px;
}
#entryList a { text-decoration:none; }
#entryList ol > li { margin-bottom:20px; }
#entryList ol > li:last-child { margin-bottom:0; }
#entryList dl {
	border:1px solid #CCC;
	border-radius:30px;
	cursor:pointer;
}
#entryList dt {
	display:table;
	width:100%;
}
#entryList dt:before {
	width:1%;
	padding:20px 5px 20px 20px;
	font-family: 'FontAwesome';
	content:"\f055";
	font-size:30px;
}
#entryList dt:before,
#entryList dt span {
	display:table-cell;
	line-height:1;
	vertical-align:middle;
}
#entryList .active:before { content:"\f056"; }
#entryList dd {
	display:none;
	padding:0 20px 20px;
}
#entryList .list li { margin-bottom:10px; }
#entryList .list li:last-child { margin-bottom:0; }
#entryList .list a,
#entryList .soldOut .inner {
	display:table;
	width:100%;
	background:#FFF;
	border-width:2px;
	border-style:solid;
	border-color:#990014;
	border-radius:30px;
	box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
	color:#990014;
}
#entryList .list a:hover {
	background:#990014;
	box-shadow:none;
	color:#FFF !important;
}
#entryList .list .little a {
	border-color:#C6790A;
	background:#FFF8ED;
	color:#C6790A;
}
#entryList .list .little a:hover { background:#C6790A; }

#entryList .soldOut .inner {
	border-color:#CCC;
	background:#EEE;
	color:#666;
	cursor:default;
}

#entryList .list span {
	display:table-cell;
	height:60px;
	padding:0 20px;
	vertical-align:middle;
}
#entryList .list .txt {
	text-align:right;
	white-space:nowrap;
}
#entryList .list .fa { margin-left:5px; }

@media screen and (max-width:980px) {
	#entryList { font-size:14px; }
	#entryList ol > li { margin-bottom:10px; }
	#entryList dl { border-radius:20px; }
	#entryList dt:before {
		padding:10px 5px 10px 10px;
		font-size:20px;
	}
	#entryList dt span { padding:10px 10px 10px 0; }
	#entryList dd { padding:0 10px 10px; }
	#entryList .list a,
	#entryList .soldOut .inner {
		border-radius:20px;
	}
	#entryList .list span {
		height:40px;
		font-size:12px;
	}
	#entryList .list span:first-child { padding:0 0 0 10px; }
	#entryList .list span:last-child { padding:0 10px 0 0; }
}

/* 支払情報入力
------------------------------------------*/
.paymentSheet th,
.paymentSheet td {
	border-left:none;
	border-right:none;
	background:none;
}
.cardtype {
	margin-top:20px;
	padding:20px;
	background:#F5F5F5;
}
.cardtype dt {
	margin-bottom:0.5em;
	font-weight:bold;
}
.cardtype dd {
	padding:20px;
	background:#FFF;
	font-size:14px;
}
.cardtype dd img {
	height:40px;
	margin:0 10px 10px;
}
.cardtype .code img {
	display:block;
	height:95px;
	margin:0 auto 10px;
}
@media screen and (max-width:980px) {
	.paymentSheet,
	.paymentSheet tbody,
	.paymentSheet tr,
	.paymentSheet th,
	.paymentSheet td {
		display:block;
		width:100%;
		padding:0;
		border:none;
	}
	.paymentSheet tr {
		margin-bottom:10px;
		padding:0.5em 1em;
		border:1px solid #CCC;
	}
	.cardtype {
		margin-top:0;
		padding:10px;
		font-size:12px;
	}
	.cardtype dd {
		padding:10px;
		font-size:12px;
	}
	
	.brTable tbody,
	.brTable tr,
	.brTable th,
	.brTable td {
		display:block;
		width:100%;
		padding:0;
		border:none;
		background:none;
	}
	.brTable tr {
		margin-bottom:10px;
		padding:0.5em 1em;
		border:1px solid #CCC;
	}
}

/* 完了画面-予約番号
------------------------------------------*/
#reserveNum {
	max-width:680px;
	margin:50px auto;
	padding:1em;
	border:1px solid #CCC;
	border-radius:4px;
	background:#F5F5F5;
}
#reserveNum span {
	font-size:20px;
	font-weight:bold;
}
@media screen and (max-width:980px) {
	#reserveNum { margin:20px auto; }
}


/* 予約一覧～予約取消
------------------------------------------*/
#reserveStatus {
	padding:20px 0;
	border-radius:4px;
	background:#F5F5F5;
	letter-spacing:-0.4em;
	text-align:center;
}
#reserveStatus li {
	display:inline-block;
	letter-spacing: normal;
	text-align:left;
	vertical-align:text-top;
}
#reserveStatus li:after {
	content:"|";
	margin:0 10px;
}
#reserveStatus li:last-child:after { display:none; }
#reserveStatus span {
	margin:0 0.5em;
	font-size:20px;
	font-weight:bold;
}
#reserveList {
	max-width:680px;
	margin:0 auto;
	text-align:left;
}
#reserveList li { margin-bottom:10px; }
#reserveList a {
	display:table;
	width:100%;
	background:#FFF;
	border:1px solid #CCC;
	border-radius:30px;
	text-decoration:none;
}
#reserveList a:hover { border:1px solid #990014; }
#reserveList div {
	display:table-cell;
	padding:20px;
	vertical-align:middle;
}
#reserveList div:last-child {
	text-align:right;
	white-space:nowrap;
	font-size:20px;
	color:#990014;
}
#reserveList span {
	position:relative;
	top:-2px;
	margin-right:0.5em;
	padding:2px 10px;
	border-radius:4px;
	background:#990014;
	font-size:12px;
	color:#FFF;
}
#reserveList span + br { display:none; }
#reserveList .txt .fa { margin-left:5px; }

#reserveList .end a {
	background:#EEE;
	color:#666;
}
#reserveList .end span {
	color:#FFF;
	background:#BBB;
}
#reserveList .end div:last-child { color:#666; }

.timeTable ul {
	overflow-y:scroll;
	max-height:200px;
	padding-right:2em;
}
.timeTable li {
	margin-bottom:0;
	border-top:1px dashed #CCC;
}
.timeTable li:last-child { border-bottom:1px dashed #CCC; }
.timeTable li a {
	display:block;
	position:relative;
	padding:1em 40px 1em 1em;
	text-decoration:none;
	font-size:14px;
}
.timeTable li a:hover {
	background:#EEE;
}
.timeTable li a:after {
	font-family: 'FontAwesome';
	content:"\f0a9";
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-10px;
	line-height:1;
	font-size:20px;
	color:#990014;
}
.timeTable li span {
	color:#666;
}
.timeTable li span:after {
	font-family: 'FontAwesome';
	content:"\f0da";
	margin:0 1em;
	color:#990014;
}
.timeTable .sBtn { float:none; }

@media screen and (max-width:980px) {
	#reserveStatus span { font-size:16px; }
	#reserveList { font-size:12px; }
	#reserveList a {
		display:block;
		position:relative;
		border-radius:20px;
	}
	#reserveList div {
		display:block;
		padding:10px;
	}
	#reserveList div:last-child {
		position:absolute;
		top:0;
		right:0;
		font-size:14px;
	}
	#reserveList span {
		display:inline-block;
		top:0;
		margin-bottom:0.5em;
	}
	#reserveList span + br { display:inline; }
	.timeTable li a,
	.timeTable li a:after { font-size:14px; }
	.timeTable li a:after { margin-top:-7px; }
}
.h_basic_staff {
	padding:8px;
	text-align:center;
	color:#fff;
	background-color:#FEFE00;
	font-weight:bold;
	font-size:130%;
	width: 970px;
	margin: 0 auto;
	height:35px;
	color:#550000;
	border-radius: 10px;
}