@charset "utf-8";

/* ==================================

  『...で検索』SP Style

================================== */

/* ----------------------------------

  Main Visual

---------------------------------- */
.main-visual figure {
  height: auto;
  padding: 0;
}
.main-visual h1 {
  position: relative;
  left: initial;
  bottom: initial;
  top: 50%;
  transform: translate(0, -50%);
  font-size: calc(48 / 750 * 100vw);
}
.main-visual h1 span { 
/*font-size: calc(48 / 750 * 100vw / 2); */
}

/* Breadcrumb
---------------------------------- */
#bread {
  width: calc(670 / 750 * 100%);
  margin: calc(20 / 750 * 100%) auto calc(70 / 750 * 100%);
}
#bread ul {
  top: initial;
  left: initial;
}
#bread li { font-size: calc(20 / 750 * 100vw); }

/* ----------------------------------

  Section

---------------------------------- */
.product-list { padding: 0 0 calc(170 / 750 * 100%); }

/* Product LineUp
---------------------------------- */
.product-lineup { display: block; }
.product-item { width: 100%; }
.product-item.new::before {
  top: calc(111 / 750 * 100vw / 2 * -1);
  left: calc(111 / 750 * 100vw / 4 * -1);
  width: calc(111 / 750 * 100vw);
  height: calc(111 / 750 * 100vw);
}
.product-item dl dt {
  font-size: calc(24 / 750 * 100vw * 1.111111);
  line-height: calc(44 / 24);
  margin: calc(15 / 750 * 100%) 0 calc(30 / 750 * 100%);
}
.product-item dl dt small { font-size: calc(24 / 30 * 1em * 1.111111); }
.product-item dl dd p { line-height: calc(40 / 24); }
.product-item dl dd:last-of-type { margin: 0; }
.tag {
  font-size: calc(20 / 750 * 100vw);
  letter-spacing: 0.025em;
}

.product-item-num {
  font-size: calc(22 / 750 * 100vw);
  margin: 0 0 calc(25 / 750 * 100%);
}

/* Search By Feature
---------------------------------- */
.search { margin: 0 0 calc(120 / 750 * 100%); }
.search .inner { padding: 0; }
.search hr { margin: 0 0 calc(75 / 750 * 100%); }
.search h2 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 0 calc(60 / 750 * 100%);
}
.search p {
  line-height: calc(60 / 24);
  margin: 0 0 calc(50 / 750 * 100%);
}
.search p .tag { font-size: calc(24 / 750 * 100vw); }
.search-wrap { width: 100%; }

/* Product LineUp
 * ---------------------------------- */
.product-lineup {
  display: block;
}
.product-item {
  width: 100%;
  margin: 0 0 calc(90 / 750 * 100%);
}
.product-item.new::before {
  top: calc(111 / 750 * 100vw / 2 * -1);
  left: calc(111 / 750 * 100vw / 4 * -1);
  width: calc(111 / 750 * 100vw);
  height: calc(111 / 750 * 100vw);
}
.product-item dl dt {
  font-size: calc(24 / 750 * 100vw * 1.111111);
  line-height: calc(44 / 24);
  margin: calc(15 / 750 * 100%) 0 calc(30 / 750 * 100%);
}
.product-item dl dt small { font-size: calc(24 / 30 * 1em * 1.111111); }
.product-item dl dd p { line-height: calc(40 / 24); }
.product-item dl dd:last-of-type { margin: 10px 0 0; }
.tag {
  font-size: calc(20 / 750 * 100vw);
  letter-spacing: 0.025em;
}

.product-item-num {
  font-size: calc(24 / 750 * 100vw);
  margin: 0 0 calc(50 / 750 * 100%);
}

/* Search By Feature
 * ---------------------------------- */
.search { padding: 0 0 calc(120 / 750 * 100%); }
.search .inner { padding: 0; }
.search hr { margin: 0 0 calc(75 / 750 * 100%); }
.search h2 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 0 calc(60 / 750 * 100%);
}
.search p {
  line-height: calc(60 / 24);
  margin: 0 0 calc(50 / 750 * 100%);
}
.search p .tag { font-size: calc(24 / 750 * 100vw); }
.search-wrap { width: 100%; }

/* Fixed Search Button
 * --------------------------------- */
.fixed-search-btn {
  z-index: 8889;
  transform: translate(50%, 0);
  top: initial;
  right: 50%;
  bottom: calc(120 / 750 * 100vw);
  width: calc(400 / 750 * 100%);
  line-height: initial;
  font-size: calc(24 / 750 * 100vw);
  color: #3a3937;
  background-color: #ffffff;
  border: solid 1px #d7d7d7;
  padding: 1em 5em;
}
.fixed-search-btn::before {
  left: 40px;
  background-image: url(../images/detail/glass_sp.svg);
}

.modal-content {
  bottom: 50%;
  transform: translate(-50%, 50%);
  width: calc(680 / 750 * 100%);
  height: auto;
  max-width: initial;
  padding: calc(75 / 750 * 100%) calc(40 / 750 * 100%) calc(60 / 750 * 100%);
}
.modal-content h2 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 auto calc(60 / 750 * 100%);
}
.modal-content p { margin: 0 0 calc(35 / 750 * 100%); }
.modal-content p .tag { font-size: calc(24 / 750 * 100vw); }
a.js-modal-close {
  top: calc(30px * .75);
  transform: scale(.75);
}