@charset "UTF-8";
/* CSS Document */

body div.contents{
	/* word-break: auto-phrase; */
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-spacing-trim: trim-start;
}

/* 終了告知文 */
.Post {
	font-size: 22px;
	font-weight: 600;
	color: #c00;
	text-align: center;
}

/* H1 */
#PageName {
	width: 1024px;
	margin: 10px auto;
	font-weight: bold;
}

.contents {

	& a {
		transition: opacity 0.3s ease;

		&:hover {
			opacity: 0.7;
		}
	}
}

/* バスのアニメーション */
@keyframes bus-run {
	0% {
		right: -130px;
		translate: 0 0;
	}

	5%,
	15%,
	25%,
	35%,
	45%,
	55%,
	65%,
	75%,
	85%,
	95% {
		translate: 0 -2px;
	}

	10%,
	20%,
	30%,
	40%,
	50%,
	60%,
	70%,
	80%,
	90% {
		translate: 0 0;
	}

	100% {
		right: 100%;
		translate: 0 0;
	}
}

/* スクロールアニメーション */
@keyframes infinity-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

/* mv */
.mv {
	position: relative;
	background-image: url(/attending/t/osa-d/bus/images/bg_mv.png);
	background-repeat: repeat;
	background-size: contain;
	background-position: center top;
	padding-block-end: 90px;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		bottom: 10px;
		right: 0px;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/illudt_bus.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 130px;
		height: 53px;
		animation: bus-run 20s linear infinite;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/line.svg);
		background-repeat: repeat-x;
		background-size: 1300px 10px;
		background-position: center;
		width: 100%;
		height: 10px;
	}

	& .belt {
		border-bottom: solid 2px #000;
		background-image: url(/attending/t/osa-d/bus/images/belt.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100%;
		height: 75px;

		& img {
			position: relative;
			top: 7px;
			left: 50%;
			translate: -50% 0;
			width: 863px;
			height: 79px;
		}
	}

	& h1 {
		width: 1300px;
		height: 632px;
		margin-inline: auto;
	}

	& nav {

		border-radius: 100vmax;
		border: 2px solid #000;
		background: #FFF;
		width: 900px;
		margin-inline: auto;
		margin-block-start: 20px;
		padding: 28px 80px;

		& ul {

			display: grid;
			grid-template-columns: repeat(3, auto);
			gap: 64px;

			& li {

				a {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10px;
					font-size: 18px;
					font-weight: 800;
					line-height: 130%;
					letter-spacing: 1.44px;
					text-align: center;

					&::after {
						content: '';
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/arrow_anc.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 11px;
						height: 6px;
					}
				}
			}
		}
	}
}

