@charset "UTF-8";
/* ----------------------------------------------------
	sassを使用しています。css編集の際はご注意ください。
	compass/scss
---------------------------------------------------- */
/* ----------------------------------------------------
.mainvisualBox
---------------------------------------------------- */
.mainvisualBox {
  padding: 40px 0 0 0;
  text-align: center;
}
@media (max-width: 736px) {
  .mainvisualBox {
    padding-top: 0;
  }
}

/* ----------------------------------------------------
section
---------------------------------------------------- */
section {
  margin-top: 90px;
}
@media (max-width: 736px) {
  section {
    margin-top: 45px;
  }
}
section h2 {
  margin-bottom: 30px;
}
@media (max-width: 736px) {
  section h2 {
    margin-bottom: 15px;
  }
}
section h2.news {
  font-size: 23px;
  color: #ff8e75;
  letter-spacing: 6px;
  text-align: center;
}
section h2.news img {
  width: 96px;
  height: auto;
}
section h2.training {
  font-size: 23px;
  color: #ff8e75;
  letter-spacing: 6px;
  text-align: center;
}
section h2.training img {
  width: 60px;
  height: auto;
}
section h2.imgTitle span {
  display: block;
}

/* ----------------------------------------------------
.newsWrap
---------------------------------------------------- */
.newsWrap {
  margin: 90px auto 0 auto;
  width: 700px;
}
@media (max-width: 736px) {
  .newsWrap {
    margin-top: 45px;
    width: 100%;
  }
}
@media (max-width: 736px) {
  .newsWrap div.newsList {
    padding: 0 20px;
  }
}
.newsWrap div.newsbox {
  border-bottom: 1px solid #71422a;
}
.newsWrap div.newsbox a {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  color: #71422a;
}
.newsWrap div.newsbox a:after {
  content: "\e5c8";
  font-family: "Material Icons";
  font-size: 18px;
  display: inline-block;
}
@media (max-width: 736px) {
  .newsWrap div.newsbox a {
    flex-wrap: wrap;
  }
}
.newsWrap div.newsbox .date {
  font-size: 15px;
  width: 20%;
}
@media (max-width: 736px) {
  .newsWrap div.newsbox .date {
    width: 100%;
  }
}
.newsWrap div.newsbox .title {
  width: 80%;
}
@media (max-width: 736px) {
  .newsWrap div.newsbox .title {
    width: 90%;
  }
}
.newsWrap .morebtn {
  margin: 30px auto 0 auto;
  width: 236px;
}
.newsWrap .morebtn a {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border-radius: 18px;
  background: #ff8e75;
}
.newsWrap .morebtn a:after {
  content: "\e5c8";
  font-family: "Material Icons";
  font-size: 18px;
  display: inline-block;
}

/* ----------------------------------------------------
.trainingWrap
---------------------------------------------------- */
.trainingWrap {
  padding: 90px 0 160px 0;
  background: url(../images/common/bg.jpg) center top;
  position: relative;
}
@media (max-width: 736px) {
  .trainingWrap {
    padding: 45px 0 130px 0;
  }
}
.trainingWrap div.ill_hiyoko {
  line-height: auto;
  position: absolute;
  top: -8%;
  right: 30%;
}
.trainingWrap div.ill_hiyoko img {
  width: calc(294px / 2);
  height: auto;
}
@media (max-width: 736px) {
  .trainingWrap div.ill_hiyoko img {
    width: 100px;
  }
}
@media (max-width: 736px) {
  .trainingWrap div.ill_hiyoko {
    top: -2%;
    right: 6%;
  }
}
.trainingWrap div.trainingList {
  margin: 0 auto;
  width: 700px;
}
@media (max-width: 736px) {
  .trainingWrap div.trainingList {
    padding: 0 20px;
    width: 100%;
  }
}
.trainingWrap div.trainingbox {
  border-bottom: 1px solid #71422a;
}
.trainingWrap div.trainingbox a {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  color: #71422a;
}
.trainingWrap div.trainingbox a:after {
  content: "\e5c8";
  font-family: "Material Icons";
  font-size: 18px;
  display: inline-block;
}
@media (max-width: 736px) {
  .trainingWrap div.trainingbox a {
    flex-wrap: wrap;
  }
}
.trainingWrap div.trainingbox .date {
  font-size: 15px;
  width: 20%;
}
@media (max-width: 736px) {
  .trainingWrap div.trainingbox .date {
    width: 100%;
  }
}
.trainingWrap div.trainingbox .title {
  width: 80%;
}
@media (max-width: 736px) {
  .trainingWrap div.trainingbox .title {
    width: 90%;
  }
}
.trainingWrap .morebtn {
  margin: 30px auto 0 auto;
  width: 236px;
}
.trainingWrap .morebtn a {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border-radius: 18px;
  background: #ff8e75;
}
.trainingWrap .morebtn a:after {
  content: "\e5c8";
  font-family: "Material Icons";
  font-size: 18px;
  display: inline-block;
}

/* ----------------------------------------------------
.infoWrap
---------------------------------------------------- */
.infoWrap {
  padding: 100px 0 40px 0;
}
@media (max-width: 736px) {
  .infoWrap {
    padding-top: 90px;
  }
}
.infoWrap div.inner {
  margin: 0 auto;
  width: 700px;
  position: relative;
}
@media (max-width: 736px) {
  .infoWrap div.inner {
    padding: 0 20px;
    width: 100%;
  }
}
.infoWrap div.illbox {
  position: absolute;
  top: -200px;
  left: 0;
}
.infoWrap div.illbox img {
  width: calc(698px / 2);
  height: auto;
}
@media (max-width: 736px) {
  .infoWrap div.illbox img {
    width: 190px;
  }
}
@media (max-width: 736px) {
  .infoWrap div.illbox {
    top: -54%;
    left: 2%;
  }
}
.infoWrap div.info {
  margin-left: auto;
  width: 414px;
  height: 320px;
  color: #71422a;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: url(../images/sitetop/bg.png) no-repeat;
}
@media (max-width: 736px) {
  .infoWrap div.info {
    padding: 30px 0 50px 0;
    width: 100%;
    height: auto;
    background: url(../images/sitetop/bg.png) no-repeat;
    background-size: 100%;
  }
}
.infoWrap div.info .ill {
  margin-bottom: 12px;
}
.infoWrap div.info .ill img {
  width: calc(100px / 2);
  height: auto;
}
@media (max-width: 736px) {
  .infoWrap div.info .ill img {
    width: 42px;
  }
}
@media (max-width: 736px) {
  .infoWrap div.info .ill {
    margin-bottom: 6px;
    margin-left: 100px;
  }
}
.infoWrap div.info .title {
  font-size: 23px;
  font-weight: 600;
  color: #ff8e75;
}
@media (max-width: 736px) {
  .infoWrap div.info .title {
    font-size: 20px;
  }
}
.infoWrap div.info .detail {
  margin: 14px 0;
}
.infoWrap div.info .morelink a:after {
  content: "\e5c8";
  font-family: "Material Icons";
  font-size: 22px;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 10px;
}
@media (max-width: 736px) {
  .infoWrap div.info .morelink a:after {
    font-size: 20px;
  }
}