.systemINTRO  {
	border-top:1px solid #e0d9ce;
	border-bottom:1px solid #e0d9ce;
	padding: 10px;
	text-align: center;
	font-size: clamp(1.4rem, 2.5vw, 1.6rem);
	margin-bottom: 20px;
}

table#system-tb {
    width: 100%;;
    border: 1px #595959 solid;
    border-collapse: collapse;
    border-spacing: 0;
	box-sizing: border-box;
	font-size: 1.68rem;
	 line-height: 1.6;
}

table#system-tb th {
    padding: 15px;
    border: #595959 solid;
    border-width: 0 0 1px 1px;
    background: #7d7d7d;
    font-weight: bold;
    text-align: center;
	color:#fff;
	width: 30%;
}
table#system-tb td {
    padding: 15px;
    border: 1px #595959 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

.systemINTRO02 {
	display: flex;
	justify-content: center;
	position: relative;
	margin-top: 30px;
}
.systemINTRO02 .icon {
	width: 60px;
	position: relative;
	margin-right: 10px;
}
.systemINTRO02 .icon img {
	position: relative;
	top:-15px;
}
.systemINTRO02 p {
	margin: 0;
}

.card {
	width: 80%;
	margin: 20px auto;
}
.cardTEXT {

	font-size: 1.3rem;
	margin: 0;
}
.playLIST {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.playLIST li {
	width: 49.5%;
	background: #7e6b5a;
	text-align: center;
	color:#fff;
	font-size: 1.6rem;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 5px;
}

.cyuui {
	margin-bottom: 20px;
}

.cyuui li {
	border-bottom: 1px solid #cecece;
	padding: 10px;
	box-sizing: border-box;
	font-size: 1.5rem;
}

.cyuuiTEXT {
	font-size: 1.4rem;
	line-height: 1.6;
}

@media screen and (max-width: 834px) {
	
.systemINTRO  {
	border-top:1px solid #e0d9ce;
	border-bottom:1px solid #e0d9ce;
	padding: 10px;
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 20px;
}

table#system-tb {
    width: 100%;;
    border: 1px #595959 solid;
    border-collapse: collapse;
    border-spacing: 0;
	box-sizing: border-box;
	font-size: 1.5rem;
	 line-height: 1.6;
}

table#system-tb th {
    padding: 10px;
    border: #595959 solid;
    border-width: 0 0 1px 1px;
    background: #7d7d7d;
    font-weight: bold;
    text-align: center;
	color:#fff;
	width: 50%;
}
table#system-tb td {
    padding: 10px;
    border: 1px #595959 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

.systemINTRO02 {
	display: flex;
	justify-content: center;
	position: relative;
	margin-top: 30px;
}
.systemINTRO02 .icon {
	width: 50px;
	position: relative;
	margin-right: 10px;
}
.systemINTRO02 .icon img {
	position: relative;
	top:-15px;
}
.systemINTRO02 p {
	margin: 0;
}

.card {
	width: 80%;
	margin: 20px auto;
}
.cardTEXT {

	font-size: 1.0rem;
	margin: 0;
}
.playLIST {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.playLIST li {
	width: 49.5%;
	background: #7e6b5a;
	text-align: center;
	color:#fff;
	font-size: 1.4rem;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 5px;
	display: flex;
  justify-content: center;
  align-items: center;
}

.cyuui {
	margin-bottom: 15px;
}

.cyuui li {
	border-bottom: 1px solid #cecece;
	padding: 10px 0;
	box-sizing: border-box;
	font-size: 1.4rem;
}

.cyuuiTEXT {
	font-size: 1.2rem;
	line-height: 1.6;
}

	
}


.system01 {
  display: inline-table;
  position: relative;
  text-decoration: none;
  color: #f9a9ae;
  width: 180px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(#3ab18b 0%, #3ab18b 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 0 8px rgb(255 255 255 / 60%);
    border: solid 1px;	
}
.system01::after {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデーションを明るく*/
}
.system01:link {
	color: #fff;
	text-decoration: none;
}
.system01:visited {
	color: #fff;
}
.system01:hover {
	background-color: #fff;
	color: #3ab18b;
	text-decoration:none;
  background: linear-gradient(#BBE8D9 0%, #BBE8D9 100%);
}
.system01:hover::after {
	border-left-color: #3ab18b;
}

.system02 {
  display: inline-table;
  position: relative;
  text-decoration: none;
  color: #f9a9ae;
  width: 180px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(#ffa200 0%, #ffa200 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 0 8px rgb(255 255 255 / 60%);
}
.system02::after {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデーションを明るく*/
}
.system02:link {
	color: #fff;
	text-decoration: none;
}
.system02:visited {
	color: #fff;
}
.system02:hover {
	background-color: #fff;
	color: #ffa200;
	text-decoration:none;
  background: linear-gradient(#FBDAA1 0%, #FBDAA1 100%);
}
.system02:hover::after {
	border-left-color: #ffa200;
}




.system03 {
  display: inline-table;
  position: relative;
  text-decoration: none;
  color: #f9a9ae;
  width: 180px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(#235b16 0%, #235b16 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 0 8px rgb(255 255 255 / 60%);
}
.system03::after {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデーションを明るく*/
}
.system03:link {
	color: #fff;
	text-decoration: none;
}
.system03:visited {
	color: #fff;
}
.system03:hover {
	background-color: #fff;
	color: #235b16;
	text-decoration:none;
	
  background: linear-gradient(#90BD85 0%, #90BD85 100%);
}
.system03:hover::after {
	border-left-color: #235b16;
}