@charset "UTF-8";

@media screen and (min-width: 768px) {
	.categoryCard #chara01 { position: absolute; top: -210px; left: 30px; z-index: 100; }
	.categoryCard #chara01 img {}
	.categoryCard #chara02 { position: absolute; top: -200px; right: 45px; z-index: 100; }
	.categoryCard #chara02 img { }

	.categoryCard .introduction .textLv4 { font-weight: normal; }
	.section .titleRare { position: relative; margin: 0 0 15px 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; box-sizing: border-box; color: #fff; font-weight: bold; font-size: 1.6rem; line-height: 46px; }
	.section .titleRare img { position: absolute; top: 4px; left: 8px; width: auto; height: 38px; }

	.navCard {	position: absolute; padding-right: 5px; top: 8px; right: 10px; z-index: 10000; font-size: 1.4rem; font-weight: bold; width: 225px; background: #fff;/*#ffee31;*/ color: #7c370a; box-sizing: border-box; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; }
	.navCard dt { padding: 8px 10px; cursor: pointer; background: url(../images/monstarcard/arrow_rare1.png) right center no-repeat; }
	.navCard dd { display: none; }
	.navCard dd { margin: 0 5px 10px 10px; }
	.navCard ul { border-bottom: 1px solid #fff; }
	.navCard li { border: 1px solid #fff; border-bottom: none; }
	.navCard li a { position: relative; display: block; padding: 12px 10px; color: #fff; font-weight: normal; background: #7c370a; font-size: 1.4rem; }
	.navCard li a:hover { background: #ffee31; color: #7c370a;	}
	.navCard li a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 2px #fff; border-right: solid 2px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 10px; margin-top: -5px; }
	.navCard li a:hover::after {border-top: solid 2px #7c370a; border-right: solid 2px #7c370a; }

	.navList { padding-bottom: 20px; }
	.navList li { float: left; margin-right: 10px; }
	.btnRare { display: block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; box-sizing: border-box; color: #fff; font-weight: bold; font-size: 1.5rem; }
	.btnRare a { display: block; padding: 15px; color: #fff; box-sizing: border-box; }
	.btnRare.rare1 { margin-right: 0; width: 140px; }
	.btnRare.rare1 a { margin-right: 10px; background: url(../images/monstarcard/arrow_rare1.png) right 12px no-repeat; }
	.btnRare.rare2 { width: 140px; }
	.btnRare.rare2 a { margin-right: 10px; background: url(../images/monstarcard/arrow_rare2.png) right 12px no-repeat; }
	.btnRare.rare3 { width: 160px; }
	.btnRare.rare3 a { margin-right: 10px; background: url(../images/monstarcard/arrow_rare3.png) right 12px no-repeat; }
	.btnRare.rare4 { width: 200px; }
	.btnRare.rare4 a { margin-right: 10px; background: url(../images/monstarcard/arrow_rare4.png) right 12px no-repeat; }
	.btnRare.rare5 { width: 200px; }
	.btnRare.rare5 a { margin-right: 10px; background: url(../images/monstarcard/arrow_rare5.png) right 12px no-repeat; }

	.section .titleRare.rare1 { padding: 0 0 0 50px; }
	.section .titleRare.rare2 { padding: 0 0 0 85px; }
	.section .titleRare.rare3 { padding: 0 0 0 125px; }
	.section .titleRare.rare4 { padding: 0 0 0 160px; }
	.section .titleRare.rare5 { padding: 0 0 0 200px; }

	.cardList { margin-bottom: 20px; }
	.cardList li { position: relative; float: left; padding-bottom: 25px; width: 176px; text-align: center; }
	.cardList li .iconNew { position: absolute; right: 0px; top: -10px; width: 55px; height: 55px; }
	.cardList li dt { padding: 0 5px; width: 176px; box-sizing: border-box; }
	.cardList li dt img { width: 100%; }
	.cardList li .code { padding: 10px 0; font-size: 1.4rem; line-height: 1.5; }
	.cardList li .name  { font-size: 1.5rem; font-weight: bold; line-height: 1.4; }

	.cardListCaution { margin-top: -20px; font-size: 1.4rem; text-align: left; margin-bottom: 40px; }

	#rare1List li .name { color: #763a0d; }
	#rare2List li .name { color: #af0000; }
	#rare3List li .name { color: #008def; }
	#rare4List li .name { color: #856c17; }
	#rare5List li .name { color: #000; }
}

@media screen and (max-width: 767px) {
	.categoryCard .introduction .textLv4 { font-weight: normal; }
	.section .titleRare { position: relative; margin: 0 0 15px 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; box-sizing: border-box; color: #fff; font-weight: bold; font-size: 1.4rem; line-height: 34px; }
	.section .titleRare img { position: absolute; top: 3px; left: 8px; width: auto; height: 24px; }

	.navCard { margin-bottom: 15px; padding-right: 5px; font-size: 1.4rem; font-weight: bold; width: 100%; background: #fff;/*#ffee31;*/ color: #7c370a; border: 3px solid #7c370a; box-sizing: border-box; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; }
	.navCard dt { padding: 10px; cursor: pointer; background: url(../images/monstarcard/arrow_rare1.png) right center no-repeat; }
	.navCard dd { margin: 0 5px 10px 10px; }
	.navCard ul { border-bottom: 1px solid #fff; }
	.navCard li { border: 1px solid #fff; border-bottom: none; }
	.navCard li a {position: relative; display: block; padding: 12px 10px; color: #fff; font-weight: normal; background: #7c370a; font-size: 1.4rem; }
	.navCard li a:hover { background: #ffee31; color: #7c370a;	}
	.navCard li a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 2px #fff; border-right: solid 2px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 10px; margin-top: -5px; }
	.navCard li a:hover::after {border-top: solid 2px #7c370a; border-right: solid 2px #7c370a; }

	.navList { margin-bottom: 5px; /*display: none; */ }
	.btnRare { float: left; margin-bottom: 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; box-sizing: border-box; color: #fff; font-weight: bold; font-size: 1.1rem; }
	.btnRare a { display: block; padding: 10px; color: #fff; }
	.btnRare.rare1 { margin-left: 2%; width: 33%; }
	.btnRare.rare1 a { margin-right: 7px; background: url(../images/monstarcard/arrow_rare1.png) right 7px no-repeat; background-size: 16px 16px; }
	.btnRare.rare2 { margin-left: 2%; width: 23%; }
	.btnRare.rare2 a { margin-right: 7px; background: url(../images/monstarcard/arrow_rare2.png) right 7px no-repeat; background-size: 16px 16px; }
	.btnRare.rare3 { clear: both; width: 40%; }
	.btnRare.rare3 a { margin-right: 7px; background: url(../images/monstarcard/arrow_rare3.png) right 7px no-repeat; background-size: 16px 16px; }

	.btnRare.rare4 { width: 58%; }
	.btnRare.rare4 a { margin-right: 7px; background: url(../images/monstarcard/arrow_rare4.png) right 7px no-repeat; background-size: 16px 16px; }
	.btnRare.rare5 { margin-right: 2%; width: 40%; }
	.btnRare.rare5 a { margin-right: 7px; background: url(../images/monstarcard/arrow_rare5.png) right 7px no-repeat; background-size: 16px 16px; }

	.section .titleRare.rare1 { padding: 0 0 0 35px; }
	.section .titleRare.rare2 { padding: 0 0 0 55px; }
	.section .titleRare.rare3 { padding: 0 0 0 80px; }
	.section .titleRare.rare4 { padding: 0 0 0 105px; }
	.section .titleRare.rare5 { padding: 0 0 0 130px; }

	.categoryCard #frmNav + #rare4List {  margin-top: 20px; }

	.cardList { margin-bottom: 20px; }
	.cardList li { position: relative; float: left; padding-bottom: 25px; width: 50%; text-align: center; }
	.cardList li .iconNew { position: absolute; right: 0px; top: -5px; width: 50px; height: 50px; }
	.cardList li dt { padding: 0 5px; box-sizing: border-box; }
	.cardList li .code { padding: 10px 0 5px 0; font-size: 1.2rem; }
	.cardList li .name  { font-size: 1.3rem; font-weight: bold; line-height: 1.3; }

	.cardListCaution { clear: both; margin-top: -50px!important; font-size: 1.2rem; text-align: left; margin-bottom: 40px; line-height: 1.5; }

	#rare1List li .name { color: #763a0d; }
	#rare2List li .name { color: #af0000; }
	#rare3List li .name { color: #008def; }
	#rare4List li .name { color: #856c17; }
	#rare5List { margin-top: 15px; }
	#rare5List li .name { color: #000; }
}