[v-cloak] {
  display: none;
}

	.flow-step {
		position: relative;
    margin-bottom: 80px;

    @media screen and (max-width: 767px) {
      margin-bottom: 60px;
		}
	}

	.flow-step__box {
		padding: 35px;
		background: #fff;
		position: relative;

		@media screen and (max-width: 767px) {
			padding: 20px 15px;
		}

    &::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -40px;
			width: 100%;
			height: 40px;
			background: #fff;
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			z-index: 1;
		}
	}

  .type-arrow{
    &::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -40px;
			width: 100%;
			height: 40px;
			background: #fff;
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			z-index: 1;
		}
  }

	.flow-step__box .flow-card-list {
		margin-top: 20px!important;

		@media screen and (max-width: 767px) {
			margin-top: 20px!important;
		}
	}

	a.page-vbtnWrap {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		height: 100%;
		box-sizing: border-box;
	}

	.page-vbtn {
		align-items: center;
		background: #fff;
		color: #555555;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		position: relative;
		-webkit-transition: .3s ease;
		transition: .3s ease;
		z-index: 2;
		height: 100%;
		box-sizing: border-box;
		padding: 30px 10px;

		@media screen and (max-width: 767px) {
			padding: 30px 20px;
		}

		&:hover {
			@media screen and (min-width: 768px) {
				opacity: 0.6;
			}
		}
	}

	.page-vbtn__text {
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		display: flex;
		font-weight: 700;
		height: 1em;
		justify-content: center;
		line-height: 1.5;
		margin-top: 0.75em;
		text-align: center;

		@media screen and (max-width: 767px) {
			font-size: 13px;
			height: 2em;
		}

		@media screen and (min-width: 768px) {
			font-size: 16px;
		}
	}

	.page-vbtn__icon {
		padding-left: 0;
		height: 50px;
		width: 50px;

		@media screen and (max-width: 767px) {
			padding-left: 0;
			height: 50px;
			width: 50px;
		}

		@media screen and (min-width: 768px) {
			width: 60px;
			height: 60px;
		}
	}

	.flow-card-list .flow-card.active {
		& .page-vbtn,
		& .page-vbtn_2 {
			color: #e2007e;
			border: 1px solid #e2007e;
		}
	}

	.txt_normal {
		font-size: 16px;

		@media screen and (max-width: 767px) {
			font-size: 14px;
		}
	}

	a.page-vbtnWrap_2 {
		display: flex;
		text-decoration: none;
		box-sizing: border-box;
		cursor: pointer;
		flex-direction: column;
		padding: 0;
		position: relative;
		width: 100%;
	}

	.page-vbtn_2 {
		align-items: left;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100%;
		position: relative;
		text-decoration: none;
		width: 100%;
		background: #fff;
		color: #555555;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
		-webkit-transition: .3s ease;
		transition: .3s ease;
		z-index: 2;
		padding: 30px 20px 30px 40px;

		&:hover {
			@media screen and (min-width: 768px) {
				opacity: 0.6;
			}
		}

		&::before {
			background: transparent;
			border: 2px solid #d2d2d2;
			border-radius: 50%;
			box-sizing: border-box;
			content: "";
			display: block;
			position: absolute;
			left: 12px;
			top: 50%;
			transform: translateY(-50%);
			width: 18px;
			height: 18px;
			-webkit-transition: .3s ease;
			transition: .3s ease;
		}
	}

	.flow-card.active .page-vbtn_2 {
		&::before {
			border-color: var(--mobileRed);
		}

		&::after {
			background: #db007c;
			border-radius: 50%;
			content: "";
			display: block;
			position: absolute;
			left: 17px;
			top: 50%;
			transform: translateY(-50%);
			width: 8px;
			height: 8px;
		}
	}

	.card-list-sec2 .flow-card {
		display: flex;
	}

	.uqv2-parts-flex2clm {
		justify-content: flex-start;
	}

	.flow-step-end .result-list .result-card-inner,
	.flow-step-solutions .solution-list .solution-card-inner {
		background-color: #fff;
		padding: 25px 20px 20px;
		border: 1px solid #E5E5E5;
		display: flex;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;
	}

  .flow-step-end  {
		background-color: #fff;
		padding: 30px;
		box-sizing: border-box;

    @media screen and (max-width: 767px) {
			padding: 20px 15px;
		}
	}

	.result-card,
	.solution-card {
		display: flex;
		flex-direction: column;
	}

	.flow-step-solutions {
  background-color: #fce5f2;
  padding: 30px;
  color: #555555;
  position: relative;


  filter:
    drop-shadow(2px 0 0 #e2007e)
    drop-shadow(-2px 0 0 #e2007e)
    drop-shadow(0 2px 0 #e2007e)
    drop-shadow(0 -2px 0 #e2007e);

  @media screen and (max-width: 767px) {
    padding: 20px 10px;
  }

  & > h2 {
    color: #555555;
  }


  &::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -39px;
    transform: translateX(-50%);
    width: 100%;
    height: 40px;
    background: #fce5f2;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 1;
  }
}

	.flow-step-end .result-list,
	.flow-step-solutions .solution-list {
		justify-content: flex-start!important;

		@media screen and (max-width: 767px) {
			margin-top: 20px!important;
		}
	}

	.section-step2-1b {
		padding: 40px;
		background: #fff;

		@media screen and (max-width: 767px) {
			padding: 20px 15px;
		}

		> h2 {
			color: #555555!important;
		}

		.check-list {
			width: 53.8%;
			margin: 0 auto;

			@media screen and (max-width: 767px) {
				width: 100%;
			}

			.check-card a {
				padding: 30px 20px;
				border: 1px solid #ccc;
				border-radius: 5px;
				box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
				display: block;
				text-align: center;
				color: #555555;
				text-decoration: none;
			}

			.check-card.active a {
				color: #e2007e;
				border: 1px solid #e2007e;
			}
		}
	}

	body.fixed {
		position: fixed;
		left: 0;
		right: 0;
		overflow: hidden;
	}

	.modal_content {
		display: none;
		align-items: center;
		justify-content: center;
		position: fixed;
		inset: 0;
		height: 100dvh;
		background: rgba(0, 0, 0, 0.7);
		z-index: 9999;
	}

	.modal_content[style*="display: none"] {
		display: none;
	}

	.modal_content:not([style*="display: none"]),
	.modal_content[style*="display: block"] {
		display: flex;
	}

	.modal {
		position: relative;
		background-color: #fff;
		width: 980px;
		padding: 40px 0;
		max-height: none;

		@media screen and (max-width: 767px) {
			width: 85%;
			padding: 0;
			max-height: 75dvh;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
		}

		@media screen and (min-width:768px) and (max-width:1179px), print {
			width: 80%;
			padding: 40px;
		}
	}

  .modal_inner{
    padding: 40px;

    @media screen and (max-width: 767px) {
			padding:20px;
			flex: 1;
		}
  }

	.modal__close {
		position: absolute;
		top: 20px;
		right: 20px;
		padding: 0;
		cursor: pointer;
		width: 30px;
		height: 30px;
		background: none;
		border: none;
		z-index: 1;
		outline: none;
		-webkit-appearance: none;
		appearance: none;

		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 5px;
			height: 30px;
			background: #555;
		}

		&::before {
			transform: translate(-50%,-50%) rotate(45deg);
		}

		&::after {
			transform: translate(-50%,-50%) rotate(-45deg);
		}
	}

  .title-icon {
    display: flex;
    align-items: center;
    gap: 1em;

    > span {
      font-size: inherit;

      > img {
      height: 2em;
      width: 2em;
      }
    }
  }

  .uqv3-title--icon::before {
    color: #303030;
  }

.type-label{
  width: fit-content;
  display: flex;
  font-weight: normal;
  color: var(--mobileRed);
  border: 1px solid var(--mobileRed);
  padding: .5em 1em;
}


a.uqv2-parts-textlink--keycolor:not([target="_blank"]),
a:visited.uqv2-parts-textlink--keycolor:not([target="_blank"]) {
  display: inline-block;
  position: relative;
}

a.uqv2-parts-textlink--keycolor:not([target="_blank"])::after {
  speak: none;
  content: "\e900";
  font-family: uq-icomoon !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: none;
}

@media screen and (min-width: 768px) {
    a[href^="tel:"]  {
      pointer-events: none;
      color: #303030 !important;
      text-decoration: none;
      cursor: default;
    }
}