@charset "UTF-8";
#TopicPath ul {
  padding: 20px 0 15px; }

@media screen and (max-width: 768px) {
  .JS #TopicPath ul {
    padding: 15px 15px; } }
br.m {
  display: none; }
br.ms {
  display: none; }
br.s {
  display: none; }

#Contents h1 {
  text-align: center;
  font-weight: bold;
  font-size: 187.5%;
  color: #fff;
  background: #444;
  padding: 26px 0; }
@media screen and (max-width: 768px) {
  #Contents h1 {
    font-size: 150%;
    color: #fff;
    background: #444;
    padding: 30px 0; } }
#Contents .ThreeMovie {
  padding: 50px 0 80px; }
  #Contents .ThreeMovie .MovieFlex {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*width: calc(100% + 32px);*/
    margin: 0 auto; }
    #Contents .ThreeMovie .MovieFlex .MovieContent {
      background: #b1000e;
      width: calc((100% / 3) - 20px);
      /*width: calc((100% / 4) - 33px);*/
      margin-left: 30px;}
      #Contents .ThreeMovie .MovieFlex .MovieContent:nth-child(3n+1) {
        margin-left: 0;}
      #Contents .ThreeMovie .MovieFlex .MovieContent .ImageBlock {
        overflow: hidden; }
        #Contents .ThreeMovie .MovieFlex .MovieContent .ImageBlock .ImageBox {
          width: 100%;
          height: 240px;
          -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          background-repeat: no-repeat;
          background-size: cover !important; }
      #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText {
        position: relative;
        width: 100%;
        /*height: calc(100% - 238px);*/
        color: #fff;
        padding: 20px 30px 50px;
        background: #b1000e; }
        #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText:before {
          content: none;
          display: inline-block;
          margin-bottom: 10px;
          padding: 2px 5px;
          color: #B1000E;
          font-size: 87.5%;
          line-height: 1.5;
          background: #fff; }
        #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText h2 {
          position: static;
          text-align: left;
          font-size: 112.5%;
          color: #fff;
          padding-bottom: 10px; }
          @media screen and (max-width: 768px) {
            #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText h2 {
              font-size: 100%; } }
          #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText h2:after {
            position: static;
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            background: url(/image/jp/r1/icon/icon_link_right_l_white_hd.gif) no-repeat right bottom 1px;
            background-size: cover; }
        #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText .company {
          position: absolute;
          padding: 0 30px 20px;
          left: 0;
          bottom: 0;
          font-size: 87.5%; }
      #Contents .ThreeMovie .MovieFlex .MovieContent.case .MovieText:before {
        content: "事例"; }
      #Contents .ThreeMovie .MovieFlex .MovieContent.event .MovieText:before {
        content: "イベント"; }
      #Contents .ThreeMovie .MovieFlex .MovieContent.product .MovieText:before {
        content: "製品・ソリューション"; }
    #Contents .ThreeMovie .MovieFlex a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none; }
      @media screen and (min-width: 768px) {
        #Contents .ThreeMovie .MovieFlex a:hover .ImageBox {
          -moz-transform: scale(1.1);
          -ms-transform: scale(1.1);
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
          -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } }
@media screen and (max-width: 1275px) {
  #Contents .ThreeMovie {
    padding: 30px 0 60px; }
    #Contents .ThreeMovie .MovieFlex {
      width: 100%; }
      #Contents .ThreeMovie .MovieFlex .MovieContent {
        margin: 0 10px !important; } }
@media screen and (max-width: 994px) {
#Contents .ThreeMovie .MovieFlex .MovieContent {
          width: calc(50% - 20px);
          margin-bottom: 30px; }
  #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText {
    padding: 22px 14px 60px; }
    #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText p {
      font-size: 87.5%; }
    #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText .company {
      padding: 0 14px 20px;
      font-size: 75%; } }
@media screen and (max-width: 768px) {
  #Contents .ThreeMovie {
    padding: 30px 0 60px; }
    #Contents .ThreeMovie .MovieFlex {
      display: block; }
      #Contents .ThreeMovie .MovieFlex .MovieContent {
        width: 100%;
        height: auto;
        margin: 0 auto 60px !important; }
        #Contents .ThreeMovie .MovieFlex .MovieContent:last-child {
          margin-bottom: 0 !important; }
        #Contents .ThreeMovie .MovieFlex .MovieContent .ImageBlock .ImageBox {
          height: 210px; }
        #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText {
          height: auto;
          padding: 16px 14px; }
          #Contents .ThreeMovie .MovieFlex .MovieContent .MovieText .company {
            position: static;
            margin-top: 10px;
            padding: 0; } }
#Contents .MovieList {
  width: 100%;
  background: #ebebe8;
  padding: 50px 0 140px; }
  #Contents .MovieList h2 {
    max-width: 1200px;
    margin: 0 auto 20px;
    font-size: 175%;
    padding: 0;
    padding-left: 20px;
    text-align: left;
    font-weight: bold;
    border-left: 2px solid #E60127;
    background: none; }


#Contents .MovieList .HorizontalInnerLinks {
	max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0;
}



 #Contents .MovieList h3.subCategoryTitle {
	 color: #333;
    max-width: 1200px;
    margin: 0 auto 20px;
    font-size: 140%;
    padding: 0;
    padding-left: 20px;
    text-align: left;
    font-weight: bold;
    background: none;
