@charset "UTF-8";
#marbbshampoounit {
  width: 100%;
  min-width: 100px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  font-family: 游ゴシック体, YuGothic, sans-serif;
  font-weight: 500;
  font-size: 15px;
  background: #f6f6f6;
}

#marbbshampoounit .cf:before,
#marbbshampoounit .cf:after {
  content: "";
  display: block;
  clear: both;
}

#marbbshampoounit a {
  text-decoration: none;
  overflow: hidden;
  transition: 1s;
}
#marbbshampoounit a:hover {
  text-decoration: underline;
}
#marbbshampoounit a:hover img {
  transition: 1s;
  opacity: 0.7;
}

#marbbshampoounit h2,
#marbbshampoounit h3,
#marbbshampoounit h4,
#marbbshampoounit p,
#marbbshampoounit ul li,
#marbbshampoounit ol li {
  font-size: 1em;
}
#marbbshampoounit img {
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}

#marbbshampoounit .pc {
  display: block !important;
}

#marbbshampoounit .sp {
  display: none !important;
}

@media screen and (max-width: 767px) {
  #marbbshampoounit .pc {
    display: none !important;
  }
  #marbbshampoounit .sp {
    display: block !important;
  }
}
#marbbshampoounit #navbar {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1.5em 0;
  border-bottom: 1px solid #636363;
}
#marbbshampoounit #navbar ul {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
#marbbshampoounit #navbar ul li {
  display: inline-block;
  text-align: center;
  font-size: 1.4em;
  font-weight: 400;
}
#marbbshampoounit #navbar ul li span {
  position: relative;
  display: inline-block;
}
#marbbshampoounit #navbar ul li span:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #30a7c7 transparent transparent transparent;
  position: absolute;
  top: 2px;
  right: -20px;
  bottom: 0;
  margin: auto;
}
#marbbshampoounit #navbar ul li a {
  padding: 0 2.6em;
  color: #fff;
}
#marbbshampoounit #navbar ul li a:hover {
  text-decoration: none;
  opacity: 0.7;
}

#marbbshampoounit #navbar.sticky-visible {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1020;
  background-color: rgba(0, 0, 0, 0.7);
  animation: slideDown 0.3s ease-out forwards;
  border-top: none;
  padding: 1em 0;
}

@keyframes slideDown {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0%);
  }
}
@media (max-width: 1023px) {
  #marbbshampoounit #navbar.sticky-visible {
    top: 114px;
    animation: slideDownTB 0.3s ease-out forwards;
  }
}
@keyframes slideDownTB {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0);
  }
}
@media screen and (max-width: 767px) {
  #marbbshampoounit #navbar {
    padding: 0.2em 0 1.2em;
  }
  #marbbshampoounit #navbar ul li {
    font-size: clamp(14px, 2.7379400261vw, 21px);
    margin: 0 0.4em;
    position: relative;
  }
  #marbbshampoounit #navbar ul li:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #30a7c7 transparent transparent transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.7em;
  }
  #marbbshampoounit #navbar ul li span:after {
    content: none;
  }
  #marbbshampoounit #navbar ul li a {
    padding: 0 0.8em 1em;
  }
  #marbbshampoounit #navbar.sticky-visible {
    padding: 0.1em 0 0.8em;
    top: 59px;
    animation: slideDownSP 0.3s ease-out forwards;
  }
}
@keyframes slideDownSP {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0px);
  }
}
#marbbshampoounit .fade_in {
  opacity: 0;
  transition: 1.5s;
}

#marbbshampoounit .fade_in.is-show {
  opacity: 1;
}

