@charset "utf-8";

:where(p),
:where(li),
:where(dt),
:where(dd) {
	line-break: strict;
	-webkit-hyphens: auto;
	hyphens: auto;
	hanging-punctuation: last allow-end;
}

.p-visual {
	position: relative;
	margin: 0 -24px;
	padding-bottom: 104px;
}
.p-visual .visual_image img {
	width: 100%;
	min-height: 240px;
	object-fit: cover;
}
.p-visual .visual_title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 16px 24px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60%;
	min-width: 240px;
	height: 160px;
	padding: 0 64px;
	font-size: 22px;
	background: #29b23e url(../img/bg_title.png) center / 125px 125px;
}
.p-visual .visual_title .main {
	font-size: 52px;
	line-height: .8;
}
.p-visual .visual_title .sub {
	position: relative;
	padding: .3em 0;
	font-size: 22px;
	font-family: "Midashi Go MB31", sans-serif;
	letter-spacing: .2em;
}
.p-visual .visual_title .sub::before,
.p-visual .visual_title .sub::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
}
.p-visual .visual_title .sub::before { top: 0; }
.p-visual .visual_title .sub::after { bottom: 0; }
.p-visual .visual_title .deco {
	position: absolute;
	background: center / cover no-repeat;
	mix-blend-mode: multiply;
}
@media screen and (min-width: 768px) {
	.p-visual {
		padding-bottom: 144px;
	}
	.p-visual .visual_title {
		max-width: 640px;
		height: 250px;
	}
}
@media screen and (min-width: 1200px) {
	.p-visual .visual_title {
		/*left: calc(50% - 600px);*/
	}
}
@media screen and (max-width: 767px) {
	.p-visual .visual_title {
		gap: 8px 16px;
		padding: 0 24px;
	}
	.p-visual .visual_title .main {
		font-size: 38px;
	}
	.p-visual .visual_title .main img {
		width: auto;
		height: 32px;
	}
	.p-workstyle .visual_title .main img {
		height: 38px;
	}
	.p-visual .visual_title .sub {
		font-size: 13px;
	}
}
@media screen and (max-width: 479px) {
	.p-visual {
		margin: 0 -16px;
	}
	.p-visual .visual_title {
		padding: 0 24px;
	}
}


/**
 * SYSTEM JOCKEYS
 * ---------------------------------------- */
