﻿/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}


@font-face {
  font-family: "BIZUDPGothic-Bold";
  src: url("../fonts/BIZUDPGothic-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "BIZUDPGothic-Regular";
  src: url("../fonts/BIZUDPGothic-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "MPLUSRounded1c-ExtraBold";
  src: url("../fonts/MPLUSRounded1c-ExtraBold.ttf") format("truetype");
}

html {
  font-size: 62.5%;
}

.main-area {
  transform: none;
  filter: none;
  font-family: 'BIZUDPGothic-Regular', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-style: normal;
  font-weight: 400;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  letter-spacing: 0.05em;
  color: #4C4242;
  background-color: #fff;
}

.sp-only {
  display: block;
}

.pc-only {
  display: none;
}

body {
  width: 100%;
}

.main-area img,
.main-area video,
.main-area svg {
  width: 100%;
  height: auto;
}

.main-area * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main-area a,
.main-area picture {
  display: block;
}

/* ============================= ▼ タブレット ▼ == */
@media screen and (min-width: 768px) and (max-width: 1600px) {
  html {
    font-size: calc(10 * (100vw/1600));
  }
}

/* ============================= ▼ heading ▼ == */
.main-area .heading__wrapper {
  width: calc(750 * (100vw / 750));
}

/* ============================= ▼ section--01 ▼ == */
.section--01 {
  margin-top: calc(78 * (100vw / 750));
}

.section__lead--01 {
  font-size: calc(28 * (100vw / 750));
  line-height: 1.7142857143;
  letter-spacing: 0.16em;

  width: calc(710 * (100vw / 750));
  margin: 0 auto;
}

.content__block--01 {
  margin-top: calc(77 * (100vw / 750));
}

.content__unit--01-1,
.content__unit--01-2 {
  width: calc(710 * (100vw / 750));
  margin: 0 auto;
}

.item-name {
  font-size: calc(28 * (100vw / 750));
  line-height: 1.7142857143;
  font-family: 'BIZUDPGothic-Bold', sans-serif;
  letter-spacing: 0.125em;
}

.tax {
  font-size: calc(26 * (100vw / 750));
  line-height: 1.8461538462;
  letter-spacing: 0.125em;
}

.content__credit span {
  text-decoration: underline;
  display: block;
}

.content__unit--01-1 .content__credit {
  margin-top: calc(8 * (100vw / 750));
}

.content__unit--01-2 {
  margin-top: calc(75 * (100vw / 750));
}

.content__unit--01-2 .content__credit {
  margin-top: calc(26 * (100vw / 750));
}

/* ============================= ▼ section--02 ▼ == */
.section--02 {
  margin-top: calc(108 * (100vw / 750));
  background-color: #E6F6F9;
  padding: calc(100 * (100vw / 750)) calc(18 * (100vw / 750)) calc(120 * (100vw / 750));
}

.section--02 .content__ttl {
  color: #7BBBC1;
  font-family: 'MPLUSRounded1c-ExtraBold', sans-serif;
  font-size: calc(54 * (100vw / 750));
  line-height: 1.2962962963;
  letter-spacing: 0.125em;
  text-align: left;
}

.section--02 .content__lead {
  font-size: calc(28 * (100vw / 750));
  line-height: 1.7142857143;
  letter-spacing: 0.125em;
  text-align: left;
  margin-top: calc(24 * (100vw / 750));
}

.content__image--02-1 {
  margin-top: calc(68 * (100vw / 750));
  position: relative;
  z-index: 1;
  width: calc(712 * (100vw / 750));
  padding-left: calc(18 * (100vw / 750));
  padding-bottom: calc(18 * (100vw / 750));
}

.content__image--02-1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: calc(692 * (100vw / 750));
  height: calc(465 * (100vw / 750));
  z-index: -1;
}

.content__image--02-2 {
  margin: calc(72 * (100vw / 750)) auto 0;
  z-index: 1;
  position: relative;
  width: calc(522 * (100vw / 750));
  padding-right: calc(18 * (100vw / 750));
  padding-bottom: calc(18 * (100vw / 750));
}

.content__image--02-2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
  width: calc(502 * (100vw / 750));
  height: calc(728 * (100vw / 750));
  z-index: -1;
}

/* ============================= ▼ section--03 ▼ == */
.section--03 {
  margin-top: calc(90 * (100vw / 750));
}

.section--03 .content__ttl {
  font-family: 'MPLUSRounded1c-ExtraBold', sans-serif;
  font-size: calc(54 * (100vw / 750));
  letter-spacing: 0.125em;
  text-align: left;
  text-transform: uppercase;
  padding: 0 calc(20 * (100vw / 750));
}

.section--03 .content__lead {
  font-size: calc(28 * (100vw / 750));
  line-height: 1.7142857143;
  letter-spacing: 0.125em;
  text-align: left;
  margin-top: calc(24 * (100vw / 750));
  padding: 0 calc(20 * (100vw / 750));
}

.content__block--03 {
  margin-top: calc(60 * (100vw / 750));
  padding: 0 calc(20 * (100vw / 750));
}

.content__unit--03-1 {
  width: calc(710 * (100vw / 750));
}

