@charset "UTF-8";

/* ---------------------------------------------------------------------------------------------------- */
/* BG */

#content {
	position: relative;
	width: 100%;
	min-height: 100vh;
}
#content .bg {
	position: sticky;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: -1;
	margin-bottom: -100vh;
	pointer-events: none;
}
.gradation1,
.gradation2 {
	position: absolute;
	display: block;
	width: 2070px;
	height: 2392px;
	left: calc(50% - 1035px);
	top: 0;
	z-index: -1;
	transition: all 1000ms ease-out;
	opacity: 0;
}
.gradation1 {
	transform: translateX(-750px);
	background: url(../img/gradation1.svg?2) 0 0 no-repeat;
	background-size: 100% auto;
}
.gradation2 {
	transform: translateX(-350px);
	background: url(../img/gradation2.svg?2) 0 0 no-repeat;
	background-size: 100% auto;
}


#content.passed .gradation1 {
	opacity: 1;
	transform: translateX(-1200px);
}
#content.passed .gradation2 {
	opacity: 1;
	transform: translateX(100px);
}






/* ---------------------------------------------------------------------------------------------------- */
/* Title */

#title-header {
	position: relative;
	height: 350px;
}
#title-header::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	background: rgba(16, 0, 88, 0.5);
	pointer-events: none;
}
#title-header .inner {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: calc(1200px + 20px);
	height: 100%;
	z-index: 20;
	margin: 0 auto;
	padding: 0 10px;
}
#title-header h1 {
	font-size: 6.25rem;
}
#title-header .path {
	position: absolute;
	display: flex;
	left: 10px;
	bottom: 20px;
}
#title-header .path * {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	font-size: 0.875rem;
}
#title-header .path * + * {
	margin-left: 16px;
}
#title-header .path a {
	padding-right: 22px;
	background: url(../img/arrow_next.svg) 100% 50% no-repeat;
	background-size: 8px auto;
}
#title-header .path span {
	cursor: default;
}
#title-header .image {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}
#title-header .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}






/* ---------------------------------------------------------------------------------------------------- */
/* Button */

a.more-button {
	position: relative;
	display: inline-flex;
	padding: 18px 50px 18px 30px;
	font-size: 1rem;
	background: #fff;
	cursor: pointer;
	transition: all 300ms ease-out;
}
a.more-button::after {
	position: absolute;
	content: "";
	display: block;
	width: 8px;
	height: 14px;
	right: 22px;
	top: calc(50% - 7px);
	background: url(../img/arrow_mini_next_navy.svg) 0 0 no-repeat;
	background-size: 100% auto;
	transition: all 300ms ease-out;
}
a.more-button:hover {
	color: #fff;
	background: #000058;
	text-decoration: underline;
}
a.more-button:hover::after {
	filter: brightness(0) invert(1);
}



a.hover-image span {
	position: relative;
	display: block;
}
a.hover-image span img:nth-child(2) {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	opacity: 0;
	transition: all 300ms ease-out;
}
a.hover-image:hover span img:nth-child(2) {
	opacity: 1;
}




/* ---------------------------------------------------------------------------------------------------- */
/* Layout */

.content-inner {
	box-sizing: border-box;
	max-width: calc(1200px + 20px);
	margin: 0 auto;
	padding: 80px 10px 100px;
}
.content-inner .box h2,
.gallery-list h2,
.entry-detail h2 {
	padding: 14px 30px;
	font-size: 1.125rem;
	line-height: 1.42;
	color: #fff;
	background: #000058;
}
.content-inner h2.bar {
	display: none;
}


.path {
	position: absolute;
	width: 100%;
	z-index: 100;
	transform: translateY(-100%);
	padding: 6px 0;
	background: rgba(16,0,88,0.6);
}
.path-inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	max-width: calc(1200px + 20px);
	margin: 0 auto;
	padding: 0 10px;
}
.path-inner * {
	display: inline-flex;
	align-items: center;
	font-size: 0.875rem;
}
.path-inner * + * {
	margin-left: 16px;
}
.path-inner a {
	padding-right: 22px;
	background: url(../img/arrow_next.svg) 100% 50% no-repeat;
	background-size: 8px auto;
}
.path-inner span {
	cursor: default;
}




/* ---------------------------------------------------------------------------------------------------- */
/* Nav */

