@charset 'utf-8';

/* =========================================================
 PC・スマホ共通
========================================================= */
.signUp a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: bold;
  background-color: #00ba01;
  box-shadow: 0 0.3rem #125011;
  text-decoration: none;
  margin: 0 auto;
  box-sizing: border-box;
  transition: all .15s ease-out;
  border-radius: 0.35rem;
}

.signUp a::before {
  content: "";
  display: inline-block;
  background-image: url(https://www.cinderella-group.com/img/shop/shop_img_common/over_lay_menu/icon_line.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 2.1em;
  height: 1.7em;
}

.lineBlock div>p {
  line-height: 1.5;
  text-indent: -1em;
  padding-left: 1em;
  font-size: 1em;
}

.lineBlock div>p.note {
  font-size: 0.9em;
}

.lineBlock div>p.note::before {
  content: "※";
}

.lineBlock div>p span.textRed {
  color: #ff0000;
  font-weight: bold;
}

.copyListWrapper {
  border: 1px solid #7f7f7f;
  box-sizing: border-box;
  background-color: #fffdec;
  position: relative;
}

.copyListWrapper p {
  line-height: 2;
}

.copyListWrapper li {
  line-height: 2;
}

.copyButton {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 1px;
  border: 1px solid;
  box-sizing: border-box;
  transition: all .15s ease-out;
  border-radius: 0.35rem;
}

/* 装飾の色($GLOBALS['keyword']['menuColor']→ハンバーガーメニューの色分けに準ずる) */
.color1 .copyButton {
  background-color: #41afe7;
  border-color: #41afe7;
  box-shadow: 0 0.25em 0 #0f6896;
}

.color2 .copyButton {
  background-color: #fe6f43;
  border-color: #fe6f43;
  box-shadow: 0 0.25em 0 #9d3616;
}

.color3 .copyButton {
  background-color: #fe3c6c;
  border-color: #fe3c6c;
  box-shadow: 0 0.3rem 0 #930e2f;
}

.color4 .copyButton {
  background-color: #ff6cc4;
  border-color: #ff6cc4;
  box-shadow: 0 0.25em 0 #b91376;
}

.color5 .copyButton {
  background-color: #565353;
  border-color: #565353;
  box-shadow: 0 0.25em 0 #212121;
}

/* 240614追加要素 */
.newOffer {
  width: 740px;
  margin: 35px auto 0;
  margin-top: 35px;
  text-align: center;
}

.newOffer div {
  border: 1px solid;
}

.color1 .newOffer div {
  border-color: #41afe7;
}

.color2 .newOffer div {
  border-color: #fe6f43;
}

.color3 .newOffer div {
  border-color: #fe3c6c;
}

.color4 .newOffer div {
  border-color: #ff6cc4;
}

.color5 .newOffer div {
  border-color: #565353;
}

.newOffer div:first-of-type {
  margin-bottom: 20px;
}

.newOffer p {
  font-size: 1.1429em;
  color: #fff;
  padding: 12px 0;
}

.color1 .newOffer p {
  background-color: #41afe7;
}

.color2 .newOffer p {
  background-color: #fe6f43;
}

.color3 .newOffer p {
  background-color: #fe3c6c;
}

.color4 .newOffer p {
  background-color: #ff6cc4;
}

.color5 .newOffer p {
  background-color: #565353;
}

.newOffer ul {
  width: 100%;
  background-color: #fff;
}

.newOffer li {
  width: 600px;
  margin: 0 auto;
  padding: 12px 0;
  font-size: 1.1429em;
}

.color1 .newOffer li {
  color: #41afe7;
}

.color2 .newOffer li {
  color: #fe6f43;
}

.color3 .newOffer li {
  color: #fe3c6c;
}

.color4 .newOffer li {
  color: #ff6cc4;
}

.color5 .newOffer li {
  color: #565353;
}

.newOffer.gran li {
  width: 560px;
  border-bottom: 2px dotted;
}

.newOffer.gran li:last-of-type {
  border-bottom: none;
}

/* =========================================================
 PC用
========================================================= */
@media screen and (min-width: 769px) {
  .lineBlock>div {
    font-size: 14px;
    width: 740px;
    margin: 0 auto;
  }

  .signUp {
    margin: 40px auto;
  }

  .signUp a {
    width: 280px;
    height: 50px;
    font-size: 22px;
    border: 1px solid #00ba01;
  }

  .signUp a:hover {
    color: #00ba01;
    background-color: #ffffff;
    box-shadow: none;
    transform: translateY(0.25em);
  }

  .signUp a:hover:before {
    background-image: url(https://www.cinderella-group.com/img/shop/shop_img_common/over_lay_menu/icon_line_green.svg);
  }

  .lineBlock div:not(.copyListWrapper)>p {
    margin-bottom: 28px;
  }

  .copyListWrapper {
    margin: 35px auto 30px;
    padding: 22px 32px;
  }

  .copyListWrapper p {
    font-size: 18px;
    margin-bottom: 7px;
  }

  .copyButton {
    width: 280px;
    height: 50px;
    font-size: 18px;
    margin: 0 auto;
    border-radius: 5px;
  }

  .copyButton:hover {
    background: #ffffff;
    box-shadow: none;
    transform: translateY(0.25em);
  }

  .smsText p {
    text-align: center;
  }

  /* 装飾の色($GLOBALS['keyword']['menuColor']→ハンバーガーメニューの色分けに準ずる) */
  .color1 .copyButton:hover {
    color: #41afe7;
  }

  .color2 .copyButton:hover {
    color: #fe6f43;
  }

  .color3 .copyButton:hover {
    color: #fe3c6c;
  }

  .color4 .copyButton:hover {
    color: #ff6cc4;
  }

  .color5 .copyButton:hover {
    color: #565353;
  }

}

/* =========================================================
  スマホ用
========================================================= */
@media screen and (max-width: 768px) {
  .lineBlock>div {
    font-size: 4vw;
    width: 94%;
    margin: 7% auto 10%;
  }

  .signUp a {
    width: 60%;
    height: 9.5vw;
    font-size: 1.2em;
    margin-bottom: 7%;
  }

  .lineBlock div:not(.copyListWrapper)>p {
    margin-bottom: 5vw;
  }

  .copyListWrapper {
    padding: 4.5vw 4vw;
    margin: 5vw auto 6vw;
    font-size: 0.9em;
  }

  .copyListWrapper>p {
    font-size: 3.44vw;
    text-indent: 2vw;
  }

  .copyButton {
    width: 60%;
    margin: 0 auto 11vw;
    height: 9.5vw;
  }

  /* 240614追加要素 */
  .newOffer {
    width: 94%;
    margin: -3vw auto 7vw;
  }

  .newOffer div:first-of-type {
    margin-bottom: 3vw;
  }

  .newOffer p {
    font-size: 1em;
    padding: 3vw 0;
  }

  .newOffer ul {
    width: 100%;
  }

  .newOffer li {
    width: 100%;
    font-size: 1em;
    margin: 0 auto;
    padding: 4vw 0;
  }

  .newOffer.gran li {
    width: 85%;
    padding: 3vw 0;
  }

}