@charset "UTF-8";

/* ========================================
  コンテンツ
 ========================================= */
 .content h2 {
  margin-bottom: 0;
 }

/* ========================================
  CTA
 ========================================= */
/* CTA 共通 */
.cta {
  position: relative;
}
.cta .btn-select {
  position: absolute;
}
.cta .btn-select select {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.cta .btn-cart {
  position: absolute;
}
@media (width < 768px) {
  .cta .btn-select,
  .cta .btn-cart {
    right: 4vw;
  }
  .cta .btn-cart {
    bottom: 9vw;
    width: 88.3vw;
  }
}
@media (768px <= width) {
  .cta .btn-select,
  .cta .btn-cart {
    right: 40px;
  }
  .cta .btn-cart {
    top: 90px;
    width: 883px;
  }
}
.cta .btn-cart.add {
  top: 0;
  bottom: auto;
}

/* CTA ブラ（ふんわりルームブラ） */
@media (width < 768px) {
  .cta__fw_bra .btn-select {
    top: 9vw;
    width: 88.7vw;
  }
}
@media (768px <= width) {
  .cta__fw_bra .btn-select {
    top: 90px;
    width: 887px;
  }
}
/* CTA ブラ（凛とルームブラ） */
@media (width < 768px) {
  .cta__rinto_bra .btn-select {
    top: 9vw;
    width: 88.6vw;
  }
}
@media (768px <= width) {
  .cta__rinto_bra .btn-select {
    top: 90px;
    width: 886px;
  }
}
/* CTA ブラ（ふんわりルームブラブレス） */
@media (width < 768px) {
  .cta__breath_bra .btn-select {
    top: 9vw;
    width: 88.3vw;
  }
}
@media (768px <= width) {
  .cta__breath_bra .btn-select {
    top: 90px;
    width: 883px;
  }
}

/* CTA ブラ・ショーツ（ふんわりルームブラ） */
@media (width < 768px) {
  .cta__fw_bra_shorts .btn-select {
    top: 6vw;
    width: 88.3vw;
  }
}
@media (768px <= width) {
  .cta__fw_bra_shorts .btn-select {
    top: 60px;
    width: 883px;
  }
}
/* CTA ブラ・ショーツ（凛とルームブラ） */
@media (width < 768px) {
  .cta__rinto_bra_shorts .btn-select {
    top: 6vw;
    width: 89vw;
  }
}
@media (768px <= width) {
  .cta__rinto_bra_shorts .btn-select {
    top: 60px;
    width: 890px;
  }
}
/* CTA ブラ・ショーツ（ふんわりルームブラブレス） */
@media (width < 768px) {
  .cta__breath_bra_shorts .btn-select {
    top: 6vw;
    width: 88.7vw;
  }
}
@media (768px <= width) {
  .cta__breath_bra_shorts .btn-select {
    top: 60px;
    width: 887px;
  }
}


/* ========================================
  エフェクト
 ========================================= */
/* 光るボタン */
.shiny-btn {
  position: relative;
  overflow: hidden;
}
.shiny-btn::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 84px;
  height: 100%;
  transform: scale(2) rotate(20deg) translate3d(0, 0, 0);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0);
  -webkit-animation-name: shiny;
  animation-name: shiny;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@media (width < 768px) {
  #container main > .inner {
    padding: 0;
  }
  .shiny-btn::after {
    width: 11.2vw;
  }
}
@-webkit-keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

/* アップダウン */
.updown {
  -webkit-animation-name: updown1;
  animation-name: updown1;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}


/* ========================================
  注意事項
 ========================================= */
.attention {
  border: 1px solid #333333;
  margin-top: 40px;
  padding: 40px;
}
.attention__heading {
  margin: 0 0 1em;
  font-size: 3.0rem;
  font-weight: 700;
  text-align: center;
}
.attention__text {
  line-height: 1.7;
}
.attention__text a {
  color: #B9647B;
}
.attention__text p + p {
  margin-top: 1em;
}
.attention__text ul {
  margin: 1em 0 0 1em;
}
.attention__text li::before {
  content: "・";
  display: inline-block;
  text-indent: -1em;
}


@media screen and (max-width: 820px) {
  /* 注意事項 */
  .attention {
    padding: 30px 20px;
  }
  .attention__heading {
    margin: 0 0 0.5em;
    font-size: 2.4rem;
  }
}