@charset "utf-8";

/* ------------------------------------- system.php */
body.system .contentsWrap {
	padding-left:80px !important;
	padding-right:80px !important;
}

#system h2 {
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, serif;
	font-size: 21px;
	color: #633e1e;
  margin: 0 auto 15px;
  position: relative;
}
#system h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 14px;
  z-index: 1;
}
#system h2 span {
  z-index: 2;
  position: relative;
}


#system .play {
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto 50px;
  background-color: #f4efea;
}
#system .play h2::after {
  background:url(/images/system/sys_md_970.png) 0 0 no-repeat transparent;
  width: 970px;
}
#system .play h2 span {
  display: inline-block;
  background-color: #F4EFEA;
  padding: 0 20px;
}
#system .play .inner {
  padding: 20px;
  background-color: #fff0e2;
}
#system .play li {
	float: left;
	font-size: 16px;;
	padding: 0 15px 0 0;
	line-height: 2;
}

#system .priceWrap {
	margin: 0 auto 50px;
}
#system .price h2::after,
#system .option h2::after,
#system .etc h2::after{
  background:url(/images/system/sys_md_440.png) 0 0 no-repeat transparent;
  width: 460px;
}
#system .price h2 span,
#system .option h2 span,
#system .etc h2 span{
  display: inline-block;
  background-color: #F4EFEA;
  padding: 0 20px;
}

#system .priceBase {
  width: 480px;
  float: left;
}

#system .price {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f4efea;
  margin-bottom: 20px;
}

#system .guide {
  border: 1px solid #F4DDDD;
  background-color: #F9F4F5;
  padding: 20px;
  background-color: #f4efea;
  text-align: left;
  box-sizing: border-box;
}
#system .guide ul#HandlingCard{
font-family: "Times New Roman", Times, serif;
}
#system .guide ul#HandlingCard li{
	float: left;
	margin-right: 1px;
	width: 55px;
	text-align: center;
}
#system .guide ul#HandlingCard li img{
	margin-bottom: 5px;
}
#system .guide ul#HandlingCard li.lastChild{
	margin-right: 0px;
}

#system .etcWrap {
  width: 480px;
  float: right;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f4efea;
  margin-bottom: 30px;
}

#system .simei {
  padding: 9px;
  border: 1px solid #F4DDDD;
  background-color: #F9F4F5;
	text-align: left;
  font-size: 12px;
}
#system .simei span {
  color: #C31556;
  font-weight: bold;
  font-size: 14px;
}

#system .option {
	margin-bottom: 50px;
}

#system table.bsys {
  width: 100%;
  background-color: #D0B97E;
  border-top: 1px solid #D0B97E;
  border-right: 1px solid #D0B97E;
  border-collapse: collapse;
  float: none;
}
#system table.bsys th {
	background-color: #FFF0E2;
	font-weight: normal;
	text-align: left;
	width: 120px;
}
#system table.bsys td {
	background-color: #FEFDFB;
}
#system table.bsys th,
#system table.bsys td {
	border-left: 1px solid #D0B97E;
	border-bottom: 1px solid #D0B97E;
	padding: 4px 8px;
	font-size: 18px;
	text-align: right;
}
#system table.bsys th span,
#system table.bsys td span {
  font-size: 28px;
  font-style: italic;
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, serif;
  padding: 0 5px;
}
#system table.bsys2 {
  width: 100%;
  background-color: #D0B97E;
  border-top: 1px solid #D0B97E;
  border-right: 1px solid #D0B97E;
  border-collapse: collapse;
  float: none;
}
#system table.bsys2 th {
	background-color: #FFF0E2;
	font-weight: normal;
	text-align: left;
	width: 130px;
}
#system table.bsys2 td {
	background-color: #FEFDFB;
}
#system table.bsys2 th {
	border-left: 1px solid #D0B97E;
	border-bottom: 1px solid #D0B97E;
	padding: 4px 8px 4px 0px;
	font-size: 16px;
	text-align: right;
}
#system table.bsys2 td {
	border-left: 1px solid #D0B97E;
	border-bottom: 1px solid #D0B97E;
	padding: 4px 8px 4px 8px;
	font-size: 18px;
	text-align: right;
}
#system table.bsys2 th span,
#system table.bsys2 td span {
  font-size: 28px;
  font-style: italic;
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, serif;
  padding: 0 5px;
}


