@charset "utf-8";
.fvBg {
  background: url(../img/top/fv-bg.webp) no-repeat top 25rem left;
  background-size: cover;
  margin-top: var(--header-height);
  padding: 0 0 7rem 0;
}

.fv {
  position: relative;
  margin: 0 auto;
  max-width: 144rem;
}

.fv .left {
  width: 47%;
  padding: 6.6rem 4rem 0 3.5rem;
}

.fv .left .border {
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: 0.0112em;
  color: var(--c-brown);
  padding: 0 0 0.2rem 0;
  border-bottom: 1px solid var(--c-pink);
  margin-bottom: 2rem;
  max-width: 21.6rem;
  text-align: center;
}

.fv .left .title {
  display: inline;
  font-family: var(--ff-serif);
  font-size: clamp(2.6rem, 3.2vw, 4.8rem);
  font-weight: 500;
  line-height: 1.87;
  letter-spacing: 0.029em;
  color: var(--c-brown);
  white-space: nowrap;
  background-image: linear-gradient(
    0deg,
    var(--bg-pink-pale) 0.5em,
    transparent 0.5em
  );
}

.fv .left .text {
  font-size: 1.8rem;
  line-height: 2.25;
  color: var(--c-brown);
  margin: 3.2rem 0 4.8rem 0;
}

.fv .left .cm {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--c-pink);
  padding: 0 0 4.5rem 2rem;
  text-align: center;
  background: url(../img/top/fv-cm.svg) no-repeat top 3.2rem center;
  background-size: 34.8rem;
  max-width: 36.8rem;
  margin-bottom: 0;
}

.fv .right {
  width: 53%;
}

.fv .img {
  width: 100%;
  height: 48.9vw;
  max-height: 55.3rem;
}

.fv .right .btnList .box {
  width: calc(100% / 2);
  margin-bottom: 0;
  border-right: 1px solid var(--c-pink);
}

.fv .right .btnList .box a {
  display: block;
  min-height: 13rem;
  height: 100%;
  padding: 3rem clamp(1rem, 1.8vw, 2rem);
  background-color: var(--c-white);
  background-repeat: no-repeat;
  background-position: top 0.5rem right 0.5rem;
  background-size: clamp(3.8rem, 5vw, 6.5rem);
}

.fv .right .btnList .box1 a {
  background-image: url(../img/top/fv-btn01.svg);
}

.fv .right .btnList .box2 a {
  background-image: url(../img/top/fv-btn02.svg);
}

.fv .right .btnList .box3 a {
  background-image: url(../img/top/fv-btn03.svg);
}

.fv .right .btnList .box:last-child {
  border-right: none;
}

.fv .right .btnList .box .num {
  display: block;
  font-family: var(--ff-en);
  font-size: 1.2rem;
  letter-spacing: 0.144em;
  color: var(--c-pink);
  margin-bottom: 1rem;
}

.fv .right .btnList .box .title {
  font-size: 1.7rem;
  font-weight: 600;
}

.fv .right .btnList .box .title::after {
  content: " ▼";
  color: var(--c-pink);
}

/*empathy*/
.empathySection {
  justify-content: space-between;
  padding: 10rem 0 7rem;
}

.empathySection .left {
  width: 41.6%;
}

.empathySection .left .img {
  height: 100%;
}

.empathySection .right {
  width: 53.5%;
}

.empathySection .right .empathyList .box {
  padding: 2rem 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--c-pink);
  align-items: center;
}

