@charset "UTF-8";
body,
html {
  height: 100%;
  margin: 0 auto;
}


.bg-color {
  background-image: url('..//images/llsp-milkfed/bg_leo.png');
  background-color:rgba(255,255,255,0.98);
  background-blend-mode:lighten;
  position: relative;
  min-height: 100%;
  height: 400px;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
}

@media only screen and (max-width: 599px){
  .bg-color::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    background-position: 50% 100%;
    width:100%;
    height:100vh;
    background-image: url('..//images/llsp-milkfed/bg_leo-sp.png');
    background-color:rgba(255,255,255,0.98);
    background-blend-mode:lighten;
    min-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
  }

  .bg-color {
    background: none;
  }
}

main {
  background-image: linear-gradient(90deg, rgba(246, 168, 255, 0.17), rgba(255, 255, 255, 0) 48%, rgba(114, 229, 255, 0.17));
}

.ttl-a,
.ttl-b:before {
  background: rgb(218, 87, 216);
}

.ttl-b,
.ttl-c {
  color: rgb(218, 87, 216);
}

.ttl-c {
  background-color: rgb(255, 255, 255,0);
}

.center {
  text-align: center;
}

.img-center {
  display: block;
  text-align: center;
}

.main section:nth-last-of-type(4) .inner {
  width: 100rem;
  margin: 0 auto 12rem;
}

@media only screen and (min-width: 599px) and (max-width: 1024px){
  .main section:nth-last-of-type(4) .inner {
    width: 100%;
  }
}

.l-column .col-2 {
  width: 50%;
}

.l-column.goods-list .goods-list__inner {
  box-shadow: none;
}

.goods-list__inner .image.owl-carousel{
  max-width: 60rem;
}

.goods-list__inner .button .btn{
  margin-top: 2rem;
  width: 75%;
  height: 5.5rem;
  line-height: 5.5rem;
}

.goods-list__inner .button .btn.btn-a{
  font-size: 1.4rem;
}

@media only screen and (min-width: 599px) and (max-width: 1024px){
  .l-column.goods-list .col-1 .image {
    width: 60%;
  }
}

@media only screen and (max-width: 599px){
  .l-column .col-1{
    width: 100%;
  }

  .goods-list__inner .button .btn{
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    margin-bottom: 2rem;
  }
  
  .goods-list__inner .button .btn.btn-a{
    font-size: 1.2rem;
  }

  .main section:nth-last-of-type(4) .inner {
    width: 100%;
  }

  .l-column .col-3.col-3-1 {
    flex-basis: 100%;
    width: 100%;
  }
}