#system table.op {
  width: 100%;
  background-color: #D0B97E;
  border-top: 1px solid #D0B97E;
  border-right: 1px solid #D0B97E;
  border-collapse: collapse;
  float: none;
}
#system table.op th {
	background-color: #FFF0E2;
	font-weight: normal;
	text-align: left;
	width: 120px;
}
#system table.op td {
	background-color: #FEFDFB;
	font-family: Verdana, Arial;
	text-align: right;
}
#system table.op th,
#system table.op td {
	border-left: 1px solid #D0B97E;
	border-bottom: 1px solid #D0B97E;
	padding: 6px 8px;
}

#system table.etclist {
  width: 100%;
  background-color: #D0B97E;
  border-top: 1px solid #D0B97E;
  border-right: 1px solid #D0B97E;
  border-collapse: collapse;
  margin-bottom: 30px;
}
#system table.etclist th {
	background-color: #FFF0E2;
	font-weight: normal;
	width: 120px;
}
#system table.etclist td {
	background-color: #FEFDFB;
	font-family: Verdana, Arial;
}
#system table.etclist th,
#system table.etclist td {
	border-left: 1px solid #D0B97E;
	border-bottom: 1px solid #D0B97E;
	padding: 6px 8px;
	text-align: left;
}

#system .sysMessage {
  padding: 9px;
  border: 1px solid #F4DDDD;
  background-color: #F9F4F5;
	text-align: left;
}
#system .sysMessage h2 {
  font-size: 16px;
  color: #C31556;
  text-align: center;
  padding-top: 8px;
}
#system .sysMessage ol#at {
	padding: 0 12px;
}
#system .sysMessage ol#at li {
	margin: 0 0 8px 0;
}
#system .sysMessage ol#at li ul li{
  color: #BF277C;
  font-size: 14px;
  font-weight: bold;
  height: 22px;
}
/*お知らせ欄*/
.alphaInfo,
.groupInfo,
.freeInfo {
	margin: 0 auto 40px;
  width: 968px;
	background-color: #FFF;
	border: 3px solid #8d390e;
	box-sizing: border-box;
}
.groupInfo {
	border-color: #b30026;
}
.freeInfo {
	border-color: #0576b4;
}
.alphaInfo h2,
.groupInfo h2,
.freeInfo h2 {
	position: relative;
	margin: 0 !important;
	padding: 5px 0;
	background-color: #FBF5EC;
	color: #f24618;
	font-size: 16px;
}
.groupInfo h2 {
	color: #b40536;
	background-color: #fff4f4;
}
.freeInfo h2 {
	color: #0576b4;
	background-color: #f1fcff;
}
.alphaInfo h2::before,
.groupInfo h2::before,
.freeInfo h2::before {
	font-family: 'FontAwesome';
	content: "\f0f3";
	margin-right: 5px;
}
.alphaInfo .infoText,
.groupInfo .infoText,
.freeInfo .infoText {
	text-align: left;
	padding: 10px 20px;
}
 /* --- BOXの定義 -------------------------------------------------▼ラインマーカー*/
.MarkerGreen {
  display    : inline-block;
  position   : relative;
}
.MarkerGreen span {
  display    : inline-block;
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  background : linear-gradient(transparent 40%, rgba(0, 255, 0, 0.6) 60%);  /* ラインマーカーを付ける  */
  animation  : MarkerGreenAnime 3s ease-in infinite;  /* アニメ */
}
 /* --- アニメーションの設定 ------------------------------------ */
@keyframes MarkerGreenAnime {
   0% { right : 100%; }     /* 点滅開始色        */
  25% { right : 0;    }     /* 点滅終了色        */
 100% { right : 0;    }     /* 点滅終了色        */
}
 /* --- BOXの定義 -------------------------------------------------▼アンダーライン*/