#mainvisual {
	position: relative;
	display: block;
	width: 100%;
	background-image: url(../../img/mv/mv-bg-pc.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	@media (max-width: 768px) {
		aspect-ratio: 375/685;
		padding-block: 0;
		background-image: url(../../img/mv/mv-bg-sp.png);
	}
  
	.mainwrapper {
	  position: relative;
	  padding-top: 70px;
	  padding-bottom: 110px;
		max-width: 1440px;
		margin-inline: auto;
		/* background-image: url(../../img/mv/mv-bg-pc.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover; */
	  @media (max-width: 768px) {
			/* aspect-ratio: 375/685; */
			padding-top: 0;
			padding-bottom: calc(100vw * (100 / 375));
			/* background-image: url(../../img/mv/mv-bg-sp.png); */
	  }
  
	  .mv-container {
			position: relative;
			width: min(calc(100vw * (1240 / 1440)), 1240px);
			margin-inline: auto;
  
		@media (max-width: 768px) {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  padding-top : calc(208 / 375 * 100vw);
		  width: 100%;
		}
  
		.typo {
		  width: min(55.9677419%, 694px);
		  margin-left: max(calc(100vw * (-20 / 1440)), -20px);
		  @media (max-width: 768px) {
			width: 100%;
			margin: 0;
			padding-inline: calc(100vw * (16 / 375));
			.typo__sp2 {
			  margin-top: calc(100vw * (136 / 375));
			}
		  }
		}
	  }
  
	  #floatingCTA.btnScroll {
			.mv-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50px;
				font-size: 14px;
				font-weight: bold;
				border-radius: 5px;

				&.primary {
					background-color: #F47806;
					border: 2px solid #F47806;
					color: #FFFFFF;
					text-align: center;
				}

				&.secondary {
					background-color: #FFFFFF;
					border: 2px solid #F47806;
					color: #F47806;
					text-align: center;
				}

				&:hover {
					background-color: #FF9F47;
					border: 2px solid #FFFFFF;
					color: #FFFFFF;
				}
			}
		}

		.mainvisual-columns {
			--mv-loop-duration: 60s;
			--mv-loop-duration-sp: 60s;
			position: absolute;
			top: 0;
			right: min(calc(100vw * (30 / 1440)), 30px);
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			width: min(calc(100vw * (556 / 1440)), 556px);
			height: 100%;
			pointer-events: none;

			@media (max-width: 768px) {
				left: 0;
				right: 0;
				width: 100%;
				height: calc(100vw * (184 / 375));
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 8px;
		  }

			.mainvisual-column {
				height: 100%;
				overflow: hidden;
				position: relative;
				flex: 1;

				.mainvisual-loop {
					display: flex;
					flex-direction: column;
					gap: min(calc(100vw * (12 / 1440)), 12px);
					will-change: transform;
					animation: mvLoopUp var(--mv-loop-duration) linear infinite;

					@media (max-width: 768px) {
						gap: min(calc(100vw * (12 / 375)), 12px);
					}
				}

				.mainvisual-loop--img {
					display: block;
					width: 100%;
					height: auto;
				}

				&[data-dir="1"] .mainvisual-loop {
					animation-name: mvLoopDown;
				}

				@media (max-width: 768px) {
					.mainvisual-loop {
						animation-duration: var(--mv-loop-duration-sp);
					}
				}
			}
		}
	}
  }

