/* =================================
	character
================================= */
div.outer {
	position:relative;
}

ul.charalist{margin:1em auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; width:100%;}
ul.charalist li{margin:.5em .8em 2em; position:relative; background-color:rgba(255,255,255,0.6);
width: -webkit-calc(100% / 3 - 3%) ;
width: calc(100% / 3 - 3%);
}
ul.charalist li:before,ul.charalist li:after { 
  content:'';
  width:60%;
  height:60%;
  position: absolute;
  display: inline-block;
}
ul.charalist li:before {
  border-right: solid 4px #a6d8f0;
  border-bottom: solid 4px #a6d8f0;
  bottom:-3px;
  right:-3px;
}
ul.charalist li:after {
  border-left: solid 4px #f19ec2;
  border-top: solid 4px #f19ec2;
  top:-3px;
  left:-3px;
}
ul.charalist li .feature{position:relative;}
ul.charalist li figure{display:block; width:100%; height:0; padding:120% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center top;}
ul.charalist li figure img{position:absolute;left:0;top:0; width:100%; height:100%;}
ul.charalist li span.txt {display:inline-block; font-size:100%; line-height:130%; color:#666464; font-weight: 500; padding:.5em 5% 1em;}
ul.charalist li h2.name{
font-family: "kaisei-opti", sans-serif;
font-weight: 600;
font-style: normal;
}
ul.charalist li h2.name span.charaname{position:absolute; left:0; bottom:5.5%; font-size:180%; text-align:center; display:inline-block; background-color:#f19ec2; color:#fff; border-radius: 0 30px 30px 0; padding:.3em .5em .2em .2em; z-index:1; width:55%;}
ul.charalist li h2.name span.castname{ position:absolute; right:0; bottom:0; font-size:130%; text-align:right; display:inline-block; background-color:#a6d8f0; color:#fff; border-radius: 20px 0px 0px 0px; padding:.3em .3em .3em .5em;}

ul.charalist li h2.name ruby[data-ruby] {
  position:relative;
}
ul.charalist li h2.name ruby[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  left:-2em;
  top:-.55em;
  right:-2em;
  text-align:center;
  font-size:.4em;
  letter-spacing:.1em;
  text-shadow:1px 1px 0 #f19ec2, -1px -1px 0 #f19ec2,
              -1px 1px 0 #f19ec2, 1px -1px 0 #f19ec2,
              0px 1px 0 #f19ec2,  0 -1px 0 #f19ec2,
              -1px 0 0 #f19ec2, 1px 0 0 #f19ec2;
}

ul.charalist li.chara01 figure{background-image:url(../img/chara/chara01.jpg);}
ul.charalist li.chara02 figure{background-image:url(../img/chara/chara02.jpg);}
ul.charalist li.chara03 figure{background-image:url(../img/chara/chara03.jpg?2);}
ul.charalist li.chara04 figure{background-image:url(../img/chara/chara04.jpg?1);}
ul.charalist li.chara05 figure{background-image:url(../img/chara/chara05.jpg);}
ul.charalist li.chara06 figure{background-image:url(../img/chara/chara06.jpg?1);}
ul.charalist li.chara07 figure{background-image:url(../img/chara/chara07.jpg);}
ul.charalist li.chara08 figure{background-image:url(../img/chara/chara08.jpg);}
ul.charalist li.chara09 figure{background-image:url(../img/chara/chara09.jpg?1);}
ul.charalist li.chara10 figure{background-image:url(../img/chara/chara10.jpg?2);}
ul.charalist li.chara11 figure{background-image:url(../img/chara/chara11.jpg);}
ul.charalist li.chara12 figure{background-image:url(../img/chara/chara12.jpg?1);}


/*//////pc//////*/
@media all and (min-width: 768px) {
.nobr{display: none;	}
ul.charalist li.chara01,ul.charalist li.chara02{margin:1em 1.5em 2em;}
}

/*//////smp//////*/
@media all and (max-width: 767px) {
ul.charalist li{margin:.5em .8em 5%; width: 85%;}
ul.charalist li h2.name span.charaname{bottom:5.5%; font-size:8vw; border-radius: 0 6vw 6vw 0; width:55%;}
ul.charalist li h2.name span.castname{font-size:5.5vw; border-radius: 4vw 0px 0px 0px; padding:.3em .3em .3em .5em;}
ul.charalist li span.txt {font-size:4.5vw; line-height:130%; padding:4% 5%;}
}




@media print {
figure.chara-pic {
	display:none;
}
}

div.inner > dl dd .btn {
	text-decoration:none;
}
.btn span {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width: 40%;
	color: #002c48;
	background-color: #fea499;
	transition: 0.3s;
}
.btn span::after {
	content: '';
	width: 9px;
	height: 9px;
	border-top: 3px solid #333333;
	border-right: 3px solid #333333;
	transform: rotate(45deg);
}
@media all and (min-width: 768px) {
.btn span {
	padding: 0.5em 1em;
	font-size: 150%;
}
}
@media all and (max-width: 767px) {
.btn span {
	padding: 0.5em 1em;
	font-size: 125%;
}
}