@charset "utf-8";

.co_container_box_inner{
  border-top: 1px solid #ccc;
  text-align: left;
}
.status{
  margin: 20px auto 10px;
  text-align: center;
}
.main-title{
  padding: 8px;
  border-bottom: 2px solid #888;
  font-size: 20px;
  font-weight: bold;
}

.point_tab{
  position:relative;
  width:951px;
  height: 113px;
  margin:18px auto 0;
}
.month_tab_area .point_tab{
  border-bottom: 2px solid #72B847;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.point_tab_area .point_tab{
  border-bottom: 2px solid #34AED7;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.point_tab_on,
.point_tab_off,
.month_tab_on,
.month_tab_off{
  width:463px;
  height:110px;
  border-radius: 7px 7px 0 0;
}
.point_tab_on,
.point_tab_off{
  position: absolute;
  right: 0;
  background: #fff;
  color: #444;
  border-top: 7px solid #34AED7;
  border-left: 1px solid #34AED7;
  border-right: 1px solid #34AED7;
  border-radius: 7px 7px 0 0;
  text-align: center;
  box-sizing: border-box;
}
.point_tab_on {
  bottom: -2.5px;
}
.point_tab_off{
  bottom: 0;
  height: 100px;
  opacity: 0.6;
}
.point_tab_on .explain,
.point_tab_off .explain {
  font-size: 16px;
  padding: 20px 0 6px;
  color: #444;
}
.point_tab_off .explain {
  padding: 13px 0 6px;
}
.point_tab_on .courseName,
.point_tab_off .courseName {
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 2px;
  vertical-align: middle;
  color: #444;
}
.point_tab_on .courseName span,
.point_tab_off .courseName span {
  display: inline-block;
  box-sizing: border-box;
}
.point_tab_on .courseName span.mark,
.point_tab_off .courseName span.mark {
  border: 2px solid #444;
  border-radius: 2px;
  height: 37px;
  width: 40px;
  margin: 0 8px;
  padding-left: 2px;
  font-size: 34px;
  line-height: 40px;
}
.month_tab_on,
.month_tab_off{
  position: absolute;
  left: 0;
  background: #fff;
  color: #444;
  border-top: 7px solid #72B847;
  border-left: 1px solid #72B847;
  border-right: 1px solid #72B847;
  text-align: center;
  font-size: 26px;
  box-sizing: border-box;
}
.month_tab_on {
  bottom: -2.5px;
}
.month_tab_off{
  bottom: 0;
  height: 100px;
  opacity: 0.7;
}
.month_tab_on .explain,
.month_tab_off .explain {
  font-size: 16px;
  padding: 20px 0 6px;
  color: #444;
}
.month_tab_off .explain {
  padding: 13px 0 6px;
}
.month_tab_on .courseName,
.month_tab_off .courseName {
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 2px;
  vertical-align: middle;
  color: #444;
}
.month_tab_on .courseName span,
.month_tab_off .courseName span {
  display: inline-block;
  box-sizing: border-box;
}
.month_tab_on .courseName span.mark,
.month_tab_off .courseName span.mark {
  border: 2px solid #444;
  border-radius: 2px;
  height: 37px;
  width: 40px;
  margin: 0 8px;
  padding-left: 2px;
  font-size: 34px;
  line-height: 40px;
}

.point_common_box{
  width: 939px;
  margin: 0 auto 10px;
  padding: 5px;
}
.point_each_box{
  border:1px solid #34AED7;
  border-top:none;
}
.month_each_box{
  border:1px solid #72B847;
  border-top:none;
}
.point_common_boxinner{
  width:910px;
  margin:auto;
}
.point_pay_method,
.point_pay_method_list{
  padding: 15px 0;
}

.month_tab_area .subtitle,
.point_tab_area .subtitle {
	position: relative;
	padding: 0 0 5px 20px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: bold;
}
.month_tab_area .subtitle:before,
.month_tab_area .subtitle:after,
.point_tab_area .subtitle:before,
.point_tab_area .subtitle:after {
	display:block;
	content:'';
	position:absolute;
}
.month_tab_area .subtitle:after,
.point_tab_area .subtitle:after {
	top: 3px;
	left:0;
	width: 16px;
	height: 16px;
	border-radius:100%;
}
.month_tab_area .subtitle:after {
	background:#68D000;
}
.point_tab_area .subtitle:after {
	background:#00AAE6;
}
.month_tab_area .subtitle:before,
.point_tab_area .subtitle:before {
	z-index:2;
	top: 8px;
	left: 4px;
	width: 4px;
	height: 4px;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.month_tab_area .subtitle .titleNotes,
.point_tab_area .subtitle .titleNotes {
	display: block;
	font-weight: normal;
	font-size: 16px;
}
.sb_alert{
  margin: 0 5px 10px;
  padding: 5px;
  border-top: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
}
.sb_alert p {
  font-size: 14px;
}
.payment_btn{
  width:866px;
  margin: 10px auto 0;
}
.payment_btn ul{
  list-style:none;
}
.payment_btn ul:after{
  content:" ";
  display:block;
  clear:both;
}
.payment_btn li{
  float: left;
  width: 32%;
  margin: 0 2% 11px 0;
}
.month_each_box .payment_btn li{
  width: 31.3%;
  margin: 0 3% 11px 0;
}
.month_each_box .payment_btn li.credit_btn{
  width: 100%;
  margin: 0 0 6px 0;
}
.payment_btn li:nth-child(3n){
  margin: 0 0 11px 0;
}
.payment_btn li:nth-child(3n+1) {
  clear: both;
}
.payment_btn input[type="radio"]{
  display:none;
}
.payment_btn input[type="radio"]+label{
  display:inline-block;
  width:88%;
  padding:0 0 0 30px;
  background:url(/ext/c/images/title/1902/radio_off.png) no-repeat left center;
  background-size:18px;
  cursor: pointer;
}
.month_each_box .payment_btn input[type="radio"]+label{
  width:100%;
  padding: 0;
  background: none;
}
.payment_btn input[type="radio"]+label:hover{
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
.payment_btn input[type="radio"]:checked+label{
  background:url(/ext/c/images/title/1902/radio_on.png) no-repeat left center;
  background-size:18px;
}
.month_each_box .payment_btn input[type="radio"]:checked+label{
  background: none;
}
.payment_btn input[type="radio"].no_check+label:hover{
  -moz-opacity: 1.0;
  -khtml-opacity: 1.0;
  opacity: 1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}
.payment_btn input[type="radio"].no_check+label,
.payment_btn input[type="radio"].no_check:checked+label{
  background:none;
  cursor: default;
}
.payment_btn input[type="radio"]+label span,
.payment_btn input[type="radio"].no_check:checked+label span{
  display: block;
  padding: 16px 5px;
  border: 2px solid #DDD;
  border-radius: 8px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px -8px 13px -1px rgba(243, 243, 243, 0.6) inset;
  -webkit-box-shadow: 0px -8px 13px -1px rgba(243, 243, 243, 0.6) inset;
  text-align: center;
}
.payment_btn input[type="radio"]:checked+label span{
  border:2px solid #FE771C;
  box-shadow:none;
  -webkit-box-shadow:none;
}
.payment_btn input[type="radio"]+label img{
  height:50px;
}
.point_pay_method_list_inner{
  width:880px;
  margin: 0 auto;
}
.point_pay_method_list_inner_title{
  margin-bottom:10px;
}
.point_pay_method + .point_pay_method_list {
  border-top: 2px dashed #72B847;
}
.point_tab_area .point_pay_method + .point_pay_method_list {
  border-top: 2px dashed #34AED7;
}

/* monthlyTable
-------------------------- */
.monthlyTable {
  display: table;
  table-layout: fixed;
  width: 100%;
  word-break: break-word;
  text-align: center;
}
.monthlyTable * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.monthlyTable li {
  display: table-row;
}
.monthlyTable .monthlyTableTitle {
  font-weight: bold;
}
.monthlyTable .monthlyTableTitle .monthlyTableCel,
.monthlyTable .monthlyTableTitle .monthlyTableCel.course {
  background: #F2F2F2;
  border-top: 1px solid #CDCDCD;
}
.monthlyTable .monthlyTableTitle .monthlyTableCel p {
  font-size: 12px;
}
.monthlyTable .monthlyTableCel {
  display: table-cell;
  vertical-align: middle;
  border-left: 1px solid #CDCDCD;
  border-bottom: 1px solid #CDCDCD;
  padding: 6px 0;
}
.monthlyTable .monthlyTableCel:first-child {
  border-left: none;
}
.monthlyTable .monthlyTableCel p {
  font-size: 16px;
}
.monthlyTable .monthlyTableCel.course {
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  background: #fffdf0;
  width: 270px;
  padding-left: 10px;
}
.monthlyTable .monthlyTableCel.price,
.monthlyTable .monthlyTableCel.firstPoint,
.monthlyTable .monthlyTableCel.nextPoint {
  width: 163px;
}
.monthlyTable .monthlyTableCel.btnArea {
  width: 121px;
}

/* markup */
.monthlyTable .monthlyTableCel .registMark {
  display: inline-block;
  background: #f2fde7;
  padding: 3px 2px 2px 3px;
  border: 1px solid #509E01;
  border-radius: 2px;
  color: #397100;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}
.monthlyTable .monthlyTableCel .inlineBlock {
  display: inline-block;
}
.monthlyTable .monthlyTableCel .check {
  color: #F60;
}
.monthlyTable .monthlyTableCel .pointUp {
  color: #F60;
  font-weight: bold;
}

/* btnArea */
.monthlyTable .monthlyTableCel.btnArea .monthry_menu {
  display: block;
  width: 95px;
  height: 36px;
  border-radius: 3px;
  line-height: 36px;
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  margin: 0 auto;
  background: #68D000;
  border: 1px solid #509E01;
  cursor: pointer;
  font-feature-settings: "palt";
}
.monthlyTable .monthlyTableCel.btnArea .monthry_menu:hover {
  opacity: .7;
}
.monthlyTable .monthlyTableCel.btnArea .changed {
  font-size: 14px;
  margin: 0 auto;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  color: #0088cc;
  font-feature-settings: "palt";
}
.monthlyTable .monthlyTableCel.btnArea .changed:hover {
  color: #005580;
}


/* pointTable
-------------------------- */
.pointTable {
  display: table;
  table-layout: fixed;
  width: 100%;
  word-break: break-word;
  text-align: center;
}
.pointTable * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.pointTable li {
  display: table-row;
}
.pointTable .pointTableTitle {
  font-weight: bold;
}
.pointTable .pointTableTitle .pointTableCel,
.pointTable .pointTableTitle .pointTableCel.course {
  background: #F2F2F2;
  border-top: 1px solid #CDCDCD;
}
.pointTable .pointTableTitle .pointTableCel p {
  font-size: 12px;
}
.pointTable .pointTableCel {
  display: table-cell;
  vertical-align: middle;
  border-left: 1px solid #CDCDCD;
  border-bottom: 1px solid #CDCDCD;
  padding: 6px 0;
}
.pointTable .pointTableCel:first-child {
  border-left: none;
}
.pointTable .pointTableCel p {
  font-size: 16px;
}
.pointTable .pointTableCel.course {
  text-align: left;
  font-size: 17px;
  font-weight: bold;
  background: #fffdf0;
  width: 220px;
  padding-left: 10px;
}
.pointTable .pointTableCel.price,
.pointTable .pointTableCel.firstPoint,
.pointTable .pointTableCel.totalPoint {
  width: 180px;
}
.pointTable .pointTableCel.btnArea {
  width: 120px;
}

/* markup */
.pointTable .pointTableCel .inlineBlock {
  display: inline-block;
}
.pointTable .pointTableCel .check {
  color: #F60;
  font-weight: bold;
}
.pointTable .pointTableCel .pointUp {
  color: #F60;
  font-weight: bold;
}

/* btnArea */
.pointTable .pointTableCel.btnArea .point_menu {
  display: block;
  width: 95px;
  height: 36px;
  border-radius: 3px;
  line-height: 36px;
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  margin: 0 auto;
  background: #00AAE6;
  border: 1px solid #0083B1;
  cursor: pointer;
  font-feature-settings: "palt";
}
.pointTable .pointTableCel.btnArea .point_menu:hover {
  opacity: .7;
}

/* overlay_table */
.overlay_table{
  position: relative;
}
.overlay_table_overlay{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #CCC;
  z-index: 100;
  opacity: 0.6;
}

.alert_text{
  padding:5px;
  font-size:12px;
}