@charset "UTF-8";

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

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


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









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

#title-header {
	position: relative;
	height: 150px;
}
#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;
	align-items: center;
	height: 100%;
	z-index: 20;
	margin: 0 auto;
	padding: 0 10px;
}
#title-header h1 {
	font-size: 2.5rem;
}
#title-header .path {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	left: 20px;
	bottom: 10px;
}
#title-header .path * {
	display: inline-flex;
	align-items: center;
	min-height: 18px;
	margin-right: 10px;
	font-size: 0.75rem;
}
#title-header .path * + * {
}
#title-header .path a {
	padding-right: 16px;
	background: url(../img/arrow_next.svg) 100% 55% no-repeat;
	background-size: 6px 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 {
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 10px 32px 10px 15px;
	font-size: 0.875rem;
	background: #fff;
	cursor: pointer;
	transition: all 300ms ease-out;
}
a.more-button::after {
	position: absolute;
	content: "";
	display: block;
	width: 8px;
	height: 14px;
	right: 14px;
	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:active {
	color: #fff;
	background: #000058;
	text-decoration: underline;
}
a.more-button:active::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:active span img:nth-child(2) {
	opacity: 1;
}





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

.content-inner {
	box-sizing: border-box;
	padding: 40px 20px;
}
.content-inner .box h2,
.content-inner h2.bar,
.gallery-list h2,
.entry-detail h2 {
	padding: 10px 18px;
	font-size: 1rem;
	line-height: 1.42;
	color: #fff;
	background: #000058;
}


.content-inner:has(.yearly-nav) {
	display: flex;
	flex-direction: column-reverse;
}


.path {
	position: absolute;
	width: 100%;
	z-index: 100;
	transform: translateY(-100%);
	padding: 2px 0 3px;
	background: rgba(16,0,88,0.6);
}
.path-inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto;
	padding: 0 20px;
}
.path-inner * {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	line-height: 1.4;
}
.path-inner * + * {
}
.path-inner a {
	margin-right: 11px;
	padding-right: 17px;
	background: url(../img/arrow_next.svg) 100% 60% no-repeat;
	background-size: 6px auto;
}
.path-inner span {
	cursor: default;
}







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

.yearly-nav {
	margin-top: 40px;
}
.yearly-nav ul {
	display: flex;
	flex-wrap: wrap;
}
.yearly-nav li {
	width: calc((100% - (10px * 3)) / 4);
	margin-left: 10px;
}
.yearly-nav li:nth-child(4n + 1) {
	margin-left: 0;
}
.yearly-nav li:nth-child(n + 5) {
	margin-top: 10px;
}
.yearly-nav li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 30px;
	font-size: 0.875rem;
	color: #100058;
	background: #fff;
	transition: all 300ms ease-out;
}
.yearly-nav li a:active,
.yearly-nav li.active a {
	color: #fff;
	background: #100058;
}
.yearly-nav li a:active {
	text-decoration: underline;
}






.inner-nav {
	display: none;
}







