@charset "UTF-8";
/* CSS Document */
#main {
  max-width: 1050px;
}
/* container
-----------------------------------------------*/
#container {
  display: flex;
  max-width: 1050px;
  margin: 60px auto 0;
  padding: 0 60px;
}
#container #contents {
  width: calc(100%);
  margin: 0 auto;
}
@media only screen and (max-width:1300px) {
  #container {
    display: block;
    max-width: 1050px;
  }
  #container #contents {
    width: 100%;
  }
}
@media only screen and (max-width:767px) {
  #container {
    margin: 40px auto 0;
    padding: 0 20px;
  }
}
/* section
-----------------------------------------------*/
section h2 {
  font-size: 30px;
  margin-top: 110px;
  margin-bottom: 45px;
}
section h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 4px;
  background: #002e70;
  margin-top: 30px;
}
section h2 br {
  display: none;
}
section h3 {
  font-size: 20px;
}
section p + h3 {
  margin-top: 40px;
}
section p {
  font-size: 16px;
  line-height: 2;
  margin-top: 20px;
}
section p + p {
  margin-top: 20px;
}
section h3 + p {
  margin-top: 10px;
}
section a {
  color: #002E70;
  text-decoration: underline;
}
@media only screen and (max-width:767px) {
  section h2 {
    font-size: 22px;
    margin-top: 60px;
    margin-bottom: 20px;
  }
  section h2::after {
    width: 40px;
    height: 3px;
    margin-top: 20px;
  }
  section p {
    font-size: 14px;
    margin-top: 10px;
  }
  section h3 {
    font-size: 16px;
  }
  section h2 br {
    display: block;
  }
}
/* bgBox
-----------------------------------------------*/
.bgBox {
  background: #f2f2f2;
  display: flex;
  padding: 30px 50px;
  box-sizing: border-box;
}
@media only screen and (max-width:767px) {
  .bgBox {
    padding: 20px;
  }
}