/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */

.stocklist ul li .stn_contact p a.stnbn_mail {
  background-color: var(--color-666);
  background-image: url(../img/header/ic-mail_w.svg);
}
.stocklist ul li .stn_contact p a.stnbn_line {
  background-color: var(--color-jg);
  background-image: url(../img/header/ic-line_w.svg);
}


.stocklist ul li .stn_contact p a.stnbn_tel {
  background-color: var(--color-jg);
  background-image: url(../img/header/ic-tel_w.svg);
}



/* ----------------------------------------------------------
Style for PC(large)
---------------------------------------------------------- */
@media screen and (min-width: 1441px) {

  /* Stock menu */
  #togglermenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    margin-bottom: 50px;
  }
  .tmbase {
    width:100%;
    height: auto;
    display: block;
    padding:40px 5% 40px;
    background-color: var(--color-black);
  }
  #togglermenu.tgm_active {
    max-height: auto; /* 内容に応じて適切な高さに設定 */
  }
  #searchmenu {
    width:96%;
    height: auto;
    display: block;
    border-radius: 3px;
    margin:0 auto 40px;
    overflow: hidden;
  }
  #searchmenu h3 {
    width:100%;
    height: auto;
    display: 40px;
    font-size:16px;
    font-weight: 500;
    line-height: 40px;
    color:var(--color-white);
    background-color: var(--color-jg);
    cursor: pointer;
    padding: 0px 0;
  }
  #searchmenu h3 span {
    width:fit-content;
    height: auto;
    display: block;
    margin:0 auto;
    padding:0 50px 0 50px;
    background-image: url(../img/header/ic-stockmenu_open.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px auto;
  }

  #searchmenu h3.tgm_active {
    color:var(--color-white);
    background-color: var(--color-333);
  }
  #searchmenu h3.tgm_active span {
    background-image: url(../img/header/ic-stockmenu_close.svg);
    background-position: right center;
  }

  #togglermenu h4 {
    width:100%;
    height: auto;
    display: block;
    font-weight: 400;
  }
  #togglermenu h4 a {
    width:100%;
    height: auto;
    display: block;
    padding:0 20px;
    font-size:12px;
    line-height: 40px;
    text-align: right;
    color: var(--color-white);
    background-repeat: no-repeat;
    background-position: 2% center;
    background-size: auto 60px;
    text-decoration: none;
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu h4 a:hover {
    background-color: var(--color-1st);
  }
  #togglermenu h4 a.shopstock {
    width:100%;
    height: auto;
    display: block;
    padding:0 20px;
    font-size:16px;
    line-height: 40px;
    color: var(--color-white);
    text-align: left;
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: auto 30px;
    background-image: url(../img/midlands_logo.png);
    text-decoration: none;
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu h4 a.shopstock:hover {
    background-color: var(--color-1st);
  }

  #togglermenu ul {
    width:100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  #togglermenu ul li {
    width:24.6%;
    height: auto;
    display: block;
    font-size:12px;
    margin:0 0.2% 10px;
  }
  #togglermenu ul li a {
    width:100%;
    height: auto;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    color:var(--color-white);
    border: 1px solid var(--color-666);
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu ul li a:hover {
    background-color: var(--color-1st);
  }

  #togglermenu ul li.tm_singlebn {
    width:100%!important;
    height: auto;
    display: block;
    font-size:14px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  #togglermenu ul li.tm_singlebn a {
    width:100%!important;
    height: auto;
    display: block;
    text-align: center;
    color:var(--color-white);
    border: 1px solid var(--color-666);
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu ul li.tm_singlebn a:hover {
    background-color: var(--color-1st);
  }

