@charset "UTF-8";
.margin-top{
	margin: 2em 0 0.5em !important;
}
.margin-bottom{
	margin: 0.5em 0 2em !important;
}
.margin-both{
	margin: 2em 0 !important;
}

.flex.column{
	flex-direction: column;
}

.list-article-container{
  display: flex;
  padding: 0 1em;

}

.products-article-container{
  display: flex;
  padding: 0 1em;

}
.article-container article section div.flex{
  gap: .6rem;
  align-items: baseline;
}
.article-container article section div.flex > div{
  flex: 1 1 50%;
}
.article-container .image-container img{
  width: 100%;
  max-width: 780px;
  padding: 1rem;
  object-fit: contain;
  vertical-align: top;
  
}


.article-container article section .flex.justify-center{
  justify-content: center;
}
.article-container article section .flex.align-items-center{
  align-items: center;
}
.article-container .blue{
  color: #140A9A;
}
.article-container .bold{
  font-weight: 600;
}

.bg-gray{
  background-color: #F7F8F9;
}
.article-container article section .pad{
  padding: 1.2rem;
}
.article-container .margin{
  margin: .84rem 0 .84rem;
}
.article-container .xx-large{
  font-size: 1.47rem;
}
.article-container .x-large{
  font-size: 1.27rem;
}
.article-container .x-small{
  font-size: .94rem;
}
/* .article-container ul{
  list-style-position: inside !important;
}
.article-container ul:has(span.blue) li::marker{
  color: #140A9A;
}

.article-container  ul.list-style-decimal{
  list-style: decimal;
}
.article-container  ul.list-style-disc{
  list-style: disc;
} */

.article-container h1,
.article-container h2,
.article-container h3,
.article-container h4{
  color: #140A9A;
}
.article-container h1{
  font-size: 2.8rem;
  line-height: 1.8em;
  letter-spacing: .05em;
  font-weight: 600;
  border-bottom: 1px solid #140A9A;
  padding: .6rem 0;
}

.article-container article section{
  padding: 2.68rem 0 0;
}

.article-container article section h2{
  margin: 0 0 2.1rem;
  position: relative;
}

.article-container article section h2::before{
  content: '';
  width: 2.1rem;
  height: 1px;
  background-color: #140A9A;
  left: 0;
  top: 0;
  position: absolute;
  z-index: +1;
}
.article-container article section h2::after{
  content: '';
  width: 1.5rem;
  height: 4px;
  background-color: #140A9A;
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: +1;
}

.article-container article section p{
  padding: 0;
}
.article-container article section p a{
  color: #140A9A;
  text-decoration: underline;
}

.article-container article section h2{
  font-size: 2rem;
  line-height: 1.8em;
  letter-spacing: .025em;
  font-weight: 600;
}
.article-container article section h3{
  font-size: 1.34rem;

  letter-spacing: .025em;
  font-weight: 600;
}
.fs-middle,
.article-container article section p{
  font-size: 1.17rem;
  line-height: 1.8em;
  letter-spacing: .025em;
  font-weight: 500;
}
.article-container article section ul li{
  font-size: 1.1rem;
  line-height: 1.8em;
  letter-spacing: .025em;
  font-weight: 500;
}


/* .list-table-view li span:first-child {
  flex: 1 1 30%;

} */

.list-table-view li span:last-child {
  flex: 1 1;
}
.article-container article section div.flex.border > div{
  flex: 1;
}
.article-container article section .border{
  border: 1px solid #140A9A;
    padding: 1.13rem;
    gap: 1.13rem;
}
.article-container article section ul.list-table-view{

}
.article-container article section ul.list-table-view li.title-grid {
  display: flex;
  flex-wrap: wrap;
}
/* .article-container article section ul.list-table-view li.title-grid dl dt,
.article-container article section ul.list-table-view li.title-grid h3{
  flex: 1 1 20%; 
} */
.article-container article section ul.list-table-view li.title-grid dl{
  display: flex;
  flex-wrap: wrap;
}


.article-container article section ul.list-table-view li.title-grid div{
  flex: 1 1;
}
.article-container article section ul.list-table-view li.title-grid dd{
  flex: 1 1 ;
}


.wrap-title-searvice{
padding: 0;
}
.wrap-title-searvice .title-service{
  padding: 0.5em 0;
}


