#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 .ThreeCase {
  padding: 50px 0 80px; }
  #Contents .ThreeCase .CaseFlex {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 0;
   }
    @media screen and (max-width: 1000px) {
      #Contents .ThreeCase .CaseFlex {
        width: 100%;
        margin: 0; } }
    #Contents .ThreeCase .CaseFlex .CaseContent {
      width: calc((100% / 4) - 12px);
      background: #b1000e; }
      @media screen and (max-width: 1000px) {
        #Contents .ThreeCase .CaseFlex .CaseContent {
          width: calc(50% - 15px);
          margin-bottom: 30px; } }
      #Contents .ThreeCase .CaseFlex .CaseContent .ImageBlock {
        overflow: hidden; }
        #Contents .ThreeCase .CaseFlex .CaseContent .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-size: cover !important; }
      #Contents .ThreeCase .CaseFlex .CaseContent .CaseText {
        width: 100%;
        color: #fff;
        padding: 20px 30px; }
        #Contents .ThreeCase .CaseFlex .CaseContent .CaseText h2 {
          position: static;
          text-align: left;
          font-size: 112.5%;
          color: #fff;
          padding-bottom: 10px; }
          #Contents .ThreeCase .CaseFlex .CaseContent .CaseText 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 4px bottom 1px;
            background-size: cover; }
    #Contents .ThreeCase .CaseFlex a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none; }
      @media screen and (min-width: 768px) {
        #Contents .ThreeCase .CaseFlex 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: 1000px) {
  #Contents .ThreeCase .CaseFlex .CaseContent .CaseText {
    padding: 22px 14px; }
    #Contents .ThreeCase .CaseFlex .CaseContent .CaseText h2 {
      font-size: 106.25%; }
    #Contents .ThreeCase .CaseFlex .CaseContent .CaseText p {
      font-size: 87.5%; } }
@media screen and (max-width: 768px) {
  #Contents .ThreeCase {
    padding: 30px 0 60px; }
    #Contents .ThreeCase .CaseFlex {
      display: block; }
      #Contents .ThreeCase .CaseFlex .CaseContent {
        width: 100%;
        height: 345px;
        margin: 0 auto 30px; }
        #Contents .ThreeCase .CaseFlex .CaseContent:last-child {
          margin-bottom: 0; }
        #Contents .ThreeCase .CaseFlex .CaseContent .ImageBlock .ImageBox {
          height: 220px; }
        #Contents .ThreeCase .CaseFlex .CaseContent .CaseText {
          padding: 16px 14px; }
          #Contents .ThreeCase .CaseFlex .CaseContent .CaseText h2 {
            padding-bottom: 6px; } }

#Contents .ThreeCase .CaseFlex .CaseContent a .ImageBlock .ImageBox.Movie {
    position: relative;
}
#Contents .ThreeCase .CaseFlex .CaseContent a .ImageBlock .ImageBox.Movie::before {
  content: "";
	position: absolute;
	z-index: 1;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	border: 5px solid #ffffff;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: 0.7;
}
#Contents .CaseListFlex .CaseListContent .ImageBlock .Movie::before {
  content: "";
	position: absolute;
	z-index: 1;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -30px;
	border: 5px solid #ffffff;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: 0.7;
}
#Contents .ThreeCase .CaseFlex .CaseContent a .ImageBlock .ImageBox.Movie::after {
  content: "";
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	margin: -21px 0 0 -7px;
	border-left: solid 28px #ffffff;
	border-top: solid 21px transparent;
	border-bottom: solid 21px transparent;
	opacity: 0.7;
}
#Contents .CaseListFlex .CaseListContent .ImageBlock .Movie::after {
  content: "";
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	margin: -14px 0 0 -7px;
	border-left: solid 21px #ffffff;
	border-top: solid 14px transparent;
	border-bottom: solid 14px transparent;
	opacity: 0.7;
}