.yearly-nav {
	width: 1200px;
	margin-bottom: 80px;
}
.yearly-nav ul {
	display: flex;
	flex-wrap: wrap;
}
.yearly-nav li {
	width: 98px;
	margin-left: 24px;
}
.yearly-nav li:nth-child(10n + 1) {
	margin-left: 0;
}
.yearly-nav li:nth-child(n + 11) {
	margin-top: 24px;
}
.yearly-nav li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 35px;
	font-size: 0.875rem;
	color: #100058;
	background: #fff;
	transition: all 300ms ease-out;
}
.yearly-nav li a:hover,
.yearly-nav li.active a {
	color: #fff;
	background: #100058;
}
.yearly-nav li a:hover {
	text-decoration: underline;
}






.inner-nav {
	width: 1200px;
	margin-bottom: 80px;
}
.inner-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.inner-nav li {
	margin-left: 24px;
}
.inner-nav li:first-child {
	margin-left: 0;
}
.inner-nav li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	font-size: 1rem;
	color: #100058;
	background: #fff;
	transition: all 300ms ease-out;
}
.inner-nav li a:hover {
	color: #fff;
	background: #100058;
	text-decoration: underline;
}

body.team .inner-nav li {
	width: calc((100% - (24px * 3)) / 4);
}
body.members .inner-nav li {
	width: calc((100% - (24px * 1)) / 2);
}







/* ---------------------------------------------------------------------------------------------------- */
/* Entry list */

.entry-list {
}
.entry-list ul {
}
.entry-list li + li {
	margin-top: 20px;
}
.entry-list li > a,
.entry-list li > span {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	transition: all 300ms ease-out;
}
.entry-list li > a::after {
	position: absolute;
	content: "";
	display: block;
	width: 15px;
	height: 27px;
	right: 40px;
	top: calc(50% - 13px);
	background: url(../img/arrow_next_navy.svg) 0 0 no-repeat;
	background-size: 100% auto;
	transition: all 300ms ease-out;
}
.entry-list .thumb {
	width: 210px;
}
.entry-list .summary {
	box-sizing: border-box;
	width: calc(100% - 210px);
	padding: 20px 40px;
}
.entry-list .summary > *:nth-child(1) {
	color: #df02a0;
	font-size: 1.125rem;
	line-height: 1.75;
	transition: all 300ms ease-out;
}
.entry-list .summary > *:nth-child(2) {
	margin: 3px 0 0;
	font-size: 1rem;
	line-height: 1.75;
	transition: all 300ms ease-out;
}
.entry-list a:hover {
	background: #100058;
}
.entry-list a:hover .summary > * {
	color: #fff;
}
.entry-list a:hover .summary > *:nth-child(2) {
	text-decoration: underline;
}
.entry-list li > a:hover::after {
	filter: brightness(0) invert(1);
}








/* ---------------------------------------------------------------------------------------------------- */
/* Entry Detail */

.entry-detail {
	padding: 40px 100px;
	background: #fff;
}
.entry-detail h2 {
	margin: -40px -100px 40px;
}

.entry-detail h3 {
	margin: 0 0 40px;
	padding: 10px 30px;
	font-size: 1.125rem;
	line-height: 1.5;
	color: #fff;
	background: #df02a0;
}

.entry-detail h4 {
	margin: 0 0 40px;
	padding: 0 0 8px;
	font-size: 1.125rem;
	line-height: 1.5;
	border-bottom: 1px solid #100058;
}

.entry-detail h5 {
	margin-top: 12px;
	font-size: 1rem;
	line-height: 1.75;
}

.entry-detail p {
	margin-top: 4px;
	font-size: 1rem;
	line-height: 1.75;
}

.entry-detail .photo-column.double ul,
.entry-detail .photo-column.triple ul {
	display: flex;
	flex-wrap: wrap;
}
.entry-detail .photo-column.double li {
	width: calc((100% - 10px) / 2);
	margin-left: 10px;
}
.entry-detail .photo-column.triple li {
	width: calc((100% - 20px) / 3);
	margin-left: 10px;
}

.entry-detail .photo-column.double li:nth-child(2n + 1) {
	margin-left: 0;
}
.entry-detail .photo-column.double li:nth-child(n + 3) {
	margin-top: 40px;
}

.entry-detail .photo-column.triple li:nth-child(3n + 1) {
	margin-left: 0;
}
.entry-detail .photo-column.triple li:nth-child(n + 4) {
	margin-top: 40px;
}


.entry-detail .column.left-image,
.entry-detail .column.right-image {
	display: flex;
	justify-content: space-between;
}
.entry-detail .column.right-image {
	flex-direction: row-reverse;
}
.entry-detail .column .photo {
	width: 324px;
}
.entry-detail .column.small-image .photo {
	width: 170px;
}

