@charset "UTF-8";
.service_top .share{
  margin-top: 10%;
}
.service_top{
  margin-bottom: 10%;
}
:root{
  --cardw:350px;
  --gapw:30px;
}
/* ---------------サービス一覧--------------- */
.service-btn {
	position: relative;
  width: 100%;
	max-width: var(--cardw);
  height: 100%;
	min-height: 470px;
	margin: 0 auto;
	display: block;
	/* border-radius: 12px; */
	overflow: hidden;
	cursor: pointer;
}
.service-btn a{
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff;
  text-align: center;
}
.btn{
  position: absolute;
  background-color: #fff;
  color: var(--main-color);
  border-radius: 100vh;
  width: 70%;
  height: 3.5vh;
  bottom: 10%;
  left: 15%;
}
span{
position: absolute;
top: 10%;
left: 30%;
}

.sb1{
  background-image: url(../images/service1.png);
  border-radius: 15px;
}
.sb2{
  background-image: url(../images/service2.png);
  border-radius: 15px;
}
.sb3{
  background-image: url(../images/service3.png);
  border-radius: 15px;
}
.sb4{
  background-image: url(../images/service4.png);
  border-radius: 15px;
}
.sb5{
  background-image: url(../images/service5.png);
  border-radius: 15px;
}
.sb6{
  background-image: url(../images/service6.png);
  border-radius: 15px;
}
.sb7{
  background-image: url(../images/service7.png);
  border-radius: 15px;
}
.sb8{
  background-image: url(../images/service8.png);
  border-radius: 15px;
}
.service-btn a .bg{
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: var(--main-color);
  transition: 0.2s ease-in-out;
  border-radius: 15px;
}
.service-btn a .in{
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  border-radius: 15px;
}
.service-btn a:hover .bg{
  background-color: #536CBD00;
}
.number{
  font-size: calc( 40rem / 16);
}
.service-btn h3{
  padding-bottom: 20px;
}
.service-btn p{
  font-size: clamp( calc( 12rem / 16), 1.2vw, 1rem );
  width: 80%;
  margin: 0 auto 20px;
  text-align: left;
}
.service-cont{
  display: grid;
  /* grid-template-rows: repeat(3,1fr); */
  grid-template-columns: repeat(auto-fit,minmax(var(--cardw),1fr));
  gap: var(--gapw);
  max-width: calc( var(--cardw)*4 + var(--gapw)*3 );
  width: 92%;
  margin:0 auto;
}
/* -----------serviceレスポンシブ対応----------- */
@media only screen and (max-width:640px) {
.service-btn{
  min-height: 390px;
  width: 300px;
}
.btn{
  position: absolute;
  background-color: #fff;
  color: var(--main-color);
  border-radius: 100vh;
  width: 70%;
  height: 4vh;
  bottom: 10%;
  left: 15%;
}
span{
position: absolute;
top: 4%;
/* top: 5%;
bottom: 5%;
left: 30%; */
margin: auto;
}
}
/* ---------------flowここから--------------- */
.flow-out{
  background-color: var(--main-color);
  padding: 5% 0;
}
.flow-in{
  background-image: url(../../assets/images/flow-back.png);
  background-repeat: repeat;
  background-size: 130%;
  background-color: #fff;
  margin: 7%;
  border-radius: 50px;
  padding-bottom: 100px;
}
.flow-in .share{
  padding: 100px 0 50px 0;
}
/* グリッド */
.flow-step{
  display: grid;
  grid-template-rows: 80% 20%;
  grid-template-columns: 20% 80%;
  margin-left: 20%;
  margin-right: 20%;
}
.step-parts{
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  padding: 10% 20% 0% 20%;
}
.arrow-parts{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  padding: 0 20% 20% 20%;
}
.flow-step .flow-letter{
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  padding: 8% 5% 0 5%;
}
.flow-letter .flow-title{
  font-size: 20px;
}
.flow-letter .flow-title-last{
  font-size: 20px;
}

/* ---------------price list ここから--------------- */
.list-p{
  width: 80%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.list-title{
  text-align: center;
  font-weight: bold;
  margin-bottom: 30px;
  font-size: 20px;
}
.list{
  display: flex;
  padding-top: 50px;
  justify-content: space-evenly;
  margin-left: auto;
  margin-right: auto;
}
.list1{
  width: 40%;
}
.list2{
  width: 40%;
}
.service-ricelist{
  margin: 100px;
}
.list1-p{
  margin: 50px 0 100px 0;
}
/* listの装飾 */
table{
  border-collapse: separate;
  border-spacing: 5px;
  margin: auto;
}
table , td, th {
  border-radius: 5px;
}
td{
  color: #303030;
}
td, th {
  text-align: center;
	width: 400px;
	height: 50px;
  background-color: #EAEAEA;
}
.list-up{
  background-color: #536CBD;
  color: #fff;

}
.list-left{
  background-color: #D3D3D3;
}
.list1,.list2{
  max-width: 80%;
  /* margin: auto; */
}

/* ---------------レスポンシブ対応--------------- */
/* service部分 
@media only screen and (max-width:640px) {
  .service-cont{
    grid-template-rows: repeat(9,1fr);
    grid-template-columns: 100%;
    margin-left: 0;
  }
}
*/
/* flow部分 */
@media only screen and (max-width:640px) {
  .flow-in{
    background-size: 280%;
    padding-bottom: 0;
  }
  .flow-step{
    grid-template-rows: 40% 40% 20%;
    grid-template-columns: 100%;
  }
  .step-parts{
    grid-row: 1 /2;
    grid-column: 1 / 2;
    padding: 10% 25% 5% 25%;
  }
  .flow-step .flow-letter{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    padding: 0% 0% 10% 0%;
  }
  .arrow-parts{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    padding: 15% 40% 5% 40%;
  }
  .flow-letter{
    text-align: center;
  }
  .flow-step br{
    display: none;
  }
  .flow-letter .flow-title{
    margin: 10% 0;
  }
  .flow-title-last{
    margin-top: 20%;
  }
}

/* list部分 */
@media only screen and (max-width:1043px) {
  .service-ricelist{
    margin: 20% 5% ;
  }
  .list{
    justify-content: center;
    display: grid;
    grid-template-rows: 60% 40%;
    grid-template-columns: 100%;
    margin: auto;
  }
  .list2{
    width: 100%;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    /* margin-bottom: 40%; */
    margin: auto;
  }
  .list1{
    width: 100%;
    grid-column: 2 / 3;
    grid-column: 1 / 2;
    margin: auto;
  }
  .list-p br{
    display: none;
  }
  .list-p{
    text-align: start;
    width: 90%;
  }

}



@media only screen and (max-width:640px) {
  /* .service-ricelist p{
    font-size: clamp( calc( 14rem / 16), 1.2vw, 1rem );
  } */
  .service-ricelist{
    margin: 20% 5% ;
  }
  .list{
    justify-content: center;
    display: grid;
    grid-template-rows: 60% 40%;
    grid-template-columns: 100%;
    margin: auto;
  }
  .list2{
    width: 100%;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    /* margin-bottom: 40%; */
  }
  .list1{
    width: 100%;
    grid-column: 2 / 3;
    grid-column: 1 / 2;
  }
  .list-p br{
    display: none;
  }
  .list-p{
    text-align: start;
    width: 90%;
  }
  .list1,.list2{
    max-width: 90%;
    margin: auto;
  }
  
}