/* ---------------------------------------------------------------------------------------------------- */
/* 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: block;
	background: #fff;
	transition: all 300ms ease-out;
}
.entry-list .thumb {
}
.entry-list .summary {
	box-sizing: border-box;
	padding: 20px;
}
.entry-list .summary > *:nth-child(1) {
	color: #df02a0;
	font-size: 1.125rem;
	line-height: 1.375;
	transition: all 300ms ease-out;
}
.entry-list .summary > *:nth-child(2) {
	margin: 8px 0 0;
	font-size: 1rem;
	line-height: 1.375;
	transition: all 300ms ease-out;
}
.entry-list a:active {
	background: #100058;
}
.entry-list a:active .summary > * {
	color: #fff;
}
.entry-list a:active .summary > *:nth-child(2) {
	text-decoration: underline;
}
.entry-list li > a:active::after {
	filter: brightness(0) invert(1);
}






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

.entry-detail {
	padding: 20px 18px;
	background: #fff;
}
.entry-detail h2 {
	margin: -20px -18px 20px;
}

.entry-detail h3 {
	margin: 0 0 20px;
	padding: 12px;
	font-size: 1rem;
	line-height: 1.375;
	color: #fff;
	background: #df02a0;
}

.entry-detail h4 {
	margin: 0 0 20px;
	padding: 0 0 4px;
	font-size: 1rem;
	line-height: 1.375;
	border-bottom: 1px solid #100058;
}

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

.entry-detail p {
	margin-top: 8px;
	font-size: 0.875rem;
	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 .photo {
	width: calc((100vw - 40px - 38px - 10px) / 1.6);
	margin-bottom: 10px;
}
.entry-detail .column.small-image .photo {
	width: calc((100vw - 40px - 38px - 10px) / 2.1);
	margin-bottom: 10px;
}

.entry-detail .column.left-image .photo {
	float: left;
	margin-right: 10px;
}
.entry-detail .column.right-image .photo {
	float: right;
	margin-left: 10px;
}

.entry-detail .column:has(.photo) .text {
	display: inline;
}


.entry-detail .column.small-image .text {
}

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

.entry-detail .column::after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}



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







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

.table-wrap {
	position: relative;
}
.table-wrap table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

.table-wrap.scroller {
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	overflow: auto;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.table-wrap.scroller > * {
	box-sizing: border-box;
	width: 600px;
}
.table-wrap.scroller.wide > * {
	width: 1000px;
}

.table-wrap thead th {
	background: #f9ccec;
}
.table-wrap th,
.table-wrap td {
	box-sizing: border-box;
	padding: 14px 16px;
	font-size: 0.875rem;
	line-height: 1.6;
	border-color: rgba(16,0,88,0.25);
	border-style: solid;
	border-width: 0;
	text-align: left;
	
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.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 {
}
#top-summary .box {
	background: #fff;
}
#top-summary .box + .box {
	margin-top: 20px;
}

#top-summary .game {
	position: relative;
	padding: 20px;
	background: #f9ccec;
}
#top-summary .date {
	padding-right: 100px;
	font-size: 1.5rem;
}
#top-summary .place {
	margin: 10px 0 0;
	font-size: 0.75rem;
	line-height: 1.375;
}
#top-summary .info {
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: 1rem;
}

#top-summary .data {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 15px;
}
#top-summary .team {
	text-align: center;
}
#top-summary .team .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 70px;
	margin: 0 auto;
}
#top-summary .team .label {
	margin: 20px 0 0;
	font-size: 0.75rem;
	line-height: 1.375;
}

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

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


#top-summary .more {
	margin: 20px 0 0;
}



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

.entry-digest {
	margin: 20px 0 0;
}
.entry-digest ul {
}
.entry-digest li {
	background: #fff;
}
.entry-digest li:nth-child(n + 2) {
	margin-top: 20px;
}
.entry-digest li .summary {
	padding: 20px;
	transition: all 300ms ease-out;
}
.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;
}

.entry-digest a {
	display: block;
	transition: all 300ms ease-out;
}

.entry-digest a:active {
	background: #100058;
}
.entry-digest a:active .date,
.entry-digest a:active .title {
	color: #fff;
}
.entry-digest a:active .title {
	text-decoration: underline;
}

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











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

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

body.team #message {
}
body.team #message .box {
	background: #fff;
}
body.team #message .box + .box {
	margin-top: 20px;
}
body.team #message .column {
	box-sizing: border-box;
	padding: 20px 18px;
}
body.team #message .image {
	width: 160px;
	margin: 0 auto;
}
body.team #message .text {
	margin: 10px 0 0;
}
body.team #message p {
	font-size: 0.875rem;
	line-height: 1.6;
}
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: 86px;
}
body.team #club .table-wrap td,
body.team #history .table-wrap td {
	width: calc(100% - 86px);
}

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

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

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






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

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

.member-list ul {
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0 0;
}
.member-list li {
	width: calc((100% - (13px * 1)) / 2);
	margin-left: 13px;
}
.member-list li:nth-child(2n + 1) {
	margin-left: 0;
}
.member-list li:nth-child(n + 3) {
	margin-top: 13px;
}
.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 .name {
	padding: 10px 12px;
}
#member.member-list .name .ja {
	font-size: 1.0rem;
	color: #df02a0;
	transition: all 300ms ease-out;
}
#member.member-list .name .en {
	margin-top: 8px;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: #000058;
	transition: all 300ms ease-out;
}
#member.member-list .position {
	position: absolute;
	left: 4px;
	top: 9px;
	z-index: 10;
	font-size: 1.25rem;
	transform: rotate(90deg) translateY(-100%);
	transform-origin: left top;
}
#member.member-list li a:active {
	background: #000058;
}
#member.member-list li a:active .name * {
	color: #fff;
}

#staff.member-list li > * {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #000058;
}
#staff.member-list .name {
	padding: 10px 12px;
}
#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.0rem;
	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:active {
	background: #fff;
}
#staff.member-list li a:active .name * {
	color: #000058;
}






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

.profile {
}
.profile .photo {
	margin: 20px 0 0;
}
.profile h2 {
	font-size: 1.875rem;
	line-height: 1.1;
	color: #fff;
}
.profile .text {
	padding: 20px;
	background: #fff;
}
.profile .name {
	font-size: 1.25rem;
}
.profile dl {
	margin: 15px 0 0;
}
.profile dt,
.profile dd {
	font-size: 0.875rem;
	line-height: 1.7;
}
.profile dd + dt {
	margin-top: 15px;
}


.profile .text .nav {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: calc(100% + 40px);
	margin: 20px -20px -20px;
	padding: 12px 10px 12px 15px;
	background: #100058;
}
.profile .text .nav span,
.profile .text .nav a {
	display: block;
	padding-top: 1px;
	color: #fff;
	font-size: 0.875rem;
}
.profile .text .nav a:hover {
	text-decoration: underline;
}

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

#member {
	scroll-margin: 100px;
}






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

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

body.games .table-wrap tbody th {
	width: 140px;
}
body.games .table-wrap td:nth-child(2),
body.games .table-wrap td:nth-child(3) {
	width: calc((100% - 140px - 75px - 75px) / 2);
}

body.games .table-wrap th:nth-child(4),
body.games .table-wrap th:nth-child(5),
body.games .table-wrap td:nth-child(4),
body.games .table-wrap td:nth-child(5) {
	width: 75px;
	text-align: center;
}





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

body.gallery .banner + .entry-list {
	margin-top: 40px;
}
body.gallery .entry-list .summary > *:nth-child(1) {
	font-size: 1rem;
}
body.gallery .entry-list .summary > *:nth-child(2) {
	font-size: 0.875rem;
}

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

.gallery-list {
	background: #fff;
}
.gallery-list ul {
	padding: 20px 18px;
}
.gallery-list li {
}
.gallery-list li:nth-child(n + 2) {
	margin-top: 20px;
}
.gallery-list a {
	display: block;
}

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

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


#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: calc(100vw - 20px);
	padding-bottom: 50px;
}

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


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




#gallery-modal .nav-button {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	z-index: 10;
	padding: 0;
	border: none;
	cursor: pointer;
	pointer-events: auto;
	background: transparent;
}
#gallery-modal #prev-button {
	left: 0;
}
#gallery-modal #next-button {
	left: 47px;
}
#gallery-modal .nav-button img {
	width: auto;
	height: 25px;
}
#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: calc(100vw - 20px);
	height: calc(100dvh - 100px);
}
#gallery-modal .modal-inner > span img {
	position: absolute;
	width: 100%;
	max-width: calc(100vw - 20px);
	max-height: calc(100dvh - 100px);
	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: 42px;
	margin-bottom: -42px;
}
body.top .content-inner {
	padding-top: 62px;
}
body.top #kv.single + #content .content-inner {
	padding-top: 20px;
}

#kv .swiper-slide img {
	aspect-ratio: 3 / 2;
	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);
	}
}