@charset "utf-8";

/* 共通 */
@media screen and (min-width: 768px) {
	.u-sp {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.u-pc {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	#mvv {
		min-width: 1240px;
	}
}

@media screen and (min-width: 768px) {
	#mvv #header #topicPath img {
		vertical-align: text-top;
	}
}

@media screen and (max-width: 767px) {
	#mvv #contents {
    padding: 0;
  }
}

#mvv .mvv img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.u-text-left {
	text-align: left !important;
}

/* 共通 */

/* heading */
.mvvHeadingArea {
  width: auto;
	padding: 0 2.564%;
}
@media screen and (min-width: 768px) {
  .mvvHeadingArea {
    width: 1240px;
    margin: 0 auto;
		padding: 0;
  }
}

.mvvHeading {
  font-size: 22px;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .mvvHeading {
    padding-left: 14px;
    text-align: left;
  }
}


.mvvHeading02Area {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mvvHeading02AreaMission {
	justify-content: center;
}
@media screen and (min-width: 768px) {
	.mvvHeading02AreaMission {
		justify-content: left;
	}
}

.mvvHeading02ImgArea {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.mvvHeading02ImgWrap {
	width: 32px;
	height: 32px;
	opacity: 0;
}
@media screen and (min-width: 768px) {
	.mvvHeading02ImgWrap {
		width: 40px;
		height: 40px;
	}
}

.mvvHeading02ImgWrap.isActive {
	animation: fadeInInsertHeading02Image 1s forwards;
}

.mvvHeading02ImgWrap img {
	width: 100%;
}

.mvvHeading02ImgArea .mvvHeading02Wrap {
	margin-top: 18px;
}
@media screen and (min-width: 768px) {
	.mvvHeading02ImgArea .mvvHeading02Wrap {
		margin-top: 24px;
	}
}

.mvvHeading02Wrap {
	display: inline-block;
	color: #10218B;
}

.mvvHeading02 {
	font-size: 28px;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.mvvHeading02 {
		font-size: 34px;
	}
}

.mvvHeading02Lead {
	font-size: 14px;
  font-weight: bold;
	text-align: center;
}

.mvvHeading02LeadMission {
	text-align: center;
}
@media screen and (min-width: 768px) {
	.mvvHeading02LeadMission {
		text-align: left;
	}
}

.mvvHeading03 {
	margin-top: 32px;
	font-size: 30px;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.mvvHeading03 {
		font-size: 40px;
	}
}

.mvvHeading03Mission {
	text-align: center;
  opacity: 0;
}
@media screen and (min-width: 768px) {
	.mvvHeading03Mission {
		text-align: left;
	}
}

/* KV */
.mvvKvWrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mvvKvWrap {
    min-width: 1240px;
  }
}

@media screen and (min-width: 1500px) {
  .mvvKvWrap {
    overflow: visible;
  }
}

.mvvKv {
  width: 100%;
  margin-top: 16px;
  padding-bottom: 150px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .mvvKv {
    width: 1440px;
    margin-top: 22px;
    padding-bottom: 200px;
    position: relative;
    margin-left: calc((100% - 1440px) / 2);
  }
}

.decoration,
.decorationImage {
  position: absolute;
  overflow: hidden;
}

.decoration img,
.decorationImage img {
  width: 100%;
}

.decoration {
  border-radius: 3px;
}
@media screen and (min-width: 768px) {
  .decoration {
    border-radius: 5px;
  }
}


.decorationImage {
  border-radius: 10px;
}

.decoration1 {
  width: 5.128vw;
  height: 5.128vw;
  background: linear-gradient(45deg, #5ACDDD 0%, #74E9E6 58%, #D7FFC1 100%);
  top: 6.154vw;
  left: 23.077vw;
}
@media screen and (min-width: 768px) {
  .decoration1 {
    width: 40px;
    height: 40px;
    top: 10px;
    left: 28.5%;
  }
}

.decoration2 {
  width: 8.205vw;
  height: 8.205vw;
  background: #E9E9F5;
  top: 34.615vw;
  left: -2.564vw;
}
@media screen and (min-width: 768px) {
  .decoration2 {
    width: 64px;
    height: 64px;
    top: 82px;
    left: 4.2%;
  }
}

.decoration3 {
  width: 3.077vw;
  height: 3.077vw;
  background: #005AB4;
  top: 16.41vw;
  left: 45.385vw;
}
@media screen and (min-width: 768px) {
  .decoration3 {
    width: 24px;
    height: 24px;
    top: 323px;
    left: 17.3%;
  }
}

.decoration4 {
  width: 7.179vw;
  height: 7.179vw;
  background: #E6EFF8;
  top: 19.487vw;
  left: 48.462vw;
}
@media screen and (min-width: 768px) {
  .decoration4 {
    width: 56px;
    height: 56px;
    top: 347px;
    left: 19%;
  }
}

.decoration5 {
  width: 40px;
  height: 40px;
  background: #D3E7BA;
  top: 833px;
  left: 21.4%;
}

.decoration6 {
  width: 24px;
  height: 24px;
  background: #10218B;
  top: 1073px;
  left: 9.4%;
}

.decoration7 {
  width: 5.128vw;
  height: 5.128vw;
  background: #E9E9F5;
  top: 75.385vw;
  left: 21.282vw;
}
@media screen and (min-width: 768px) {
  .decoration7 {
    width: 32px;
    height: 32px;
    top: 1314px;
    left: 15.6%;
  }
}

.decoration8 {
  width: 3.077vw;
  height: 3.077vw;
  background: #005AB4;
  top: 0;
  right: 8.205vw;
}
@media screen and (min-width: 768px) {
  .decoration8 {
    width: 24px;
    height: 24px;
    top: -8px;
    right: 13.9%;
    transform: translateY(-100%);
  }
}

.decoration9 {
  width: 3.2vw;
  height: 3.2vw;
  background: #E9E9F5;
  top: 0;
  right: 8.533vw;
}
@media screen and (min-width: 768px) {
  .decoration9 {
    width: 40px;
    height: 40px;
    top: 250px;
    right: 17.6%;
  }
}

.decoration10 {
  width: 3.077vw;
  height: 3.077vw;
  background: #D3E7BA;
  top: 103.077vw;
  right: 4.103vw;
}
@media screen and (min-width: 768px) {
  .decoration10 {
    width: 24px;
    height: 24px;
    top: 390px;
    right: 8.1%;
  }
}

.decoration11 {
  width: 4.103vw;
  height: 4.103vw;
  background: linear-gradient(45deg, #5ACDDD 0%, #74E9E6 58%, #D7FFC1 100%);
  top: 106.154vw;
  right: 0;
}
@media screen and (min-width: 768px) {
  .decoration11 {
    width: 32px;
    height: 32px;
    top: 417px;
    right: 5.8%;
  }
}

.decoration13 {
  width: 24px;
  height: 24px;
  background: #005AB4;
  top: 860px;
  right: 9.7%;
}

.decoration14 {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #5ACDDD 0%, #74E9E6 58%, #D7FFC1 100%);
  top: 1065px;
  right: 17.6%;
}

.decoration15 {
  width: 24px;
  height: 24px;
  background: #E6EFF8;
  top: 1318px;
  right: 14.9%;
}

.decoration16 {
  width: 32px;
  height: 32px;
  background: #D3E7BA;
  top: 1342px;
  right: 12.6%;
}

.decorationImage1 {
  width: 20.513vw;
  height: 20.513vw;
  top: 11.282vw;
  left: 2.564vw;
}
@media screen and (min-width: 768px) {
  .decorationImage1 {
    width: 200px;
    height: 200px;
    top: 20px;
    left: 11.8%;
  }
}

.firstImage {
  z-index: 5;
}

.decorationImage2 {
  width: 14.359vw;
  height: 14.359vw;
  top: 68.205vw;
  left: -2.564vw;
}
@media screen and (min-width: 768px) {
  .decorationImage2 {
    width: 140px;
    height: 140px;
    top: 220px;
    left: 2.1%;
  }
}

.decorationImage3 {
  width: 18.462vw;
  height: 18.462vw;
  top: 84.615vw;
  left: 7.179vw;
}
@media screen and (min-width: 768px) {
  .decorationImage3 {
    width: 180px;
    height: 180px;
    top: 453px;
    left: 6.94%;
  }
}

.decorationImage4 {
  width: 16.41vw;
  height: 16.41vw;
  top: 0;
  right: 14.872vw;
}
@media screen and (min-width: 768px) {
  .decorationImage4 {
    width: 160px;
    height: 160px;
    right: 16.1%;
  }
}

.decorationImage5 {
  width: 22.564vw;
  height: 22.564vw;
  top: 11.282vw;
  right: -2.564vw;
}
@media screen and (min-width: 768px) {
  .decorationImage5 {
    width: 220px;
    height: 220px;
    top: 120px;
    right: -0.6%;
  }
}

.decorationImage6 {
  width: 14.359vw;
  height: 14.359vw;
  top: 76.41vw;
  right: 0;
}
@media screen and (min-width: 768px) {
  .decorationImage6 {
    width: 140px;
    height: 140px;
    top: 405px;
    right: 14.1%;
  }
}

.decorationImage7 {
  width: 16.41vw;
  height: 16.41vw;
  top: 88.205vw;
  right: 11.282vw;
}
@media screen and (min-width: 768px) {
  .decorationImage7 {
    width: 160px;
    height: 160px;
    top: 500px;
    right: 6.9%;
  }
}

.decorationImage {
  transition: all 0.5s cubic-bezier(0,.5,0.1,1);
  transform: none;
}

.startPositionLeft,
.startPositionRight {
  width: calc(100vw / 3);
  height: calc(100vw / 3);
  top: 11.733vw;
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .startPositionLeft,
  .startPositionRight {
    width: 480px;
    height: 480px;
    top: 28px;
  }
}

.startPositionLeft {
  left: 50%;
  transform: translateX(-50%);
}

.startPositionRight {
  right: 50%;
  transform: translateX(50%);
}

.mvvKvTextArea {
  padding: 40vw 2.564% 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .mvvKvTextArea {
    padding: 102px 0 0;
  }
}

.mvvKvHeading {
  font-size: 5.867vw;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  z-index: 2;
  transition: all 1s;
}
@media screen and (min-width: 768px) {
  .mvvKvHeading {
    font-size: 40px;
  }
}

.isMove {
  opacity: 0 !important;
  transform: translateY(10px);
}

.isMoveIcon {
  opacity: 0 !important;
  transform: translate(-20px, 20px);
}

.mvvKvIcon {
  display: block;
  width: 10.256vw;
  margin: 23.077vw auto 0;
  transition: all 1s;
}

@media screen and (min-width: 768px) {
  .mvvKvIcon {
    width: 56px;
    margin: 60px auto 0;
  }
}

.mvvKvIcon img {
	width: 100%;
  transform: rotate(-15deg);
}

.mvvKvText {
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
  margin-top: 90px;
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .mvvKvText {
		font-size: 24px;
    margin-top: 40px;
  }
}

@media screen and (min-width: 768px) {
  .mvvKvText + .mvvKvText {
    margin-top: 120px;
  }
}

.mvvKvTextFirst {
  opacity: 1;
  transition: all 1s;
}

.mvvKvText.isActive {
	animation: fadeInInsert 1s forwards;
}

/* ミッション */
.missionContent {
  padding: 60px 2.564%;
  background: rgba(0, 90, 180, 0.05);
}
@media screen and (min-width: 768px) {
  .missionContent {
    padding: 80px 0 100px;
  }
}

.missionContentInner {
  max-width: 1240px;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .missionContentInner {
    padding: 0 20px;
  }
}

.missionHeadingWrap {
  position: relative;
  padding-bottom: calc(38.974vw + 16px);
}
@media screen and (min-width: 768px) {
  .missionHeadingWrap {
    padding-bottom: 48px;
  }
}

.missionImage {
  width: 123.077vw;
  position: absolute;
  left: 3.333vw;
  bottom: 0;
}
@media screen and (min-width: 768px) {
  .missionImage {
    width: 767px;
    left: auto;
    right: -292px;
    bottom: 0;
  }
}

.missionImagePlane {
  display: block;
  width: 11.795vw;
  position: absolute;
  left: 19.487vw;
  bottom: 22.051vw;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .missionImagePlane {
    width: 71px;
    left: auto;
    right: 307px;
    bottom: 140px;
  }
}

.missionImagePlaneShadow {
  display: block;
  width: 11.795vw;
  position: absolute;
  left: 21.795vw;
  bottom: 12.821vw;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .missionImagePlaneShadow {
    width: 65px;
    left: auto;
    right: 295px;
    bottom: 80px;
  }
}

.missionBox {
  padding: 24px 16px;
  border-radius: 10px;
  background: #FFF;
}
@media screen and (min-width: 768px) {
  .missionBox {
    padding: 24px 8px 32px;
  }
}
@media screen and (min-width: 768px) {
  .missionBoxInner {
    width: 1176px;
    margin: 0 auto;
  }
}

.missionBox2col {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .missionBox2col {
    gap: 32px;
    grid-template-columns: 1fr 1fr;
  }
}

.missionBoxHeading {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .missionBoxHeading {
    font-size: 24px;
  }
}

.missionBoxText1 {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 16px;
}

.missionBoxText2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 2;
  margin-top: 20px;
}
@media screen and (max-width: 395px) {
  .missionBoxText2 {
    font-size: 4.9vw;
  }
}
@media screen and (min-width: 768px) {
  .missionBoxText2 {
    font-size: 24px;
    margin-top: 16px;
  }
}

.jsFadeInMission.isActive {
  animation: fadeInInsert 1s forwards;
}

.jsFadeInMissionPlane.isActive,
.jsFadeInMissionPlaneShadow.isActive {
  animation: fadeInInsertLeft 0.5s forwards;
}

/* vision */
.visionArea {
	width: 100%;
	background: linear-gradient(to bottom, #CCE6FF 50%, #FFF);
}
@media screen and (min-width: 768px) {
	.visionArea {
		width: 100%;
		right: auto;
		left: auto;
	}
}

.visionAreaBody {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	z-index: 0;
}
.visionAreaBody::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	width: 100%;
	height: 27.44vw;
	background: url(/products/ac/mvv/images/vision-image-1-sp.png) no-repeat bottom center / contain;
	z-index: -1;
}
@media screen and (min-width: 768px) {
	.visionAreaBody::after {
		height: 175px;
		background-image: url(/products/ac/mvv/images/vision-image-1-pc.png);
	}
}

.visionDecoration {
	position: absolute;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% auto;
	z-index: -1;
}

.visionDecoration1 {
	top: 13.59vw;
	left: 0;
	width: 22.05vw;
	height: 17.44vw;
	background-image: url(/products/ac/mvv/images/vision-item-1-sp.svg);
}
@media screen and (min-width: 768px) {
	.visionDecoration1 {
		top: 195px;
		left: -17px;
		width: 158px;
		height: 91px;
		background-image: url(/products/ac/mvv/images/vision-item-1-pc.svg);
	}
}
.visionDecoration2 {
	top: 20.26vw;
	right: 0;
	width: 13.08vw;
	height: 21.79vw;
	background-image: url(/products/ac/mvv/images/vision-item-2-sp.svg);
}
@media screen and (min-width: 768px) {
	.visionDecoration2 {
		top: 160px;
		right: 29px;
		width: 153px;
		height: 115px;
		background-image: url(/products/ac/mvv/images/vision-item-2-pc.svg);
	}
}

.visionDecoration3 {
	top: 364px;
	left: 188px;
	width: 189px;
	height: 103px;
	background-image: url(/products/ac/mvv/images/vision-item-3-svg);
}
.visionDecoration4 {
	top: 436px;
	right: 200px;
	width: 153px;
	height: 88px;
	background-image: url(/products/ac/mvv/images/vision-item-4-svg);
}
.visionDecoration5 {
	bottom: 556px;
	left: 79px;
	width: 182px;
	height: 97px;
	background-image: url(/products/ac/mvv/images/vision-item-5-svg);
}
.visionDecoration6 {
	bottom: 550px;
	right: 106px;
	width: 149px;
	height: 82px;
	background-image: url(/products/ac/mvv/images/vision-item-6-svg);
}

.visionAreaInner {
	max-width: 680px;
	margin: 0 auto;
	padding: 64px 3.97% 105px;
}
@media screen and (min-width: 768px) {
	.visionAreaInner {
		padding: 98px 20px 200px;
	}
}

@media screen and (max-width: 767px) {
	.visionAreaInner .mvvHeading03 {
		margin-top: 24px;
	}
}

.mvvVisionTextGroup {
	margin-top: 60px;
}
@media screen and (min-width: 768px) {
	.mvvVisionTextGroup {
		margin-top: 71px;
	}
}

.mvvVisionText {
	font-size: 18px;
	line-height: 2;
	text-align: center;
	letter-spacing: -0.1px;
}
@media screen and (max-width: 390px) {
	.mvvVisionText {
		font-size: 4.62vw;
	}
}
@media screen and (min-width: 768px) {
	.mvvVisionText {
		font-size: 20px;
		letter-spacing: 0;
	}
}

@media screen and (max-width: 767px) {
  .mvvVisionTextShort {
    display: block;
    padding: 0 3.846vw;
  }
}

.mvvVisionText:not(:first-of-type) {
	margin-top: 48px;
}
@media screen and (min-width: 768px) {
	.mvvVisionText:not(:first-of-type) {
		margin-top: 64px;
	}
}

/* value */
.valueArea {
  width: 100%;
	background: #FFF;
}

.valueAreaInner {
  margin: 0 auto;
	padding: 60px 5.13% 64px;
}
@media screen and (min-width: 768px) {
  .valueAreaInner {
    max-width: 1240px;
		padding: 80px 20px 100px;
	}
}

.mvvValueCardGroup {
	display: grid;
  grid-template-columns: 1fr;
	gap: 56px;
	margin-top: 32px;
}
@media screen and (min-width: 768px) {
	.mvvValueCardGroup {
		grid-template-columns: repeat(3, 360px);
		grid-template-columns: 1fr 1fr 1fr;
		gap: 80px;
	}
}

.mvvValueCardImageArea {
	display: grid;
	align-items: center;
	justify-content: center;
}

.mvvValueCardImageWrap {
	position: relative;
	width: 196px;
	height: 196px;
	background: #F2F7FB;
	border-radius: 10px;
}

.mvvValueCardImageWrap img {
	position: absolute;
	display: block;
	max-width: 100px;
	opacity: 0;
}

.mvvValueCardImageWrap01 img {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
}

.mvvValueCardImageWrap02 img {
	top: 50%;
	left: 18.37%;
	transform: translateY(-50%);
	width: 141px;
}

.mvvValueCardImageWrap03 img {
	bottom: 0;
	left: 0;
	width: 150px;
	border-radius: 0 0 0 10px;
}

.mvvValueCardImageWrap01 img.isActive {
	animation: fadeInInsertCard01 1s forwards;
}

.mvvValueCardImageWrap02 img.isActive {
	animation: fadeInInsertCard02 1s forwards;
}

.mvvValueCardImageWrap03 img.isActive {
	animation: fadeInInsertCard03 1s forwards;
}

.mvvValueCardContentsWrap {
	margin-top: 16px;
}
@media screen and (min-width: 768px) {
	.mvvValueCardContentsWrap {
		margin-top: 24px;
	}
}

.mvvValueCardTitle {
	font-size: 28px;
	text-align: center;
	opacity: 0;
}

.mvvValueCardTitle.isActive {
	animation: fadeInInsert 1s forwards;
}

.mvvValueCardText {
	margin-top: 16px;
	font-size: 16px;
	opacity: 0;
}

.mvvValueCardText.isActive {
	animation: fadeInInsert 1s forwards;
}

/* cssアニメーション */
@keyframes fadeInInsertHeading02Image {
  0% {
		opacity: 0;
		transform: translate(-10px, 10px);
  }

  100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes fadeInInsert {
  0% {
		opacity: 0;
		transform: translateY(10px);
  }

  100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInInsertCard01 {
  0% {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 10px));
  }

  100% {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes fadeInInsertCard02 {
  0% {
		opacity: 0;
		transform: translateY(calc(-50% + 10px));
  }

  100% {
		opacity: 1;
		transform: translateY(-50%);
	}
}

@keyframes fadeInInsertCard03 {
  0% {
		opacity: 1;
		width: 130px;
  }

  100% {
		opacity: 1;
		width: 150px;
	}
}

@keyframes fadeInInsertLeft {
  0% {
		opacity: 0;
		transform: translate(-10px, 10px);
  }

  100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/* アンダーライン */

.mvvUnderLineText {
	position: relative;
	display: inline-block;
	font-weight: bold;
	margin-top: 16px;
}

.mvvUnderLineText::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #5ACDDD, #74E9E6, #D7FFC1);
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .8s;
}
.mvvUnderLineText.isActive::after {
  transform: scale(1, 1);
}

.mvvUnderLineText:not(:first-of-type) {
	margin-top: 12px;
}

.mvvUnderLineTextPC {
	display: contents;
}
@media screen and (min-width: 768px) {
	.mvvUnderLineTextPC {
		display: inline-block;
	}
}

.mvvUnderLineTextPC::after {
	display: none;
}
@media screen and (min-width: 768px) {
	.mvvUnderLineTextPC::after {
		display: block;
	}
}

.mvvUnderLineTextSP {
	display: inline-block;
}
@media screen and (min-width: 768px) {
	.mvvUnderLineTextSP {
		display: contents;
	}
}

.mvvUnderLineTextSP::after {
	display: block;
}
@media screen and (min-width: 768px) {
	.mvvUnderLineTextSP::after {
		display: none;
	}
}