@font-face {
  font-family: 'Noto-B';
  src: url("/asset/font/NotoSansJP-Bold.eot");
  src: url("/asset/font/NotoSansJP-Bold.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Bold.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-L';
  src: url("/asset/font/NotoSansJP-Light.eot");
  src: url("/asset/font/NotoSansJP-Light.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Light.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-R';
  src: url("/asset/font/NotoSansJP-Regular.eot");
  src: url("/asset/font/NotoSansJP-Regular.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Regular.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'Noto-M';
  src: url("/asset/font/NotoSansJP-Medium.eot");
  src: url("/asset/font/NotoSansJP-Medium.eot?iefix") format("eot"), url("/asset/font/NotoSansJP-Medium.woff") format("woff");
  font-display: swap; }

@font-face {
  font-family: 'TexGyreHeros';
  src: url("../font/texgyreheros-regular.eot");
  src: url("../font/texgyreheros-regular.eot?iefix") format("eot"), url("../font/texgyreheros-regular.woff") format("woff");
  font-display: swap; }

a {
  cursor: pointer; }

@media only screen and (max-width: 767px) {
  .dn-sp {
    display: none !important; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .dn-tablet {
    display: none !important; } }

@media only screen and (min-width: 1025px) {
  .dn-pc {
    display: none !important; } }

@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) {
  .dn-tab_pc {
    display: none !important; } }

.hovered {
  display: none; }

.mainVisual img {
  width: 100%; }

.wrapBox {
  margin-bottom: 60px; }
  @media only screen and (max-width: 767px) {
    .wrapBox a {
      color: #000; } }

.wrapBox_inner + .wrapBox_inner {
  margin-top: 70px; }
  @media only screen and (max-width: 767px) {
    .wrapBox_inner + .wrapBox_inner {
      margin-top: 40px; } }

.mainTitle {
  color: #000;
  text-align: center;
  margin-top: 45px;
  font-size: 38px;
  font-weight: bold; }
  @media only screen and (max-width: 767px) {
    .mainTitle {
      margin: 30px 0 10px;
      font-size: 22px;
      letter-spacing: -.02em; } }

.mainLead {
  color: #000;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6; }
  @media only screen and (min-width: 1025px), only screen and (min-width: 768px) {
    .mainLead {
      margin: 40px 0 60px; } }
  @media only screen and (max-width: 767px) {
    .mainLead {
      padding: 0 20px;
      margin: 20px 0 0; } }

@media only screen and (max-width: 767px) {
  .itemVisual_img {
    margin-top: 30px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .itemVisual_img {
    width: 400px;
    margin: 60px auto 0; } }

@media only screen and (min-width: 1025px) {
  .itemVisual_img {
    width: 530px;
    margin: 40px auto 0; } }

.itemVisual_img img {
  width: 100%; }

@media only screen and (min-width: 1025px) {
  .itemVisual_img a:hover {
    opacity: .7; } }

.itemVisual_title {
  text-align: center;
  color: #000;
  margin-top: 25px;
  font-size: 30px;
  font-weight: 600; }
  @media only screen and (max-width: 767px) {
    .itemVisual_title {
      margin: 30px 0 10px;
      font-size: 22px;
      letter-spacing: -.02em; } }

.itemVisual_lead {
  color: #000;
  text-align: center;
  margin: 30px 0 60px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6; }
  @media only screen and (min-width: 1025px), only screen and (min-width: 768px) {
    .itemVisual_lead {
      margin: 30px 0 0; } }
  @media only screen and (max-width: 767px) {
    .itemVisual_lead {
      text-align: left;
      padding: 0 20px;
      margin: 40px 0; } }

.itemVisual_namePrice {
  text-align: center;
  color: #000;
  margin-top: 25px;
  font-size: 15px;
  font-weight: 600; }
  @media only screen and (max-width: 767px) {
    .itemVisual_namePrice {
      margin: 20px 0 25px;
      font-size: 13px; } }
  .itemVisual_namePrice a {
    color: #000; }
    @media only screen and (min-width: 1025px) {
      .itemVisual_namePrice a:hover {
        opacity: .7; } }

@media only screen and (min-width: 1025px) {
  .itemList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 900px;
    margin: 50px auto 0;
    gap: 0 20px; } }

@media only screen and (min-width: 1025px) {
  .itemList a:hover {
    opacity: .7; } }

@media only screen and (min-width: 1025px) {
  .itemList_node a:hover {
    opacity: .7; } }

@media only screen and (max-width: 767px) {
  .itemList_node {
    width: 50%;
    display: block; }
    .itemList_node img {
      width: 100%; }
    .itemList_node:nth-child(2) {
      position: relative;
      margin-top: -35%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .itemList_node:last-child {
      position: relative;
      margin-top: -25%;
      left: 50%; } }

.itemVisual_imgList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 60px auto 0;
  gap: 0 20px; }
  @media only screen and (min-width: 1025px) {
    .itemVisual_imgList {
      width: 650px; } }
  @media only screen and (max-width: 767px) {
    .itemVisual_imgList {
      margin: 40px auto 0;
      padding: 0 20px; } }
  @media only screen and (min-width: 1025px) {
    .itemVisual_imgList a:hover {
      opacity: .7; } }

.moreButton {
  color: #000;
  display: block;
  width: 220px;
  border: 1px solid;
  margin: 30px auto 0;
  padding: 20px 0 19px;
  text-align: center;
  -webkit-transition: all .5s;
  transition: all .5s;
  border-radius: 50px;
  line-height: 1;
  font-size: 13px;
  font-weight: bold; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .moreButton {
      margin: 0 auto; } }
  @media only screen and (min-width: 1025px) {
    .moreButton:hover {
      background: #000;
      color: #fff; } }

.video {
  margin: 80px auto; }
  @media only screen and (min-width: 1025px) {
    .video {
      width: 560px; } }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) {
    .video {
      padding: 0 20px; }
      .video iframe {
        width: 100%; } }