@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  section.hero_area {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }

  /* -----  ----- */
  section.hero_area .eye_catch {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  section.hero_area .eye_catch .bg_img {
    width: 100%;
    height: 100%;
    
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
    background-position: center center;
    background-repeat: no-repeat;
    
    position: relative;
    overflow: hidden;

    filter: opacity(0.6);
  }

}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  section.hero_area {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }

  /* -----  ----- */
  section.hero_area .eye_catch {
    width: 100%;
    height: 100%;
  }

  section.hero_area .eye_catch .bg_img {
    width: 100%;
    height: 100%;
    
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
    background-position: center center;
    background-repeat: no-repeat;
    
    position: relative;
    overflow: hidden;
    filter: opacity(0.6);
  }
}