@charset "UTF-8";
.signup-freme{
  margin: 0 auto;
  padding: 20px 0 0 0;
}
.flow-title-frame {
  margin: 0;
  padding: 0.25em 0.5em;
  border-left: solid 15px #EC6D5E;
}
.flow-title  {
	position: relative;
	display: inline-block;
	font-size: 3rem;
	margin-bottom: 10px;
}
.flow-title-sub {
  font-size: 2rem;
}
.flow-title-sub span{
  color: #EC6D5E;
}
@media screen and (max-width: 767px) {
	.flow-title-frame{
	  border-left: none;
	  text-align: center;
	}
	.flow-title {
		text-align: center;
	  font-size: 2rem;
	}
	.flow-title:before{
	  content: '';
	  position: absolute;
	  bottom: -10px;
	  display: inline-block;
	  width: 100px;
	  height: 5px;
	  left: 50%;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	  border-radius: 10px;
	  background-color: #EC6D5E;
	}
	.flow-title-sub {
	  font-size: 1.5rem;
	  margin-top: 10px;
	  text-align: left;
	}
}
.flowA-title,.flowB-title,.flowC-title {
  position: relative;
  padding: 7px 0 10px;
}
.flowA-title,.flowB-title,.flowC-title {
  font-size: 3rem;
  color: #FFFFFF;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .flowA-title,.flowB-title,.flowC-title {
    padding: 15px 0;
  }
  .flowA-title,.flowB-title,.flowC-title {
    font-size: 1.7rem;
  }
}

.flow-button-area {
  display: flex;
  justify-content: flex-start;
  column-gap: 60px;
}
@media screen and (max-width: 767px) {
	.flow-button-area {
	  display: block;
	  padding: 0 20px;
	}
}
.flow-button-box {
  width: 100%;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3019607843);
  margin: 20px auto 0px;
  padding: 10px 0;
  text-align: center;
}
.flow-button-box[class*=flowA-link] {
  background-color: #EC6D5E;
}
.flow-button-box[class*=flowB-link] {
  background-color: #59A1E0;
}
.flow-button-box[class*=flowC-link] {
  background-color: #2AB49E;
}
.flow-button-box-arrow::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(135deg);
    margin: 0 auto 10px;
}
@media screen and (max-width: 767px) {
	.flow-button-box-arrow::before {
		margin: 0 auto;
	}	
}
.flow-button-box-link {
  display: block;
  width: 100%;
  height: 100%;
}
.lines_2_text,.lines_3_text{
  color: #FFF;
  font-size: 1.6rem;
  font-weight: 600;
}
.lines_2_text{
  line-height: 2.4;	
}
.lines_3_text{
  line-height: 1.6;	
}
@media screen and (max-width: 767px) {
	.lines_2_text,.lines_3_text{
	  font-size: 1.4rem;
	  line-height: 1.5;
	}	
}
.content[class*=content-flowA] {
  padding-top: 50px;
}
@media screen and (max-width: 767px) {
  .content[class*=content-flowA] {
    padding-top: 40px;
  }
}
.content[class*=content-flowA] .flowA-title {
  background-color: #EC6D5E;
}

.content[class*=content-flowB] {
  padding-top: 80px;
}
@media screen and (max-width: 767px) {
  .content[class*=content-flowB] {
    padding-top: 70px;
  }
}
.content[class*=content-flowB] .flowB-title {
  background-color: #59A1E0;
}

.content[class*=content-flowC] {
  padding-top: 80px;
}
@media screen and (max-width: 767px) {
  .content[class*=content-flowC] {
    padding-top: 70px;
  }
}
.content[class*=content-flowC] .flowC-title {
  background-color: #2AB49E;
}

.flow-inner-box-indent {
   text-indent: -1em;
   padding-left: 1em;
}

@media screen and (max-width: 767px) {
  .flow-inner-box-indent{
    margin-left: 0;
  }
}
.flow-container-inner-text-em{
    font-weight: 600;
}