#Contents .CaseList {
  width: 100%;
  background: #ebebe8;
  padding: 50px 0 140px; }
  #Contents .CaseList .CaseListFlex {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto; }
    #Contents .CaseList .CaseListFlex .CaseListContent {
      width: 580px;
      height: 200px;
      margin-bottom: 40px; }
      #Contents .CaseList .CaseListFlex .CaseListContent a {
        background: #fff;
        display: flex;
        width: 100%;
        height: 100%;
        text-decoration: none; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .ImageBlock {
          position: relative;
          overflow: hidden;
          width: 230px;
          height: 200px; }
          #Contents .CaseList .CaseListFlex .CaseListContent a .ImageBlock .ImageBox {
            width: 100%;
            height: 100%;
            background: #aaa;
            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: 768px) {
          #Contents .CaseList .CaseListFlex .CaseListContent 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 .CaseList .CaseListFlex .CaseListContent a .CaseListContentText {
          width: 350px;
          padding: 20px 30px; }
          #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText h2 {
            text-align: left;
            font-size: 112.5%;
            color: #b1000e;
            padding-bottom: 0;
            margin-bottom: 8px; }
            #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText h2: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 4px bottom;
              background-size: cover; }
          #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText p {
            font-size: 87.5%;
            color: #4d4d4d; }
@media screen and (max-width: 1275px) {
  #Contents .CaseList .CaseListFlex {
    width: 100%; }
    #Contents .CaseList .CaseListFlex .CaseListContent {
      width: 48%; }
      #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText {
        padding: 14px 10px; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText p {
          font-size: 81.25%; } }
@media screen and (max-width: 900px) {
  #Contents br.l {
    display: none; }
  #Contents br.m {
    display: block; }
  #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText {
    padding: 10px; }
    #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText h2 {
      margin-bottom: 0; } }
@media screen and (max-width: 768px) {
  #Contents br.m {
    display: none; }
  #Contents .CaseList {
    padding: 40px 0 70px; }
    #Contents .CaseList .CaseListFlex .CaseListContent {
      width: 100%;
      height: 176px;
      margin-bottom: 20px; }
      #Contents .CaseList .CaseListFlex .CaseListContent a .ImageBlock {
        width: 40%;
        height: 100%;
        overflow: hidden; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .ImageBlock .ImageBox {
          width: 100%;
          height: 100%; }
      #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText {
        width: 60%;
        padding: 14px 10px 0 10px; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText h2 {
          font-size: 87.5%;
          margin-bottom: 6px; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText p {
          font-size: 81.25%;
          line-height: 1.4; }
      #Contents .CaseList .CaseListFlex .CaseListContent.Case1 .ImageBlock .ImageBox {
        background-position: center top; }
      #Contents .CaseList .CaseListFlex .CaseListContent.Case4 .ImageBlock .ImageBox {
        background-position: right bottom; }
      #Contents .CaseList .CaseListFlex .CaseListContent.Case5 .ImageBlock .ImageBox {
        background-position: top left; }
      #Contents .CaseList .CaseListFlex .CaseListContent.Case7 .ImageBlock .ImageBox {
        background-position: center top; }
      #Contents .CaseList .CaseListFlex .CaseListContent.Case8 .ImageBlock .ImageBox {
        background-position: left bottom; } }
@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 .CaseList .CaseListFlex .CaseListContent {
    height: 240px; }
    #Contents .CaseList .CaseListFlex .CaseListContent a {
      display: block; }
      #Contents .CaseList .CaseListFlex .CaseListContent a .ImageBlock {
        width: 100%;
        height: 50%;
        padding: 0; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .ImageBlock .ImageBox {
          width: 100%;
          height: 100%; }
      #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText {
        width: 100%;
        padding: 10px 10px 14px 10px; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText h2 {
          margin-bottom: 0; }
        #Contents .CaseList .CaseListFlex .CaseListContent a .CaseListContentText p {
          line-height: 1.4; } }