
.lead-top {
  font-size: 16px;
  text-align: center;
  line-height: 1.7;
}
@media screen and (max-width: 599px) {
  .lead-top {
    text-align: left;
  }
}

.button-01 {
  display: block;
  position: relative;
  padding: 1.4em 2em 1.4em 1em;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.button-01::after {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  content: '';
}
.button-01.pink {
  background: #c36380;
}
.button-01.blue {
  background: #5e76a7;
}
.button-01.green {
  background: #8a9f55;
}
.button-01.yellow {
  background: #d7ba41;
}
@media screen and (max-width: 599px) {
  .button-01 {
    font-size: 14px;
  }
}

/* ------------------------------
mv
------------------------------ */
.mv-top {
  min-height: 500px;
  background: url(/guidance/images/strength/mv_pc.jpg) no-repeat center / cover;
}
.mv-top .inner {
  padding-top: 45px;
  padding-bottom: 0;
}
.mv-top h2 {
  color: #fff;
  font-size: 40px;
  font-weight: normal;
  line-height: 1.7;
}
.mv-top .txt {
  margin: 2em 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
}
@media screen and (max-width: 599px) {
  .mv-top {
    min-height: auto;
    background: url(/guidance/images/strength/mv_sp.jpg) no-repeat center / cover;
  }
  .mv-top .inner {
    padding-top: 8%;
    padding-bottom: 15%;
  }
  .mv-top h2 {
    font-size: 30px;
  }
  .mv-top .txt {
    margin-top: 5em;
    font-size: 14px;
  }
  
}

/* ------------------------------
reasons
------------------------------ */
.reasons .reasons_list li {
  display: grid;
  padding: 30px 3%;
  border: 1px solid;
}
.reasons .reasons_list li + li {
  margin-top: 50px;
}
.reasons .number {
  font-family: 'Josefin Slab', serif;
  font-style: italic;
  font-size: 29px;
  line-height: 1;
}
.reasons .number span {
  display: inline-block;
  padding: 0.1em 0 0 0.1em;
  font-size: 90px;
}
.reasons h2 {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.reasons h2 .strong {
  font-size: 50px;
}
.reasons .txt {
  font-size: 16px;
  line-height: 1.8;
}
.reasons .btn_more {
  display: block;
  position: relative;
  padding: 0.8em 1.5em 0.8em 1em;
  border-radius: 9999px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.reasons .btn_more::after {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  content: '';
}
.reasons .btn_more:hover {
  text-decoration: none;
  opacity: 0.8;
}
.reasons .reasons_list li.reason1 {
  border-color: #c36380;
}
.reasons .reasons_list li.reason1 .number {
  color: #c36380;
}
.reasons .reasons_list li.reason1 .btn_more {
  background-color: #c36380;
}
.reasons .reasons_list li.reason2 {
  border-color: #5e76a7;
}
.reasons .reasons_list li.reason2 .number {
  color: #5e76a7;
}
.reasons .reasons_list li.reason2 .btn_more {
  background-color: #5e76a7;
}
.reasons .reasons_list li.reason3 {
  border-color: #8a9f55;
}
.reasons .reasons_list li.reason3 .number {
  color: #8a9f55;
}
.reasons .reasons_list li.reason3 .btn_more {
  background-color: #8a9f55;
}
@media screen and (min-width: 600px) {
  .reasons .reasons_list li {
    grid-template-columns: 84px calc(55.5% - 84px) 36.5%;
    column-gap: 4%;
    border-width: 1px 1px 1px 5px;
  }
  .reasons .reasons_list li .box_01 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .reasons .reasons_list li .box_02 {
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: center;
  }
  .reasons .reasons_list li .box_03 {
    grid-column: 1/3;
    grid-row: 2/4;
  }
  .reasons .reasons_list li .box_04 {
    grid-column: 3/4;
    grid-row: 1/3;
    align-self: end;
    padding-bottom: 30px;
  }
  .reasons .reasons_list li .box_05 {
    grid-column: 3/4;
    grid-row: 3/4;
    align-items: start;
  }
  .reasons .reasons_list li .img_02 {
    display: none;
  }
}
@media screen and (min-width: 600px) and (max-width: 994px) {
  .reasons .reasons_list li .box_02 {
    grid-column: 2/4;
  }
  .reasons .reasons_list li .box_04 {
    grid-row: 2/3;
  }
}
@media screen and (max-width: 599px) {
  .reasons .reasons_list li {
    padding: 20px 4%;
    border-width: 5px 1px 1px;
  }
  .reasons .reasons_list li + li {
    margin-top: 40px;
  }
    .reasons .reasons_list li .box_01 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .reasons .reasons_list li .box_02 {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .reasons .reasons_list li .box_03 {
    grid-column: 1/2;
    grid-row: 4/5;
  }
  .reasons .reasons_list li .box_04 {
    grid-column: 1/2;
    grid-row: 3/4;
    text-align: center;
  }
  .reasons .reasons_list li .box_05 {
    grid-column: 1/2;
    grid-row: 5/6;
  }
  .reasons .number {
    font-size: 21px;
    text-align: center;
  }
  .reasons .number span {
    padding-left: 0;
    padding-right: 0.15em;
    font-size: 70px;
  }
  .reasons h2 {
    margin-bottom: 0.8em;
    font-size: 20px;
    text-align: center;
  }
  .reasons h2 .strong {
    font-size: 30px;
  }
  .reasons .txt {
    font-size: 14px;
  }
  .reasons .reasons_list li .img_01 {
    display: none;
  }
  .reasons img {
    margin-bottom: 20px;
  }
  .reasons .btn_more {
    margin-top: 20px;
  }
}

/* ------------------------------
schoollife
------------------------------ */
.schoollife {
  background: #f8f5e2;
}
.schoollife .lead {
  font-size: 16px;
  text-align: left;
}
.schoollife .schoollife-box {
  position: relative;
  margin-top: 2em;
  padding: 30px 10px 20px 30px;
  border: 1px solid #d7ba41;
  background: #fff;
  font-size: 20px;
}
.schoollife .schoollife-box::before {
  position: absolute;
  top: -23px;
  left: -6px;
  transform: rotate(45deg);
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-right: 35px solid #d7ba41;
  content: '';
}
.schoollife .schoollife-box .txt_wrap img {
  width: 100%;
  max-width: 497px;
}
.schoollife .schoollife-box .txt {
  margin-top: 1em;
  color: #d7ba41;
  font-size: 20px;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .schoollife .schoollife-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .schoollife .schoollife-box .txt_wrap {
    width: 57%;
    text-align: center;
  }
  .schoollife .schoollife-box .img_wrap {
    width: 43%;
  }
}
@media screen and (max-width: 599px) {
  .schoollife .schoollife-box {
    padding: 10% 5% 5%;
    font-size: 14px;
  }
  .schoollife .schoollife-box::before {
    position: absolute;
    top: -8px;
    left: 1px;
    transform: rotate(45deg);
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 17px solid #d7ba41;
    content: '';
  }
  .schoollife .schoollife-box .txt {
    font-size: 14px;
  }
}
