@charset "UTF-8";

.wrap1280 #main-contents {
  width: calc(100% - 326px);
}
main a:hover .txt span {
  color:#DD6D22;
}
main a:hover .image {
  transform:scale(1.05);
}
main .article .image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
main .article .image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  text-align: center;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
main .article .image::before {
  content:"";
  display: block;
  padding-top: 40.7079%;
}
main #pickup-feature-area .article .image::before,
main #feature-area .article .image::before {
  padding-top: 45.8333%;
}
main .article .image img {
  -o-object-fit: contain;
  object-fit: contain;
  font-family: 'object-fit: contain;';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit- transform: translate(-50%,-50%);
}
main h1 {
  height: 160px;
  margin-bottom: 16px;
  background: url('../../images/feature/bg_ttl.png')repeat-x 0 center/auto 100%;
}
main h1 span.bg_illust {
  background: url('../../images/feature/bg_feature_left.png')no-repeat 202px bottom/106px auto,url('../../images/feature/bg_feature_right.png')no-repeat right top/370px auto;
}
main h1 span {
  height: 160px;
}
main h1 img {
  max-width: 520px;
}
.path ul {
  margin-bottom: 18px;
}
#feature-menu {
  position: relative;
  margin-bottom: 38px;
  font-size: 0;
}
#feature-menu li {
  display: inline-block;
  position: relative;
  width: calc(100% / 3 - .01px);
  padding-bottom: 7px;
  border-bottom: 4px solid #EFEFEF;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  color: #B7B7B7;
}
#feature-menu li.current,
#feature-menu li:hover {
  cursor: pointer;
  color: #1A1A1A;
  border-bottom: 4px solid #1A1A1A;
}
main #newtv-area h2 {
  margin-bottom: 30px;
}
main #newtv-area h2 img {
  max-width: 247px;
}
main #tvlist-area h2 img {
  max-width: 139px;
}
main #pickup-feature-area h2 img {
  max-width: 180px;
}
main .article-wrapper {
  margin-bottom: 40px;
}
main #pickup-feature-area .article {
  width: calc((100% - 20px) / 2 - .01px);
  margin-right: 20px;
  margin-bottom: 20px;
}
main #feature-area .article {
  width: calc((100% - 60px) / 3 - .01px);
  margin-right: 30px;
  margin-bottom: 30px;
}
main #newtv-area .article-wrapper {
  margin-bottom: 0;
}
main #newtv-area .article {
  width: 100%;
  margin-right: 0;
  margin-bottom: 60px;
}
main #newtv-area .article .image-wrapper {
  width: calc(100% - 50% - .1px);
  height: auto;
  border-radius: 0;
}
main #newtv-area .article .image {
  border-radius: 10px 0 0 10px;
}
main #newtv-area .article .image::before {
  padding-top: 47.0588%;
}
main #newtv-area .article .image img {
  width: auto;
  max-width: none;
  height: 100%;
}
main #newtv-area .article .txt {
  position: relative;
  width: 50%;
  min-height: 80px;
  padding: 0;
  border-radius: 0 10px 10px 0;
  font-size: 18px;
  font-size: 1.8rem;
}
main #newtv-area .site-area .article .txt {
  min-height: 90px;
}
main #pickup-feature-area .article .txt,
main #pickupcam-area .article .txt  {
  min-height: 80px;
}
main #newtv-area .article .txt span {
  position: absolute;
  width: 84.8484%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit- transform: translate(-50%,-50%);
}
main #pickup-feature-area .article:nth-child(2n),
main #feature-area .article:nth-child(3n) {
  margin-right: 0;
}
main #feature-area .article-wrapper,
main #camlist-area .article-wrapper {
  margin-bottom: 0;
}
main #feature-area h2 img {
  max-width: 139px;
}
main .site-area .article-wrapper {
  margin-bottom: 28px;
}
main .site-area h2.line-y {
  margin-bottom: 30px;
}
main .site-area h2 img {
  max-width: 170px;
}
main .site-area .article {
  width: calc((100% - 60px) / 3 - .01px);
  margin-right: 30px;
  margin-bottom: 30px;
}
main .site-area .article:nth-child(3n) {
  margin-right: 0;
}
main .site-area .article .image::before {
  padding-top: 52.7777%;
}
main .site-area .article .txt {
  min-height: 80px;
  background-color: #F8E8B1;
}
main .article .image {
  position: relative;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
main .goods-list .goods-name {
  display: -webkit-box;
}
main .article .txt {
  overflow: hidden;
  padding: 11px 18px 15px;
  border-radius: 0 0 10px 10px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  background-color: #F8F6ED;
}
main #feature-area .article .txt,
main #camlist-area .article .txt,
main .open-area .article .txt {
  min-height: 80px;
}
main #feature-tab,
main #cam-tab {
  display: none;
}
main #tvlist-area {
  margin-bottom: 60px;
}
main #tvlist-area li {
  position: relative;
  width: 100%;
  border-top: 1px solid #DBDBDB;
}
main #tvlist-area li.open,
main #tvlist-area li.open .open-area {
  border-color: #DD6D22;
}
main #tvlist-area li:last-child {
  border-bottom: 1px solid #DBDBDB;
}
main #tvlist-area li .table {
  display: table;
  table-layout: fixed;
}
main #tvlist-area li .tv-image {
  position: relative;
  display: table-cell;
  width: 151px;
  height: 100px;
  padding: 13px;
  vertical-align: middle;
}
main #tvlist-area li .tv-image img {
  position: absolute;
  height: auto;
  max-width: calc(100% - 26px);
  max-height: calc(100% - 26px);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit- transform: translate(-50%,-50%);
}
main #tvlist-area li .tv-name {
  display: table-cell;
  padding-left: 21px;
  vertical-align: middle;
  padding-right: 45px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
}
main #tvlist-area .open-area {
  padding-top: 20px;
  border-top: 1px solid #DBDBDB;
}
main #tvlist-area li .icon {
  position: absolute;
  right: 0;
  top: 31px;
  width: 38px;
  height: 38px;
}
main #tvlist-area .feature-list {
  position: relative;
  margin-bottom: 20px;
  border-bottom: 2px dashed #e2e2e2;
}
main #tvlist-area .feature-list .article {
  width: calc((100% - 60px) / 3 - .1px);
  margin-right: 30px;
  margin-bottom: 20px;
}
main #tvlist-area .feature-list .article:nth-child(3n) {
  margin-right: 0;
}
main #tvlist-area .feature-list .image::before {
  padding-top: 52.7777%;
}
main #tvlist-area .feature-list .txt {
  height: 80px;
  background-color: #F8E8B1;
}
main #tvlist-area .goods-list {
  margin-bottom: 0;
}
main #tvlist-area .open-area,
main #tvlist-area .more-open {
  display: none;
  width: 100%;
}
main #tvlist-area .open-area {
  padding-bottom: 21px;
}
main #tvlist-area .btn span.btn-inner {
  display: block;
  width: 100%;
  height: 60px;
  background: #DD6D22 url("../../images/common/icon_arrow_b_w.svg") no-repeat right 20px center/12px auto;
  border-radius: 30px;
  font-size: 20px;
  font-size: 2rem;
  color: #fff;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  box-shadow: 0 4px 0 rgba(206, 206, 206, 1);
}
main #tvlist-area .btn span.btn-inner img {
  display: inline-block !important;
  max-width: 99px;
  margin: 0 auto;
  vertical-align: middle;
}
main #tvlist-area .btn span.btn-inner:hover {
  cursor: pointer;
  background-color: #B25416;
}
main #tvlist-area .goods-list .article {
  width: calc((100% - 60px) / 3 - .1px);
  margin-right: 30px;
  margin-bottom: 20px;
}
main #tvlist-area .goods-list .article:nth-child(3n) {
  margin-right: 0;
}
main #tvlist-area .goods-list .image-wrapper {
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
}
main #tvlist-area .goods-list .image-wrapper .image {
  border-radius: 0;
  line-height: 0;
  font-size: 1px;
}
main #tvlist-area .goods-list .image-wrapper .image::before {
  padding-top: 46.875%;
}
main #cam-tab .article  {
  width: calc((100% - 40px) / 3 - .01px);
  margin-right: 20px;
  margin-bottom: 30px;
}
main #cam-tab .article:nth-child(3n) {
  margin-right: 0;
}
main #pickupcam-area .article,
main #pickupcam-area .article:nth-child(3n) {
  width: calc((100% - 20px) / 2);
  margin-right: 20px;
  margin-bottom: 20px;
}
main #pickupcam-area .article:nth-child(2n) {
  margin-right: 0;
}
main #history-goods {
  margin-top: 87px;
}
main #pickup-feature-area h2 {
  padding: 0 0 0 14px;
}
main #pickupcam-area h2 {
  padding: 5px 0 5px 14px;
}
main #pickupcam-area h2 img {
  max-width: 317px;
}
main #camlist-area h2 img {
  max-width: 279px;
}
footer {
  margin-top: 60px;
}
@media screen and (max-width:768px){

  .wrap1280 #main-contents {
      width: 100%;
  }
  main a:hover .txt span {
    color:#1A1A1A;
  }
  main a:hover .image {
    transform:none;
  }
  main h1 {
    margin-bottom: 11px;
  }
  main h1,
  main h1 span {
    height: 120px;
  }
  main h1 span.bg_illust {
    min-width: 100%;
    background: url('../../images/feature/bg_feature_left_sp.png')no-repeat 22px bottom/65px auto,url('../../images/feature/bg_feature_right_sp.png')no-repeat right top/128px auto;
  }
  main h1 img {
    max-width: 160px;
  }
  .path ul {
    margin-bottom: 11px;
  }
  #feature-menu {
    margin-bottom: 30px;
  }
  #feature-menu li {
    font-size: 16px;
    font-size: 1.6rem;
  }
  main #pickup-feature-area h2 {
    padding: 8px 0 7px 14px;
  }
  main #pickup-feature-area h2 img {
    max-width: 135px;
  }
  main #feature-area h2 img {
    max-width: 108px;
  }
  main .site-area h2.line-y {
    margin-bottom: 20px;
  }
  main .site-area h2 img {
    max-width: 133px;
  }
  main #newtv-area h2 img {
    max-width: 192px;
  }
  main #tvlist-area h2 img {
    max-width: 108px;
  }
  main #pickupcam-area h2 {
    padding: 8px 0 8px 14px;
  }
  main #pickupcam-area h2 img {
    max-width: 247px;
  }
  main #camlist-area h2 img {
    max-width: 217px;
  }
  main #pickup-feature-area .article,
  main #feature-area .article,
  main #cam-tab .article {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  main #newtv-area .article-wrapper {
    margin-bottom: 0;
  }
  main #newtv-area .article {
    margin-bottom: 40px;
  }
  main #pickup-feature-area .article:last-child,
  main #feature-area .article:last-child,
  main #cam-tab .article:last-child {
    margin-bottom: 0;
  }
  main #tvlist-area li .tv-name .txt {
    font-size: 15px;
    font-size: 1.5rem;
  }
  main .article .txt {
    padding: 10px 15px;
    font-size: 16px;
    font-size: 1.6rem;
  }
  main .article a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  main #tvlist-area {
    margin-bottom: 40px;
  }
  main #tvlist-area .feature-list {
    margin-bottom: 10px;
  }
  main .site-area .article,
  main #pickupcam-area .article,
  main #pickupcam-area .article:nth-child(3n),
  main #tvlist-area .feature-list .article,
  main #tvlist-area .feature-list .article:nth-child(3n),
  main #tvlist-area .goods-list .article,
  main #tvlist-area .goods-list .article:nth-child(3n) {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  main #tvlist-area .feature-list .article:last-child {
    margin-bottom: 20px;
  }
  main .site-area .article .image::before {
    padding-top: 52.9411%;
  }
  main .article .image-wrapper {
    width: calc(100% - 50.4373% - .1px);
    height: auto;
    border-radius: 0;
  }
  main .article .image,
  main #tvlist-area .goods-list .image-wrapper {
    border-radius: 10px 0 0 10px;
  }
  main #tvlist-area li .tv-image {
    width: 120px;
    height: 80px;
  }
  main #tvlist-area li .tv-name {
    padding-left: 10px;
  }
  main #tvlist-area li .icon {
    top: 26px;
  }
  main #tvlist-area li .icon img {
    width: 28px;
    height: 28px;
  }
  main .article .image::before,
  main #feature-area .article .image::before {
    padding-top: 47.0588%;
  }
  main #tvlist-area .feature-list .image::before {
    padding-top: 52.9411%
  }
  main .article .image img {
    width: auto;
    max-width: none;
    height: 100%;
  }
  main .article .txt {
    position: relative;
    width: 50.4373%;
    min-height: 80px;
    padding: 0;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    font-size: 1.4rem;
  }
  main #newtv-area .article .txt span {
    font-size: 14px;
    font-size: 1.4rem;
  }
  main .site-area .article .txt,
  main #tvlist-area .feature-list .txt {
    min-height: 90px;
    height: auto;
  }
  main .article .txt span {
    position: absolute;
    width: 86.1271%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit- transform: translate(-50%,-50%);
  }
  main .abr2 {
    -webkit-line-clamp: 3;
  }
  main .site-area .article .txt span {
    -webkit-line-clamp: 4;
  }
  main #tvlist-area .btn {
    margin: 10px auto 30px;
  }
  main #tvlist-area .btn span.btn-inner {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-size: 1.8rem;
  }
  main #tvlist-area .btn span.btn-inner img {
    display: none !important;
  }
  main #tvlist-area .open-area {
    padding-bottom: 10px;
  }
  main #history-goods {
    margin-top: 77px;
  }
  footer {
    margin-top: 33px;
  }
  main #tvlist-area .btn span.btn-inner:hover {
    cursor: auto;
    background-color: #DD6D22;
  }
}