.jockeys_container {
	position: relative;
	margin-top: 24px;
}
.jockeys_container::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 120px;
	right: 0;
	bottom: 80px;
	left: 0;
	border-radius: 240px;
	background: #27b53a url(../img/bg_title.png) center top / 125px 125px;
}
.jockeys_table:not(.flickity-enabled) {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	column-gap: 8px;
	justify-content: center;
	direction: rtl;
	z-index: 0;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	.jockeys_table {
		max-width: 744px;
	}
}
@media screen and (max-width: 767px) {
	.jockeys_container {
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}
	.jockeys_wrap {
		/*overflow: auto;
		-webkit-overflow-scrolling: touch;*/
		padding: 0 64px 24px;
	}
	.jockeys_container::before {
		top: 96px;
		right: 24px;
		left: 24px;
		border-radius: 120px;
	}
	.jockeys_table:not(.flickity-enabled) {
		grid-template-columns: repeat(10, 56px);
		min-width: 640px;
	}
	.jockeys_table.flickity-enabled .jockey {
		width: 56px;
		margin-right: 8px;
	}
}
@media screen and (max-width: 767px) {
	.jockeys_container::before {
		right: 16px;
		left: 16px;
	}
}
.jockey {
	position: relative;
	padding-top: 240px;
}
.jockey .photo {
	position: absolute;
	top: 0;
	left: calc(50% - 39px);
	width: 78px;
}
.jockey .photo img {
	width: auto;
	height: 190px;
}
.jockey.-yanaka .photo img { margin-left: -8px; }
.jockey.-yanagawa .photo img { margin-right: -10px; }
.jockey.-higashi .photo img { margin-right: -4px; }
.jockey.-morita .photo img { margin-right: -14px; }
.jockey .photo .caption {
	position: relative;
	margin-top: 8px;
	color: white;
	font-size: 12px;
	font-family: "Niconne", cursive;
	white-space: nowrap;
}
.jockey .photo .caption::before,
.jockey .photo .caption::after {
	content: "";
	position: absolute;
	right: 1.4em;
	left: 1.4em;
	border-top: 1px solid currentcolor;
}
.jockey .photo .caption::before {
	top: 0;
}
.jockey .photo .caption::after {
	bottom: 0;
}
.jockey .plate {
	display: grid;
	grid-template-rows: 48px 80px 154px 168px;
	text-align: left;
	direction: ltr;
	background: white;
	box-shadow: 4px 4px 8px rgba(0,0,0,.1);
}
.jockey .num {
	display: grid;
	place-items: center;
	width: 100%;
}
.jockey:nth-child(1) .num {
	background: linear-gradient(to left, #ACACB7, #CACAD0);
}
.jockey:nth-child(2) .num {
	background: linear-gradient(to left, #7E757B, #888085);
}
.jockey:nth-child(3) .num {
	background: linear-gradient(to left, #922100, #B72100);
}
.jockey:nth-child(4) .num {
	background: linear-gradient(to left, #3554BD, #416AFF);
}
.jockey:nth-child(5) .num {
	background: linear-gradient(to left, #D2A03D, #FFD200);
}
.jockey:nth-child(6) .num {
	background: linear-gradient(to left, #409411, #72B04F);
}
.jockey:nth-child(7) .num {
	background: linear-gradient(to left, #E26B00, #FF6B00);
}
.jockey:nth-child(8) .num {
	background: linear-gradient(to left, #DA8400, #DD8F17);
}
.jockey:nth-child(9) .num {
	background: linear-gradient(to left, #DD5B90, #E376A2);
}
.jockey:nth-child(10) .num {
	background: linear-gradient(to left, #CB64B8, #C970BD);
}
.jockey .name,
.jockey .data,
.jockey .title {
	justify-self: center;
	font-feature-settings: "pkna";
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap;
}
.jockey .upright {
	text-orientation: upright;
}
.jockey .name {
	margin-top: 12px;
	font-size: 16px;
	font-family: "Midashi Go MB31", sans-serif;
	font-weight: 700;
}
.jockey .data {
	margin-top: 8px;
	padding: .4em 0;
	border-top: 1px solid #7b7b7b;
	border-bottom: 1px solid #7b7b7b;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0;
}
.jockey .data li {
	padding-inline-start: 1em;
	text-indent: -1em;
}
.jockey .data li::before {
	content: "●";
	display: inline-block;
	text-indent: 0;
	transform: scale(.5);
}
.jockey .title {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.2;
	font-family: "Midashi Go MB31", sans-serif;
}
@media (hover: hover) {
	.jockey .plate {
		transition: transform .6s cubic-bezier(.3,1,.7,1), box-shadow .6s cubic-bezier(.3,1,.7,1);
	}
	.jockey:hover .plate {
		transform: translateY(-4px);
		box-shadow: 4px 8px 12px rgba(0,0,0,.1);
		transition-duration: .2s;
	}
}
@media screen and (max-width: 767px) {
	.jockey .plate {
		grid-template-rows: 48px 84px 148px;
	}
	.jockeys_table .jockey .data {
		padding-top: 1em;
		border-bottom: 0;
	}
	.jockeys_table .jockey .data .div,
	.jockeys_table .jockey .title {
		display: none;
	}
}

/* for Safari で縦書き in td */
.ticket_data td { display: inline-block; width: 5.1em; }
.ticket_data .name td { height: 6.9em; }
.ticket_data .department td { height: 10.9em; }
.ticket_data ul {
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0;
}
.ticket_data li {
	padding-inline-start: 1em;
	text-indent: -1em;
	text-align: left;
}
.ticket_data li .upright {
	text-orientation: upright;
}
.ticket_data li::before {
	content: "●";
	display: inline-block;
	text-indent: 0;
	transform: scale(.5);
}