position: relative;}

#Contents .MovieList h3.subCategoryTitle:before {
	position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      content: '';
      display: inline-block;
      width: 12px;
      height: 3px;
      background: #e60127; 
}









  #Contents .MovieList .Section {
    padding-top: 40px; }
  #Contents .MovieList .MovieListFlex {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto; }
    #Contents .MovieList .MovieListFlex .MovieListContent {
      width: 580px;
      margin-bottom: 40px; }
      #Contents .MovieList .MovieListFlex .MovieListContent a {
        background: #fff;
        display: flex;
        width: 100%;
        height: 100%;
        text-decoration: none; }
        #Contents .MovieList .MovieListFlex .MovieListContent a .ImageBlock {
          overflow: hidden;
          width: 230px; }
          #Contents .MovieList .MovieListFlex .MovieListContent a .ImageBlock .ImageBox {
            width: 100%;
            height: 100%;
            background: #aaa;
            background-repeat: no-repeat;
            background-size: cover !important;
            -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
        @media screen and (min-width: 769px) {
          #Contents .MovieList .MovieListFlex .MovieListContent a:hover .ImageBox {
            -moz-transform: scale(1.1);
            -ms-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
            -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } }
        #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText {
          position: relative;
          width: 350px;
          padding: 20px 30px; }
          #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText h3 {
            text-align: left;
            font-size: 112.5%;
            color: #b1000e;
            padding-bottom: 0;
            margin-bottom: 8px; }
            #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText h3:after {
              position: static;
              content: "";
              display: inline-block;
              width: 20px;
              height: 24px;
              vertical-align: middle;
              background: url(/image/jp/r1/icon/icon_link_right_hd.gif) no-repeat right bottom;
              background-size: cover; }
          #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText .description {
            font-size: 87.5%;
            color: #4d4d4d; }
          #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText .company {
            margin-top: 20px;
            font-size: 75%;
            color: #4d4d4d; }
@media screen and (max-width: 1275px) {
  #Contents .MovieList .MovieListFlex {
    width: 100%; }
    #Contents .MovieList .MovieListFlex .MovieListContent {
      width: 48%; }
      #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText {
        padding: 14px 10px; }
        #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText .description {
          font-size: 81.25%; } }
@media screen and (max-width: 995px) {
  #Contents br.l {
    display: none; }
  #Contents br.m {
    display: block; }
  #Contents .MovieList .MovieListFlex .MovieListContent a {
    display: block; }
    #Contents .MovieList .MovieListFlex .MovieListContent a .ImageBlock {
      width: 100%;
      height: 150px;
      padding: 0; }
      #Contents .MovieList .MovieListFlex .MovieListContent a .ImageBlock .ImageBox {
        width: 100%;
        height: 100%; }
    #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText {
      width: 100%;
      padding: 10px 10px 14px 10px; }
      #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText p {
        line-height: 1.4; } }
@media screen and (max-width: 768px) {
  #Contents br.m {
    display: none; }
  #Contents .MovieList .MovieListFlex .MovieListContent {
    width: 100%; } }
@media screen and (max-width: 500px) {
  #Contents br.ms {
    display: block; } }
@media screen and (max-width: 400px) {
  #Contents br.s {
    display: block; } }
@media screen and (max-width: 375px) {
  #Contents br.ms {
    display: none; }
  #Contents .MovieList .MovieListFlex .MovieListContent {
    height: auto; }
    #Contents .MovieList .MovieListFlex .MovieListContent a {
      display: block; }
      #Contents .MovieList .MovieListFlex .MovieListContent a .ImageBlock {
        width: 100%;
        height: 150px;
        padding: 0; }
        #Contents .MovieList .MovieListFlex .MovieListContent a .ImageBlock .ImageBox {
          width: 100%;
          height: 100%; }
      #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText {
        width: 100%;
        padding: 10px 10px 14px 10px; }
        #Contents .MovieList .MovieListFlex .MovieListContent a .MovieListContentText p {
          line-height: 1.4; } }

.ContentNaviWrap {
  background: #262626; }
  .ContentNaviWrap .ContentNavi {
    max-width: 1200px;
    margin: auto;
    padding: 0; }
    .ContentNaviWrap .ContentNavi li a {
      height: 50px; }


#Contents .MovieList .MovieListFlex .MovieListContent > a {
	position: relative;
}
#Contents .MovieList .MovieListFlex .MovieListContent .NewRibbon {
	position: absolute;
	font-weight: bold;
	top: 10px;
	left: -10px;
	z-index: 1;
	font-size: 12px;
	display: inline-block;
	width: 60px;
	text-align: center;
	color: #b1000e;
	border: solid 1px #b1000e;
	background-color: #fff;
	line-height: 180%;
	box-sizing: border-box!important;
}
#Contents .MovieList .MovieListFlex .MovieListContent .NewRibbon:before {
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 0;
	height: 0;
	content: '';
	border-top: 10px solid #b1000e;
	border-left: 10px solid transparent;
}
#Contents .MovieList .Note{
  margin: 0 37.5px;
}
@media screen and (max-width: 1304px) {
  #Contents .MovieList .Note{
    margin: 0 22.5px;
  }
}
@media screen and (max-width: 1275px) {
  #Contents .MovieList .Note{
    margin: 0;
  }
}