/* Stock layout */
.stocklist {
  width:100%;
  height: auto;
  display: block;
}
.stocklist ul {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.stocklist ul li {
  width:23%;
  height: auto;
  display: block;
  margin:0 1% 40px;
  transition: .4s all;
  padding:1%;
}
.stocklist ul li:hover {
  background-color: var(--color-f0);
}
.stocklist ul li .stnimg {
  width:100%;
  height: auto;
  display: block;
  background-color: var(--color-black); clip-path: polygon(30% 0%, 85% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 85%, 0 0);
  transition: .4s all;
}
.stocklist ul li .stnimg:hover {
  clip-path: polygon(15% 0, 85% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 85%, 0 15%);
}
.stocklist ul li .stnimg a {
  width:100%;
  height: auto;
  display: block;
  overflow: hidden;
  clip-path: polygon(30% 0%, 85% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 85%, 0 0);
  transition: .4s all;
}
.stocklist ul li .stnimg a:hover {
  clip-path: polygon(15% 0, 85% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 85%, 0 15%);
  opacity: 0.5;
}
.stocklist ul li .stndata {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:15px 5px 20px;
}
.stocklist ul li .stndata p.stn_shopname {
  width:fit-content;
  height: auto;
  display: block;
  margin:0 0 0 auto;
  font-size: 12px;
  line-height: 1em;
  color:var(--color-666);
  border:1px solid var(--color-999);
  border-radius: 3px;
  padding:3px 5px;
}
.stocklist ul li .stndata h3 {
  font-size:12px;
  font-weight: 400;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 3px;
}
.stocklist ul li .stndata h4 {
  font-size:20px;
  font-weight: 700;
  line-height: 1.5em;
  color:var(--color-333);
  margin-bottom: 5px;
  transition: .4s all;
}
.stocklist ul li .stndata h4 a {
  display: block;
  color:var(--color-black);
  text-decoration: none;
}
.stocklist ul li .stndata h4 a:hover {
color:var(--color-666);
}
.stocklist ul li .stndata p.stn_com {
  font-size:12px;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 15px;
white-space: nowrap;
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 2; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}
.stocklist ul li .stndata .stnspec {
  width:100%;
  height:auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.stocklist ul li .stndata .stnspec dl {
  width:45%;
  height: auto;
  display: flex;
  padding:5px 0;
}
.stocklist ul li .stndata .stnspec dl dt {
  width:50%;
  font-size:12px;
  font-weight: 400;
  line-height: 1em;
  text-align: left;
  color:var(--color-666);
}
.stocklist ul li .stndata .stnspec dl dd {
  width:50%;
  font-size:12px;
  font-weight: 400;
  line-height: 1em;
  text-align: right;
  color:var(--color-666);
}
.stocklist ul li .stndata dl.price01m {
  width:70%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 10px auto;
}
.stocklist ul li .stndata dl.price01m dt {
  font-size:12px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price01m dd {
  font-size:14px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price01m dd strong {
  font-size:20px;
  font-weight: 700;
}
.stocklist ul li .stndata dl.price02m {
  width:70%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 0 auto;
}
.stocklist ul li .stndata dl.price02m dt {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price02m dd {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price02m dd strong {
  font-size:16px;
  font-weight: 400;
}
.stocklist ul li .stn_contact {
  width:100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.stocklist ul li .stn_contact p {
  width:48%;
  height: auto;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px!important;
  padding:0;
  margin:0;
}
.stocklist ul li .stn_contact p a {
  width:100%;
  height: 30px;
  display: block;
  text-align: right;
  padding:0 10px 0 0;
  border-radius: 3px;
  text-decoration: none;
  color:var(--color-white);
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: auto 28px;
  transition: .4s all;
}
.stocklist ul li .stn_contact p a:hover {
  background-color: var(--color-1st);
}

}

/* ----------------------------------------------------------
Style for PC(small)
---------------------------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1440px) {

  /* Stock menu */
#togglermenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  margin-bottom: 50px;
}
.tmbase {
  width:100%;
  height: auto;
  display: block;
  padding:40px 5% 40px;
  background-color: var(--color-black);
}
#togglermenu.tgm_active {
  max-height: auto; /* 内容に応じて適切な高さに設定 */
}
#searchmenu {
  width:96%;
  height: auto;
  display: block;
  border-radius: 3px;
  margin:0 auto 40px;
  overflow: hidden;
}
#searchmenu h3 {
  width:100%;
  height: auto;
  display: 40px;
  font-size:16px;
  font-weight: 500;
  line-height: 40px;
  color:var(--color-white);
  background-color: var(--color-jg);
  cursor: pointer;
  padding: 0px 0;
}
#searchmenu h3 span {
  width:fit-content;
  height: auto;
  display: block;
  margin:0 auto;
  padding:0 50px 0 50px;
  background-image: url(../img/header/ic-stockmenu_open.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40px auto;
}

#searchmenu h3.tgm_active {
  color:var(--color-white);
  background-color: var(--color-333);
}
#searchmenu h3.tgm_active span {
  background-image: url(../img/header/ic-stockmenu_close.svg);
  background-position: right center;
}

