@charset "utf-8";

/* CSS Document */
.companypage .contentheader{background-image: url(../images/company-bg-01.jpg);}

.companymenu{
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: rgba(246,247,249,1);
  }
  .company-menu{
    display: flex;
    flex-wrap: wrap;
    }
    .company-menu-item{
      width: calc((100% - 50px) / 2);
      margin-bottom: 50px;  
      }
    .company-menu-item:not(:nth-of-type(2n+2)){margin-right: 50px;}
      .company-menu-link{
        display: block;
        position: relative;
        box-shadow: 0px 0px 19px -6px rgba(0,0,0,0.6);
        }
        .company-menu-fig{
          overflow: hidden;
          position: relative;
          width: 100%;
          padding-top: 51%;
          background-color: rgba(100,100,100,1);
          }
          .company-menu-fig-item{
            display: block;
            width: 100%;
            background-color: rgba(100,100,100,1);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1);
            transition: .3s;
            opacity: .6;
            }
            .company-menu-link:hover .company-menu-fig-item{
              transform: translate(-50%, -50%) scale(1.05);
              opacity: 1;
              }

        .company-menu-ttl{
          display: flex;
          align-items: center;
          width: 100%;
          padding-top: 15px;
          padding-bottom: 15px;
          padding-left: 15px;
          background-color: rgba(255,255,255,1);
          position: relative;
          /* box-shadow: 0px 0px 19px -6px rgba(0,0,0,0.6); */
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 100;
          }
          .company-menu-ttl::before{
            content: "";  
            width: 30px;
            height: 1px;
            background-color: rgba(183,0,49,1);
            position: absolute;
            top: 51%;
            right: 20px;
            transform: translateY(-50%);
            transition: .3s;
            }
            .company-menu-link:hover .company-menu-ttl::before{
              width: 40px;
              right: 10px;
              }
              .company-menu-ttl::after{
                content: "";  
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 3px 0 3px 6px;
                border-color: transparent transparent transparent rgba(183,0,49,1);
                position: absolute;
                top: 51%;
                right: 20px;
                transform: translateY(-50%);
                transition: .3s;
                }
                .company-menu-link:hover .company-menu-ttl::after{right: 10px;}
          .company-menu-ttl-txt{
            font-weight: 500;
            font-size: 15px;
            line-height: 1.3;
            position: relative;
            }


.companymovie{
  padding-top: 100px;
  padding-bottom: 150px;
  }

@media screen and (max-width: 1199px) {}/* max-width: 1199px */

@media screen and (max-width: 991px) {

.companymenu{
  padding-top: 80px;
  padding-bottom: 50px;
  }
  .company-menu{
    display: flex;
    flex-wrap: wrap;
    }
    .company-menu-item{
      width: calc((100% - 20px) / 2);
      margin-bottom: 20px;  
      }
    .company-menu-item:not(:nth-of-type(2n+2)){margin-right: 20px;}
    .company-menu-ttl{}

.companymovie{
  padding-top: 80px;
  padding-bottom: 100px;
  }

}/* max-width: 991px */

@media screen and (max-width: 767px) {

.companymenu{
  padding-top: 50px;
  padding-bottom: 30px;
  }

.company-menu-item{
  width: 100%;
  margin-bottom: 20px;  
  }
  .company-menu-item:not(:nth-of-type(2n+2)){margin-right: 0;}

.companymovie{
  padding-top: 50px;
  padding-bottom: 80px;
  }

}/* max-width: 767px */

@media screen and (max-width: 575px) {

  .company-menu-ttl-txt{font-size: 14px;}


}/* max-width: 575px */