.entry-detail .column:has(.photo) .text {
	width: calc(100% - 324px - 22px);
}
.entry-detail .column.small-image .text {
	width: calc(100% - 170px - 22px);
}

.entry-detail .column:has(.photo) .text {
	margin-top: -8px;
}



.entry-detail * + .photo-column,
.entry-detail .photo-column + *,
.entry-detail .column + *
{
	margin-top: 40px;
}
.entry-detail h5 + .column {
	margin-top: 10px;
}






/* ---------------------------------------------------------------------------------------------------- */
/* Table */

.table-wrap {
	background: #fff;
}
.table-wrap table {
	width: 100%;
	border-collapse: collapse;
}
.table-wrap thead th {
	background: #f9ccec;
}
.table-wrap th,
.table-wrap td {
	box-sizing: border-box;
	padding: 18px 30px;
	border-color: rgba(16,0,88,0.25);
	border-style: solid;
	border-width: 0;
	text-align: left;
	line-height: 1.6;
}
.table-wrap thead + tbody th,
.table-wrap thead + tbody td,
.table-wrap tbody tr:nth-child(n + 2) th,
.table-wrap tbody  tr:nth-child(n + 2) td {
	border-top-width: 1px;
}
.table-wrap thead th + th,
.table-wrap td {
	border-left-width: 1px;
}






/* ---------------------------------------------------------------------------------------------------- */
/* Top */


body.top #content {
	min-height: 100px;
}

#kv {
	
}
#top-summary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#top-summary .box {
	display: flex;
	flex-direction: column;
	width: calc((100% - 24px) / 2);
	background: #fff;
}

#top-summary .game {
	position: relative;
	padding: 30px;
	background: #f9ccec;
}
#top-summary .date {
	padding-right: 150px;
	font-size: 2.375rem;
}
#top-summary .place {
	margin: 12px 0 0;
	padding-right: 150px;
	font-size: 1rem;
}
#top-summary .info {
	position: absolute;
	right: 30px;
	top: 30px;
	font-size: 1.125rem;
}

#top-summary .data {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 30px 25px 20px;
}
#top-summary .team {
	text-align: center;
}
#top-summary .team .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	margin: 0 auto;
}
#top-summary .team .label {
	margin: 20px 0 0;
	font-size: 0.8125rem;
	line-height: 1.375;
	
	min-height: 34px;
}

#top-summary .score {
	width: calc(100% - 400px);
	font-size: 4.5rem;
	text-align: center;
}

#top-summary .data:has(.score) .team {
	width: 200px;
}
#top-summary .data:not(:has(.score)) {
	padding-top: 20px;
	padding-bottom: 20px;
}
#top-summary .data:not(:has(.score)) .logo {
	width: 140px;
	height: 140px;
}


#top-summary .more {
	width: 100%;
	margin: 40px 0 0;
}



#top-news {
	margin: 20px 0 0;
}
#top-summary + #top-news {
	margin-top: 80px;
}
#top-news h2 {
	font-size: 4rem;
	color: #fff;
}

.entry-digest {
	margin: 35px 0 0;
}
.entry-digest ul {
	display: flex;
}
.entry-digest li {
	display: flex;
	width: calc((100% - 48px) / 3);
	margin-left: 24px;
	background: #fff;
}
.entry-digest li:nth-child(3n + 1) {
	margin-left: 0;
}
.entry-digest li .summary {
	padding: 30px;
}
.entry-digest li .date {
	font-size: 1.125rem;
	color: #df02a0;
	transition: all 300ms ease-out;
}
.entry-digest li .title {
	margin: 10px 0 0;
	font-size: 1rem;
	line-height: 1.375;
	transition: all 300ms ease-out;
}

.entry-digest a {
	display: flex;
	flex-direction: column;
	transition: all 300ms ease-out;
}
.entry-digest li img {
}
.entry-digest a:hover {
	background: #100058;
}
.entry-digest a:hover .date,
.entry-digest a:hover .title {
	color: #fff;
}
.entry-digest a:hover .title {
	text-decoration: underline;
}

#top-news .more {
	margin: 40px 0 0;
}





/* ---------------------------------------------------------------------------------------------------- */
/* Team */

body.team .container > div + div {
	margin-top: 80px;
}

body.team #message {
	display: flex;
	justify-content: space-between;
}
body.team #message .box {
	width: calc((100% - 24px) / 2);
	background: #fff;
}
body.team #message .column {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	padding: 30px;
}
body.team #message .image {
	width: 160px;
}
body.team #message .text {
	width: calc(100% - 160px - 20px);
}
body.team #message p {
	font-size: 1rem;
	line-height: 1.75;
}
body.team #message .signature {
	margin: 10px 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	text-align: right;
}

