/*	Top Character
============================== */
div.chara {
	background-image: url(../img/bg_character.jpg);
	background-color:#743f3d;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	
	text-align:left;
}
div.chara article {
	/*background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);*/
	position:relative;
	/**/
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	justify-content: center;
	/**/
	overflow:hidden;
}
div.chara article header {
	/**/
	display:flex;
	justify-content: center;
	align-items: flex-end;
	/**/
}

div.chara article header h2 {
	font-weight:normal;
	line-height:1.25;
	margin-bottom:0.25em;
}
div.chara article header h2 span {
	/*background-image: -webkit-gradient(linear, left top, right bottom, from(hsla(280,56%,59%,1)), to(hsla(336,75%,62%,1)));
	background-image: linear-gradient(135deg, hsla(280,56%,59%,1), hsla(336,75%,62%,1));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
	color: hsla(0,0%,100%,1.00);
	display:inline-block;
	position:relative;
	padding-bottom:0.1em;
	border-bottom:3px solid hsla(0,0%,100%,1.00);
}
/*div.chara article header h2 span:after{
  content: "";
  height: 3px;
  width: 100%;
  display: block;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, hsla(280,56%,59%,1), hsla(336,75%,62%,1));
  border-image-slice: 1;
}*/


div.chara article ul {
	display:flex;
}
div.chara article ul li.nth-child(even) {
	transform:translateY(20px);
}
div.chara article ul li a, div.chara article ul li span {
	display:block;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.chara article ul li a {
	background-position:center top;
	background-size:cover;
	border-radius:50%;
	overflow:hidden;
}
div.chara article ul li a.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}


@media all and (min-width: 768px) {
div.chara {
}
div.chara article {
	height:100vh;
}
div.chara article header {
/*	padding-top:40px; */
	padding-bottom:60px;
}
div.chara article header h2 {
	font-size:600%;
}
div.chara article ul {
	width:max-content;
	padding-bottom:20px;
	/* margin: 0 auto;
	flex-wrap: nowrap;
    width: max-content; */
}
div.chara article ul li:first-child {
	margin-left:360px;
}
div.chara article ul li a, div.chara article ul li span {
	width: 360px;
	height: 360px;
}
div.chara article ul li:not(:last-child) {
	margin-right:60px;
}
}
@media all and (max-width: 767px) {
div.chara {
}
div.chara article {
	height:100vh;
/*	height:calc(100vh - 72px);*/
	height:100dvh;
/*	height:calc(100dvh - 72px);*/
}
div.chara article header {
/*	padding-top:5vh;*/
	padding-bottom:5vh;
}
div.chara article header h2 {
	font-size:14vw;
}
div.chara article ul {
	width:max-content;
	/* flex-wrap: nowrap;
    width: max-content; */
/*	padding-bottom:2.5vh;*/
}
div.chara article ul li:first-child {
	margin-left:280px;
}
div.chara article ul li a, div.chara article ul li span {
	width: 280px;
	height: 280px;
}
div.chara article ul li:not(:last-child) {
	margin-right:40px;
}
}

/* PC：横スクロールなし */
/* @media (min-width: 768px) {

  .pin-spacer {
    width: 100% !important;
    height: auto !important;
  }

  .pin-spacer .chara.sidescroll-outer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    transform: none !important;
  }

  .pin-spacer .sidescroll-inner {
    transform: none !important;  
    width: auto !important; 
  }

  .pin-spacer .sidescroll-inner li {
    flex: 0 0 auto;  
  }
}*/

/* SP：横スクロールあり */
@media (max-width: 767px) {
  .sidescroll-inner {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .sidescroll-inner li {
    flex: 0 0 auto;
  }
}