#togglermenu h4 {
  width:100%;
  height: auto;
  display: block;
  font-weight: 400;
}
#togglermenu h4 a {
  width:100%;
  height: auto;
  display: block;
  padding:0 20px;
  font-size:12px;
  line-height: 40px;
  text-align: right;
  color: var(--color-white);
  background-repeat: no-repeat;
  background-position: 2% center;
  background-size: auto 60px;
  text-decoration: none;
  border-radius: 3px;
  transition: .4s all;
}
#togglermenu h4 a:hover {
  background-color: var(--color-1st);
}
#togglermenu h4 a.shopstock {
  width:100%;
  height: auto;
  display: block;
  padding:0 20px;
  font-size:16px;
  line-height: 40px;
  color: var(--color-white);
  text-align: left;
  background-repeat: no-repeat;
  background-position: 98% center;
  background-size: auto 30px;
  background-image: url(../img/midlands_logo.png);
  text-decoration: none;
  border-radius: 3px;
  transition: .4s all;
}
#togglermenu h4 a.shopstock:hover {
  background-color: var(--color-1st);
}

#togglermenu ul {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#togglermenu ul li {
  width:24.6%;
  height: auto;
  display: block;
  font-size:12px;
  margin:0 0.2% 10px;
}
#togglermenu ul li a {
  width:100%;
  height: auto;
  display: block;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  color:var(--color-white);
  border: 1px solid var(--color-666);
  border-radius: 3px;
  transition: .4s all;
}
#togglermenu ul li a:hover {
  background-color: var(--color-1st);
}

#togglermenu ul li.tm_singlebn {
  width:100%!important;
  height: auto;
  display: block;
  font-size:14px;
  font-weight: 700;
  margin-bottom: 20px;
}
#togglermenu ul li.tm_singlebn a {
  width:100%!important;
  height: auto;
  display: block;
  text-align: center;
  color:var(--color-white);
  border: 1px solid var(--color-666);
  border-radius: 3px;
  transition: .4s all;
}
#togglermenu ul li.tm_singlebn a:hover {
  background-color: var(--color-1st);
}