.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity:0;
}
@keyframes fadeUpAnime{
  from{
    opacity:0;
    transform:translateY(100px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

main {
  position: relative;
  background-image: 
  linear-gradient(90deg, rgba(246, 168, 255, 0.5), rgba(255, 255, 255, 0) 48%, rgba(246, 168, 255, 0.5));
}
.main {
  padding-bottom: 4rem;
}
.main::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(./../../images/llsp-sai/star.svg);
  z-index: -1;
  opacity: 0.8;
  background-size: 130rem;
}
.header-top {
  padding: 1rem 0 1rem 0;
}
.header-top__sitename {
  width: 6rem;
  margin-bottom: .8rem;
}
.header-top__menu__list li a:hover {
  color: rgb(218, 87, 216);
}
.visual {
  padding-top: 5rem;
}
.ttl-a {
  margin-bottom: 8rem;
}
.ttl-b {
  border-bottom: none;
  z-index: 0;
}
.ttl-b::before {
  bottom: -1.5rem;
}
.ttl-b::after{
  content: '';
  position: absolute;
  display: inline-block;
  width: 6rem;
  height: 11rem;
  background: url(./../../images/llsp-sai/scissors.svg) no-repeat;
  background-size: contain;
  transform: rotate(-40deg);
  z-index: -1;
  margin-left: 0rem;
}
.inner {
  background: #FFFF;
  padding: 6rem 2rem 1rem;
  box-shadow: 11px 17px 0px #000;
  border: solid 2px #000;
  border-radius: 3px;
}
.reserve {
  margin-bottom: 5rem;
}
.line-container{
  border: dotted 3px #ddd;
  border-radius: 10px;
}
.ttl-c {
  font-size: 2.1rem;
;
}
.ttl-d {
  font-size: 2.2rem;
  margin: 2rem 0 5rem;
}
  .pickup {
    padding: 5%;
  }
  .pickup .lead {
    text-align: justify;
  }
  .shampoo,
  .treatment {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8rem;
  }
  .shampoo_img,
  .treatment_img {
    width: 40%;
    padding: 0 9%;
  }
  .shampoo_area,
  .treatment_area {
    position: relative;
    width: 78%;
    z-index: 1;
  }
  .shampoo_area::after,
  .treatment_area::after {
  content: '';
  position: absolute;
  display: block;
  top: -5rem;
  left: 0;
  right: 0;
  width: 30rem;
  height: 30rem;
  background: url(./../../images/llsp-sai/blue.svg) no-repeat;
  background-size: contain;
  transform: rotate(-20deg);
  z-index: -1;
  margin: auto;
  opacity: .1;
}
  .shampoo_area::before,
  .treatment_area::before {
  content: '';
  position: absolute;
  display: block;
  top: 25rem;
  left: 0;
  right: 0;
  width: 30rem;
  height: 30rem;
  background: url(./../../images/llsp-sai/yellow.svg) no-repeat;
  background-size: contain;
  transform: rotate(-110deg);
  z-index: -1;
  margin: auto;
  opacity: .1;
}
  .shampoo_area,
  .treatment_area {
    display: flex;
    align-items: flex-end;
    width: 60%;
    padding: 0 6%;
    flex-wrap: wrap;
  }
  .shampoo img,
  .treatment_img img{
    width: 100%;
  }
  .pickup .ttl {
    width: 100%;
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
  }
  .ttl_bg {
    position: relative;
  }
  .ttl_bg::before {
    content: "";
    position: absolute;
    display: block;
    width: 110%;
    height: 70%;
    background: rgb(218, 87, 216, 0.1);
    left: -10px;
  }
  .pickup .price {
    font-size: 1.8rem;
    margin-bottom: 4rem;
    font-weight: bold;
    color: #333;
  }
  .pkg {
    width: 75%;
  }
  .pkg img{
        border-radius: 14px;
  }
  .treatment_img {
    order: 2;
  }
  .treatment .ttl,
  .treatment .price{
    width: 100%;
    text-align: right;
  }
@media only screen and (min-width: 599px) and (max-width: 1024px){
  .header-top {
    padding: 1rem 4%;
  }
  .main {
    padding-bottom: .5rem;
  }
  .content-container {
    padding: 0 4%;
  }
  .pickup {
    padding: 0;
  }
  .ttl-c {
    font-size: calc(1.8rem + (1vw - 0.6rem) * 0.4762);
}

}

@media only screen and (max-width: 599px){
  .header-top {
    padding: 1rem 1.8%;
  }
  .header-top__sitename img {
    width: 5rem;
  }
  .main::before {
    background-size: 70rem;
  }
  .content-container {
    padding: 0 1.8%;
  }
  .inner {
    margin: 0 auto 4rem;
    padding: 6rem 1% 1rem;
    box-shadow: 5px 8px 0px #000;
  }
  .ttl-a {
    margin-bottom: 2rem;
  }
  .ttl-b::after {
    width: 5rem;
    height: 5rem;
    left: 46%;
    top: -40px;
  }
  .ttl-c {
    font-size: calc(1.8rem + (1vw - 0.32rem) * 0.3584);
  }

  .shampoo, 
  .treatment {
    flex-wrap: wrap;
  }
  .shampoo_area, 
  .treatment_area {
    overflow: hidden;
  }
  .shampoo_area::after, 
  .treatment_area::after {
  top: 0;
  left: -3rem;
  width: 18rem;
  height: 25rem;
  }
.shampoo_area::before, 
.treatment_area::before {
  width: 13rem;
  height: 25rem;
}
.line-container {
  margin-bottom: 1rem;
}
.pickup {
  padding: 0 2%;
}
.shampoo_img,
.treatment_img {
  width: 100%;
  margin-bottom: 3rem;
  text-align: center;
}
.shampoo_img img,
.treatment_img img {
  max-width: 15rem;
}
.shampoo_area, 
.treatment_area {
  width: 100%;
  padding: 0 2%;
}
.shampoo .ttl,
.shampoo .price {
  width: 100%;
  text-align: right;
}
.pkg {
  width: 100%;
}
.treatment_area {
  order: 2;
}
.treatment_img {
  order: 1;
  padding-top: 6rem;
  border-top: dotted 1px #ddd;
}
}