@charset "utf-8";

#curtain .serif,
#curtain a,
#curtain li,
#curtain p,
#curtain span {
  font-family: Noto Sans JP, sans-serif !important
}

#curtain .text-border {
  background: linear-gradient(transparent 60%, #ffff85 30%)
}

#curtain .navi li {
  position: relative;
  height: 5rem
}

#curtain .navi li i:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%)
}

#curtain .heat {
  background-color: #fff6f6
}

#curtain .heat2 {
  background-color: #ffe1e1;
  color: #8b4a4a
}

#curtain .sound {
  background-color: #f5f8ff
}

#curtain .sound2 {
  background-color: #e6ecfb;
  color: #343b4e
}

#curtain .light {
  background-color: #fffed6
}

#curtain .light2 {
  background-color: #fff0bb;
  color: #7c6e3b
}

#curtain .bx-main-carousel__prev-btn.left-0 {
  left: 5px !important
}

#curtain .bx-main-carousel__next-btn.right-0 {
  right: 5px !important
}

#curtain .kanren {
  align-items: flex-end
}

#curtain .kanren ul {
  width: 85% !important
}

#curtain .kanren table td {
  border: 1px solid #555
}

#curtain .kanren .price,
#curtain .kanren .star,
#curtain .kanren table tr,
#curtain .midashi tr {
  line-height: 2.5;
  white-space: nowrap
}

#curtain .kanren .star {
  margin-top: 0
}

#curtain .kanren .star p {
  margin-bottom: 0
}

.featureContainer .readmore {
  position: relative;
  margin: 10px auto 0;
  padding: 0 0 20px
}

.featureContainer .readmore label {
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0;
  margin: 0 auto;
  width: 365px;
  padding: 10px 0;
  color: #333;
  text-align: center;
  border-radius: 30px;
  background-color: #fff;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
  border: 1px solid #333
}

.featureContainer .readmore label:before {
  content: '機能付カーテンのメリットをもっと見る ▼'
}

.featureContainer .readmore input[type="checkbox"]:checked~label:before {
  content: '元に戻す'
}

.featureContainer .readmore input[type="checkbox"] {
  display: none
}

.featureContainer .readmore-content {
  position: relative;
  height: 280px;
  overflow: hidden;
  margin-bottom: 35px
}

.featureContainer .readmore input[type="checkbox"]:checked~.readmore-content {
  height: auto
}

.featureContainer .readmore-content:before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130px;
  background: linear-gradient(hsla(0, 0%, 100%, 0) 0, #fff 50%, #fff 100%)
}

.featureContainer .readmore input[type="checkbox"]:checked~.readmore-content:before {
  display: none
}

#curtain .kanren .price_info {
  float: left
}

.allWrap .price_down,
.allWrap .price_down span {
  font-size: 9pt;
  background: #e00;
  display: inline-block !important;
  color: #fff !important;
  padding: 0 5px !important;
  margin-top: 0
}

#curtain .kanren .price {
  font-size: 13px
}

#curtain .specType.bx-bg-bel-gray2 {
  opacity: .2
}

#curtain .balloon1-left {
  position: relative
}

#curtain .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #ebf3fe
}

#curtain .balloon1-left p {
  margin: 0;
  padding: 0
}

#curtain .review_average,
#curtain .review_count {
  font-size: 9pt;
  margin-left: 6px
}

.spacBox a.btn {
  color: #fff !important
}

.spacBox .bx-top-btn-motto-miru.bx-top-btn-motto-miru.bx-top-btn-motto-miru:hover {
  background-color: #333
}

#curtain .static-img .mask img {
  opacity: 1
}

#curtain .other .boxlink_sold {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 8px
}

#curtain .static-img .boxlink_sold .price_info:after {
  content: "sold out";
  font-family: Verdana, Lucida Grande;
  font-size: 24px;
  letter-spacing: -.5px
}

#curtain .static-img .boxlink_sold .mask:after {
  content: none
}

#curtain .price_info+.price_down,
#curtain .price_info>.price_down {
  font-size: 10px;
  background-color: #e00;
  display: inline-block;
  color: #fff;
  padding: 3px 5px
}

#curtain .price.saleprice.salepricebox {
  color: #e00
}

#curtain .cornerWrap h2 {
  color: #503939
}

#curtain .cornerWrap h2 span:not(:first-of-type) {
  border-bottom: 6px solid #e3cf9b
}

#curtain .cornerWrap .category {
  justify-content: space-around
}

#curtain .cornerWrap .category li {
  background-color: #ededed;
  margin-bottom: 15px;
  border-radius: 35px
}

#curtain .cornerWrap .category li a {
  padding: 0 13% 0 8%;
  min-height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  font-size: 14px
}

#curtain .category li a:after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  transform: rotate(45deg);
  position: absolute;
  top: 42%;
  right: 8%
}

#curtain .category h2,
#curtain .other h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 20px
}

#curtain .category .bx-sp_top_category_search__listitem a div {
  font-size: 9pt;
  line-height: 1.3
}

#curtain .brandTop a:after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 41%;
  right: 5%
}

.tab_item {
  width: 50%;
  padding: 5px;
  border-bottom: 3px solid #333;
  background-color: #ececec;
  text-align: center;
  color: #333;
  display: block;
  float: left;
  font-weight: 700;
  transition: all .2s ease
}