.flow-container-inner-title {
    padding: 1rem 0rem 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #333333;
    font-size: 1.8rem;
    font-weight: 600;
}
@media screen and (max-width: 767px) {
  .flow-container-inner-title {
    margin-left: 0;
    font-size: 1.5rem;
  }
}
.flowA-block-title,.flowB-block-title,.flowC-block-title {
  margin-bottom: 10px;
}
.flowA-block-title p,.flowB-block-title p,.flowC-block-title p {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #333333;
  padding: 5px 30px;
  border-radius: 24px;
  background-color: #EC6D5E;
  display: inline-block;
}
.flowA-block-title p{
  background-color: #f9d3ce;
}
.flowB-block-title p{
  background-color: #bcd9f3;
}
.flowC-block-title p{
  background-color: #bee8e2;
}
@media screen and (max-width: 767px) {
	.flowA-block-title,.flowB-block-title,.flowC-block-title {
	  text-align: center;
	}	
	.flowA-block-title p,.flowB-block-title p,.flowC-block-title p{
	  font-size: 1.6rem;
  }
}
.flowA-block-step-title,.flowB-block-step-title {
  position: relative;
  display: inline-block;
  margin: 1.8em 0 1.8em;
  font-size: 2rem;
}
.flowA-block-step-title:before {
  background-color: #EC6D5E;
}
.flowB-block-step-title:before {
  background-color: #59A1E0;
}
.flowA-block-step-title:before,
.flowB-block-step-title:before{
  content: '';
  position: absolute;
  bottom: -10px;
  display: inline-block;
  width: 60px;
  height: 8px;
  left: 30px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .flowA-block-title-sp span,.flowB-block-title-sp span,.flowC-block-title-sp span{
    margin-left: 0;
    font-size: 1.5rem;
  }
	.flowA-block-step-title-sp-block,
	.flowB-block-step-title-sp-block{
	  text-align: center;
	  font-size: 1.6rem;
	  margin: 10px 0 20px;
	}
	.flowA-block-step-title-sp,.flowB-block-step-title-sp {
	  position: relative;
	  display: inline-block;
	  margin: 1.8em 0 1em;
	  font-size: 1.6rem;
	}	
  .flowA-block-step-title-sp:before {
	  background-color: #EC6D5E;
	}
  .flowB-block-step-title-sp:before {
	  background-color: #59A1E0;
	}
	.flowA-block-step-title-sp:before,
	.flowB-block-step-title-sp:before{
	  content: '';
	  position: absolute;
	  bottom: -10px;
	  display: inline-block;
	  width: 60px;
	  height: 8px;
	  left: 50%;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	  border-radius: 10px;
	}
}


.flowC-block-step-title {
  position: relative;
  display: inline-block;
  margin: 1.8em 0 1.8em;
  font-size: 2rem;
}

.flowC-block-line-step-title {
  position: relative;
  display: inline-block;
  margin: 1.8em 0 1.8em;
  font-size: 2rem;
}
.flowC-block-line-step-title:before {
  content: '';
  position: absolute;
  bottom: -10px;
  display: inline-block;
  width: 60px;
  height: 8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #2AB49E;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
	.flowC-block-line-step-title {
	  font-size: 1.6rem;
	}
}
.flowA-container {
  display: flex;
  justify-content: space-between;
  column-gap: 80px;
}
.flowA-container-mt {
	margin-top: 50px;
}
@media screen and (max-width: 767px) {
	.flowA-container {
	  display: block;
	}
}	
.flowA-item {
  width: 50%;
  position: relative;
}
@media screen and (max-width: 767px) {
	.flowA-item {
	  width: 100%;	
	}
}	
.flowA-container-arrow::before {
  content: url("./../img/signup/triangle2_01.png");
  position: absolute;
  top: 50%;
  right: -15px;
  width: 10px;
}
.flowB-container-arrow::before {
  content: url("./../img/signup/triangle1_01.png");
  position: absolute;
  top: 50%;
  right: -15px;
  width: 10px;
}
@media screen and (max-width: 767px) {
	.flowA-container-arrow::before {
		content: none;
	}
	.flowA-container-arrow-sp {
		text-align: center;
		margin: 0 auto 10px;
	}
	.flowA-container-arrow-sp img{
		max-width: 50px;
	}	
}
.flowA-container-inner {
  display: flex;
  column-gap: 10px;
}
@media screen and (max-width: 767px) {
	.flowA-container-inner {
	  display: block;
	}
}	
.flowA-container-inner-image {
  position: relative;
  min-width: 250px;
  max-width: 250px;
}
@media screen and (max-width: 767px) {
	.flowA-container-inner-image  {
	  margin: auto;
	  min-width: 210px;
  max-width: 230px;	
	}
}

