/*--- import -------------------------------------*/
/*------------------------------------- import ---*/
.mv {
  background: url("../images/works/mv_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center 20%; }
  .mv:after {
    background: rgba(0, 0, 0, 0.2) !important; }

#about .sub_ttl {
  margin-top: 0px; }
  #about .sub_ttl .p1 {
    margin: 0 auto;
    position: relative;
    bottom: -32px;
    max-width: 375px;
    width: 100%; }
  #about .sub_ttl .p2 {
    position: relative;
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 0.3rem;
    color: #449935; }
  @media screen and (max-width: 750px) {
    #about .sub_ttl .p1 {
      bottom: -4.2666666667vw; }
    #about .sub_ttl .p2 {
      letter-spacing: 0.08rem;
      font-size: 24px; } }
#about .txt_area {
  margin-top: 40px; }
  @media screen and (max-width: 750px) {
    #about .txt_area {
      margin-top: 5.3333333333vw;
      text-align: left; } }

main {
  padding-top: 60px; }

#works ul {
  position: relative;
  top: 40px; }
  #works ul li {
    margin-top: 160px;
    display: flex;
    align-items: center; }
    #works ul li .images {
      max-width: 510px;
      width: 100%;
      position: relative;
      left: 80px;
      top: -120px; }
    #works ul li .txt_area {
      background: #449935;
      padding: 60px 40px 60px 120px;
      text-align: left;
      color: #fff;
      max-width: 980px;
      width: 100%; }
      #works ul li .txt_area h3 {
        font-size: 48px;
        line-height: 1;
        letter-spacing: 0.3rem; }
      #works ul li .txt_area .txt {
        margin-top: 40px; }
      #works ul li .txt_area .view_more {
        margin-top: 40px; }
    #works ul li:nth-child(2n) {
      flex-flow: row-reverse; }
      #works ul li:nth-child(2n) .images {
        left: -80px;
        top: -120px; }
      #works ul li:nth-child(2n) .txt_area {
        padding: 60px 120px 60px 40px; }

@media screen and (max-width: 960px) {
  #works ul li .images {
    left: 2.333333vw;
    top: -12.5vw;
    max-width: 53.125vw; }
  #works ul li .txt_area {
    padding: 4.1666666667vw 2.166667vw 4.1666666667vw 6.166667vw; }
    #works ul li .txt_area h3 {
      font-size: 42px; }
  #works ul li:nth-child(2n) {
    flex-flow: row-reverse; }
    #works ul li:nth-child(2n) .images {
      left: -2.333333vw;
      top: -12.5vw; }
    #works ul li:nth-child(2n) .txt_area {
      padding: 4.1666666667vw; } }
@media screen and (max-width: 750px) {
  #works {
    margin-top: 0; }
    #works ul {
      top: 0; }
      #works ul li {
        margin-top: 10.6666666667vw;
        display: block; }
        #works ul li .images {
          left: auto;
          top: auto;
          margin: 0 auto; }
        #works ul li .txt_area {
          margin-top: 5.3333333333vw;
          padding: 8vw 5.3333333333vw; }
          #works ul li .txt_area h3 {
            text-align: center;
            font-size: 32px; }
          #works ul li .txt_area .txt {
            margin-top: 5.3333333333vw; }
          #works ul li .txt_area .view_more {
            margin: 0 auto;
            max-width: 280px;
            width: 100%;
            margin-top: 5.3333333333vw; }
        #works ul li:nth-child(2n) {
          flex-flow: row-reverse; }
          #works ul li:nth-child(2n) .images {
            left: auto;
            top: auto; }
          #works ul li:nth-child(2n) .txt_area {
            padding: 8vw 5.3333333333vw; } }