body {
	font-family: heisei-kaku-gothic-std, sans-serif;
}

body {
	color: #004f77;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}

.u-desktop {
	display: none;
}

.l-about {
	margin-top: -16px;
	margin-top: -1rem;
}

.p-about {
	overflow: hidden;
	padding-bottom: 44px;
	padding-bottom: 2.75rem;
}

.p-about__slider {
	margin-left: calc(50% - 50vw);
	width: 100vw;
}

.p-about__slider picture {
	width: 323px;
	width: 20.1875rem;
}

.p-about__wrap {
	gap: 20px;
	gap: 1.25rem;
	display: grid;
	margin-top: -26px;
	margin-top: -3rem;
}

.p-about__lead {
	letter-spacing: 0.12em;
	line-height: 1.5833333333;
}

.p-about__text {
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 2.3076923077;
	margin-top: 25px;
	margin-top: 1.5625rem;
}

.p-about__text span {
	background-color: #ffff00;
	font-size: 22px;
	font-size: 1.375rem;
	line-height: 1.6363636364;
}

.p-about__facility {
	-webkit-box-ordinal-group: 0;
	-ms-flex-order: -1;
	order: -1;
	position: relative;
}

.p-about__btn {
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-duration: 6s;
	animation-duration: 6s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: spinner;
	animation-name: spinner;
	-webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	bottom: -2rem;
	position: absolute;
	right: 15px;
	right: -0.9375rem;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	width: 105px;
	width: 6.5625rem;
}

.p-about__lists {
	gap: 10px;
	gap: 0.625rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 14px;
	margin-top: 0.875rem;
}

.p-about__list p {
	font-size: 12px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-top: 10px;
	margin-top: 0.625rem;
	text-align: center;
}

.p-about__youtube {
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.p-about__modal {
	left: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 800px;
	width: 50rem;
	max-width: 100%;
	z-index: 1;
}

.p-about__modal iframe {
	-o-object-fit: contain;
	aspect-ratio: 560/315;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.p-about__bg {
	background: black;
	height: 100%;
	opacity: 0.8;
	position: absolute;
	width: 100%;
}

@media screen and (min-width: 768px) {

.u-desktop {
	display: block;
}

.u-mobile {
	display: none;
}

.l-about {
	margin-top: -1.25rem;
}

.p-about {
	padding-bottom: 5.9375rem;
}

.p-about__slider picture {
	width: 53rem;
}

.p-about__wrap {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	grid-template-columns: 1fr 52.5rem;
    margin-top: -1.625rem;
}

.p-about__content {
	padding-left: 5.75rem;
}

.p-about__lead {
	font-size: max(0.875rem, 12px);
	line-height: 1.8571428571;
}

.p-about__text {
	font-size: 1.125rem;
}

.p-about__text span {
	font-size: 1.875rem;
}

.p-about__facility {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}

.p-about__btn {
	bottom: 1.625rem;
	right: -4.25rem;
	width: 12.5rem;
}

.p-about__lists {
	gap: 2.5rem;
	grid-template-columns: repeat(6, 1fr);
	margin-top: 3.375rem;
}

.p-about__list p {
	font-size: max(1rem,14px);
	margin-top: 1rem;
}

}

@-webkit-keyframes spinner {

0% {
	-webkit-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

10% {
	-webkit-transform: rotate(15deg);
	transform: rotate(15deg);
}

20% {
	-webkit-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

50% {
	-webkit-transform: rotate(390deg);
	transform: rotate(390deg);
}

65% {
	-webkit-transform: rotate(330deg);
	transform: rotate(330deg);
}

80% {
	-webkit-transform: rotate(375deg);
	transform: rotate(375deg);
}

to {
	-webkit-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

}

@keyframes spinner {

0% {
	-webkit-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

10% {
	-webkit-transform: rotate(15deg);
	transform: rotate(15deg);
}

20% {
	-webkit-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

50% {
	-webkit-transform: rotate(390deg);
	transform: rotate(390deg);
}

65% {
	-webkit-transform: rotate(330deg);
	transform: rotate(330deg);
}

80% {
	-webkit-transform: rotate(375deg);
	transform: rotate(375deg);
}

to {
	-webkit-transform: rotate(-15deg);
	transform: rotate(-15deg);
}

}


.p-about__youtubedisplay{
	margin-top: 3rem;
}
.p-about__youtubedisplay__item{
	width: 100%;
}
@media screen and (min-width: 768px) {
	.p-about__youtubedisplay{
		display: flex;
		gap: 2rem;
	}
	.p-about__youtubedisplay__item{
		width: 50%;
	}
}