/* sec1 */
.sec1 {
	position: relative;
	background-color: #F5FFE8;
	overflow: hidden;
	z-index: 1;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/bg_sec1.png);
		background-repeat: repeat;
		background-size: calc(328px * 0.77), calc(300px * 0.77);
		background-position: center top;
		width: 100%;
		height: 100%;
		opacity: 0.08;
		z-index: -1;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/line.svg);
		background-repeat: repeat-x;
		background-size: 1300px 10px;
		background-position: center;
		width: 100%;
		height: 10px;
	}

	& .sec_inner {
		position: relative;
		padding-block: 126px 120px;

		&::before {
			content: '';
			position: absolute;
			bottom: 10px;
			right: 0px;
			display: block;
			background-image: url(/attending/t/osa-d/bus/images/illudt_bus.svg);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			width: 130px;
			height: 53px;
			animation: bus-run 20s linear infinite;
		}

		& hgroup {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-block-end: 80px;
			z-index: 5;

			&::before {
				content: '';
				position: absolute;
				top: -66px;
				left: 50%;
				translate: -50% 0;
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: #27C965;
				background-image: url(/attending/t/osa-d/bus/images/illudt_flag.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 22px 25px;
				z-index: 1;
			}

			& h2 {
				font-size: 45px;
				font-weight: 900;
				color: #0A0A0A;
				line-height: 120%;
				letter-spacing: 2.25px;
			}
		}

		& .charm_container {
			position: relative;
			width: 1300px;
			margin-inline: auto;
			z-index: 5;

			& .block_charm1 {
				display: grid;
				grid-template-columns: 400px auto;
				gap: 23px;
				width: 1024px;
				margin-inline: auto;

				& .text {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: -45px;
						right: -35px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm1_sticky.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 245px;
						height: 107px;
						z-index: 1;
					}

					&::after {
						content: '';
						position: absolute;
						bottom: -85px;
						right: -5px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm1_illust1.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 328px;
						height: 110px;
						z-index: 1;
					}
				}
			}

			& .block_charm2 {
				display: grid;
				grid-template-columns: auto 594px;
				gap: 23px;
				width: 1162px;
				margin-inline: auto 0;
				margin-block-start: 110px;

				& .text {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: -80px;
						left: -20px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm2_illust1.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 129px;
						height: 145px;
						z-index: 1;
					}
				}

				& .image {
					margin-block-start: 24px;

					& img {
						border-radius: 24px 0 0 24px;
					}
				}
			}

			& .block_charm3 {
				display: grid;
				grid-template-columns: 594px auto;
				gap: 23px;
				width: 1162px;
				margin-inline: 0 auto;
				margin-block-start: 110px;

				& .text {
					position: relative;
					margin-block-start: 32px;

					&::before {
						content: '';
						position: absolute;
						top: -100px;
						right: -45px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm3_illust1.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 196px;
						height: 158px;
						z-index: 1;
					}

					&::after {
						content: '';
						position: absolute;
						bottom: 83px;
						right: -15px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm3_sticky.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 257px;
						height: 57px;
						z-index: 1;
					}
				}

				& .image {

					& img {
						border-radius: 0 24px 24px 0;
					}
				}
			}

			& .block_charm4 {
				display: grid;
				grid-template-columns: auto 594px;
				gap: 23px;
				width: 1162px;
				margin-inline: auto 0;
				margin-block-start: 110px;

				& .text {
					position: relative;
					margin-block-start: 32px;

					&::before {
						content: '';
						position: absolute;
						top: -75px;
						left: -40px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm4_illust1.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 140px;
						height: 142px;
						z-index: 1;
					}

					&::after {
						content: '';
						position: absolute;
						bottom: -10px;
						right: 15px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm4_illust2.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 427px;
						height: 199px;
						z-index: 1;
					}
				}

				& .image {

					& img {
						border-radius: 24px 0 0 24px;
					}
				}
			}

			& .block_charm5 {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 23px;
				width: 1300px;
				margin-inline: auto;
				margin-block-start: 110px;

				& .text {
					position: relative;
					width: 800px;
					height: auto;

					&::before {
						content: '';
						position: absolute;
						top: -45px;
						left: -75px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm5_sticky.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 246px;
						height: 114px;
						z-index: 1;
					}

					&::after {
						content: '';
						position: absolute;
						top: -75px;
						right: -85px;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/charm5_illust1.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 196px;
						height: 175px;
						z-index: 1;
					}
				}
			}
		}
	}
}

