.box {
  opacity: 0;
}
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.bgGreen {
  background-color: #4B8D7C;
}
.bgGray {
  background-color: #EBEBEB;
}
#head {
  padding: 40px 0 0;
  margin-bottom: 40px;
}
#head.bgGreen {
  background: linear-gradient(180deg, #4B8D7C 0%, #4B8D7C 97%, #fff 3%, #fff 100%);
}
#head .logo {
  width: 60%;
  margin: 0 auto 10px;
}
#head .title {
  width: 90%;
  margin: 10px auto 20px;
  display: block;
}
#col1 .font {
  border: 3px solid #1A1311;
  padding: 10px;
}
#col1, #col2, #col3 {
  margin-bottom: 60px;
}
#col2 {
  padding: 50px 0;
}
#col3 h3 {
  margin-bottom: 40px;
}
/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:280px) and (max-width:767px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  .flexboxSP {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .inner {
    width: 90%;
    margin: auto;
    display: block;
  }
  .mgB20 {
    margin-bottom: 20px;
  }
  #col1 .kakaku01 {
    margin: 30px auto 60px;
  }
  #col2 ul {
    margin: 30px auto;
  }
  #col2 ul li {
    margin-bottom: 20px;
  }
  #col2 ul li:nth-child(3), #col2 ul li:nth-child(4) {
    width: 50%;
  }
  #col2 ul li:last-child {
    margin: 40px auto;
  }
  #col3 {
    margin-top: 80px;
  }
  #col3 ul li {
    margin-bottom: 40px;
  }
  #col4 article {
    margin: 60px 0 30px;
  }
  #col4.bgGreen {
    padding: 50px 0;
  }
}
/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:768px) and (max-width:1200px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
  .flexboxPC {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .inner {
    width: 90%;
    margin: auto;
  }
  .mgB40 {
    margin-bottom: 40px;
  }
  .mgT50 {
    margin-top: 50px;
  }
  #head {
    padding: 30px 0;
    margin: 0 auto 40px;
  }
  #head .logo {
    width: 385px;
  }
  #head .title {
    width: 700px;
    margin: 10px auto 30px;
  }
  #head.bgGreen {
    background: linear-gradient(180deg, #4B8D7C 0%, #4B8D7C 89%, #fff 11%, #fff 100%);
  }
  #col1 .kakaku01 {
    margin: 30px 0 70px;
  }
  #col1 .font {
    text-align: center;
  }
  #col1 .font img {
    display: inline-block;
  }
  #col2 {
    margin: 150px 0 0;
    padding: 150px 0;
  }
  #col4 {
    margin: 100px 0;
    padding: 100px 0;
  }
  #col2 h3 img, #col3 h3 img {
    margin: 0 auto 80px;
  }
  article {
    margin: 50px auto 0;
    width: 60%;
  }
  #col3 article img {
    margin: 150px auto;
  }
  #col3 ul li {
    width: 48%;
    margin-bottom: 50px;
  }
  #col4 ul {
    margin: 100px 0;
  }
  #col4 ul li {
    width: 48%;
  }
  #col4 ul li:nth-child(3), #col4 ul li:nth-child(4) {
    margin-top: 40px;
  }
  article .btn1 img {
    width: 100%;
    margin: 0 auto 80px;
  }
}
/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1200px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
  .flexboxPC {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .inner {
    width: 900px;
    margin: auto;
    display: block;
  }
  .mgB40 {
    margin-bottom: 40px;
  }
  .mgT50 {
    margin-top: 50px;
  }
  #head {
    padding: 30px 0;
    margin: 0 auto 40px;
  }
  #head .logo {
    width: 385px;
  }
  #head .title {
    width: 700px;
    margin: 10px auto 30px;
  }
  #head.bgGreen {
    background: linear-gradient(180deg, #4B8D7C 0%, #4B8D7C 89%, #fff 11%, #fff 100%);
  }
  #col1 .kakaku01 {
    margin: 30px 0 70px;
  }
  #col1 .font {
    text-align: center;
  }
  #col1 .font img {
    display: inline-block;
  }
  #col2 {
    margin: 150px 0 80px;
    padding: 150px 0;
  }
  #col4 {
    margin: 150px 0;
    padding: 150px 0;
  }
  #col2 h3 img, #col3 h3 img {
    margin: 0 auto 80px;
  }
  article {
    margin: 100px auto 0;
    width: 50%;
  }
  #col3 article img {
    margin: 150px auto;
  }
  #col3 ul li {
    width: 48%;
    margin-bottom: 50px;
  }
  #col4 ul {
    margin: 100px 0;
  }
  #col4 ul li {
    width: 48%;
  }
  #col4 ul li:nth-child(3), #col4 ul li:nth-child(4) {
    margin-top: 40px;
  }
  article .btn1 img {
    width: 70%;
    margin: 0 auto 150px;
    display: block;
  }
}