@charset "UTF-8";

.st-mainColumn {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

.menuList_item a {
	text-decoration: none;
}

.st-mainColumn strong {
	font-weight: bold;
}

.st-mainColumn sup {
	font-size: 70%;
	vertical-align: top;
	position: relative;
	top: 0em;
}

/* サイドメニュー --------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
	.page-easy .menuList_item-easy>a {
		border: solid 1px #323232;
		background-color: #323232;
		color: #fff;
	}
	.page-easy .menuList_item-easy>a:after {
		border-color: #fff;
	}
}
@media screen and (max-width: 768px) {
    .st-pageTitle span {
        font-size: 5vw;
    }
}

/* ページタイトル --------------------------------------------------------------------- */
.page-easy .st-pageHead {
	background-image: url(../images/keyVisual.jpg);
}

div.point-container {
  display: flex;
  justify-content: space-between;
	div.point-block {
  	width: calc(50% - 15px);
  	background-color: #E4F4F3;
  	padding: 20px 30px 20px;
  	border-radius: 15px;
  	text-align: center;
		h3 {
  		display: block;
    	text-align: center;
    	font-weight: bold;
      color: #fff;
      font-size: 24px;
      width: fit-content;
      margin: 0 auto;
      padding: 5px 30px;
      background-color: #009388;
      border-radius: 30px;
		}
		div.thumb {
  		margin-top: 15px;
			img {
  			width: 100%;
  			height: auto;
        overflow: hidden;
        border-radius: 10px;
			}
		}
		p {
  		text-align: left;
  		margin: 15px 0 0;
			a {
			}
		}
	}
}


@media screen and (max-width: 768px) {
  div.point-container {
    display: block;
    margin-bottom: 2rem;
    padding-left: 4vw;
    padding-right: 4vw;
  	div.point-block {
    	width: 100%;
      margin-bottom: 2rem;
  		h3 {
        font-size: 4.8vw;
  		}
  		div.thumb {
  		}
  		p {
  		}
  	}
  }
}

div.step-section {
  position: relative;
	background-color: #E4F4F3;
	margin-top: 30px;
	padding: 30px;
	border-radius: 15px;
	&::before {
  	content: "";
  	position: absolute;
  	bottom: -30px;
  	left: 50%;
  	transform: translate(-50%,0);
  	border-top: 30px solid #E4F4F3;
  	border-left: 60px solid transparent;
  	border-right: 60px solid transparent;
  	border-bottom: 0 solid transparent;
	}
	h2 {
		display: block;
  	text-align: center;
  	font-weight: bold;
    color: #fff;
    font-size: 24px;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 30px;
    background-color: #009388;
    border-radius: 30px;
	}
	div.step-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    + & {
      margin-top: 30px;
    }
  	&:nth-child(even) {
    	flex-direction: row-reverse;
  	}
		div.thumb {
  	width: calc(50% - 10px);
			img {
  			width: 100%;
  			height: auto;
        overflow: hidden;
        border-radius: 10px;
			}
		}
		div.detail {
  	width: calc(50% - 10px);
  	display: flex;
  	justify-content: center;
  	flex-direction: column;
			h3 {
  			position: relative;
        font-weight: bold;
        padding-left: 50px;
        margin-left: 20px;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0,-50%);
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 30px;
          border-radius: 40px;
          background-color: #009388;
        }
        &.step1::before {
          content: "1";
        }
        &.step2::before {
          content: "2";
        }
        &.step3::before {
          content: "3";
        }
			}
			p {
  			margin-top: 10px;
  			margin-bottom: 0;
			}
		}
	}
}

@media screen and (max-width: 768px) {
  div.step-section {
    margin: 0 2rem 2rem;
    padding: 4vw;
  	h2 {
      font-size: 4.8vw;
  	}
  	div.step-container {
      margin-top: 2rem;
      display: block;
      + & {
        margin-top: 2rem;
      }
    	&:nth-child(even) {
      	flex-direction: row;
    	}
  		div.thumb {
      	width: 100%;
  			img {
  			}
  		}
  		div.detail {
      	width: 100%;
      	display: block;
  			h3 {
          margin-top: 1rem;
          font-size: 4.8vw;
  			}
  			p {
  			}
  		}
  	}
  }
}

div.step-end-message {
  margin-top: 45px;
  padding: 20px;
  background-color: #fc7200;
  border-radius: 15px;
	p {
  	text-align: center;
  	color: #fff;
  	font-size: 24px !important;
  	line-height: 1.5;
  	font-weight: bold;
  	margin-bottom: 0 !important;
	}
}
div.step-end-photo {
  margin-top: 30px;
  overflow: hidden;
  border-radius: 15px;
}

@media screen and (max-width: 768px) {
  div.step-end-message {
    margin: 4rem 2rem 2rem;
    padding: 2rem 0;
  	p {
    	font-size: 4vw !important;
  	}
  }
  div.step-end-photo {
    margin: 4rem 2rem 2rem;
  }
}


div.lineup-container {
  display: flex;
  justify-content: space-between;
  margin: -30px 20px 40px;
	div.lineup-item {
  	width: calc(33% - 13px);
  	background-color: #E4F4F3;
  	padding: 15px;
  	border-radius: 15px;
		h4 {
  		text-align: center;
  		font-size: 18px;
  		font-weight: 700;
  		color: #fc7200;
		}
		div.logo {
			width: 100%;
			height: auto;
      overflow: hidden;
      border-radius: 10px;
      margin-top: 10px;
		}
		h5 {
  		font-size: 18px;
  		font-weight: bold;
  		text-align: center;
		}
		p {
  		text-align: center;
  		margin: 10px 0 0;
  		padding: 0;
  		line-height: 1.5;
		}
	}
}

@media screen and (max-width: 768px) {
  div.lineup-container {
    display: block;
    margin: 0 0 0;
  	div.lineup-item {
    	width: 100%;
      padding: 2rem;
      margin-top: 1rem;
  		h4 {
        font-size: 4.8vw;
  		}
  		div.logo {
  		}
  		h5 {
  		}
  		p {
  		}
  	}
  }
}

.sw-section_head4 {
  margin-left: 20px;
}

@media screen and (max-width: 768px) {
  .authorContents h2 {
    padding-bottom: 2rem;
    font-size: 4.8vw;
  }
  .sw-section.service-merit {
    margin: 0 2rem 2rem;
  }
}