body.team #club .table-wrap th,
body.team #history .table-wrap th {
	width: 282px;
}
body.team #club .table-wrap td,
body.team #history .table-wrap td {
	width: calc(100% - 282px);
}

body.team #record .table-wrap thead th + th {
	text-align: center;
}

body.team #record .table-wrap th {
	width: 282px;
}
body.team #record .table-wrap td {
	width: calc((100% - 282px) / 4);
	text-align: center;
}

body.team .more {
	margin-top: 40px;
}






/* ---------------------------------------------------------------------------------------------------- */
/* Members */

body.members .container > div + div {
	margin-top: 80px;
}

.member-list ul {
	display: flex;
	flex-wrap: wrap;
}
.member-list li {
	width: calc((100% - (25px * 4)) / 5);
	margin-left: 25px;
	background: #fff;
}
.member-list li:nth-child(5n + 1) {
	margin-left: 0;
}
.member-list li:nth-child(n + 6) {
	margin-top: 25px;
}
.member-list li > * {
	position: relative;
	display: block;
	transition: all 300ms ease-out;
}

#member.member-list li > * {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
}
#member.member-list .image {
	aspect-ratio: 220 / 275;
}
#member.member-list .name {
	padding: 12px 20px;
}
#member.member-list .name .ja {
	font-size: 1.5625rem;
	color: #df02a0;
	transition: all 300ms ease-out;
}
#member.member-list .name .en {
	margin-top: 10px;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: #000058;
	transition: all 300ms ease-out;
}
#member.member-list .position {
	position: absolute;
	left: 8px;
	top: 10px;
	z-index: 10;
	font-size: 1.5625rem;
	transform: rotate(90deg) translateY(-100%);
	transform-origin: left top;
}
#member.member-list li a:hover {
	background: #000058;
}
#member.member-list li a:hover .name * {
	color: #fff;
}

#staff.member-list li > * {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #000058;
}
#staff.member-list .name {
	padding: 10px 20px;
}
#staff.member-list .name .job {
	font-size: 0.75rem;
	color: #fff;
	transition: all 300ms ease-out;
}
#staff.member-list .name .ja {
	margin-top: 9px;
	font-size: 1.25rem;
	color: #fff;
	transition: all 300ms ease-out;
}
#staff.member-list .name .en {
	margin-top: 8px;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: #fff;
	transition: all 300ms ease-out;
}
#staff.member-list li a:hover {
	background: #fff;
}
#staff.member-list li a:hover .name * {
	color: #000058;
}





#content:has(.profile) {
	min-height: 100px;
}
.content-inner:has(.profile) {
	padding-bottom: 0;
}

.profile {
	display: grid;
	grid-template-columns: 647px 553px;
}
.profile .photo {
	width: 647px;
	grid-column: 1 / 2;
	grid-row: 1 / span 3;
	
	display: flex;
	align-items: flex-end;
}
.profile h2 {
	width: 553px;
	grid-column: 2 / 3;
	font-size: 4rem;
	line-height: 1.05;
	color: #fff;
}
.profile .text {
	width: 553px;
	grid-column: 2 / 3;
	margin: 25px 0 40px;
	padding: 24px 30px 20px;
	background: #fff;
}
.profile .name {
	font-size: 2rem;
}
.profile dl {
	margin: 20px 0 0;
}
.profile dt,
.profile dd {
	font-size: 1rem;
	line-height: 1.7;
}
.profile dd + dt {
	margin-top: 20px;
}

.profile .text .nav {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: calc(100% + 60px);
	margin: 30px -30px -20px;
	padding: 16px 30px;
	background: #100058;
}
.profile .text .nav span,
.profile .text .nav a {
	color: #fff;
	font-size: 1.0rem;
}
.profile .text .nav a:hover {
	text-decoration: underline;
}

.profile .text .nav .return {
	margin: 0 24px;
}
.profile .text .nav a.prev {
	padding-left: 25px;
	background: url(../img/arrow_mini_prev.svg) left 2px top 50% no-repeat;
	background-size: 8px auto;
}
.profile .text .nav a.next {
	padding-right: 25px;
	background: url(../img/arrow_mini_next.svg) right 2px top 50% no-repeat;
	background-size: 8px auto;
}

#member {
	scroll-margin: 130px;
}





/* ---------------------------------------------------------------------------------------------------- */
/* Games */

body.games .container > div + div {
	margin-top: 80px;
}

