/* CSS Document */
/*ページタイトル*/
.page_title > h2::before{
	content: "Flow";
}
/*コンテンツ*/
.flow_wrap{
	box-sizing: border-box;
  background-color: #f5f3fd;
}
body[wc-view-code="sp"] .flow_wrap{
	padding: var(--headerHeight) 7vw;
}
body[wc-view-code="tb"] .flow_wrap{
	padding: var(--headerHeight) 5vw;
}
body[wc-view-code="pc"] .flow_wrap{
	padding: var(--headerHeight) calc((100vw - 850px) / 2);
}
.flow_wrap > p{
	line-height: 1.8rem;
	margin-bottom: 1.5rem;
}
body:not([wc-view-code="sp"]) .flow_wrap > p{
	text-align: center;
}
.flow_wrap > article{
	background-color: #fff;
  margin-bottom: 3rem;
	position: relative;
	z-index: 1;
	display: flex;
}
body[wc-view-code="sp"] .flow_wrap > article{
	flex-direction: column;
  padding-bottom: 1rem;
}
.flow_wrap > article:last-of-type{
	margin-bottom: 0;
	padding-bottom: 0;
}
.flow_wrap > article::after{
	content: "";
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  width: 3rem;
  height: 1.5rem;
  background: rgba(245, 243, 253, 0.2);
  background: linear-gradient(180deg,rgba(245, 243, 253, 0.2) 0%, rgba(104, 98, 208, 0.7) 100%);
  position: absolute;
  left: 0;
  bottom: -2.5rem;
}
.flow_wrap > article:last-of-type::after{
	display: none;
}
.flow_wrap > article .f_text_box{
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}
body:not([wc-view-code="sp"]) .flow_wrap > article .f_text_box{
	width: 50%;
}
body[wc-view-code="tb"] .flow_wrap > article .f_text_box{
	padding-right: 1rem;
}
body[wc-view-code="pc"] .flow_wrap > article .f_text_box{
	padding-right: 1.5rem;
}
.flow_wrap > article .f_text_box::before{
	content: "";
  width: 100px;
  height: 100px;
  background-color: var(--accentColor);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
	opacity: 0.15;
}
body[wc-view-code="sp"] .flow_wrap > article .f_text_box::before{
	width: 60px;
	height: 60px;
	right: 1.25rem;
  top: 0.5rem;
}
body[wc-view-type="tb"] .flow_wrap > article .f_text_box::before{
	width: 70px;
	height: 70px;
right: 1.25rem;
  top: 1.25rem;
}
.flow_wrap > .f_contact .f_text_box::before{
	-webkit-mask-image: url("/img/svg/flow_contact.svg");
  mask-image: url("/img/svg/flow_contact.svg");
}
.flow_wrap > .f_mendan .f_text_box::before{
	-webkit-mask-image: url("/img/svg/flow_mendan.svg");
  mask-image: url("/img/svg/flow_mendan.svg");
}
.flow_wrap > .f_shinsa .f_text_box::before{
	-webkit-mask-image: url("/img/svg/flow_moushikomi.svg");
  mask-image: url("/img/svg/flow_moushikomi.svg");
}
.flow_wrap > .f_keiyaku .f_text_box::before{
	-webkit-mask-image: url("/img/svg/flow_keiyaku.svg");
  mask-image: url("/img/svg/flow_keiyaku.svg");
}
.flow_wrap > .f_kenshu .f_text_box::before{
	-webkit-mask-image: url("/img/svg/flow_kenshu.svg");
  mask-image: url("/img/svg/flow_kenshu.svg");
}
.flow_wrap > .f_kaisetu .f_text_box::before{
	-webkit-mask-image: url("/img/svg/flow_kaisetu.svg");
  mask-image: url("/img/svg/flow_kaisetu.svg");
}
.flow_wrap > .f_start .f_text_box::before{
	-webkit-mask-image: url("/img/svg/flow_start.svg");
  mask-image: url("/img/svg/flow_start.svg");
}
.flow_wrap > article .f_text_box .f_title{
	display: flex;
	flex-direction: column-reverse;
	align-items: baseline;
}
.flow_wrap > article .f_text_box .f_title p{
	background-color: var(--accentColor);
  font-family: "Lexend";
  color: #fff;
  padding: 0.35rem 1.25rem 0.25rem 0.5rem;
  box-sizing: border-box;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.75rem) 100%, 0% 100%);
  display: table;
  font-size: 0.95rem;
}
.flow_wrap > article .f_text_box .f_title > h2{
	font-weight: 700;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  width: 100%;
  font-size: 1.15rem;
}
.flow_wrap > article .f_text_box .f_text{
	padding: 0 1rem 1rem 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}



.flow_wrap > article .f_text_box .f_text .btn_block{
	margin-top: 0.5rem;
	flex-direction: column;
	gap:0.5rem !important;
}
.flow_wrap > article .f_text_box .f_text .btn_block .f_tel{
	color: var(--defColor);
  font-family: "Lexend";
  font-weight: 700;
  display: flex;
  width: fit-content;
  font-size: 1.3rem;
  text-decoration: none;
}
body:not([wc-view-code="sp"]) .flow_wrap > article .f_text_box .f_text .btn_block .f_tel{
	pointer-events: none;
}
.flow_wrap > article .f_text_box .f_text .btn_block .btn{
	width: 100%;
}
.flow_wrap > article .f_text_box .f_text .btn_block .btn a{
	padding: 0.35rem 0.75rem;
}
.flow_wrap > article .f_text_box .f_text .btn_block .f_tel::before{
	content: "";
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--defColor);
  width: 1.5rem;
  height: 1.5rem;
  display: table;
}
.flow_wrap > article figure{
	width: calc(100% - 2rem);
	margin: 0 auto;
}
body:not([wc-view-code="sp"]) .flow_wrap > article figure{
	width: calc(50% - 1rem);
	margin: 1rem 1rem 1rem 0;
}
.flow_wrap > article figure img{
	aspect-ratio:1.414/1;
}