#chara .wrap h1#ttl{
  padding:1em 0;
} 
#chart_link{
  background:url(./img/chart.png) no-repeat center bottom;
  background-size:cover;
  margin:5em auto 3em;
  padding:3em 0 1em;
}
#chart_link h2{
  color:#d71718;
  font-size:300%;
  text-align:center;
  font-family: "anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin:0 auto .5em;
}

@media all and (max-width: 767px) {
#chara .wrap h1#ttl{
  padding:4vw 0;
}
#chart_link{
  margin:2vw auto 8vw;
  padding:6vw 0 5vw;
}
#chart_link h2{
  font-size:9vw;
  margin:0 auto;
}
#chart_link a.btn_1{
  margin:2vw auto;
}
}

#chara .inner{
	overflow:hidden;
}
.slider{
}
.slider > div {
	max-width:1200px;
	position:relative;
	margin:0 auto 1em;
	padding: 0 40px;
	box-sizing: border-box;
}
.slider > div > ul {
	padding:0;
	width:100%;
	font-size:0;
	overflow:hidden;
	white-space:nowrap;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
}
.slider > div > ul > li {
	position:relative;
	list-style:none;
	display:inline-block;
	scroll-snap-align:center;
	width:100%;
	aspect-ratio: 15 / 7;
}
.slider > div > ul > li picture {
	display: block;
	width: 100%;
	height: 100%;
}
.slider > div > ul > li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;    
	object-fit:contain;
	image-rendering:-webkit-optimize-contrast;
}
.slider .arrow:before {
	content:'';
	position:absolute;
	width:18px;
	height:18px;
	border-left:3px solid #fff;
	border-bottom:3px solid #fff;
}
.slider .arrow {
	position:absolute;
	background:rgba(255,255,255,0);
	cursor:pointer;
}
.slider .left:before {
	top:calc(50% - 10px);
	left:calc(50% - 3px);
	transform:rotate(45deg);
}
.slider .right:before {
	top:calc(50% - 10px);
	right:calc(50% - 6px);
	transform:rotate(-135deg);
}
@media all and (min-width: 768px) {
.slider .arrow {
	top:50%;
}
.slider .left {
	left:10px;
}
.slider .right {
	right:10px;
}
}

.slider .thumbs {
	max-width:1200px;
	list-style:none;
	margin:1em auto;
	padding: 0 40px;
	display: flex;
	flex-flow:row wrap;
    gap:10px;
}
.slider .thumbs li {
	cursor:pointer;
	width: calc((100% - 10px * 8) / 9);
}
.slider .thumbs li p{
	font-size:85%;
	font-size: clamp(1rem, 1.5vw, 1.4rem);
    color:#fff;
	line-height:140%;
	padding:.5em 0;
}
.slider .thumbs li p strong{
	font-size:105%;
    color:#d71718;
    font-weight:600;
}
.slider .thumbs figure{
    width:100%;
	border-radius:4px;
	overflow:hidden;
	aspect-ratio: 130 / 163;
    background-color:rgba(58,58,58,.4);
    animation: fadeBackground 1s ease-out forwards;
}
@keyframes fadeBackground {
	0% {
		background-color: rgba(58, 58, 58, 1);
	}
	100% {
		background-color: rgba(58, 58, 58, .4);
	}
}
.slider .thumbs figure img{
    display:block;
    background-size:cover;
	aspect-ratio: 130 / 163 !important;
}	

/*.slider .thumbs li.selected {
	opacity:1;
}*/
@media all and (max-width: 767px) {
.slider > div > ul {
		overflow-x: auto; 
		overflow-y: hidden;
		-ms-overflow-style: none;
		scrollbar-width: none;
}
.slider > div > ul::-webkit-scrollbar {
		display: none;
}
.slider > div {
    padding: 0;
	margin:0 auto 12vw;
}
.slider > div > ul > li {
	aspect-ratio: 123 / 197;
}
.slider .thumbs {
    padding: 0;
}
.slider .thumbs li {
	cursor:pointer;
	width: calc((100% - 10px * 2) / 3);
}
.slider .thumbs li p{
	font-size:3.5vw;
}
.slider .arrow {
    bottom:-5.5vw;
}
.slider .arrow:before {
	width:4vw;
	height:4vw;
}
.slider .left {
	left:4vw;
}
.slider .right {
	right:4vw;
}
}