/* CSS Document */
/*ページタイトル*/
.page_title h2::before{
  content: "Flow";
}
/*コンテンツ*/
.flow_wrap{
  box-sizing: border-box;
  background: rgb(38,39,41);
  background: linear-gradient(0deg, rgba(38,39,41,1) 0%, rgba(0,0,0,1) 100%);
}
.flow_wrap *{
  color: #fff;
}
body[wc-view-type="sp"] .flow_wrap{
  padding: var(--headerHeight) 0;
}
body[wc-view-type="tb"] .flow_wrap{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .flow_wrap{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .flow_wrap{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.flow_contents{
  padding-top: 2rem;
}
body[wc-view-type="sp"] .flow_contents{
  padding-top: 1rem;
}
body[wc-view-type="pc"] .flow_contents{
	width: 550px;
	margin: 0 auto;
}
.flow_contents > .flow_block{
  display: flex;
  position: relative;
  z-index: 1;
  padding-bottom: 2rem;
  box-sizing: border-box;
}
.flow_contents > .flow_block:last-of-type{
  padding-bottom: 0;
}
body[wc-view-type="sp"] .flow_contents > .flow_block{
  padding-right: 7vw;
}
.flow_contents > .flow_block::before{
  content: "";
  width: 1px;
  height: 0;
  position: absolute;
  z-index: -1;
  background-color: #fff;
  transition: height 1s 0.7s ease;
}
body:not([wc-view-type="sp"]) .flow_contents > .flow_block::before{
  top: 80px;
  left: 40px;
}
body[wc-view-type="sp"] .flow_contents > .flow_block::before{
  left: 21.5px;
  top: 65px;
  right: calc(100% - 21.5px);
}
body:not([wc-view-type="sp"]) .flow_contents > .flow_block[inview-state="true"]::before{
  height: calc(100% - 80px);
}
body[wc-view-type="sp"] .flow_contents > .flow_block[inview-state="true"]::before{
  height: calc(100% - 65px);
}
.flow_contents > .flow_block:last-of-type::before{
  display: none;
}
body[wc-view-type="sp"] .flow_contents > .flow_block{
  flex-direction: column;
}
.flow_contents > .flow_block .flow_text{
  box-sizing:border-box;
}
body[wc-view-type="sp"] .flow_contents > .flow_block .flow_text{
  overflow: hidden;
}
.flow_contents > .flow_block .flow_text > h2{
  display: flex;
  align-items: center;
}
.flow_contents > .flow_block .flow_text > h2 .num{
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 1;
  flex: none;
}
body[wc-view-type="sp"] .flow_contents > .flow_block .flow_text > h2 .num{
  margin-left: -10px;
  width: 65px;
  height: 65px;
}
.flow_contents > .flow_block .flow_text > h2 .num::after{
  content: "";
  position: absolute;
  inset:0;
  border: solid 1px #fff;
  box-sizing: border-box;
  border-radius: 50%;
  transition: all 1s ease;
  opacity: 0;
  transform: scale(0);
}
.flow_contents > .flow_block[inview-state="true"] .flow_text > h2 .num::after{
  transform: scale(1);
  opacity: 1;
}
.flow_contents > .flow_block .flow_text > h2 .num span{
  font-size: 2rem;
  letter-spacing: 2px;
  font-family: "Oswald";
  font-weight: 700;
  line-height: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  transition: opacity 1s 0.35s ease,filter 0.5s 0.35s ease;
  opacity: 0;
  filter: blur(10px);
}
.flow_contents > .flow_block[inview-state="true"] .flow_text > h2 .num span{
  opacity: 1;
  filter: blur(0);
}
body[wc-view-type="sp"] .flow_contents > .flow_block .flow_text > h2 .num span{
  height: 65px;
}
.flow_contents > .flow_block .flow_text > h2 .num span::before{
  content: "Step";
  font-family: "Oswald";
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1em;
  font-size: 0.9rem;
}
.flow_contents > .flow_block .flow_text > h2 .title_text{
  display: block;
  padding-left: 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  transition: all ease 1s;
  opacity: 0;
  filter: blur(10px);
}
.flow_contents > .flow_block[inview-state="true"] .flow_text > h2 .title_text{
  opacity: 1;
  filter: blur(0);
}
.flow_contents > .flow_block .flow_text > .f_in_text{
  box-sizing: border-box;
}
body[wc-view-type="sp"] .flow_contents > .flow_block .flow_text > .f_in_text{
  padding: 0 0 0 calc(55px + 1rem);
}
body:not([wc-view-type="sp"]) .flow_contents > .flow_block .flow_text > .f_in_text{
  padding: 0 0 0 calc(80px + 0.5rem);
}
.flow_contents > .flow_block .flow_text > .f_in_text p{
  line-height: 1.8rem;
  transition: all ease 1s;
  opacity: 0;
  filter: blur(10px);
}
.flow_contents > .flow_block[inview-state="true"] .flow_text > .f_in_text p{
  opacity: 1;
  filter: blur(0);
}
.flow_contents > .flow_block .flow_text > .f_in_text a.tel{
  color: #fff;
  font-size: 1.35rem;
  text-decoration: none;
  font-family: "Oswald";
  line-height: 1em;
  display: flex;
  align-items: center;
  font-weight: 700;
  margin-top: 1rem;
}
body:not([wc-view-type="sp"]) .flow_contents > .flow_block .flow_text > .f_in_text a.tel{
  pointer-events: none;
}
.flow_contents > .flow_block .flow_text > .f_in_text a.tel::before{
  content: "";
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -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;
  background-color: #fff;
  width: 2rem;
  height: 2rem;
}
.flow_contents > .flow_block .flow_text > .f_in_text .btn{
  margin-top: 1rem;
  margin-left: 0;
}
body[wc-view-type="pc"] .flow_contents > .flow_block .flow_text > .f_in_text .btn{
  margin-top: 1.5rem;
}