@charset "UTF-8";
.listPageTtl {
  max-width: 1160px;
  margin: 0 auto;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}
@media print, screen and (min-width: 768px) {
  .listPageTtl {
    padding: 2.5em 30px .8em;
    font-size: 175%;
  }
}
@media screen and (max-width: 767px) {
  .listPageTtl {
    padding: 2.5em 4% 2em;
    text-align: center;
    font-size: 184%;
  }
}

.productList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.productList .item a {
  display: block;
  text-align: center;
  transition: color .15s linear;
}
.productList .item .thumb {
  padding: 12.5%;
  border: 1px solid #d8d8d8;
}
.productList .item .thumb img {
  transition: transform .3s ease;
}
.productList .item .name {
  padding-top: .8em;
  line-height: 1.75;
  font-weight: bold;
}
.productList .item .name .note {
  font-size: 90%;
  line-height: 1.2;
}
@media print, screen and (min-width: 768px) {
  .productList .item a:hover {
    color: #666;
  }
  .productList .item a:hover img {
    transform: scale(1.08);
  }
}
@media print, screen and (min-width: 768px) and (max-width: 999px) {
  .productList {
    margin-left: -20px;
  }
  .productList .item {
    width: calc(33.33% - 20px);
    margin-left: 20px;
  }
  .productList .item:nth-child(n+4) {
    padding-top: 30px;
  }
}
@media print, screen and (min-width: 1000px) {
  .productList {
    margin-left: -30px;
  }
  .productList .item {
    width: calc(25% - 30px);
    margin-left: 30px;
  }
  .productList .item:nth-child(n+5) {
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .productList {
    margin-left: -15px;
  }
  .productList .item {
    width: calc(50% - 15px);
    margin-left: 15px;
  }
  .productList .item:nth-child(n+3) {
    padding-top: 20px;
  }
  .productList .item .name {
    line-height: 1.46;
  }
}

.productDetail {
  text-align: center;
}
.productDetail .ProductsOneTop {
  padding: 2em 4%;
  text-align: left;
  background: #f8f8f8;
}
.productDetail .ProductsOneTop p {
  max-width: 720px;
  margin: 0 auto;
  text-align: justify;
}
.productDetail h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}
.productDetail h1 .en {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'メイリオ', Meiryo, sans-serif;
}
.productDetail .ProductsInfo,
.productDetail .ProductsMark {
  width: 92%;
  max-width: 840px;
  margin: 0 auto;
}
.productDetail .ProductsInfo th,
.productDetail .ProductsMark th {
  vertical-align: middle;
  padding: 2em 0;
  font-weight: 700;
  border-top: 1px solid #e1e1e1;
}
.productDetail .ProductsInfo td,
.productDetail .ProductsMark td {
  padding: 1.5em 0 1.5em 1em;
  text-align: left;
  border-top: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
}
.productDetail .ProductsInfo tr:first-of-type th,
.productDetail .ProductsInfo tr:first-of-type td,
.productDetail .ProductsMark tr:first-of-type th,
.productDetail .ProductsMark tr:first-of-type td {
  border-top: none;
}
.productDetail .ProInfoSp ul {
  padding-left: 1.5em;
}
.productDetail .ProInfoSp ul li {
  list-style: circle;
}
.productDetail .ProInfoSp ul li + li {
  padding-top: 1em;
}
.productDetail .ProductsCustomerContents a,
.productDetail .productsPDF a {
  position: relative;
  display: inline-block;
  padding: .5em 3em;
  font-weight: bold;
  border: 1px solid #707070;
  border-radius: 20em;
  background: #fff;
  transition: background .15s linear;
}
.productDetail .ProductsCustomerContents a:after,
.productDetail .productsPDF a:after {
  content: "";
  display: block;
  position: absolute;
  right: 1em;
  top: 50%;
  width: .6em;
  height: .6em;
  margin-top: -0.3em;
  box-sizing: border-box;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(45deg);
  transition: right .15s linear;
}
@media print, screen and (min-width: 768px) {
  .productDetail {
    padding: 40px 0 80px;
  }
  .productDetail h1 {
    padding-bottom: 1.5em;
    font-size: 200%;
  }
  .productDetail h1 .en {
    font-size: 50%;
    color: #b1acac;
  }
  .productDetail h5 {
    font-size: 100%;
    padding-bottom: .2em;
  }
  .productDetail .mainImg {
    padding-bottom: 20px;
  }
  .productDetail .ProductsOneTop,
  .productDetail .ProductsInfo,
  .productDetail .ProductsMark,
  .productDetail .ProductsCustomerContents {
    margin-bottom: 60px;
  }
  .productDetail .productMovie {
    max-width: 790px;
    margin: 0 auto;
    padding-bottom: 60px;
  }
  .productDetail .ProductsInfo th,
  .productDetail .ProductsMark th {
    width: 15.25%;
  }
  .productDetail .ProductsPDFimg {
    padding-bottom: 20px;
    width: 120px;
    margin: 0 auto;
  }
  .productDetail .ProductsPDFimg img {
    transition: opacity .3s ease;
  }
  .productDetail .ProductsPDFimg a:hover img {
    opacity: .8;
  }
  .productDetail .ProductsCustomerContents a:hover,
  .productDetail .productsPDF a:hover {
    background: #f2f2f2;
  }
  .productDetail .ProductsCustomerContents a:hover:after,
  .productDetail .productsPDF a:hover:after {
    right: .8em;
  }
}
@media screen and (max-width: 767px) {
  .productDetail {
    padding: 4% 0 8%;
  }
  .productDetail h1 {
    padding-bottom: .8em;
    font-size: 160%;
    line-height: 1.45;
  }
  .productDetail h1 .en {
    font-size: 50%;
    color: #b1acac;
  }
  .productDetail .mainImg {
    padding-bottom: 8%;
  }
  .productDetail .ProductsOneTop,
  .productDetail .ProductsInfo,
  .productDetail .ProductsMark,
  .productDetail .ProductsCustomerContents {
    margin-bottom: 8%;
  }
  .productDetail .productMovie {
    padding: 0 4% 8%;
  }
  .productDetail .ProductsInfo th,
  .productDetail .ProductsMark th {
    width: 5.5em;
  }
  .productDetail .ProductsPDFimg {
    padding: 0 4% 6%;
  }
  .productDetail .ProductsPDFimg img {
    width: 50%;
  }
  .productDetail .ProductsCustomerContents,
  .productDetail .productsPDF {
    padding: 0 4%;
  }
  .productDetail .ProductsCustomerContents a,
  .productDetail .productsPDF a {
    display: block;
  }
}

.regLinkBlock {
  text-align: center;
  border: 1px solid #cecece;
  background: #fafafa;
}
.regLinkBlock .ttl {
  font-size: 1.125rem;
}
@media print, screen and (min-width: 768px) {
  .regLinkBlock {
    padding: 4rem 2rem;
  }
}
@media screen and (max-width: 767px) {
  .regLinkBlock {
    padding: 6%;
  }
}