/* Stock layout */
.stocklist {
  width:100%;
  height: auto;
  display: block;
}
.stocklist ul {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.stocklist ul li {
  width:31.33333333333%;
  height: auto;
  display: block;
  margin:0 1% 40px;
  transition: .4s all;
  padding:1%;
}
.stocklist ul li:hover {
  background-color: var(--color-f0);
}
.stocklist ul li .stnimg {
  width:100%;
  height: auto;
  display: block;
  background-color: var(--color-black); clip-path: polygon(30% 0%, 85% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 85%, 0 0);
  transition: .4s all;
}
.stocklist ul li .stnimg:hover {
  clip-path: polygon(15% 0, 85% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 85%, 0 15%);
}
.stocklist ul li .stnimg a {
  width:100%;
  height: auto;
  display: block;
  overflow: hidden;
  clip-path: polygon(30% 0%, 85% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 85%, 0 0);
  transition: .4s all;
}
.stocklist ul li .stnimg a:hover {
  clip-path: polygon(15% 0, 85% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 85%, 0 15%);
  opacity: 0.5;
}
.stocklist ul li .stndata {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:15px 5px 20px;
}
.stocklist ul li .stndata p.stn_shopname {
  width:fit-content;
  height: auto;
  display: block;
  margin:0 0 0 auto;
  font-size: 12px;
  line-height: 1em;
  color:var(--color-666);
  border:1px solid var(--color-999);
  border-radius: 3px;
  padding:3px 5px;
}
.stocklist ul li .stndata h3 {
  font-size:12px;
  font-weight: 400;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 3px;
}
.stocklist ul li .stndata h4 {
  font-size:20px;
  font-weight: 700;
  line-height: 1.5em;
  color:var(--color-333);
  margin-bottom: 5px;
  transition: .4s all;
}
.stocklist ul li .stndata h4 a {
  display: block;
  color:var(--color-black);
  text-decoration: none;
}
.stocklist ul li .stndata h4 a:hover {
color:var(--color-666);
}
.stocklist ul li .stndata p.stn_com {
  font-size:12px;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 15px;
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 2; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}
.stocklist ul li .stndata .stnspec {
  width:100%;
  height:auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.stocklist ul li .stndata .stnspec dl {
  width:45%;
  height: auto;
  display: flex;
  padding:5px 0;
}
.stocklist ul li .stndata .stnspec dl dt {
  width:50%;
  font-size:12px;
  font-weight: 400;
  line-height: 1em;
  text-align: left;
  color:var(--color-666);
}
.stocklist ul li .stndata .stnspec dl dd {
  width:50%;
  font-size:12px;
  font-weight: 400;
  line-height: 1em;
  text-align: right;
  color:var(--color-666);
}
.stocklist ul li .stndata dl.price01m {
  width:70%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 10px auto;
}
.stocklist ul li .stndata dl.price01m dt {
  font-size:12px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price01m dd {
  font-size:14px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price01m dd strong {
  font-size:20px;
  font-weight: 700;
}
.stocklist ul li .stndata dl.price02m {
  width:70%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 0 auto;
}
.stocklist ul li .stndata dl.price02m dt {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price02m dd {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price02m dd strong {
  font-size:16px;
  font-weight: 400;
}
.stocklist ul li .stn_contact {
  width:100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.stocklist ul li .stn_contact p {
  width:48%;
  height: auto;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px!important;
  padding:0;
  margin:0;
}
.stocklist ul li .stn_contact p a {
  width:100%;
  height: 30px;
  display: block;
  text-align: right;
  padding:0 10px 0 0;
  border-radius: 3px;
  text-decoration: none;
  color:var(--color-white);
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: auto 28px;
  transition: .4s all;
}
.stocklist ul li .stn_contact p a:hover {
  background-color: var(--color-1st);
}

}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {


  /* Stock menu */
  #togglermenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    margin-bottom: 50px;
  }
  .tmbase {
    width:100%;
    height: auto;
    display: block;
    padding:40px 5% 40px;
    background-color: var(--color-black);
  }
  #togglermenu.tgm_active {
    max-height: auto; /* 内容に応じて適切な高さに設定 */
  }
  #searchmenu {
    width:96%;
    height: auto;
    display: block;
    border-radius: 3px;
    margin:0 auto 40px;
    overflow: hidden;
  }
  #searchmenu h3 {
    width:100%;
    height: auto;
    display: 40px;
    font-size:16px;
    font-weight: 500;
    line-height: 40px;
    color:var(--color-white);
    background-color: var(--color-jg);
    cursor: pointer;
    padding: 0px 0;
  }
  #searchmenu h3 span {
    width:fit-content;
    height: auto;
    display: block;
    margin:0 auto;
    padding:0 50px 0 50px;
    background-image: url(../img/header/ic-stockmenu_open.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px auto;
  }

  #searchmenu h3.tgm_active {
    color:var(--color-white);
    background-color: var(--color-333);
  }
  #searchmenu h3.tgm_active span {
    background-image: url(../img/header/ic-stockmenu_close.svg);
    background-position: right center;
  }

  #togglermenu h4 {
    width:100%;
    height: auto;
    display: block;
    font-weight: 400;
  }
  #togglermenu h4 a {
    width:100%;
    height: auto;
    display: block;
    padding:0 20px;
    font-size:12px;
    line-height: 40px;
    text-align: right;
    color: var(--color-white);
    background-repeat: no-repeat;
    background-position: 2% center;
    background-size: auto 60px;
    text-decoration: none;
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu h4 a:hover {
    background-color: var(--color-1st);
  }
  #togglermenu h4 a.shopstock {
    width:100%;
    height: auto;
    display: block;
    padding:0 20px;
    font-size:16px;
    line-height: 40px;
    color: var(--color-white);
    text-align: left;
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: auto 30px;
    background-image: url(../img/midlands_logo.png);
    text-decoration: none;
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu h4 a.shopstock:hover {
    background-color: var(--color-1st);
  }

  #togglermenu ul {
    width:100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  #togglermenu ul li {
    width:24.6%;
    height: auto;
    display: block;
    font-size:12px;
    margin:0 0.2% 10px;
  }
  #togglermenu ul li a {
    width:100%;
    height: auto;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    color:var(--color-white);
    border: 1px solid var(--color-666);
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu ul li a:hover {
    background-color: var(--color-1st);
  }

  #togglermenu ul li.tm_singlebn {
    width:100%!important;
    height: auto;
    display: block;
    font-size:14px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  #togglermenu ul li.tm_singlebn a {
    width:100%!important;
    height: auto;
    display: block;
    text-align: center;
    color:var(--color-white);
    border: 1px solid var(--color-666);
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu ul li.tm_singlebn a:hover {
    background-color: var(--color-1st);
  }