/* sec2 */
.sec2 {
	position: relative;
	background-color: #FFF5F0;
	overflow: hidden;
	z-index: 1;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/bg_sec2.png);
		background-repeat: repeat;
		background-size: calc(300px * 0.8), calc(297px * 0.8);
		background-position: center top;
		width: 100%;
		height: 100%;
		opacity: 0.05;
		z-index: -1;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/line.svg);
		background-repeat: repeat-x;
		background-size: 1300px 10px;
		background-position: center;
		width: 100%;
		height: 10px;
	}

	& .sec_inner {
		padding-block: 126px 120px;

		&::before {
			content: '';
			position: absolute;
			bottom: 10px;
			right: 0px;
			display: block;
			background-image: url(/attending/t/osa-d/bus/images/illudt_bus.svg);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			width: 130px;
			height: 53px;
			animation: bus-run 20s linear infinite;
		}

		& hgroup {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-block-end: 48px;

			&::before {
				content: '';
				position: absolute;
				top: -66px;
				left: 50%;
				translate: -50% 0;
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: #FF4F52;
				background-image: url(/attending/t/osa-d/bus/images/illudt_flag.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 22px 25px;
				z-index: 1;
			}

			& span {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				color: #FF4F52;
				font-size: 22px;
				font-weight: 700;
				line-height: 120%;
				letter-spacing: 1.1px;
				margin-block-end: 6px;

				&::before {
					content: '';
					position: relative;
					top: 3px;
					display: block;
					background-color: #FF4F52;
					width: 2px;
					height: 2rem;
					rotate: -20deg;
				}

				&::after {
					content: '';
					position: relative;
					top: 3px;
					display: block;
					background-color: #FF4F52;
					width: 2px;
					height: 2rem;
					rotate: 20deg;
				}
			}

			& h2 {
				font-size: 45px;
				font-weight: 900;
				color: #0A0A0A;
				line-height: 120%;
				letter-spacing: 2.25px;
			}

			& .ichioshi_title {
				position: relative;
				background-color: #FF4A55;
				border-top: 2px solid #333;
				border-bottom: 2px solid #333;
				width: 100%;
				margin-block-start: 40px;
				z-index: 1;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					background-image: url(/attending/t/osa-d/bus/images/ichioshi_bg.png);
					background-repeat: repeat;
					background-size: calc(300px * 0.07), calc(300px * 0.07);
					background-position: center top;
					width: 100%;
					height: 100%;
					opacity: 0.12;
					z-index: -1;
				}

				& .ichioshi_title-inner {
					position: relative;
					padding-block: 4px;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/ichioshi_deco1.svg);
						background-repeat: repeat;
						background-size: cover;
						background-position: center top;
						width: 109px;
						height: 100%;
						z-index: -1;
					}

					&::after {
						content: '';
						position: absolute;
						top: 0;
						right: 0;
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/ichioshi_deco1.svg);
						background-repeat: repeat;
						background-size: cover;
						background-position: center top;
						width: 109px;
						height: 100%;
						rotate: 180deg;
						z-index: -1;
					}

					& h3 {
						width: 800px;
						height: 275px;
						margin-inline: auto;
					}
				}
			}

			/* & h3 {
				width: 1300px;
				height: 283px;
			} */
		}

		& .ichioshi_kv {
			position: relative;
			width: 900px;
			height: auto;
			margin-inline: auto;

			&::before {
				content: '';
				position: absolute;
				top: -48px;
				left: -60px;
				display: block;
				background-image: url(/attending/t/osa-d/bus/images/ichioshi_deco2.svg);
				background-repeat: repeat;
				background-size: cover;
				background-position: center top;
				width: 200px;
				height: 109px;
			}

			&::after {
				content: '';
				position: absolute;
				top: -48px;
				right: -60px;
				display: block;
				background-image: url(/attending/t/osa-d/bus/images/ichioshi_deco2.svg);
				background-repeat: repeat;
				background-size: cover;
				background-position: center top;
				width: 200px;
				height: 109px;
				scale: -1 1;
			}

			& img {
				border: 5px solid #FFF;
				border-radius: 8px;
				width: 900px;
				height: 500px;
				overflow: hidden;
			}

			& figcaption {
				position: relative;
				border-radius: 24px;
				border: 2px solid #333;
				background: #FFF;
				font-family: "Noto Sans JP";
				font-size: 18px;
				font-weight: 700;
				line-height: 150%;
				letter-spacing: 0.9px;
				margin-block-start: 40px;
				padding: 32px 48px;
				z-index: 1;

				&::before {
					content: '';
					position: absolute;
					top: -12.5px;
					left: 50%;
					translate: -50% 0;
					display: block;
					width: 22px;
					height: 22px;
					background-color: #fff;
					border-left: 2px solid #333;
					border-top: 2px solid #333;
					position: absolute;
					rotate: 45deg;

				}

				& em {
					color: #F12626;
					font-size: 20px;
					font-style: normal;
					letter-spacing: 1px;
				}
			}
		}

		& .ichioshi_card {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 32px;
			margin-block-start: 64px;

			& .ichioshi_card-content {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 24px;
				border-radius: 24px;
				border: 2px solid #333;
				background: #FFF;
				box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.15);
				padding: 32px 40px;

				&::before {
					content: '';
					position: absolute;
					top: -23px;
					right: 33px;
					display: block;
					background-image: url(/attending/t/osa-d/bus/images/illust_clip.svg);
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					width: 34px;
					height: 53px;
				}

				& h3 {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 5px;
					color: #FF3D3D;
					font-size: 26px;
					font-weight: 800;
					line-height: 150%;
					letter-spacing: 1.3px;

					&::after {
						content: '';
						display: block;
						background-image: url(/attending/t/osa-d/bus/images/wave.svg);
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						width: 108px;
						height: 4px;
					}
				}

				& p {
					font-family: "Noto Sans JP";
					font-size: 18px;
					font-weight: 700;
					line-height: 150%;
					letter-spacing: 0.9px;
				}
			}
		}

		& .ichioshi_price {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 40px;
			margin-block-start: 64px;

			& .btn {
				width: 500px;
				height: 91px;
			}
		}

		& .loop_animation {
			display: flex;
			overflow: hidden;
			width: 100%;
			margin-block-start: 40px;

			& .loop_animation-list {
				display: flex;
				align-items: center;
				gap: 24px;
				list-style: none;
				margin: 0;
				padding: 0;
				animation: infinity-scroll 60s infinite linear 0.5s both;


				& .scroll-infinity__item {

					& img {
						display: block;
						object-fit: cover;
					}

					&:nth-child(odd) {
						flex: 0 0 200px;
						width: 200px;

						img {
							width: 200px;
							height: 200px;
						}
					}

					&:nth-child(even) {
						flex: 0 0 160px;
						width: 160px;

						img {
							width: 160px;
							height: 160px;
						}
					}

					& span {
						display: block;
						font-family: "Noto Sans JP";
						font-size: 17px;
						font-weight: 700;
						line-height: 150%;
						letter-spacing: 0.85px;
						text-align: center;
						margin-block-start: 8px;
					}

					&:last-child {
						margin-right: 24px;
					}
				}
			}
		}

		.note {
			text-align: right;
			font-family: "Noto Sans JP";
			font-size: 14px;
			font-weight: 400;
			line-height: 150%;
			letter-spacing: 0.7px;
			margin-block-start: 12px;
		}
	}
}