.tab_item:hover {
  opacity: .75
}

input[name=tab_item] {
  display: none
}

.tab_content {
  display: none;
  padding: 1em 1em 0;
  clear: both;
  overflow: hidden
}

#tab1:checked~#tab1_content,
#tab2:checked~#tab2_content {
  display: block
}

.tab_container input:checked+.tab_item {
  background-color: #333;
  color: #fff
}

.tab_container {
  padding-bottom: 1em;
  background-color: #fff
}

#curtain .bx-product_list_filter_color__swatch--navy {
  background: #2e4888
}

#curtain .incContainer {
  width: 830px;
  margin: 0 auto
}

#navi7 .itemList ul .itemname {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box
}

#curtain nav ul li img:hover {
  transform: translateY(+10px)
}

#curtain #containerBox1,
#curtain #containerBox2,
#curtain #containerBox3,
#curtain #containerBox4,
#curtain #containerBox5,
#curtain #containerBox6 {
  padding-top: 190px;
  margin-top: -190px;
}

#curtain #containerBox1 h2 {
  background-color: #70c282;
}

#curtain #containerBox2 h2 {
  background-color: #f4c142;
}

#curtain #containerBox3 h2 {
  background-color: #cf7ba5;
}

#curtain #containerBox4 h2 {
  background-color: #bfbfbf;
}

#curtain #containerBox5 h2 {
  background-color: #c6da32;
}

#curtain #containerBox6 h2 {
  background-color: #8caddc;
}

#curtain .itemContainer {
  display: grid;
  grid-template-rows: 160px 320px;
  grid-template-columns: 45% 1fr;
  margin-bottom: 6rem
}

#curtain .itemContainer2 {
  display: grid;
  grid-template-rows: 188px 376px;
  grid-template-columns: 45% 1fr;
  margin-bottom: 1rem
}

#curtain .detail {
  margin-bottom: 5rem !important
}

#curtain #containerBox1 .title-box4 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  margin: 2.5em 0 2em 0;
  background-color: #e0f8e5;
  border: 2px solid #70c282
}

#curtain #containerBox2 .title-box4 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  margin: 2.5em 0 2em 0;
  background-color: #fff5db;
  border: 2px solid #f4c142
}

#curtain #containerBox3 .title-box4 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  margin: 2.5em 0 2em 0;
  background-color: #fce9f3;
  border: 2px solid #cf7ba5
}

#curtain #containerBox1 .title-box4-title {
  font-size: 20px;
  position: absolute;
  margin-top: -39px;
  margin-left: -2px;
  background-color: #70c282;
  color: #fff;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 4px 10px
}

#curtain #containerBox2 .title-box4-title {
  font-size: 20px;
  position: absolute;
  margin-top: -39px;
  margin-left: -2px;
  background-color: #f4c142;
  color: #fff;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 4px 10px
}

#curtain #containerBox3 .title-box4-title {
  font-size: 20px;
  position: absolute;
  margin-top: -39px;
  margin-left: -2px;
  background-color: #cf7ba5;
  color: #fff;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 4px 10px
}

#curtain .title-box4 p {
  margin: 0;
  padding: 1rem
}

#curtain #containerBox1 .itemImg {
  grid-row: 1 / 3;
  grid-column: 2 / 3
}

#curtain #containerBox1 .specBox {
  grid-row: 2 / 3;
  grid-column: 1 / 2
}

#curtain .itemname {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

#curtain #containerBox1 .itemButton {
  background-color: #70c282
}

#curtain #containerBox2 .itemButton {
  background-color: #f4c142
}

#curtain #containerBox3 .itemButton {
  background-color: #cf7ba5
}

#curtain .wordTitle {
  font-size: 17px;
  padding: 0 0 5px 10px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  font-weight: 700
}

@media screen and (max-width:520px) {
  #curtain .midashi {
    width: 20%
  }

  #curtain .kanren ul {
    margin: auto;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
  }

  #curtain .kanren ul li {
    width: 200px;
    flex-shrink: 0
  }

  #curtain .kanren ul::-webkit-scrollbar {
    height: 9pt
  }

  #curtain .kanren ul::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 6px
  }

  #curtain .kanren ul::-webkit-scrollbar-track {
    background: #ddd;
    border-radius: 6px
  }

  #curtain .kanren .itemname {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  #curtain .itemSpec .specType1 {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  #curtain .other .boxlink_sold {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 2px
  }

  #curtain .carousel+div.boxlink_sold {
    width: 100%;
    padding-left: 1.5rem;
    padding: 0
  }

  #curtain .cornerWrap .category {
    margin: 0 5% 15%
  }

  #curtain .cornerWrap .category li a {
    padding: 0 15%;
    font-size: 13px
  }

  #curtain .cornerWrap .category li img {
    display: none
  }

  #curtain .incContainer {
    width: 100%
  }

  #curtain .fvBnr {
    margin-bottom: 2rem
  }

  #curtain .itemContainer,
  #curtain .itemContainer2 {
    display: block;
    margin-bottom: 2rem
  }

  #curtain #containerBox1 .title-box4,
  #curtain #containerBox2 .title-box4,
  #curtain #containerBox3 .title-box4 {
    margin: 3.5em 0 1em 0
  }

  #curtain .title-box4 p {
    padding: .75rem
  }
}