/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}


/* ページ共通___________________________*/
.main-area {
  background: #EEE1E7;
}

.main-area img {
  width: 100%;
  height: auto;
}

.main-area a,
.main-area picture {
  display: inline-block;
}

/* font */
.main-area h2,
.main-area h3,
.main-area h4,
.main-area p,
.main-area a {
  font-family: 'BIZ UDPGothic', sans-serif;
  color: #383838;
}

/* 各セクション別設定___________________________*/
/* item 1 */
.item_01 .lp_comment h4 {
  color: #E57461;
}

.item_01 .lp_comment h4::before,
.item_01 .lp_comment h4::after {
  background: #E57461;
}

/* item 2 */
.item_02 .lp_comment h4 {
  color: #6C97E0;
}

.item_02 .lp_comment h4::before,
.item_02 .lp_comment h4::after {
  background: #6C97E0;
}

/* item 3 */
.item_03 .lp_comment h4 {
  color: #7653C4;
}

.item_03 .lp_comment h4::before,
.item_03 .lp_comment h4::after {
  background: #7653C4;
}

/* フェードイン設定___________________________*/
.lpFadeIn {
  transition: all 1s;
  transform: translateY(100px);
  opacity: 0;
}

.lpFadeIn.animated {
  transform: translateY(0);
  opacity: 1;
}

/* pc___________________________*/
@media screen and (min-width: 768px) {
  .main-area {
    padding-bottom: 10rem;
  }

  .main-area .spOnly {
    display: none;
  }

  .main-area h2,
  .main-area h3,
  .main-area h4,
  .main-area p {
    letter-spacing: 0.15em;
  }

  .lp_fv {
    width: 160rem;
    max-width: 160rem;
    text-align: center;
    margin: 0 auto 0;
  }

  .lp_fv h2 {
    font-size: 3.5rem;
    line-height: 1.6;
    font-weight: 700;
    margin: 8.4rem 0 0 0;
  }

  .lp_fv p:nth-of-type(1) {
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 400;
    margin: 2.5rem 0 0 0;
  }

  .lp_fv p:nth-of-type(2) {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 400;
    margin: 2.5rem 0 0 0;
  }

  .lp_contents {
    width: 68rem;
    max-width: 68rem;
    margin: 8.2rem auto 0;
  }

  .lp_item_block:nth-child(n+2) {
    margin: 11rem 0 0 0;
  }

  .lp_itemtext {
    margin: 5rem 0 0 0;
    text-align: center;
  }

  .lp_itemtext h3 {
    position: relative;
    left: 0.5rem;
    width: 45rem;
    font-size: 2.7rem;
    line-height: 1;
    font-weight: 700;
    padding-bottom: 1.2rem;
    border-bottom: 0.3rem dotted #383838;
    margin: 0 auto 0;
  }

  .lp_itemtext h3 span {
    font-size: 2.2rem;
    font-weight: 700;
  }

  .lp_itemtext .lp_item_price {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin: 2.4rem 0 0 0;
  }

  .lp_itemtext .lp_item_price span {
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: 0.1em;
  }

  .lp_itemtext .lp_item_detail {
    font-size: 1.7rem;
    line-height: 1.88;
    font-weight: 400;
    margin: 2.8rem 0 0 0;
  }

  .lp_itemtext .lp_buy {
    width: 22rem;
    margin: 2.5rem auto 0;
  }

  .lp_comment {
    margin: 4.7rem 0 0 0;
    text-align: center;
  }

  .lp_comment h4 {
    display: flex;
    align-items: center;
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 700;
  }

  .lp_comment h4::before,
  .lp_comment h4::after {
    content: "";
    flex-grow: 1;
    height: 0.3rem;
    background: #333;
    margin: 0 1.7rem 0 0;
  }

  .lp_comment h4::after {
    margin: 0 0 0 1.7rem;
  }

  .lp_comment .comment_img {
    width: 70.8rem;
    margin: 1rem 0 0 -1.4rem;
  }

  .lp_footbtn_block {
    width: 35rem;
    margin: 13rem auto 0;
  }

  .lp_footbtn_block .lp_top_btn {
    margin: 2rem 0 0 0;
  }
}