/* sec3 */
.sec3 {
	position: relative;
	background-color: #FFFDE3;
	overflow: hidden;
	z-index: 1;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/bg_sec3.png);
		background-repeat: repeat;
		background-size: calc(300px * 0.4), calc(300px * 0.4);
		background-position: center top;
		width: 100%;
		height: 100%;
		opacity: 0.05;
		z-index: -1;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/line.svg);
		background-repeat: repeat-x;
		background-size: 1300px 10px;
		background-position: center;
		width: 100%;
		height: 10px;
	}

	& .sec_inner {
		padding-block: 126px 120px;

		&::before {
			content: '';
			position: absolute;
			bottom: 10px;
			right: 0px;
			display: block;
			background-image: url(/attending/t/osa-d/bus/images/illudt_bus.svg);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			width: 130px;
			height: 53px;
			animation: bus-run 20s linear infinite;
		}

		& hgroup {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-block-end: 60px;

			&::before {
				content: '';
				position: absolute;
				top: -66px;
				left: 50%;
				translate: -50% 0;
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: #FF8826;
				background-image: url(/attending/t/osa-d/bus/images/illudt_flag.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 22px 25px;
				z-index: 1;
			}

			& h2 {
				font-size: 45px;
				font-weight: 900;
				color: #0A0A0A;
				line-height: 120%;
				letter-spacing: 2.25px;
			}
		}

		& .voice_card {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(auto, max-content);
			gap: 32px;
			margin-block-start: 64px;

			& .voice_card-content {
				border-radius: 24px;
				border: 2px solid #333;
				background: #FFF;
				box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.15);
				padding: 18px 32px 24px 32px;
				font-family: "Noto Sans JP";

				& .voice_card-content-main {
					display: grid;
					grid-template-columns: 80px 1fr;
					align-items: center;
					gap: 16px;

					& img {
						width: 100%;
						height: auto;
					}

					& .voice_card-content-text {
						display: flex;
						flex-direction: column;

						& .date {
							color: #ADA9A4;
							text-align: right;
							font-size: 15px;
							font-weight: 700;
							line-height: 150%;
							letter-spacing: 0.75px;
						}

						& .title {
							font-size: 16px;
							font-weight: 700;
							line-height: 150%;
							letter-spacing: 0.8px;
							margin-block-start: 8px;
						}

						& .price {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							gap: 8px;
							color: #F12626;
							font-size: 16px;
							font-weight: 700;
							line-height: 150%;
							letter-spacing: 0.8px;
							margin-block-start: 4px;

							& span {
								border-radius: 100vmax;
								background: #555;
								color: #FFF;
								font-size: 14px;
								font-weight: 700;
								line-height: 150%;
								letter-spacing: 0.7px;
								padding-inline: 10px;
							}
						}
					}
				}

				& .voice {
					position: relative;
					font-size: 18px;
					font-weight: 700;
					line-height: 150%;
					letter-spacing: 0.9px;
					margin-block-start: 16px;
					padding-block-start: 16px;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						display: block;
						background-image: radial-gradient(circle 1.5px at center, #555 100%, transparent 100%);
						background-size: 10px 3px;
						background-repeat: repeat-x;
						background-position: top center;
						width: 100%;
						height: 4px;
					}
				}
			}
		}
	}
}

/* sec4 */
.sec4 {
	position: relative;
	background-color: #EAFAFF;
	padding-block: 100px;
	z-index: 1;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		background-image: url(/attending/t/osa-d/bus/images/bg_sec4.png);
		background-repeat: repeat;
		background-size: calc(300px * 0.12), calc(297px * 0.12);
		background-position: center top;
		width: 100%;
		height: 100%;
		opacity: 0.04;
		z-index: -1;
	}
}

/* btn_other */
.block_other {
	width: 900px;
	margin-inline: auto;

	& .btn {
		display: block;
		width: 900px;
		height: 157px;
		margin-inline: auto;
	}
}

.mv .block_other {
	margin-block: 56px;
}

/* fixed_btn */
.fixed_btn {
	position: fixed;
	bottom: 100px;
	right: 0;
	z-index: 100;

	& a {
		display: block;
		width: 120px;
		height: 162px;
	}
}