.flowA-container-inner-image img {
  width: 100%;
}
.flowA-container-inner-text{
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
  text-align: left;
}
.flowA-container-inner-text-ct{
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
}
.flowA-container-inner-text-red{
	color: #FF0000;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
  text-align: left;	
}
.flowA-container-inner-text-frame{
  border-radius:10px;
  padding: 10px;
  background: #f9d3ce;
}
@media screen and (max-width: 767px) {
	.flowA-container-inner-text,
	.flowA-container-inner-text-ct,
	.flowA-container-inner-text-red{
	  font-size: 1.5rem;
	  margin: 10px 0 20px;
	}
}
.flowA-container-inner-bd{
  border: 1px solid #333;
  border-radius:14px;
  padding: 20px 30px;
  margin: 10px 0;
}
.flowA-block-bd{
  border-radius:10px;
  padding: 20px;
  background: #EC6D5E;
  font-size: 2rem;
  color: #FFF;
  text-align: center;
  margin: 30px auto;
  max-width: 800px;
}
@media screen and (max-width: 767px) {
	.flowA-block-bd{
	  font-size: 1.5rem;
	}
}
.flowA-button-box {
  max-width: 400px;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3019607843);
  background-color: #FFFFFF;
  margin: 20px auto 0px;
  padding: 10px 0;
}

.flowA-button-box-link {
  display: block;
  width: 100%;
  height: 100%;
}
.flowA-button-box-link p {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
}
.flowA-button-box-link img {
  max-width: 320px;
}
@media screen and (max-width: 767px) {
	.flowA-button-box-link img {
	  max-width: 250px;
	}
	.flowA-button-box-link p {
	  font-size: 1.5rem;
	}	
}
.flowC-container {
  display: flex;
  justify-content: space-between;
  column-gap: 40px;
}
@media screen and (max-width: 767px) {
	.flowC-container {
	  display: block;
	}
}
.flowC-item {
  background-color: skyblue;
  width: 50%;
  position: relative;
}

.flowC-container-inner {
  display: flex;
  column-gap: 10px;
}
.flowC-block {
  display: flex;
  justify-content: space-between;
  column-gap: 180px;
}
@media screen and (max-width: 767px) {
	.flowC-container-inner {
	  display: block;
	}	
	.flowC-block {
	  display: block;
	}
}
.flowC-block-inner-item {
  width: 50%;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 767px) {
	.flowC-block-inner-item {
	  width: 100%;
	}	
}
.flowC-container-inner-text{
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  text-align: left;
  margin: 10px 0;
}
.flowC-block-inner-image {
  position: relative;
  max-width: 450px;
  min-width: 450px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
	.flowC-block-inner-image {
	  max-width: 300px;
	  min-width: 300px
	}	
}
.flowC-block-inner-image img {
  width: 100%;
}
.flowC-block-bd{
  border-radius:10px;
  padding: 20px;
  background: #bee8e2;
  font-size: 2rem;
  text-align: center;
}
.flowC-block-bd-img{
	margin: 10px auto;
	text-align: center;
}
@media screen and (max-width: 767px) {
	.flowC-block-bd img{
	  max-width: 250px;
	  min-width: 250px
		  
	}
	.flowC-block-bd{
	  font-size: 1.5rem;
	  text-align: left;
	}	
}