.content__block--03-2 {
  margin-top: calc(20 * (100vw / 750));
  display: flex;
  justify-content: center;
}

.content__unit--03-2 {
  width: calc(345 * (100vw / 750));
}

.content__unit--03-3 {
  width: calc(345 * (100vw / 750));
  margin-left: calc(20 * (100vw / 750));
}

.content__block--04 {
  margin-top: calc(94 * (100vw / 750));
}

.content__unit--04-1 {
  width: calc(572 * (100vw / 750));
  margin: 0 auto 0 0;
}

.content__unit--04-2 {
  margin-top: calc(50 * (100vw / 750));
}

.content__image--04-2 {
  width: calc(503 * (100vw / 750));
  margin: 0 0 0 auto;
}

.content__image--04-3 {
  width: calc(503 * (100vw / 750));
  margin: calc(-50 * (100vw / 750)) auto 0 0;
}

.main-area .btn-wrapper {
  margin: calc(72 * (100vw / 750)) auto calc(160 * (100vw / 750));
}

.main-area .btn {
  width: calc(580 * (100vw / 750));
  margin: 0 auto;
}

.main-area .top-btn {
  margin-top: calc(30 * (100vw / 750));
}

/* ============================= ▼ PC ▼ == */
@media screen and (min-width: 768px) {

  /* ============================= ▲ PC ▲ == */
  /* ============================= ▼ 全体 ▼ == */
  #LB220412Sweet .sp-only {
    display: none;
  }

  #LB220412Sweet .pc-only {
    display: block;
  }

  /* ============================= ▲ 全体 ▲ == */
  .main-area .heading__wrapper {
    width: 160rem;
    margin: 0 auto;
  }
  /* ============================= ▼ section--01 ▼ == */
  .section--01 {
    margin-top: 9.4rem;
  }

  .section__lead--01 {
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.125em;
    width: auto;
  }

  .content__block--01 {
    margin-top: 5.1rem;
    display: flex;
    justify-content: center;
  }

  .content__unit--01-1,
  .content__unit--01-2 {
    width: 47rem;
    margin: 0;
  }

  .content__unit--01-2 {
    margin-left: 4rem;
  }

  .item-name {
    font-size: 1.5rem;
    line-height: 1.6666666667;
  }

  .tax {
    font-size: 1.4rem;
    line-height: 1.7857142857;
  }

  .content__unit--01-1 .content__credit,
  .content__unit--01-2 .content__credit {
    margin-top: 1.5rem;
  }

  /* ============================= ▼ section--02 ▼ == */
  .section--02 {
    margin-top: 9.5rem;
    padding: 8.7rem 0 11.4rem;
  }

  .content__block--02 {
    display: flex;
    justify-content: center;
    margin-left: 10.8rem;
  }

  .content__unit--02-1 {
    width: 59.5rem;
  }

  .section--02 .content__ttl {
    font-size: 4.2rem;
    line-height: 1.3571428571;
  }

  .section--02 .content__lead {
    font-size: 1.5rem;
    line-height: 2.1333333333;
    margin-top: 1.8rem;
    width: 58.3rem;
  }

  .content__image--02-1 {
    margin-top: 6rem;
    width: 59.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .content__image--02-1::after {
    width: 58rem;
    height: 39rem;
  }

  .content__unit--02-2 {
    margin-left: 5.5rem;
  }
  .content__image--02-2 {
    margin: 1.3rem 0 0 0;
    width: 44rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .content__image--02-2::after {
    width: 42.5rem;
    height: 61.5rem;
  }

  /* ============================= ▼ section--03 ▼ == */
  .section--03 {
    margin-top: 9.2rem;
  }

  .section--03 .content__ttl {
    font-size: 4.2rem;
    text-align: center;
    padding: 0;
  }

  .section--03 .content__lead {
    font-size: 1.5rem;
    line-height: 2;
    text-align: center;
    margin-top: 2.5rem;
    padding: 0;
  }

  .content__block--03 {
    margin-top: 3rem;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  .content__unit--03-1,
  .content__unit--03-2,
  .content__unit--03-3 {
    width: 37rem;
  }

  .content__block--03-2 {
    margin-top: 0;
  }

  .content__unit--03-2,
  .content__unit--03-3 {
    margin-left: 4.6rem;
  }

  .content__block--04 {
    margin-top: 11.7rem;
    display: flex;
    justify-content: center;
  }

  .content__unit--04-1 {
    width: 44.25rem;
    margin: 0.4rem 0 0 0;
  }

  .content__unit--04-2 {
    margin-top: 0;
    margin-left: 6.6rem;
  }

  .content__image--04-2 {
    width: 34rem;
    margin: 0 0 0 13.4rem;
  }

  .content__image--04-3 {
    width: 34rem;
    margin: 6rem 13.4rem 0 0;
  }

  .main-area .btn-wrapper {
    margin: 6rem auto 9.8rem;
  }

  .main-area .btn {
    width: 28rem;
  }
  .main-area .btn:hover {
    opacity: .7;
  }

  .main-area .top-btn {
    margin-top: 1.6rem;
  }


}