/* sp___________________________*/
@media screen and (max-width: 767px) {
  .main-area {
    padding-bottom: calc(100* (100vw / 750));
  }

  .main-area .pcOnly {
    display: none;
  }

  .main-area h2,
  .main-area h3,
  .main-area h4,
  .main-area p {
    letter-spacing: 0.12em;
  }

  .lp_fv {
    text-align: center;
    margin: 0 auto 0;
  }

  .lp_fv h2 {
    font-size: calc(44* (100vw / 750));
    line-height: 1.65;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: calc(96* (100vw / 750)) 0 0 0;
  }

  .lp_fv p:nth-of-type(1) {
    text-align: left;
    width: calc(645* (100vw / 750));
    font-size: calc(28* (100vw / 750));
    line-height: 1.78;
    font-weight: 400;
    margin: calc(17* (100vw / 750)) auto 0;
  }

  .lp_fv p:nth-of-type(2) {
    text-align: left;
    width: calc(645* (100vw / 750));
    font-size: calc(24* (100vw / 750));
    line-height: 1.78;
    font-weight: 400;
    margin: calc(17* (100vw / 750)) auto 0;
  }

  .lp_contents {
    width: calc(690* (100vw / 750));
    max-width: calc(690* (100vw / 750));
    margin: calc(93* (100vw / 750)) auto 0;
  }

  .lp_item_block:nth-child(n+2) {
    margin: calc(105* (100vw / 750)) 0 0 0;
  }

  .lp_itemtext {
    margin: calc(66* (100vw / 750)) 0 0 0;
    text-align: center;
  }

  .lp_itemtext h3 {
    width: calc(635* (100vw / 750));
    font-size: calc(40* (100vw / 750));
    line-height: 1;
    font-weight: 700;
    padding-bottom: calc(19* (100vw / 750));
    border-bottom: calc(5* (100vw / 750)) dotted #383838;
    margin: 0 auto 0;
  }

  .lp_itemtext h3 span {
    font-size: calc(34* (100vw / 750));
    font-weight: 700;
  }

  .lp_itemtext .lp_item_price {
    font-size: calc(31* (100vw / 750));
    line-height: 1;
    letter-spacing: 0.09em;
    font-weight: 700;
    margin: calc(28* (100vw / 750)) 0 0 0;
  }

  .lp_itemtext .lp_item_price span {
    font-size: calc(27* (100vw / 750));
    line-height: 1.25;
    letter-spacing: 0.09em;
  }

  .lp_itemtext .lp_item_detail {
    font-size: calc(28* (100vw / 750));
    line-height: 1.78;
    font-weight: 400;
    margin: calc(47* (100vw / 750)) 0 0 0;
  }

  .lp_itemtext .lp_buy {
    width: calc(356* (100vw / 750));
    margin: calc(48* (100vw / 750)) auto 0;
  }

  .lp_comment {
    margin: calc(73* (100vw / 750)) 0 0 0;
    text-align: center;
  }

  .lp_comment h4 {
    display: flex;
    align-items: center;
    width: calc(640* (100vw / 750));
    font-size: calc(33* (100vw / 750));
    line-height: 1.24;
    font-weight: 700;
    margin: 0 auto 0;
  }

  .lp_comment h4::before,
  .lp_comment h4::after {
    content: "";
    flex-grow: 1;
    height: calc(3* (100vw / 750));
    background: #333;
    margin: 0 calc(19* (100vw / 750)) 0 0;
  }

  .lp_comment h4::after {
    margin: 0 0 0 calc(19* (100vw / 750));
  }

  .lp_comment .comment_img {
    width: calc(742* (100vw / 750));
    margin: calc(38* (100vw / 750)) 0 0 calc(-27* (100vw / 750));
  }

  .lp_footbtn_block {
    width: calc(590* (100vw / 750));
    margin: calc(127* (100vw / 750)) auto 0;
  }

  .lp_footbtn_block .lp_top_btn {
    margin: calc(29* (100vw / 750)) 0 0 0;
  }
}

/* tablet___________________________*/
@media (max-width: 1600px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}