/* Stock layout */
.stocklist {
  width:100%;
  height: auto;
  display: block;
}
.stocklist ul {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.stocklist ul li {
  width:48%;
  height: auto;
  display: block;
  margin:0 1% 40px;
  transition: .4s all;
  padding:1%;
}
.stocklist ul li:hover {
  background-color: var(--color-f0);
}
.stocklist ul li .stnimg {
  width:100%;
  height: auto;
  display: block;
  background-color: var(--color-black); clip-path: polygon(30% 0%, 85% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 85%, 0 0);
  transition: .4s all;
}
.stocklist ul li .stnimg:hover {
  clip-path: polygon(15% 0, 85% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 85%, 0 15%);
}
.stocklist ul li .stnimg a {
  width:100%;
  height: auto;
  display: block;
  overflow: hidden;
  clip-path: polygon(30% 0%, 85% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 85%, 0 0);
  transition: .4s all;
}
.stocklist ul li .stnimg a:hover {
  clip-path: polygon(15% 0, 85% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 85%, 0 15%);
  opacity: 0.5;
}
.stocklist ul li .stndata {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:15px 5px 20px;
}
.stocklist ul li .stndata p.stn_shopname {
  width:fit-content;
  height: auto;
  display: block;
  margin:0 0 0 auto;
  font-size: 12px;
  line-height: 1em;
  color:var(--color-666);
  border:1px solid var(--color-999);
  border-radius: 3px;
  padding:3px 5px;
}
.stocklist ul li .stndata h3 {
  font-size:12px;
  font-weight: 400;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 3px;
}
.stocklist ul li .stndata h4 {
  font-size:20px;
  font-weight: 700;
  line-height: 1.5em;
  color:var(--color-333);
  margin-bottom: 5px;
  transition: .4s all;
}
.stocklist ul li .stndata h4 a {
  display: block;
  color:var(--color-black);
  text-decoration: none;
}
.stocklist ul li .stndata h4 a:hover {
color:var(--color-666);
}
.stocklist ul li .stndata p.stn_com {
  font-size:12px;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 15px;
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 2; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}
.stocklist ul li .stndata .stnspec {
  width:100%;
  height:auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.stocklist ul li .stndata .stnspec dl {
  width:45%;
  height: auto;
  display: flex;
  padding:5px 0;
}
.stocklist ul li .stndata .stnspec dl dt {
  width:50%;
  font-size:12px;
  font-weight: 400;
  line-height: 1em;
  text-align: left;
  color:var(--color-666);
}
.stocklist ul li .stndata .stnspec dl dd {
  width:50%;
  font-size:12px;
  font-weight: 400;
  line-height: 1em;
  text-align: right;
  color:var(--color-666);
}
.stocklist ul li .stndata dl.price01m {
  width:70%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 10px auto;
}
.stocklist ul li .stndata dl.price01m dt {
  font-size:12px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price01m dd {
  font-size:14px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price01m dd strong {
  font-size:20px;
  font-weight: 700;
}
.stocklist ul li .stndata dl.price02m {
  width:70%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 0 auto;
}
.stocklist ul li .stndata dl.price02m dt {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price02m dd {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price02m dd strong {
  font-size:16px;
  font-weight: 400;
}
.stocklist ul li .stn_contact {
  width:100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.stocklist ul li .stn_contact p {
  width:48%;
  height: auto;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px!important;
  padding:0;
  margin:0;
}
.stocklist ul li .stn_contact p a {
  width:100%;
  height: 30px;
  display: block;
  text-align: right;
  padding:0 10px 0 0;
  border-radius: 3px;
  text-decoration: none;
  color:var(--color-white);
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: auto 28px;
  transition: .4s all;

}
.stocklist ul li .stn_contact p a:hover {
  background-color: var(--color-1st);
}

}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */



@media screen and (min-width: 768px) {

.stnbn_tel-sp{
  display: none !important;

}

}





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


  /* Stock menu */
  #togglermenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  }
  .tmbase {
    width:100%;
    height: auto;
    display: block;
    padding:20px 10px 5px 10px;
    background-color: var(--color-black);
  }
  #togglermenu.tgm_active {
    max-height: auto; /* 内容に応じて適切な高さに設定 */
  }
  #searchmenu {
    width:100%;
    height: auto;
    display: block;
    border-radius: 3px;
    margin:0 auto 30px;
    overflow: hidden;
  }
  #searchmenu h3 {
    width:100%;
    height: auto;
    display: 40px;
    font-size:16px;
    font-weight: 500;
    line-height: 40px;
    color:var(--color-white);
    background-color: var(--color-jg);
    cursor: pointer;
    padding: 0px 0;
  }
  #searchmenu h3 span {
    width:fit-content;
    height: auto;
    display: block;
    margin:0 auto;
    padding:0 50px 0 50px;
    background-image: url(../img/header/ic-stockmenu_open.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 40px auto;
    font-size: 14px;
  }

  #searchmenu h3.tgm_active {
    color:var(--color-white);
    background-color: var(--color-1st);
  }
  #searchmenu h3.tgm_active span {
    background-image: url(../img/header/ic-stockmenu_close.svg);
    background-position: right center;
  }

  #togglermenu h4 {
    width:100%;
    height: auto;
    display: block;
    font-weight: 400;
    margin-bottom: 5px;
  }
  #togglermenu h4 a {
    width:100%;
    height: auto;
    display: block;
    padding:0 15px;
    font-size:12px;
    line-height: 38px;
    text-align: right;
    color: var(--color-white);
    border: 1px solid var(--color-333);
    background-color: var(--color-333);
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: 6% center;
    background-size: auto 60px;
    text-decoration: none;
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu h4 a:hover {
    background-color: var(--color-1st);
  }
  #togglermenu h4 a.shopstock {
    width:100%;
    height: auto;
    display: block;
    padding:0 15px 0 20px;
    font-size:14px;
    line-height: 38px;
    color: var(--color-white);
    text-align: left;
    border: 1px solid var(--color-333);
    background-color: var(--color-333);
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: 95% center;
    background-size: auto 20px;
    background-image: url(../img/midlands_logo.png);
    text-decoration: none;
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu h4 a.shopstock:hover {
    background-color: var(--color-1st);
  }

  #togglermenu ul {
    width:100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  #togglermenu ul li {
    width:49.6%;
    height: auto;
    display: block;
    font-size:12px;
    margin:0 0.2% 3px;
  }
  #togglermenu ul li a {
    width:100%;
    height: auto;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
    color:var(--color-white);
    border: 1px solid var(--color-333);
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu ul li a:hover {
    background-color: var(--color-1st);
  }

  #togglermenu ul li.tm_singlebn {
    width:100%!important;
    height: auto;
    display: block;
    font-size:14px;
    font-weight: 700;
    margin-bottom: 0px;
  }
  #togglermenu ul li.tm_singlebn a {
    width:100%!important;
    height: auto;
    display: block;
    text-align: center;
    line-height: 38px;
    color:var(--color-white);
    border: 1px solid var(--color-333);
    background-color: var(--color-333);
    border-radius: 3px;
    transition: .4s all;
  }
  #togglermenu ul li.tm_singlebn a:hover {
    background-color: var(--color-1st);
  }


  /* Stock layout */
