@charset "UTF-8";
/* common
-------------------------------------------------------------- */
h1.ttl {
  padding: 70px 0;
}
@media (max-width: 767px) {
  h1.ttl {
    padding: 30px 0;
  }
}

/* about
-------------------------------------------------------------- */
.about {
  padding: 150px 0;
  background: #e9eeea;
}
.about .txtArea {
  width: 60%;
}
.about h2 {
  padding-bottom: 50px;
}
.about p {
  padding-bottom: 40px;
  font-size: 2.2rem;
  line-height: 2;
}
.about figure {
  width: 31.8%;
}
@media (max-width: 767px) {
  .about {
    padding: 50px 0 30px;
  }
  .about .txtArea {
    width: 100%;
  }
  .about h2 {
    padding-bottom: 20px;
  }
  .about p {
    font-size: 1.5rem;
    line-height: 1.75;
  }
  .about figure {
    margin: 0 auto 20px;
    width: 80%;
  }
  .about .btn a {
    margin: 0 auto;
    width: 80%;
  }
}

/* merit
-------------------------------------------------------------- */
.merit {
  padding: 140px 0;
}
.merit h2 {
  padding-bottom: 50px;
}
.merit li {
  width: 23%;
	margin-bottom: 1em;
}
.flex:after {
    content: "";
    display: block;
    width: 23%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
.flex:before {
    content: "";
    display: block;
    width: 23%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
    order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}
.merit p {
  padding-top: 20px;
  font-size: 2.2rem;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .merit li {
    padding-bottom: 30px;
    width: 48%;
  }
}
@media (max-width: 767px) {
  .merit {
    padding: 50px 0;
  }
  .merit h2 {
    padding-bottom: 20px;
  }
  .merit li {
    margin: auto;
    width: 80%;
  }
  .merit p {
    padding-top: 10px;
    font-size: 1.5rem;
  }
}

/* price
-------------------------------------------------------------- */
.price table {
	width: 100%;
	font-size: 2.2rem;
	margin:1em auto 2em auto;
}
.price th {
	padding: 30px;
	width: 30%;
	border-bottom: 1px solid #8e0f16;
	text-align: left;
	font-weight: 700;
}
.price td {
	padding: 30px;
	width: 70%;
	border-bottom: 1px solid #8e0f16;
}
.price tr:nth-child(odd) {
	background: #f5f5f5;
}
.price .strong{
	color: #8e0f16;
}
.price .btn a{
	margin:2em auto 4em auto;
}
@media (max-width: 767px) {
	.price {
		padding: 50px 0;
	}
	.price h1 {
		padding-bottom: 20px;
	}
	.price p {
		font-size: 1.5rem;
		padding-bottom: 20px;
	}
	.price table {
		font-size: 1.4rem;
	}
	.price th {
		padding: 10px;
		width: 40%;
	}
	.price td {
		padding: 10px;
		width: 60%;
	}
}

/* registration
-------------------------------------------------------------- */
.registration {
  padding: 140px 0;
  text-align: center;
  background: #e9eeea;
}
.registration h2 {
  padding-bottom: 50px;
}
.registration .txt {
  font-size: 2.2rem;
  line-height: 2;
}
.registration .btn a {
  margin: 80px auto 0;
}
@media (max-width: 767px) {
  .registration {
    padding: 50px 0;
  }
  .registration h2 {
    padding-bottom: 20px;
  }
  .registration .txt {
    font-size: 1.5rem;
  }
  .registration .btn a {
    margin: 40px auto 0;
    width: 80%;
  }
}