#marbbshampoounit #catch {
  background: #000;
}
#marbbshampoounit #catch img {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  #marbbshampoounit #catch img {
    width: 100%;
  }
}
#marbbshampoounit {
  /*5カラム*/
  /*8カラム*/
}
#marbbshampoounit .lp-row-0,
#marbbshampoounit .lp-row-10,
#marbbshampoounit .lp-row-20,
#marbbshampoounit .lp-row-30,
#marbbshampoounit .lp-row-40,
#marbbshampoounit .lp-row-50 {
  font-size: 0;
}
#marbbshampoounit .lp-row-0 > div,
#marbbshampoounit .lp-row-10 > div,
#marbbshampoounit .lp-row-20 > div,
#marbbshampoounit .lp-row-30 > div,
#marbbshampoounit .lp-row-40 > div,
#marbbshampoounit .lp-row-50 > div {
  display: inline-block;
  float: none;
  vertical-align: top;
}
#marbbshampoounit .lp-row-0 {
  margin-left: 0px;
  margin-right: 0px;
}
#marbbshampoounit .lp-row-0 > div {
  padding-right: 0px;
  padding-left: 0px;
}
#marbbshampoounit .lp-row-10 {
  margin-left: -5px;
  margin-right: -5px;
}
#marbbshampoounit .lp-row-10 > div {
  padding-right: 5px;
  padding-left: 5px;
}
#marbbshampoounit .lp-row-20 {
  margin-left: -10px;
  margin-right: -10px;
}
#marbbshampoounit .lp-row-20 > div {
  padding-right: 10px;
  padding-left: 10px;
}
#marbbshampoounit .lp-row-30 {
  margin-left: -15px;
  margin-right: -15px;
}
#marbbshampoounit .lp-row-30 > div {
  padding-right: 15px;
  padding-left: 15px;
}
#marbbshampoounit .lp-row-40 {
  margin-left: -20px;
  margin-right: -20px;
}
#marbbshampoounit .lp-row-40 > div {
  padding-right: 20px;
  padding-left: 20px;
}
#marbbshampoounit .lp-row-50 {
  margin-left: -25px;
  margin-right: -25px;
}
#marbbshampoounit .lp-row-50 > div {
  padding-right: 25px;
  padding-left: 25px;
}
#marbbshampoounit .lp-lg-1,
#marbbshampoounit .lp-lg-2,
#marbbshampoounit .lp-lg-3,
#marbbshampoounit .lp-lg-4,
#marbbshampoounit .lp-lg-5,
#marbbshampoounit .lp-lg-6,
#marbbshampoounit .lp-lg-7,
#marbbshampoounit .lp-lg-8,
#marbbshampoounit .lp-lg-9,
#marbbshampoounit .lp-lg-10,
#marbbshampoounit .lp-lg-11,
#marbbshampoounit .lp-lg-12,
#marbbshampoounit .lp-lg-2-4,
#marbbshampoounit .lp-lg-1-5 {
  position: relative;
  min-height: 1px;
  box-sizing: border-box;
  font-size: 15px;
}
#marbbshampoounit .lp-lg-12 {
  width: 100%;
}
#marbbshampoounit .lp-lg-11 {
  width: 91.66666667%;
}
#marbbshampoounit .lp-lg-10 {
  width: 83.33333333%;
}
#marbbshampoounit .lp-lg-9 {
  width: 75%;
}
#marbbshampoounit .lp-lg-8 {
  width: 66.66666667%;
}
#marbbshampoounit .lp-lg-7 {
  width: 58.33333333%;
}
#marbbshampoounit .lp-lg-6 {
  width: 50%;
}
#marbbshampoounit .lp-lg-5 {
  width: 41.66666667%;
}
#marbbshampoounit .lp-lg-4 {
  width: 33.33333333%;
}
#marbbshampoounit .lp-lg-3 {
  width: 25%;
}
#marbbshampoounit .lp-lg-2 {
  width: 16.66666667%;
}
#marbbshampoounit .lp-lg-1 {
  width: 8.33333333%;
}
#marbbshampoounit .lp-lg-2-4 {
  width: 20%;
}
#marbbshampoounit .lp-lg-1-5 {
  width: 12.5%;
}
@media (max-width: 767px) {
  #marbbshampoounit .lp-row-50 {
    margin-left: -10px;
    margin-right: -10px;
  }
  #marbbshampoounit .lp-row-50 > div {
    padding-right: 10px;
    padding-left: 10px;
  }
  #marbbshampoounit .xs-lg-1 {
    width: 8.333333%;
  }
  #marbbshampoounit .xs-lg-2 {
    width: 16.666667%;
  }
  #marbbshampoounit .xs-lg-3 {
    width: 25%;
  }
  #marbbshampoounit .xs-lg-4 {
    width: 33.333333%;
  }
  #marbbshampoounit .xs-lg-5 {
    width: 41.666667%;
  }
  #marbbshampoounit .xs-lg-6 {
    width: 50%;
  }
  #marbbshampoounit .xs-lg-7 {
    width: 58.333333%;
  }
  #marbbshampoounit .xs-lg-8 {
    width: 66.666667%;
  }
  #marbbshampoounit .xs-lg-9 {
    width: 75%;
  }
  #marbbshampoounit .xs-lg-10 {
    width: 83.333333%;
  }
  #marbbshampoounit .xs-lg-11 {
    width: 91.666667%;
  }
  #marbbshampoounit .xs-lg-12 {
    width: 100%;
  }
}

