/* 画像サイズ比率固定 */
figure.aspect53>img{
  aspect-ratio: 560/340;
  object-fit: cover;
}
/* 画像サイズ比率固定 */
figure.aspect43>img{
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* 左表示 */
.box-system.mainBlock > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 1rem;
}
.box-system.mainBlock > div:last-child{
  margin-bottom: 0;
}
.box-system.mainBlock a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background: #fff;
  flex-grow: 1;
}
.box-system.mainBlock > div figure ,
.box-system.mainBlock a figure {
  max-width: 60.5%;
  overflow: hidden;
}
.box-system.mainBlock a figure img {
  transition: 1s all;
}
.box-system.mainBlock a:hover figure img {
  transform: scale(1.2, 1.2);
  transition: 1s all;
}
.box-system.mainBlock > div div ,
.box-system.mainBlock a div {
  padding: 2em;
  flex-grow: 1;
}
.box-system.mainBlock > div div .title ,
.box-system.mainBlock a div .title {
  font-size: clamp(1.4rem, 1.4vw, 1.8rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}

/* 右表示 */
.box-system.mainBlock2 > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 1rem;
}
.box-system.mainBlock2 > div:last-child{
  margin-bottom: 0;
}
.box-system.mainBlock2 a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background: #fff;
  flex-grow: 1;
}
.box-system.mainBlock2 > div figure ,
.box-system.mainBlock2 a figure {
  max-width: 60.5%;
  overflow: hidden;
}
.box-system.mainBlock2 a figure img {
  transition: 1s all;
}
.box-system.mainBlock2 a:hover figure img {
  transform: scale(1.2, 1.2);
  transition: 1s all;
}
.box-system.mainBlock2 > div div ,
.box-system.mainBlock2 a div {
  padding: 2em;
  flex-grow: 1;
}
.box-system.mainBlock2 > div div .title ,
.box-system.mainBlock2 a div .title {
  font-size: clamp(1.4rem, 1.4vw, 1.8rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}

/* 上表示 */
.box-system.subBlock1 {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: grid;
  justify-content: center;
}
.box-system.subBlock1.contntline1{
  grid-template-columns: repeat(1,calc(100% / 3 ) );
}
.box-system.subBlock1.contntline2{
  grid-template-columns: repeat(2,calc(100% / 3 ));
}
.box-system.subBlock1.contntline3,
.box-system.subBlock1.contntline4,
.box-system.subBlock1.contntline5{
  grid-template-columns: repeat(3,calc(100% / 3 ));
}
.box-system.subBlock1 > * {
  background: #fff;
  font-weight: bold;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin: 0.5em;
}
.box-system.subBlock1 > * > p:not(:last-of-type){
  margin-bottom: 0;
}
.box-system.subBlock1 > * figure {
  overflow: hidden;
}
.box-system.subBlock1 a figure img {
  transition: 1s all;
}
.box-system.subBlock1 a:hover figure img {
  transform: scale(1.2, 1.2);
  transition: 1s all;
}
.box-system.subBlock1 > * .title{
  display: flex;
  justify-content: center;
}
.box-system.subBlock1 > * .title > span {
  margin: 0;
  width: unset;
  display: inline-block;
  padding: 1.5em 2em;
}
.box-system.subBlock1 > * .title > span.title-top{
  padding: 1.5em 0 0;
}
.box-system.subBlock1 > * .caption > span{
  font-weight: normal;
  margin: 0;
  display: inline-block;
  padding: 0 2em 2em;
}

/* 下表示 */
.box-system.subBlock2 {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: grid;
  justify-content: center;
}
.box-system.subBlock2.contntline1{
  grid-template-columns: repeat(1,calc(100% / 3 ) );
}
.box-system.subBlock2.contntline2{
  grid-template-columns: repeat(2,calc(100% / 3 ));
}
.box-system.subBlock2.contntline3,
.box-system.subBlock2.contntline4,
.box-system.subBlock2.contntline5{
  grid-template-columns: repeat(3,calc(100% / 3 ));
}
.box-system.subBlock2 > * {
  background: #fff;
  font-weight: bold;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin: 0.5em;
}
.box-system.subBlock2 > * > p:not(:last-child){
  margin-bottom: 0;
}
.box-system.subBlock2 > * figure {  
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.box-system.subBlock2 a figure img {
  transition: 1s all;
}
.box-system.subBlock2 a:hover figure img {
  transform: scale(1.2, 1.2);
  transition: 1s all;
}
.box-system.subBlock2 > * .title{
  display: flex;
  justify-content: center;
}
.box-system.subBlock2 > * .title > span{
  margin: 0;
  width: unset;
  display: inline-block;
  padding: 1.5em 2em;
}
.box-system.subBlock2 > * .title > span.title-top{
  padding: 1.5em 0 0;
}
.box-system.subBlock2 > * .caption > span{
  font-weight: normal;
  margin: 0;
  display: inline-block;
  padding: 0 2em 2em;
}

@media only screen and (max-width: 767px) {
  .box-system {
    margin-top: 30px;
  }
  /* 左表示 */
  .box-system.mainBlock > div {
    flex-direction: column;
  }
  .box-system.mainBlock > div figure,
  .box-system.mainBlock > div div {
    width: 100%;
  }
  .box-system.mainBlock a {
    flex-direction: column;
  }
  .box-system.mainBlock a figure,
  .box-system.mainBlock a div {
    width: 100%;
  }
  /* 右表示 */
  .box-system.mainBlock2 > div {
    flex-direction: column;
  }
  .box-system.mainBlock2 > div figure,
  .box-system.mainBlock2 > div div {
    width: 100%;
  }
  .box-system.mainBlock2 a {
    flex-direction: column;
  }
  .box-system.mainBlock2 a figure,
  .box-system.mainBlock2 a div {
    width: 100%;
  }
  /* 上表示 */
  .box-system.subBlock1 {
    flex-direction: column;
    gap: 0;
  }
  .box-system.subBlock1.contntline1,
  .box-system.subBlock1.contntline2,
  .box-system.subBlock1.contntline3,
  .box-system.subBlock1.contntline4,
  .box-system.subBlock1.contntline5{
    grid-template-columns: repeat(1 , 100%);
  }
  .box-system.subBlock1 > * {
    width: 100%;
  }
  .box-system.subBlock1 > * + * {
    margin-top: 15px;
  }
  .box-system.subBlock1 > * .title > span {
    min-height: inherit;
    padding: 1em;
  }
  
  /* 下表示 */
  .box-system.subBlock2 {
    flex-direction: column;
    gap: 0;
  }
  .box-system.subBlock2.contntline1,
  .box-system.subBlock2.contntline2,
  .box-system.subBlock2.contntline3,
  .box-system.subBlock2.contntline4,
  .box-system.subBlock2.contntline5{
    grid-template-columns: repeat(1 , 100%);
  }
  .box-system.subBlock2 > * + * {
    margin-top: 15px;
  }
  .box-system.subBlock2 > * .title > span {
    min-height: inherit;
    padding: 1em;
  }
}

/* 製品用 */
.box-products {
  display: grid;
  gap: 0;
  justify-content: center;
}
.box-products.contntline1{
  grid-template-columns: repeat(1,calc(100% / 3 ) );
}
.box-products.contntline2{
  grid-template-columns: repeat(2,calc(100% / 3 ));
}
.box-products.contntline3,
.box-products.contntline4,
.box-products.contntline5{
  grid-template-columns: repeat(3,calc(100% / 3 ));
}
.box-products.contntline4 > *:nth-child(-n+3),
.box-products.contntline5 > *:nth-child(-n+3){
  margin-bottom: 40px ;
}
.box-products > *{
  width: unset;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin-right: 1rem;
  margin-left: 1rem;
}
.box-products > * > p:not(:last-of-type){
  margin-top: 0;
  margin-bottom: 0;
}
.box-products > * .title > span {
  margin: 0;
  width: unset;
  display: block;
  padding: 1.5em 1.2vw;
}
.box-products > * .title > span.title-top{
  padding: 1.5em 0 0;
}
.box-products > * > p.caption > span {
  display: inline-block;
  margin: 0;
  padding: 1.5em 1.2vw ;
}

@media only screen and (max-width: 767px) {
  .box-products {
    gap: 0;
  }
  .box-products.contntline1,
  .box-products.contntline2,
  .box-products.contntline3,
  .box-products.contntline4,
  .box-products.contntline5{
    grid-template-columns: repeat(1 , 100%);
  }
}

/* ソリューション用 */
.box-solution {
  margin-top: 58px;
  display: grid;
  justify-content: center;
}
.box-solution.contntline1{
  grid-template-columns: repeat(1,calc(100% / 4 ) );
}
.box-solution.contntline2{
  grid-template-columns: repeat(2,calc(100% / 4 ));
}
.box-solution.contntline3{
  grid-template-columns: repeat(3,calc(100% / 4 ));
}
.box-solution.contntline4{
  grid-template-columns: repeat(4,calc(100% / 4 ));
}
.box-solution.contntline5{
  grid-template-columns: repeat(5,calc(100% / 5 ));
}
.box-solution > * {
  width: unset;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin-bottom: 0;
}
.box-solution > * + * {
  border-left: solid 1px #9D9D9D;
}
.box-solution a figure {
  overflow: hidden;
}
.box-solution a figure img {
  transition: 1s all;
}
.box-solution a:hover figure img {
  transform: scale(1.2, 1.2);
  transition: 1s all;
}
.box-solution .title {
  font-size: clamp(1.2rem, 1.6vw, 1.7rem);
  font-weight: bold;
  line-height: 1.35;
  text-align: center;
  margin: 1.5em 0;
  padding: 0 1.2vw;
}
.box-solution .title-top{
  padding: 1.5em 0 0;
}
.box-solution .caption {
  display: inline-block;
  margin: 0 1.2vw 2em;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}
@media only screen and (max-width: 767px) {
  .box-solution.contntline1,
  .box-solution.contntline2,
  .box-solution.contntline3,
  .box-solution.contntline4,
  .box-solution.contntline5 {
    margin-top: 30px;
    grid-template-columns: repeat(2,calc(100% / 2 ) );
  }
  .box-solution > * + * {
    border: none;
  }
  .box-solution > *:nth-child(2n) {
    border-left: solid 1px #9D9D9D;
  }
  .box-solution .title + p {
    padding: 0 1.5em;
  }
}

/* 事例用 */
.box-case-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 52px;
}
.box-case-area:after {
  content: "";
  display: block;
  width: 31.1%;
}
.box-case-area > * {
  background: #fff;
  display: block;
  width: 31.1%;
  margin-bottom: 29px;
  position: relative;
}
.box-case-area a:hover figure img {
  transform: scale(1.2, 1.2);
  transition: 1s all;
}
.box-case-area > * .new:before {
  content: 'NEW';
  color: #fff;
  font-size: clamp(1.4rem, 1.6vw, 2.2rem);
  font-weight: bold;
  line-height: 3;
  position: absolute;
  top: 0;
  left: 5px;
  z-index: 4;
  transform: rotate(-45deg);
}
.box-case-area > * .new:after {
  content: "";
  position: absolute;
  top: -70px;
  left: -70px;
  width: 0px;
  border-color: #FF7F00;
  border-style: solid;
  border-width: 70px;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 3;
}
.box-case-area .box-case figure {
  position: relative;
  overflow: hidden;
}
.box-case-area .box-case figure:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.box-case-area .box-case figure span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: clamp(1.6rem, 1.5vw, 2rem);
  font-weight: bold;
  z-index: 2;
  padding: 1rem;
}
.box-case-area .box-case figure img {
  transition: 1s all;
}
.box-case-area .title {
  font-size: clamp(1.3rem, 1.2vw, 1.6rem);
  font-weight: bold;
  line-height: 1.375;
  text-align: center;
  padding: 31px 18px 22px;
  margin: 0;
  text-decoration: underline;
}
.box-case-area .day {
  display: block;
  text-align: right;
  font-size: 1.4rem;
  text-align: right;
  padding: 0 18px 1em;
}
.box-case-area .tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0 18px 18px;
}
.box-case-area .tags span {
  border: solid 1px #004DA0;
  border-radius: 4px;
  color: #004DA0;
  font-size: 1.2rem;
  line-height: 2;
  margin-bottom: 10px;
  margin-right: 9px;
  padding: 0 .5em;
}

@media only screen and (max-width: 767px) {
  .box-case-area > * {
    width: 100%;
  }
  .box-case-area .new:after {
    top: -54px;
    left: -54px;
    border-width: 54px;
  }
}

/* 製品詳細用 */
.box-product.main > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.box-product.main > div:last-child{
  margin-bottom: 0;
}
.box-product.main figure {
  width: 40%;
}
.box-product.main > div > div {
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  width: 57.5%;
}
.box-product.main > div > div > .title{
  font-size: clamp(1.4rem, 1.4vw, 1.8rem);
  font-weight: bold;
}
@media only screen and (max-width: 767px) {
  .box-product.main > div {
    flex-direction: column;
  }
  .box-product.main figure,
  .box-product.main div {
    width: 100%;
  }
  .box-product.main > div > div {
    margin-top: 20px;
    width: 100%;
  }
}