.list-article-container section.article-list{
  width: 100%;
  margin: 0 0 2.68rem;
}
.list-article-container section.article-list h1{
  font-size: 2rem;
  line-height: 1.8em;
  letter-spacing: .025em;
  font-weight: 600;
  border-bottom: 1px solid #140A9A;
  color: #140A9A;
  margin: 0 0 1.34rem;
  padding: .5em 0;
}
.list-article-container section.article-list ul{
  display: flex;
  gap: 1rem;
  margin: 3em 0;
}

.list-article-container section.article-list ul li{

      line-height: 1.8em;
      padding: .67rem;
      flex-basis: calc(25% - 1rem);

      background: #fff;
      display: flex;
      border: 1px solid #ddd;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      transition: all .2s;
      top: 0;
}
.list-article-container section.article-list ul li:hover{
  border: 1px solid #140a9a;
  -webkit-box-shadow: 0 3px 5px #d6d6d7;
  box-shadow: 0 3px 5px #d6d6d7;
  transition: all .2s;
  position: relative;
  top: -1rem;
}

.list-article-container section.article-list ul li a span.list-date{
  position: absolute;
  top: -.5rem;
  right: .5rem;
  color: #140A9A;
  background-color: #fff;
  border: 1px solid #140A9A;
  font-size: .7rem;
  padding: .25rem .5rem;
  z-index: 1;
  line-height: 100%;
}
.list-article-container section.article-list ul li:hover a span.list-date{
  background-color: #140A9A;
  color: #fff;
}
.list-article-container section.article-list ul li a h3{
  font-size: 1.14rem;
  color: #140A9A;
  width: 100%;
  position: relative;
  padding: 1rem 0 0;
  font-weight: 600;
  line-height: 1.8em;
}

.list-article-container section.article-list ul li a p{
  font-size: .9rem;
  padding: .25em 0 .5em;
  line-height: 1.8em;
}

.list-article-container section.article-list ul li div.list-image{
  height: 200px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  width: 100%;
  max-width: 300px;
}
.list-article-container section.article-list ul li:hover div.list-image{
  filter: grayscale(0%);
}

.products-article-container span.colon{
  display: inline;
}

@media screen and (max-width: 1080px) {
  .list-article-container section.article-list ul{
    display: block;
  }
  .list-article-container section.article-list ul li{
    display: block;
    margin: 0 0 1rem;
  }
  .list-article-container section.article-list ul li a{
    display: flex;
    flex-direction: row;
  }
}

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


  .products-article-container {
      padding: 0 .5em;
  }

  .products-article-container span.colon{
    display: none !important;
  }

  .article-container article section{
    padding: 0 0 1.4rem;
  }
  .article-container article section h2{
    margin: 0 0 .6rem;
  }
  .article-container article section .border,
  .article-container article section .pad{
    padding: .6rem;
  }
  .article-container .margin {
    margin: 0 0 .6rem;
  }


  .article-container h1{
    font-size: 1.34rem;
    margin: 0 0 .6rem;
  }

 
  .article-container article section h2 {
    font-size: 1.2rem;
  }
  .article-container article section h3,
  .article-container .x-large{
    font-size: 1.1rem;
  }
  .article-container .x-small {
    font-size: .9rem;
  }
  .fs-middle,
  .article-container article section ul li,
  .article-container article section p{
    font-size: 1rem;
  }

  .article-container article section h2::before,
  .article-container article section h2::after{
    content: none;
  }

  .list-table-view li span:first-child,
  .article-container article section ul.list-table-view li.title-grid dl,
  .article-container article section ul.list-table-view li.title-grid,
  .article-container article section ul li{
    display: block;
  }
  .list-table-view li p span:first-child{
    display: inline;
  }

  .list-article-container section.article-list ul {
    display: block;
    margin: 0 0 1em;
  }
  .list-article-container section.article-list h1{
    font-size: 1.1rem;
  }
  .list-article-container section.article-list ul li a h3{
    font-size: 1.1rem;
    padding: 0;
  }
  .list-article-container section.article-list ul li a p{
    font-size: .85rem;
  }
  .list-article-container section.article-list ul li{
    padding: .4rem;
  }

  .list-article-container section.article-list ul li div.list-image{
    height: inherit;
    max-width: 180px;
    filter: grayscale(0);
    /* display: none; */
  }
  .list-article-container section.article-list ul li div.list-text{
    padding-left: 1rem;
    padding-top: .25rem;
  }
  .wrap-title-searvice .title-service{
    line-height: inherit;
  }
  .wrap-title-searvice .title-service em{
    font-size: 1.2rem;
  }

  br.pc{
    display: block;
  }

}