@charset "utf-8";
/* CSS Document */
/*メインビジュアル*/
.main-visual{
    position:relative;	
	padding-top:100px;
}
.main-visual img{
   width:100%;
	display:block;
}
.main-visual h1{
	margin:0;
	font-size:30px;
	position:absolute;	
	bottom:10px;
	left:10px;
}

.top-banner2 {
	
}
.top-banner2 img{
	width:100%;
	display:block;
}

.top-banner1 {
	width:90%;
	max-width:960px;
	margin:auto auto 50px auto;
}
.top-banner1 img{
	width:100%;
	display:block;
}

/*初めての方へ*/
.top-beginner{
	padding-bottom:30px;
}
.top-beginner ul {
  padding: 0;
  width:100%;
  margin:50px auto;
  max-width:520px;
}
.top-beginner dd {
  margin-left: 0;
}

.flow > li {
  position: relative;
}
.flow > li:not(:last-child) {
  margin-bottom: 40px;
}
.flow > li:not(:first-child)::before {
  content: "";
  height: 60px;
  display: block;
  border-left: 4px dotted #e5e5e5;
  position: absolute;
  top: -40px;
  left: -webkit-calc(10% + 30px - 2px);
  left: calc(10% + 30px - 2px);
  z-index: 10;
}
.flow > li dl {
  width: 100%;
  padding: 20px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 2px solid #00A5E6;
  border-radius: 10px;
  position: relative;
}
.flow > li:not(:last-child) dl::before,
.flow > li:not(:last-child) dl::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.flow > li:not(:last-child) dl::before {
  border-width: 22px;
  border-top-color: #00A5E6;
}
.flow > li:not(:last-child) dl::after {
  border-width: 20px;
  border-top-color: #fff;
}
.flow > li dl dt {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-right: 2vw;
  text-align: center;
}
.flow > li dl dt .icon {
  font-size: 16px;
  color: #fff;
  background: #00A5E6;
  padding: 5px 15px;
  margin-bottom: 10px;
  display: block;
  border-radius: 20px;
  position: relative;
  z-index: 100;
}
.flow img{
  width:100%;
	display:block;
}
.flow li dt{
	width:35%;
	min-width:100px;
}
.flow li dd{
	width:65%;
}
.flow li dd{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.flow li dd .step-text{
	display:block;
	width:100%;
	text-align:left;
}
.flow {
	
}
.flow .step-img{
	width:50%!important;
	min-width:180px;
	padding:20px;
	box-sizing: border-box;
	display:block;
}
.flow .step-img img{
	width:100%;
	display:block;
}
@media(max-width:480px){
.flow li dl {
  display: flex;
  flex-direction:column;
}	
}
/*リスト*/
.list-block {
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:10px;
	padding-bottom:20px;
}
.list-block li{
	width:32%;
}
.list-block li a{
	display:block;
	background-color: #3DC8FF;
	padding:10px 0;
	width:100%;
	color:#fff;
	font-weight:bold;
	text-align:center;
	border-bottom:solid 2px #007DAF;
	border-radius:15px;
	font-size:18px;
}
@media(max-width:960px){
.list-block li{
	width:48%;
}	
}
@media(max-width:480px){
.list-block li{
	width:100%;
}	
}
/*料金について*/
.top-price {
	
}
.top-price ul{
	padding:0;
	display:flex;
	flex-direction:column;
	gap:15px;
}
.top-price ul li{
	
}
.top-price ul li a{
	width:100%;
	padding:10px;
	border:solid 2px #00A5E6;
	border-radius:10px;
	color:#00A5E6;
	font-size:18px;
	font-weight:bold;
	display:flex;
	align-items:center;
}