#marbbshampoounit #marbb_lead {
  background: #000 url(/_ui/responsive/common/ui_assets/online/bg/pickup/marbbshampoounit/img/bg_lead.jpg) bottom center no-repeat;
  padding-top: clamp(40px, 18.8732394366px + 5.6338028169vw, 100px);
  padding-bottom: clamp(65px, 45.6338028169px + 5.1643192488vw, 120px);
}
#marbbshampoounit #marbb_lead p {
  text-align: center;
  color: #fff;
  font-size: clamp(17px, 2.7379400261vw, 28px);
  line-height: 2.1;
  margin-bottom: clamp(40px, 29.4366197183px + 2.8169014085vw, 70px);
}
#marbbshampoounit #marbb_lead p span {
  background: #000;
}
#marbbshampoounit #marbb_lead img {
  padding: 0 4%;
  box-sizing: border-box;
}

@media (max-width: 766px) {
  #marbbshampoounit #marbb_lead {
    background: #000 url(/_ui/responsive/common/ui_assets/online/bg/pickup/marbbshampoounit/img/sp_bg_lead.jpg) bottom center no-repeat;
    background-size: cover;
  }
  #marbbshampoounit #marbb_lead p {
    line-height: 1.7;
  }
}
#marbbshampoounit #marbb_feature {
  position: relative;
  z-index: 0;
}
#marbbshampoounit #marbb_feature:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(248px, 145.8873239437px + 27.2300469484vw, 538px);
  background: url(/_ui/responsive/common/ui_assets/online/bg/pickup/marbbshampoounit/img/bg_ttl_feature.jpg) center top no-repeat;
  background-size: cover;
  z-index: -1;
}
#marbbshampoounit #marbb_feature h2 {
  color: #fff;
  font-size: clamp(56px, 11.7340286832vw, 90px);
  text-align: center;
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  padding-top: clamp(70px, 51.6901408451px + 4.882629108vw, 122px);
  margin-bottom: clamp(56px, 50.014084507px + 1.5962441315vw, 73px);
  margin-top: 0;
  text-shadow: 0 0 10px rgba(32, 35, 42, 0.4), 0 0 20px rgba(32, 35, 42, 0.4), 0 0 30px rgba(32, 35, 42, 0.4), 0 0 38px rgba(32, 35, 42, 0.4);
}
#marbbshampoounit #marbb_feature h3 {
  text-align: left;
  margin-bottom: clamp(10px, 2.9577464789px + 1.8779342723vw, 30px);
}
#marbbshampoounit #marbb_feature h3 img {
  display: inline-block;
  max-width: 257px;
  margin-left: -38px;
}
#marbbshampoounit #marbb_feature h4 {
  font-size: clamp(22px, 3.520208605vw, 35px);
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: clamp(20px, 9.4366197183px + 2.8169014085vw, 50px);
}
#marbbshampoounit #marbb_feature h4 span {
  font-size: clamp(15px, 2.7379400261vw, 21px);
}
#marbbshampoounit #marbb_feature .ttl_right h3,
#marbbshampoounit #marbb_feature .ttl_right h4 {
  text-align: right;
}
#marbbshampoounit #marbb_feature .feature_inner {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
  margin-bottom: clamp(70px, 46.0563380282px + 6.3849765258vw, 138px);
  padding: clamp(0px, 0px + 0vw, 0px) clamp(15px, -4.3661971831px + 5.1643192488vw, 70px);
  padding-top: 0;
  position: relative;
}
#marbbshampoounit #marbb_feature .feature_inner::before {
  content: "";
  position: absolute;
  top: clamp(30px, 24.3661971831px + 1.5023474178vw, 46px);
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
}
#marbbshampoounit #marbb_feature .feature_inner#feature03 .flex_area .img_box {
  max-width: 440px;
}
#marbbshampoounit #marbb_feature .feature_inner#feature03 .img {
  margin-top: clamp(20px, 20px + 0vw, 20px);
}
#marbbshampoounit #marbb_feature .feature_inner#feature03 .img img {
  display: inline-block;
}
#marbbshampoounit #marbb_feature .flex_area {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
#marbbshampoounit #marbb_feature .flex_area .img_box {
  flex: 1;
  max-width: 395px;
}
#marbbshampoounit #marbb_feature .flex_area .img_box img {
  width: 100%;
  height: auto;
  display: block;
}
#marbbshampoounit #marbb_feature .flex_area + .flex_area {
  margin-top: clamp(60px, 63.5211267606px + -0.9389671362vw, 50px);
}
#marbbshampoounit #marbb_feature .box_opposit .img_box {
  order: 2;
}
#marbbshampoounit #marbb_feature .box_opposit .txt_box {
  order: 1;
}
#marbbshampoounit #marbb_feature .al_center {
  align-items: center;
}
#marbbshampoounit #marbb_feature .txt_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#marbbshampoounit #marbb_feature .txt_box h5 {
  font-size: clamp(20px, 3.259452412vw, 30px);
  font-weight: 600;
  margin-bottom: clamp(20px, 16.4788732394px + 0.9389671362vw, 30px);
}
#marbbshampoounit #marbb_feature .txt_box p {
  line-height: 1.4;
}
#marbbshampoounit #marbb_feature .txt_box p span {
  color: #1aa7c8;
  font-size: clamp(19px, 2.6075619296vw, 21px);
  font-weight: 600;
}
#marbbshampoounit #marbb_feature ul {
  margin-top: clamp(20px, 15.0704225352px + 1.3145539906vw, 34px);
}
#marbbshampoounit #marbb_feature ul li {
  font-size: clamp(10px, 1.4341590613vw, 11px);
  margin-bottom: clamp(0.1333333333em, -0.4861878453px + 0.6629834254vw, 0.5333333333em);
}
#marbbshampoounit #marbb_feature .btn_more {
  text-align: center;
}
#marbbshampoounit #marbb_feature .btn_more a {
  border: 1px solid #000;
  padding: 1.2em 0;
  display: inline-block;
  line-height: 1;
  width: clamp(80%, 90% - 10 * (100vw - 375px) / 1065, 90%);
  max-width: 430px;
  color: #fff;
  background: #000;
  margin-top: clamp(35px, 32.5352112676px + 0.6572769953vw, 42px);
}
#marbbshampoounit #marbb_feature .btn_more a:hover {
  text-decoration: none !important;
  opacity: 0.7;
}
#marbbshampoounit #marbb_feature .btn_more a span {
  position: relative;
  display: inline-block;
  padding-right: clamp(0.9333333333em, 11.5138121547px + 0.6629834254vw, 1.3333333333em);
  color: #fff !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 2.2164276402vw, 20px) !important;
}
#marbbshampoounit #marbb_feature .btn_more a span:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  margin: auto;
}
#marbbshampoounit #marbb_feature .sp_txt {
  font-size: 14px !important;
  color: #000 !important;
}
#marbbshampoounit #marbb_feature .movie_box {
  position: relative;
  width: 100%;
  padding-top: 28.125%;
}
#marbbshampoounit #marbb_feature .movie_box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 960px) {
  #marbbshampoounit #marbb_feature h3 img {
    max-width: 200px;
    margin-left: 0;
  }
  #marbbshampoounit #marbb_feature .flex_area {
    gap: 30px;
  }
}
@media (max-width: 767px) {
  #marbbshampoounit #marbb_feature:before {
    background: url(/_ui/responsive/common/ui_assets/online/bg/pickup/marbbshampoounit/img/sp_bg_ttl_feature.jpg) center top no-repeat;
    background-size: cover;
  }
  #marbbshampoounit #marbb_feature h2 {
    color: #000;
    text-shadow: none;
  }
  #marbbshampoounit #marbb_feature .flex_area {
    flex-direction: column;
    align-items: center;
  }
  #marbbshampoounit #marbb_feature .box_opposit .img_box {
    order: 0;
  }
  #marbbshampoounit #marbb_feature .box_opposit .txt_box {
    order: 0;
  }
  #marbbshampoounit #marbb_feature .feature_inner#feature03 .img {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #marbbshampoounit #marbb_feature .feature_inner#feature03 .img img {
    width: auto;
    min-width: 730px;
    height: auto;
    display: block;
  }
  #marbbshampoounit #marbb_feature .sp_txt {
    font-size: 10px !important;
  }
  .movie_box {
    padding-top: 56.25% !important; /* 16:9 → 9/16 = 0.5625 */
  }
}
#marbbshampoounit #marbb_lineup {
  position: relative;
  z-index: 0;
}
#marbbshampoounit #marbb_lineup:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(248px, 145.8873239437px + 27.2300469484vw, 538px);
  background: url(/_ui/responsive/common/ui_assets/online/bg/pickup/marbbshampoounit/img/bg_ttl_lineup.jpg) center top no-repeat;
  background-size: cover;
  z-index: -1;
}
#marbbshampoounit #marbb_lineup h2 {
  color: #fff;
  font-size: clamp(56px, 11.7340286832vw, 90px);
  text-align: center;
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  padding-top: clamp(70px, 51.6901408451px + 4.882629108vw, 122px);
  margin-bottom: clamp(70px, 51.6901408451px + 4.882629108vw, 122px);
  text-shadow: 0 0 10px rgba(32, 35, 42, 0.4), 0 0 20px rgba(32, 35, 42, 0.4), 0 0 30px rgba(32, 35, 42, 0.4), 0 0 38px rgba(32, 35, 42, 0.4);
}
#marbbshampoounit #marbb_lineup .btn_more {
  text-align: center;
}
#marbbshampoounit #marbb_lineup .btn_more a {
  border: 1px solid #000;
  padding: 0.8em;
  display: inline-block;
  line-height: 1;
  width: clamp(80%, 96% - 16 * (100vw - 375px) / 1065, 96%);
  max-width: 260px;
  font-size: 14px;
}
#marbbshampoounit #marbb_lineup .btn_more a:hover {
  text-decoration: none !important;
  background: #f6f6f6;
}
#marbbshampoounit #marbb_lineup .btn_more a span {
  position: relative;
  display: inline-block;
  padding-right: clamp(0.9333333333em, 11.5138121547px + 0.6629834254vw, 1.3333333333em);
}
#marbbshampoounit #marbb_lineup .btn_more a span:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  margin: auto;
}
#marbbshampoounit #marbb_lineup .lineup_container {
  background: #fff;
  width: 92%;
  max-width: 1200px;
  padding: clamp(36px, 13.4647887324px + 6.0093896714vw, 100px) clamp(15px, 2.676056338px + 3.2863849765vw, 50px);
  margin: 0 auto;
}
#marbbshampoounit #marbb_lineup .lineup_container .lineup_items {
  margin-bottom: clamp(26px, 18.9577464789px + 1.8779342723vw, 46px);
}
#marbbshampoounit #marbb_lineup .lineup_container .lineup_items:last-child {
  margin-bottom: clamp(50px, 32.3943661972px + 4.6948356808vw, 100px);
}
#marbbshampoounit #marbb_lineup .lineup_container > div img {
  margin-bottom: 1em;
}
#marbbshampoounit #marbb_lineup .lineup_container dl {
  display: grid;
  grid-template-columns: 50px 1fr;
  width: 100%;
  margin: 0 0 1em;
  row-gap: 0.5em;
}
#marbbshampoounit #marbb_lineup .lineup_container dl dt,
#marbbshampoounit #marbb_lineup .lineup_container dl dd {
  margin: 0;
}
#marbbshampoounit #marbb_lineup .lineup_container dl dt {
  font-size: 12px;
}
#marbbshampoounit #marbb_lineup .lineup_container dl dd {
  font-size: 14px;
}
#marbbshampoounit #marbb_lineup .lineup_container dl dd .grossPrice {
  font-size: 12px;
}

@media (max-width: 767px) {
  #marbbshampoounit #marbb_lineup::before {
    background: url(/_ui/responsive/common/ui_assets/online/bg/pickup/marbbshampoounit/img/sp_bg_ttl_lineup.jpg) center top no-repeat;
    background-size: cover;
  }
  #marbbshampoounit #marbb_lineup .lineup_container dl {
    grid-template-columns: 42px 1fr;
  }
  #marbbshampoounit #marbb_lineup .lineup_container dl dd .grossPrice {
    display: block;
  }
}
#marbbshampoounit #marbb_bnr {
  padding: clamp(50px, 39.4366197183px + 2.8169014085vw, 80px) clamp(15px, 15px + 0vw, 15px);
  box-sizing: border-box;
}
#marbbshampoounit #marbb_bnr p {
  text-align: center;
}
#marbbshampoounit #marbb_bnr p a {
  display: inline-block;
}
#marbbshampoounit #marbb_bnr P:first-child {
  font-size: clamp(21px, 4.9543676662vw, 38px);
  line-height: 1;
  margin-bottom: 1em;
}/*# sourceMappingURL=page.css.map */