.empathySection .right .empathyList .box .num {
  width: 9rem;
  height: 8.9rem;
  font-family: var(--ff-en);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-align: center;
  color: var(--c-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 1.5rem;
}

.empathySection .right .empathyList .box .num .l {
  display: block;
  font-size: 3.5rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.13rem;
}

.empathySection .right .empathyList .box1 .num {
  background-image: url(../img/top/empathy-list01.svg);
}

.empathySection .right .empathyList .box2 .num {
  background-image: url(../img/top/empathy-list02.svg);
}

.empathySection .right .empathyList .box3 .num {
  background-image: url(../img/top/empathy-list03.svg);
}

.empathySection .right .empathyList .box4 .num {
  background-image: url(../img/top/empathy-list04.svg);
}

.empathySection .right .empathyList .box5 .num {
  background-image: url(../img/top/empathy-list05.svg);
}

.empathySection .right .empathyList .box .text {
  width: calc(100% - 9rem);
  padding-left: 1rem;
}

.empathySection .right .empathyList .box .text .category {
  display: block;
  width: fit-content;
  font-size: 1.4rem;
  padding: 0.4rem 2rem;
  background-color: var(--c-white);
  color: var(--c-pink);
  text-align: center;
  margin-bottom: 0.5rem;
  border-radius: 5rem;
}

.empathySection .right .empathyList .box .text .title {
  font-size: 1.5rem;
  font-weight: 400;
}

/*conceptSection*/
.conceptSection {
  background: url(../img/top/concept-bg-pc.svg) no-repeat center bottom;
  background-size: 100% auto;
  background-color: var(--bg-taupe);
}

.conceptSection .inner {
  justify-content: space-between;
}

.conceptSection .left {
  width: 50.58%;
}

.conceptSection .left .text {
  color: #e4e4e4;
}

.conceptSection .right {
  width: 42.75%;
}

.conceptSection .right .img {
  height: 100%;
}

/*menuSection*/
.menuSection {
  padding-top: 2.2rem;
  background: url(../img/top/menu-bg.webp) no-repeat center;
  background-size: cover;
}

.menuSection .inner {
  max-width: 144rem;
  width: 100%;
}

.menuSection .sectionTitle {
  width: 24.868rem;
  height: 16.66rem;
  padding-top: 3.5rem;
  background: url(../img/top/menu-title-bg.svg) no-repeat center;
  background-size: cover;
  font-family: var(--ff-serif);
  font-size: 4.8rem;
  font-weight: 400;
  letter-spacing: 0.144rem;
  margin: 0 auto 3rem;
  text-align: center;
  color: var(--c-brown);
}

.menuSection .menuBox {
  position: relative;
  padding-top: 5rem;
  margin-bottom: 5rem;
}

.menuSection .menuBoxLast {
  margin-bottom: 0;
}

.menuSection .menuBox .text {
  position: relative;
  width: 50%;
  padding: 5rem;
  background-color: var(--c-white);
  box-shadow: 0rem 0rem 1rem 0.5rem rgba(0, 0, 0, 0.08);
  z-index: 1;
}

.menuSection .menuBoxEven .text {
  margin-left: auto;
}

.menuSection .menuBox .text .num {
  display: block;
  font-family: "Monsieur La Doulaise", cursive;
  font-size: 9.6rem;
  font-weight: 400;
  line-height: 1;
  margin: -0.37em 0;
  color: var(--c-pink);
}

.menuSection .menuBox .text .title {
  font-family: var(--ff-serif);
  font-size: 3.6rem;
  font-weight: 600;
  color: var(--c-brown);
  margin: 2rem 0;
}

.menuSection .menuBox .img {
  position: absolute;
  top: 0;
  right: 0;
  width: 53.54%;
  height: calc(100% - 5rem);
}

.menuSection .menuBoxEven .img {
  left: 0;
}

/*whySection*/
.whySection {
  background-image:
    url(../img/top/why-bg01-pc.svg), url(../img/top/why-bg02.svg);
  background-repeat: no-repeat, no-repeat;
  background-position:
    top -2rem right -2rem,
    bottom -3rem left -3rem;
  background-size: 62.462rem, 23.88rem;
  overflow: hidden;
}

.whySection .flex {
  justify-content: space-between;
  row-gap: 3rem;
}

.whySection .flex .left {
  width: 58.33333333%;
}

.whySection .flex .left .box {
  padding: 1.5rem 1.5rem 2rem 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  margin-bottom: 1rem;
}

.whySection .flex .left .box1 {
  background-image: url(../img/top/why-border01-pc.svg);
}

.whySection .flex .left .box2 {
  background-image: url(../img/top/why-border02-pc.svg);
}

.whySection .flex .left .box3 {
  background-image: url(../img/top/why-border03-pc.svg);
}

.whySection .flex .left .box4 {
  background-image: url(../img/top/why-border04-pc.svg);
  margin-bottom: 0;
}

.whySection .flex .left .box .num {
  display: block;
  font-family: var(--ff-en);
  font-size: 1.3rem;
  letter-spacing: 0.156rem;
  color: var(--c-pink);
  padding-left: 3rem;
  background: url(../img/top/why-icon.svg) no-repeat top left;
  background-size: 2.1rem;
}

.whySection .flex .left .box .title {
  font-size: 2.1rem;
  margin: 1rem 0;
  font-weight: 700;
}

.whySection .flex .left .box .cm {
  font-size: 1.4rem;
}

.whySection .flex .left .text {
  margin: 0 2rem 0 0;
}
.whySection .flex .right {
  position: relative;
  width: 39.82083333%;
}

.whySection .flex .right::before {
  content: "";
  position: absolute;
  bottom: -16.5rem;
  left: 17rem;
  width: 45.646rem;
  height: 33.8rem;
  background: url(../img/top/why-ab.svg) no-repeat center;
  background-size: cover;
}

.whySection .flex .right .img {
  height: 100%;
}

/*priceSection*/
.priceSection {
  position: relative;
  background-color: var(--bg-gray);
}

.priceSection .inner {
  justify-content: space-between;
}

.priceSection .left {
  width: 23.2rem;
}
.priceSection .tableNote {
  font-size: 1.4rem;
  line-height: 1.68;
  color: var(--c-text-muted);
}
.priceSection .left .sectionTitle .ja {
  color: #222222;
}
.priceSection .right {
  width: 70.5833333%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1200px) and (min-width: 768px) {
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SP Setting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .fvBg {
    background-position: top 11rem left;
    padding: 0 0 6.4rem 0;
  }
  .fv > .img {
    width: 100%;
    min-height: 28.3rem;
    height: 75vw;
    max-height: 100%;
  }

  .fv .left {
    width: 100%;
    max-width: 63.2rem;
    padding: 2rem 2rem 4.5rem;
    margin: 0 auto;
  }

  .fv .left .border {
    font-size: 1.2rem;
    line-height: 2.2;
    padding: 0 0 0.3rem;
    max-width: 17.7rem;
  }

  .fv .left .title {
    line-height: 1.53;
  }

  .fv .left .text {
    font-size: 1.4rem;
    line-height: 1.733;
    margin: 2rem 0 3rem;
  }

  .fv .left .cm {
    font-size: 1.2rem;
    line-height: 1.66;
    max-width: 33.5rem;
    padding: 0 0 4.7rem;
    margin: 0 auto;
    background-position: top 2.3rem center;
    background-size: 32.747rem;
  }

  .fv .right {
    width: 100%;
  }

  .fv .right .btnList {
    width: 100%;
  }

  .fv .right .btnList .box {
    display: block;
  }

  .fv .right .btnList .box a {
    min-height: 12.5rem;
    padding: 5.5rem 0 0;
    background-position: top 1rem center;
    background-size: 3.683rem;
    text-align: center;
  }

  .fv .right .btnList .box .num {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .fv .right .btnList .box .title {
    font-size: 1.4rem;
  }

  .fv .right .btnList .box .title::after {
    display: block;
    line-height: 1.2;
  }

  .empathySection {
    padding: 4.3rem 0 0;
  }

  .empathySection .left {
    display: none;
  }

  .empathySection .right {
    width: 100%;
  }

  .empathySection .right .empathyList .box {
    padding: 2rem 0;
  }
  .empathySection .right .empathyList .box .text .category {
    padding: 0.2rem 2rem;
  }
  .empathySection .right .empathyList .box .text .title {
    line-height: 1.66;
  }
  .conceptSection {
    padding-top: 0;
    background-position: left -18rem bottom;
    background-size: 250% auto;
  }

  .conceptSection .inner {
    width: 100%;
  }

  .conceptSection .left {
    width: 100%;
    order: 2;
    padding: 3rem 2rem 0;
  }

  .conceptSection .sectionTitleWhite {
    margin-bottom: 2rem;
  }
  .conceptSection .left .sectionTitle {
    text-align: center;
  }

  .conceptSection .right {
    width: 100%;
    order: 1;
  }

  .conceptSection .right .img {
    min-height: 25rem;
    height: 66vw;
  }

  .menuSection {
    padding-top: 3rem;
    background-position: center;
  }

  .menuSection .inner {
    width: 100%;
  }

  .menuSection .sectionTitle {
    width: 18.6rem;
    height: 12.5rem;
    padding-top: 3.5rem;
    font-size: 3.6rem;
  }

  .menuSection .menuBox {
    padding-top: 0;
  }

  .menuSection .menuBox .img,
  .menuSection .menuBoxEven .img {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: calc(100% - 5rem);
  }

  .menuSection .menuBox .text,
  .menuSection .menuBoxEven .text {
    width: calc(100% - 4rem);
    padding: 3rem 2rem;
    margin: -2rem auto 0;
  }

  .menuSection .menuBox .text .num {
    font-size: 6.4rem;
  }

  .menuSection .menuBox .text .title {
    font-size: 3.2rem;
    margin: 1rem 0;
  }

  .whySection {
    background-image:
      url(../img/top/why-bg01-sp.svg), url(../img/top/why-bg02.svg);
    background-position:
      top -2rem left -0.5rem,
      bottom -2rem left -4rem;
    background-size: 23.7rem, 13.8rem;
  }

  .whySection .flex {
    justify-content: center;
  }

  .whySection .flex .left {
    position: relative;
    order: 2;
    width: 100%;
  }

  .whySection .flex .right {
    order: 1;
    width: 66.6666666%;
    max-width: 47.785rem;
  }

  .whySection .flex .left .box {
    padding: 1.5rem 0 1.5rem 2rem;
    margin-bottom: 0;
  }

  .whySection .flex .left .box .title {
    font-size: 1.8rem;
    margin: 1rem 0;
  }

  .whySection .flex .left .box .cm {
    font-size: 1.4rem;
  }

  .whySection .flex .left .text {
    margin-right: 0;
  }

  .whySection .flex .right::before {
    bottom: -4.5rem;
    right: -9.5rem;
    left: auto;
    display: block;
    width: 16.546rem;
    height: 12.252rem;
  }

  .whySection .flex .right .img {
    height: 100%;
  }
  .priceSection {
    padding: 4rem 0 3rem;
  }
  .priceSection .inner {
    justify-content: space-between;
  }

  .priceSection .left {
    width: 100%;
  }

  .priceSection .right {
    width: 100%;
  }

  .priceSection .tableNote {
    margin-top: 1rem;
  }
}