.stocklist {
  width:100%;
  height: auto;
  display: block;
}
.stocklist ul {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.stocklist ul li {
  width:100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:0 0 30px;
  border-bottom:1px dotted var(--color-ccc);
  padding:0 0 30px 0;
  transition: .4s all;
}
.stocklist ul li .stnimg {
  width:40%;
  height: auto;
  display: flex;
  align-items: flex-start;
  clip-path: polygon(30% 0%, 85% 0, 100% 15%, 100% 100%, 70% 100%, 15% 100%, 0 85%, 0 0);
  transition: .4s all;
}
.stocklist ul li .stnimg a {
  width:100%;
  height: auto;
  display: block;
  overflow: hidden;
  transition: .4s all;
}
.stocklist ul li .stndata {
  width:55%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:0px 0px 0px 0px;
  margin-bottom: 20px;
}
.stocklist ul li .stndata p.stn_shopname {
  width:fit-content;
  height: auto;
  display: block;
  margin:0 0 0 auto;
  font-size: 10px;
  line-height: 1em;
  color:var(--color-666);
  border:1px solid var(--color-999);
  border-radius: 3px;
  padding:3px 5px;
}
.stocklist ul li .stndata h3 {
  font-size:12px;
  font-weight: 400;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 0px;
}
.stocklist ul li .stndata h4 {
  font-size:18px;
  font-weight: 700;
  line-height: 1.5em;
  color:var(--color-333);
  margin-bottom: 5px;
  transition: .4s all;
}
.stocklist ul li .stndata h4 a {
  display: block;
  color:var(--color-black);
  text-decoration: none;
}
.stocklist ul li .stndata h4 a:hover {
color:var(--color-666);
}
.stocklist ul li .stndata p.stn_com {
  font-size:12px;
  line-height: 1.5em;
  color:var(--color-666);
  margin-bottom: 15px;
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 2; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}
.stocklist ul li .stndata .stnspec {
  width:100%;
  height:auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.stocklist ul li .stndata .stnspec dl {
  width:48%;
  height: auto;
  display: flex;
  padding:5px 0;
}
.stocklist ul li .stndata .stnspec dl dt {
  width:40%;
  font-size:10px;
  font-weight: 400;
  line-height: 1em;
  text-align: left;
  color:var(--color-666);
}
.stocklist ul li .stndata .stnspec dl dd {
  width:60%;
  font-size:10px;
  font-weight: 400;
  line-height: 1em;
  text-align: right;
  color:var(--color-666);
}
.stocklist ul li .stndata dl.price01m {
  width:100%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 10px auto;
}
.stocklist ul li .stndata dl.price01m dt {
  font-size:12px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price01m dd {
  font-size:14px;
  color:var(--color-333);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price01m dd strong {
  font-size:20px;
  font-weight: 700;
}
.stocklist ul li .stndata dl.price02m {
  width:100%;
  height: auto;
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  margin:0 0 0 auto;
}
.stocklist ul li .stndata dl.price02m dt {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:1em;
}
.stocklist ul li .stndata dl.price02m dd {
  font-size:12px;
  color:var(--color-999);
  font-weight: 400;
  line-height: 1em;
  margin-right:0.5em;
  text-align: right;
}
.stocklist ul li .stndata dl.price02m dd strong {
  font-size:16px;
  font-weight: 400;
}
.stocklist ul li .stn_contact {
  width:100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin:0 auto;
}
.stocklist ul li .stn_contact p {
  width:32%;
  height: auto;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px!important;
  padding:0;
  margin:0;
}
.stocklist ul li .stn_contact p a {
  width:100%;
  height: 30px;
  display: block;
  text-align: right;
  padding:0 5px 0 0;
  border-radius: 3px;
  text-decoration: none;
  color:var(--color-white);
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: auto 28px;
  transition: .4s all;
    font-size: 10px;
}
.stocklist ul li .stn_contact p a:hover {
  background-color: var(--color-1st);
}

}


.count h3{
  display: table;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 22px;

}


.count strong{
  font-size: 34px;

}


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

.count h3{

  font-size: 16px;

}


.count strong{
  font-size: 28px;

}
}