body.games .table-wrap tbody th {
	width: 180px;
}
body.games .table-wrap td:nth-child(2),
body.games .table-wrap td:nth-child(3) {
	width: 360px;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 1.4;
}
body.games .table-wrap td:nth-child(4),
body.games .table-wrap td:nth-child(5) {
	width: calc((100% - 180px - 360px - 360px) / 2);
	text-align: center;
}





/* ---------------------------------------------------------------------------------------------------- */
/* Gallery */

body.gallery .banner + .entry-list {
	margin-top: 80px;
}

.gallery-title {
	margin-bottom: 80px;
}

.gallery-list {
	background: #fff;
}
.gallery-list ul {
	display: flex;
	flex-wrap: wrap;
	padding: 30px;
}
.gallery-list li {
	width: calc((100% - (30px * 2)) / 3);
	margin-left: 30px;
}
.gallery-list li:nth-child(3n + 1) {
	margin-left: 0;
}
.gallery-list li:nth-child(n + 4) {
	margin-top: 30px;
}
.gallery-list a {
	display: block;
}

.gallery-list img {
	transition: all 300ms ease-out;
}
.gallery-list a:hover img {
	opacity: 0.7;
}

.gallery-list + .gallery-list {
	margin-top: 80px;
}


#gallery-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10000;
	background: rgba(0,0,0,0.8);
	transition: all 300ms ease-out;
	opacity: 0;
}
#gallery-modal {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10010;
	pointer-events: none;
	transition: all 300ms ease-out;
	opacity: 0;
}

#gallery-modal .modal-inner {
	position: relative;
	max-width: 900px;
	padding-bottom: 60px;
}

#gallery-modal #close-button {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	right: 0;
	cursor: pointer;
	border: none;
	background: #fff;
	pointer-events: auto;
}
#gallery-modal #close-button:active {
	background: #fff;
}
#gallery-modal #close-button img {
	width: 22px;
	height: 22px;
}

#gallery-modal .nav-button {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	z-index: 10;
	top: calc(50% - 25px - 30px);
	padding: 0;
	border: none;
	cursor: pointer;
	pointer-events: auto;
	background: transparent;
}
#gallery-modal #prev-button {
	left: -70px;
}
#gallery-modal #next-button {
	right: -70px;
}
#gallery-modal .nav-button img {
	width: 28px;
	height: 50px;
}
#gallery-modal .nav-button.disabled {
	opacity: 0.2;
}




body.modal #gallery-overlay,
body.modal #gallery-modal {
	opacity: 1;
}



#gallery-modal .modal-inner > span {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 900px;
	height: calc(100vh - 120px);
}
#gallery-modal .modal-inner > span img {
	position: absolute;
	width: 100%;
	max-width: 900px;
	max-height: calc(100vh - 120px);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	object-fit: contain;
	pointer-events: auto;
	transition: opacity 300ms ease-out;
}

#gallery-modal .modal-inner img.ready {
	opacity: 0;
}
#gallery-modal .modal-inner img.bye {
	opacity: 0;
	transition-duration: 200ms;
}










#kv {
	position: relative;
	padding-bottom: 50px;
	margin-bottom: -50px;
}
body.top .content-inner {
	padding-top: 100px;
}
body.top #kv.single + #content .content-inner {
	padding-top: 50px;
}

#kv img {
	aspect-ratio: 288 / 98;
	object-fit: cover;
}

#slide-pager {
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100%;
	bottom: 0;
	z-index: 100;
}
#slide-pager > div {
	display: flex;
	padding: 0 12px 0 4px;
	background: rgba(16,0,88,0.5);
	border-radius: 4px;
}

#slide-toggle-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	margin-left: 10px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}
#slide-toggle-button img {
	width: 32px;
	height: auto;
	opacity: 0.8;
}

#slide-pager ul {
	display: flex;
}
#slide-pager li button {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 30px;
	height: 30px;
	padding: 0 11px;
	border: none;
	background: transparent;
	cursor: pointer;
}
#slide-pager button span {
	position: relative;
	display: block;
	width: 8px;
	height: 8px;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(255,255,255,0.5);
	transition: all 300ms ease-out;
}
#slide-pager button span::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transform: scaleX(0);
	background: rgba(255,255,255,0.5);
	transform-origin: left top;
}


#slide-pager li.ready span::after {
	animation: indicator-fill 300ms forwards ease;
}


#slide-pager li.active span {
	width: 80px;
}
#slide-pager li.active span::after {
	animation: indicator-fill 5500ms forwards linear;
}




@keyframes indicator-fill {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}