@keyframes mvLoopUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes mvLoopDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

  #mainvisual .video-wrapper {
	--slides-height: 315px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
  }
  @media (width < 769px) {
	#mainvisual .video-wrapper {
	  /* height: 720px; */
	}
  }
  @media (width < 375px) {
	#mainvisual .video-wrapper {
	  /* height: 620px; */
	}
  }
  #mainvisual .video-wrapper video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	z-index: -1;
  }
  
  #mainvisual .mainwrapper #floatingCTA {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 56px;
	gap: 10px;
	max-width: 480px;
	width: 100%;
	transition: 0.6s;
	margin-top: 32px;
  
	@media (max-width: 768px) {
	  padding-inline: calc(100vw * (16 / 375));
	  width: 100%;
	  max-width: none;
	  margin: calc(100vw * (24 / 375)) auto 0;
	  grid-template-rows: auto;
	}
  }
  #mainvisual .mainwrapper #floatingCTA {
		.mv-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
			font-size: 14px;
			font-weight: bold;
			border-radius: 5px;

			&.primary {
				background-color: #F47806;
				border: 2px solid #F47806;
				color: #FFFFFF;
				text-align: center;
			}

			&.secondary {
				background-color: #FFFFFF;
				border: 2px solid #F47806;
				color: #F47806;
				text-align: center;
			}

			&:hover {
				background-color: #FF9F47;
				border: 2px solid #FFFFFF;
				color: #FFFFFF;
			}
		}
  }
  @media (width < 472px) {
	#mainvisual .mainwrapper #floatingCTA .counseling a {
	  padding: 0 10px;
	}
  }
  @media (width <= 375px) {
	#mainvisual .mainwrapper #floatingCTA .counseling a {
	  padding: 0;
	  text-align: center;
	}
  }
  #mainvisual .mainwrapper #floatingCTA .counseling:hover {
	background: var(--color-orange-60);
  }
  #mainvisual .mainwrapper #floatingCTA .contract {
	background: var(--color-white);
  }
  #mainvisual .mainwrapper #floatingCTA .contract:hover {
	background: var(--color-orange-10);
  }
  #mainvisual .mainwrapper #floatingCTA.btnScroll {
	display: none;
  }
  @media (width < 769px) {
	#mainvisual .mainwrapper #floatingCTA.btnScroll {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: min(calc(100vw * (8 / 375)), 8px);
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  z-index: 9999;
	  max-width: none;
	  width: 100%;
	  padding: 10px;
	  background: rgba(0, 0, 0, 0.8);
	}
  }
  #mainvisual .mainwrapper #floatingCTA.btnScroll .button {
	flex: 1;
	height: 100%;
  }
  @media (width < 472px) {
	#mainvisual .mainwrapper #floatingCTA.btnRemove {
	  display: none;
	}
  }
  
  .mainvisual-slider-wrapper {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	background: linear-gradient(270deg, #E8F4FE 0%, #E8F4FE 53.37%, #FEEBFA 100%), #FFF;
	position: relative;
	z-index: 1;
	@media (max-width: 768px) {
	  margin-top: calc(-100vw * (80 / 375));
	  &::before {
		content: '';
		position: absolute;
		top: calc(100vw * (60 / 375));
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		background: linear-gradient(270deg, #E8F4FE 0%, #E8F4FE 53.37%, #FEEBFA 100%), #FFF;
		z-index: -1;
	  }
	}
	.mainvisual-slider {
	  transform: translateY(max(calc(-100vw * (50 / 1440)), -50px));
	  @media (width < 769px) {
			transform: none;
			position: relative;
	  }
	}
	.swiper-slide {
	  width: 384px;
	  aspect-ratio: 96 / 85;
	}
	.project-swiper:not(.swiper-initialized) {
	  .swiper-wrapper {
		width: calc(100% - 160px);
		max-width: 1192px;
		margin-inline: auto;
		display: grid;
		grid-auto-flow: column;
		gap: 20px;
		justify-content: center;
	  }
	  .swiper-navigation {
		display: none;
	  }
	}
	.swiper-navigation__prev,
	.swiper-navigation__next {
	  position: absolute;
	  width: 50px;
	  height: 50px;
	  background: #333 url('/courses/dify/img/mv/arrow.svg') no-repeat center / 40%;
	  border-radius: 50%;
	  top: 0;
	  bottom: 0;
	  margin: auto;
	  z-index: 1;
	  border: 2px solid #fff;
	}
	.swiper-navigation__prev {
	  left: 81px;

	  @media (width < 769px) {
			left: 9px;
	  }
	}
	.swiper-navigation__next {
	  right: 81px;
	  transform: rotate(180deg);

		@media (width < 769px) {
			right: 9px;
	  }
	}
  }
  @media (width < 769px) {
	.swiper-wrapper {
	  .swiper-slide {
		/* width: auto; */
	  }
	}
	.mainvisual-slider-wrapper {
	  .project-swiper:not(.swiper-initialized) {
		.swiper-wrapper {
		  .swiper-slide {
			width: calc(100vw * (300 / 375));
		  }
		}
	  }
	}
  }

  .mainvisual-grid {
	display: grid;
	grid-template-columns: 440px auto;
	gap: 12px;
	align-items: end;
	margin-top: 44px;

		@media (width < 769px) {
			display: none;
		}
  }
  
  .mainvisual-emblem {
	width: 508px;
	/* margin-top: 15px; */
	@media (max-width: 768px) {
	  position: static;
	  bottom: -15px;
	  margin-inline: calc(50% - 50vw);
	  width: 100vw;
	  height: auto;
	  max-width: none;
	  transform: translateY(-15%);
	}
  }
  
  .mainvisual-typograph {
	@media (max-width: 768px) {
	  position: relative;
	  margin-top: calc(100vw * (-180 / 375));
	}
	@media (min-width: 769px) {
	  display: contents;
	}
  }
  
  .mainvisual-note {
	color: #97A7BC;
	font-size: 1rem;
	font-weight: 400;
	width: min(calc(100vw * (742 / 1440)), 742px);
	margin-top: 15px;
	padding-bottom: 14px;
	@media (max-width: 768px) {
	  text-align: left;
	  width: auto;
	  padding-inline: calc(100vw * (20 / 375));
	  color: #97A7BC;
	  margin-top: 0;
	  padding-bottom: 1em;
	  font-size: calc(100vw * (10 / 375));
	}
  }
  
  .min769\:visible {
	display: none;
	@media (min-width: 769px) {
	  display: block;
	}
  }
  
  .max768\:visible {
	display: none;
	@media (max-width: 768px) {
	  display: block;
	}
  }
  
  img[src*='sp_no1_emblem'] {
	position: relative;
	margin-block: calc(100vw * (15 / 375));
	padding-inline: calc(100vw * (16 / 375));
  }
  
  #mainvisual .-notice {
	/* background: linear-gradient(90deg, #f9c0ff 0%, #7fbbff 100%); */
	color: #1A1F4A;
	align-items: flex-start;
	justify-content: center;
	margin-top: max(calc(100vw * (-50 / 1440)), -50px);
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	@media (width < 769px) {
	  flex-direction: column;
	  align-items: center;
	  text-align: center;
	  background: none;
	}
	&::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: linear-gradient(270deg, #E8F4FE 0%, #E8F4FE 53.37%, #FEEBFA 100%);
	  z-index: -1;
	  @media (width < 769px) {
		display: none;
	  }
	}
  
	.kv-carousel-note {
	  color: #1A1F4A;
	  font-size: 12px;
	  max-width: 1192px;
	  width: calc(100% - 160px);
	  margin-inline: auto;
	  padding-top: 20px;
	  @media (width < 769px) {
		position: static;
		text-align: center;
		margin-top: calc(100vw * (15 / 375));
		font-size: calc(100vw * (10 / 375));
		width: 100%;
	  }
	}
  }
  
  #mainvisual .-notice .-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 1.2rem 1rem;
	gap: 1rem;
  }
  
  #mainvisual .-notice .-inner .-start {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
  }
  
  #mainvisual .-notice .-inner .-start .-date {
	line-height: 2rem;
  }
  
  #mainvisual .-notice .-inner .-date #start_MMDD {
	font-family: din-2014;
	font-size: 4rem;
	vertical-align: bottom;
	line-height: 1em;
  }
  
  #mainvisual .-notice .-inner .-date #start_ddd {
	font-size: 1.6rem;
	line-height: 2em;
  }
  
  #mainvisual .-notice .-inner .-end {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
	background-color: #292838;
	color: #fff;
  }
  
  #mainvisual .-notice .-inner .-date #deadline_MMDD {
	font-family: din-2014;
	font-size: 2.2rem;
  }
  
  #mainvisual .-notice .-inner .-date #deadline_ddd {
	font-size: 1.2rem;
  }
  
  #mainvisual .-notice p {
	line-height: 140%;
	font-size: 1.2rem;
	font-weight: 700;
  }
  
  #mainvisual .-end {
	border: solid 1px #fff;
	padding: 0.8rem 1rem;
  }
  
  #mainvisual .-end p {
	font-size: 1.4rem;
  }
  
  #mainvisual p.-attention {
	font-size: 1.2rem;
	font-weight: 400;
  }
  
  @media (width < 769px) {
	#mainvisual .-notice .-inner {
	  max-width: none;
	  flex-wrap: wrap;
	  gap: 1rem;
	  padding: calc(100vw * (14 / 375)) calc(100vw * (10 / 375));
	}
	#mainvisual .-notice .-inner .-start {
	  gap: 0.2rem;
	}
	#mainvisual .-notice .-inner .-end {
	  gap: 0.5rem;
	}
	#mainvisual .-notice p {
	  line-height: normal;
	  font-size: calc(100vw * (10 / 375));
	  font-weight: 700;
	}
	#mainvisual .-end {
	  padding: 12px 10px;
	}
	#mainvisual .-end p {
	  font-size: calc(100vw * (14 / 375));
	  line-height: 1;
	}
	#mainvisual .-notice .-inner .-start .-date {
	  line-height: 1.4;
	}
	#mainvisual .-notice .-inner .-date #start_ddd {
	  font-size: calc(100vw * (12 / 375));
	  line-height: 1.4em;
	}
	#mainvisual .-notice .-inner .-date #start_MMDD {
	  font-size: calc(100vw * (32 / 375));
	}
	#mainvisual .-notice .-inner .-date #deadline_MMDD {
	  font-size: calc(100vw * (16 / 375));
	}
	#mainvisual .-notice .-inner .-date #deadline_ddd {
	  font-size: calc(100vw * (10 / 375));
	}
	#mainvisual p.-attention {
	  width: 100%;
	  font-size: calc(100vw * (10 / 375));
	  font-weight: 400;
	  text-align: center;
	}
	#mainvisual .-attention br {
	  display: none;
	}
  }
  
  #mainvisual .mainwrapper #floatingCTA li:only-child {
	grid-column: 1 / span 2;
  }