html{
  -webkit-text-size-adjust: 100%;
}
body {
  background:url(../img/bg_stripe.png);
  min-width: 960px;
  font-size:16px;
  line-height: 1.5;
  color:#333;
}
.body_inner{
  position: relative;
  min-width: 1400px;
  overflow: hidden;
}
.body_inner:before{
  display: block;
  content:'';
  position: absolute;
  top:1950px;
  left:0;
  width:100%;
  height: 960px;
  background:#15bcf4;
  border-top: solid 960px #12548e;
  border-bottom: solid 960px #ccf832;
  transform: skewY(45deg);
  transform-origin: top center;
  z-index:-12;
}
.body_inner:after{
  display: block;
  content:'';
  position: absolute;
  top:1770px;
  right:0;
  width:100%;
  height: 960px;
  background:#0aa0d2;
  border-top: solid 960px #0a3255;
  border-bottom: solid 960px #b4e114;
  transform: skewY(-45deg);
  transform-origin: top center;
  z-index:-11;
}
a:active,a:hover,a:link,a:visited {
  color: #0a4bdf;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}
button{
  outline: none;
}
a.btn{
  display:block;
  position: relative;
  overflow:hidden;
}
a.btn:after,
a.btn:before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-repeat: no-repeat;
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  top:0;
  bottom:0;
  left: 0;
  right: 0
}
a.btn:before {
  background-position: left top;
  opacity: 1
}
a.btn:after {
  background-position: left bottom;
  opacity: 0
}
a.btn:hover:after,
a.btn:hover:before {
  opacity: 1
}
.disable{
  pointer-events: none;
}
.op{
  transition:0.3s;
}
.op:hover{
  opacity: 0.7;
}
.disable.op:hover{
  opacity: 1;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
strong{
  font-weight: 700;
}
.hide-text{
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden
}
.note{
  padding-left:1em;
  text-indent:-1em;
}
.flex_box{
  display:flex;
  justify-content: space-between;
}
.grad{
  position:relative;
  padding:6px;
}
.grad:before{
  display:block;
  position: absolute;
  content:'';
  top:0;
  bottom:0;
  left:0;
  right:0;
  border-radius: 10px;
  background: #b4e114;
  background: -moz-linear-gradient(120deg,  #b4e114 0%, #0aa0d2 48%, #0a3255 100%);
  background: -webkit-linear-gradient(120deg,  #b4e114 0%,#0aa0d2 48%,#0a3255 100%);
  background: linear-gradient(-10deg,  #b4e114 0%,#0aa0d2 48%,#0a3255 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e114', endColorstr='#0a3255',GradientType=1 );
  z-index:-2;
}
.grad:after{
  display:block;
  position: absolute;
  content:'';
  top:6px;
  bottom:6px;
  left:6px;
  right:6px;
  background:#fff;
  border-radius: 5px;
  z-index:-1;
}
.content .title{
  text-align: center;
  background-position:center center;
  background-repeat:no-repeat;
}
h2.hl{
  position:relative;
  min-height: 60px;
  background-position:center center;
  background-repeat:no-repeat;
  box-sizing: border-box;
  border:2px solid #0a5486;
  margin-top:40px;
}
h2.hl:before{
  display:block;
  content:'';
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url(../img/hl_l.svg) top left no-repeat,url(../img/hl_r.svg) bottom right no-repeat;
}
.fsmall{
  font-size:14px;
}

/*mainvisual*/
.mainvisual{
  padding:40px 0 35px;
}
.mainvisual .title{
  background:url(../img/charge/mainvisual.png) top center no-repeat;
  min-height: 548px;
  margin:0px 0 20px;
}
.mainvisual img{
  display:block;
  margin:0 auto;
}
.mainvisual .introduction{
  margin:60px auto 80px;
  background:url(../img/charge/introduction.png) top center no-repeat;
  min-height: 232px;
}

/*item*/
.item_area{
  background: #b4e114;
  background: -moz-linear-gradient(left,#0a3255 0%, #0a8aca 50%, #b4e114 100%);
  background: -webkit-linear-gradient(left,#0a3255 0%,#0a8aca 50%,#b4e114 100%);
  background: linear-gradient(to right,#0a3255 0%,#0a8aca 50%,#b4e114 100%);
  padding:25px 0;
  margin:40px 0 80px;
}
.item_area .inner{
  background: #0a3255;
  background: -moz-linear-gradient(left,#b4e114 0%, #0a8aca 50%, #0a3255 100%);
  background: -webkit-linear-gradient(left,#b4e114 0%,#0a8aca 50%,#0a3255 100%);
  background: url(../img/charge/item_bg.png) top center /100% auto no-repeat,linear-gradient(to right,#b4e114 0%,#0a8aca 50%,#0a3255 100%);
}
.item_list{
  padding-bottom:40px;
}
.item_list_img{
  width:1400px;
  min-height: 1000px;
  margin:0 auto 20px;
  background:
  url(../img/charge/item_maple.png) top -20px left 50px no-repeat,
  url(../img/charge/item_mabinogi.png) top -20px right 30px no-repeat,
  url(../img/charge/item_tales.png) bottom 36px left 140px no-repeat,
  url(../img/charge/item_arad.png) bottom right 80px no-repeat;
}
.item_detail{
  background:rgba(255,255,255,0.5);
  padding:4px;
  margin-top:40px;
}
.item_detail_list{
  background:#fff;
  padding:16px;
}
.item_detail_list li{
  border-width:2px;
  border-style:solid;
  border-radius: 5px;
  margin-top:20px;
  padding:18px;
  min-height: 120px;
  box-sizing: border-box;
  display:flex;
  flex-wrap: wrap;
  align-items:stretch;
}
.item_detail_list li:first-child{
  margin-top:0;
}
.item_maple{
  border-color:#f75d00;
  background:url(../img/charge/item_char_maple.png) top left no-repeat,url(../img/charge/bg_dot_maple.png) repeat-x;
}
.item_mabinogi{
  border-color:#40c301;
  background:url(../img/charge/item_char_mabinogi.png) top left no-repeat,url(../img/charge/bg_dot_mabinogi.png) repeat-x;
}
.item_tales{
  border-color:#0394f8;
  background:url(../img/charge/item_char_tales.png) top left no-repeat,url(../img/charge/bg_dot_tales.png) repeat-x;
}
.item_arad{
  border-color:#6b1091;
  background:url(../img/charge/item_char_arad.png) top left no-repeat,url(../img/charge/bg_dot_arad.png) repeat-x;
}
.item_detail_list h3{
  width:340px;
}
.item_detail_list dl{
  width:540px;
  display:flex;
  align-items:flex-start;
  margin-top:20px;
}
.item_detail_list dl:first-child{
  margin-top:0;
}
.item_detail_list dt{
  width:130px;
  font-size:18px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  color:#fff;
}
.item_detail_list dd{
  width:410px;
  padding:6px 0 0 12px;
  font-weight: bold;
  line-height: 1.25;
  box-sizing: border-box;
}
.item_maple dt{
  background:#f75d00;
}
.item_maple dd{
  color:#f75d00;
}
.item_mabinogi dt{
  background:#40c301;
}
.item_mabinogi dd{
  color:#40c301;
  padding:0 0 0 12px;
}
.item_tales dt{
  background:#0394f8;
}
.item_tales dd{
  color:#0394f8;
}
.item_arad dt{
  background:#6b1091;
}
.item_arad dd{
  color:#6b1091;
}



/*detail*/
.detail{
  padding:20px;
  margin-top:40px;
}
.detail .target{
  background:#ffebcc;
  text-align: center;
  border-radius: 5px;
  padding:20px;
}
.detail .target h2,
.detail .target p,
.detail .target li,
.detail .target span{
  font-weight: bold;
}
.detail .target h2{
  font-size:18px;
  color:#fff;
  width:260px;
  margin:0 auto;
  line-height: 40px;
  border-radius: 20px;
  background:#ff7000;
  margin-bottom:20px;
}
.detail .target_list{
  display: flex;
  justify-content:center;
}
.detail .target_list li{
  width:140px;
  margin:20px 16px;
  line-height: 30px;
  border-radius: 15px;
  background:#fff;
}
.target_lawson{
  color:#008aff;
}
.target_seven{
  color:#ff0018;
}
.target_card{
  color:#00ce3a;
}
.target_au{
  color:#ff4200;
}
.detail .attend{
  color:#ff4e00;
}
.detail_list dl{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:20px;
}
.detail_list dt{
  width:140px;
  text-align: center;
  background:#0a3255;
  color:#fff;
  font-weight: bold;
  line-height: 30px;
}
.detail_list dd{
  width:760px;
  padding-top:3px;
}
/*bnr_area*/
.bnr_area{
  text-align: center;
  margin:80px 0;
}
/*footer*/
.footer{
  background:#061825;
  color:#fff;
  text-align: center;
  padding:40px 0;
}