@charset "UTF-8";
:root {
  --color-green: #B8EFDC;
  --color-green2: #6EE2BA;
  --color-blue: #56B3D6;
  --color-blue2: #E4F3F8;
  --color-bg2: #FBFAFA;
  --color-bg: #F0EBE5;
  --color-text-light: #676767;
  --color-splash-bg: #DDEFE6;
}

html, body {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  font-style: normal;
  letter-spacing: 0.5vw;
}

p {
  font-size: 3.2vw;
}

@media screen and (min-width: 751px) {
  p {
    font-size: 1.389vw;
  }
}
img {
  max-width: 100vw;
}

/* SPのみPCのみ表示 */
.only-SP {
  display: revert;
}

.only-PC {
  display: none;
}

@media screen and (min-width: 751px) {
  .only-SP {
    display: none;
  }
  .only-PC {
    display: revert;
  }
}
/* ------- CTA ------- */
.add-cta {
  padding: 0 5.333vw 6.667vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 2.133vw;
}
.add-cta h2 {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 5.6vw;
  line-height: 1.75;
  padding: 1.067vw 0;
}
.add-cta h2::after {
  content: "";
  background-color: var(--color-green2);
  width: 46.667vw;
  display: block;
  margin-top: 1.067vw;
  height: 1px;
  margin-left: 0;
  margin-right: 1.333vw;
}
.add-cta .add-cta-area {
  margin-top: 8vw;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(4, auto);
}
.add-cta .add-cta-area .cta-area-image {
  text-align: center;
}
.add-cta .add-cta-area .cta-area-image img {
  width: 16.667vw;
  height: auto;
  -webkit-filter: drop-shadow(11px 19px 15px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(11px 19px 15px rgba(0, 0, 0, 0.15));
}
.add-cta .add-cta-area .cta-area-desc-catchcopy {
  color: var(--color-text-light);
  font-size: 4.267vw;
}
.add-cta .add-cta-area .cta-area-desc-logo {
  display: grid;
  place-content: center;
}
.add-cta .add-cta-area .cta-area-desc-logo img {
  width: 40vw;
  height: auto;
  margin: 2.667vw 0;
}
.add-cta .add-cta-area .brand-logo-sub {
  display: inline-block;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 3.333vw;
  width: 40vw;
  letter-spacing: 0.15em;
  text-align: center;
  -ms-flex-item-align: center;
      align-self: center;
  line-height: 1.5;
  padding: 0.667vw 0;
}
.add-cta .add-cta-area .cta-area-desc-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* font-size: get_vw(32); */
  font-size: 3.2vw;
  margin-top: 2.667vw;
}
.add-cta .add-cta-area .cta-area-desc-price dt {
  margin-right: 1em;
}
.add-cta .add-cta-area .cta-area-desc-price small {
  font-size: 75%;
}
.add-cta .add-cta-area .cta-detail-lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2vw;
  padding-top: 5.333vw;
  letter-spacing: 0.7vw;
  grid-column: span 2/span 2;
}
.add-cta .add-cta-area .cta-area-btn {
  margin-top: 3.333vw;
  grid-column: span 2/span 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.add-cta .add-cta-area .cta-area-btn a {
  background-color: var(--color-green2);
  color: #000;
  padding: 0.75em 1em;
  border-radius: 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 87%;
}
.add-cta .add-cta-detail {
  margin-top: 9.333vw;
}
.add-cta .add-cta-detail h3 {
  color: var(--color-green2);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2vw;
  letter-spacing: 0.7vw;
}
.add-cta .add-cta-detail .cta-detail-des-info {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.8vw;
  letter-spacing: 0.5vw;
}
.add-cta .add-cta-detail .cta-detail-des-info th, .add-cta .add-cta-detail .cta-detail-des-info td {
  padding: 0.35em 1em;
}
.add-cta .add-cta-detail .cta-detail-des-info th {
  text-align: left;
  padding-left: 0;
  font-weight: normal;
  white-space: nowrap;
}
.add-cta .add-cta-detail .cta-detail-image {
  text-align: center;
  padding-bottom: 4vw;
}
.add-cta .add-cta-detail .cta-detail-image img {
  width: 80vw;
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 751px) {
  .add-cta {
    padding: 5.208vw 9.722vw 3.472vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 5.208vw;
  }
  .add-cta-01 {
    margin-bottom: -6.944vw;
    background: var(--color-bg2);
  }
  .add-cta-02 {
    margin-top: -10.417vw;
  }
  .add-cta h2 {
    font-size: 2.778vw;
    padding: 0.556vw 0;
  }
  .add-cta h2::after {
    content: "";
    background-color: transparent;
    border-top: 1px solid var(--color-green2);
    width: 27.778vw;
    display: inline-block;
    margin-top: 1.389vw;
    height: 1.389vw;
    margin-left: 1.389vw;
  }
  .add-cta .add-cta-area {
    width: 56.944vw;
    margin: 0 auto;
  }
  .add-cta .add-cta-area .cta-area-image {
    grid-row: span 4/span 3;
    /* text-align: right; */
  }
  .add-cta .add-cta-area .cta-area-image img {
    width: 11.111vw;
  }
  .add-cta .add-cta-area .cta-area-desc-catchcopy {
    font-size: 1.944vw;
    margin-bottom: 0.972vw;
  }
  .add-cta .add-cta-area .cta-area-desc-logo {
    place-content: baseline;
  }
  .add-cta .add-cta-area .cta-area-desc-logo img {
    width: 13.194vw;
    margin-bottom: 0.556vw;
    /* margin-top: pc_vw(20); ; */
    margin-top: 0.556vw;
  }
  .add-cta .add-cta-area .brand-logo-sub {
    min-width: 10em;
    font-size: 1.111vw;
    width: 13.194vw;
    line-height: 1.5;
    padding: 0.347vw 0;
  }
  .add-cta .add-cta-area .cta-area-desc-price {
    font-size: 1.25vw;
    margin-top: 1.389vw;
  }
  .add-cta .add-cta-area .cta-detail-lead {
    font-size: 1.042vw;
    letter-spacing: 0.1vw;
    padding-top: 1.389vw;
    line-height: 2;
   /*ボタン公開時は下記を非公開*/ 
    /*grid-column: span 1 / span 2;*/
  }
  .add-cta .add-cta-area .cta-area-btn {
    grid-column-start: 2;
    grid-row-start: 3;
    margin-top: 1.389vw;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .add-cta .add-cta-area .cta-area-btn a {
    width: 61%;
    border-radius: 1.042vw;
    font-size: 1.667vw;
  }
  .add-cta .add-cta-detail {
    width: 56.944vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
  .add-cta .add-cta-detail .cta-detail-desc {
    grid-column-start: 1;
    grid-row-start: 2;
  }
  .add-cta .add-cta-detail h3 {
    font-size: 1.389vw;
  }
  .add-cta .add-cta-detail .cta-detail-des-info {
    width: 31.25vw;
    margin-top: 1.389vw;
  }
  .add-cta .add-cta-detail .cta-detail-des-info th, .add-cta .add-cta-detail .cta-detail-des-info td {
    font-size: 1.042vw;
    letter-spacing: 0.1vw;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
  }
  .add-cta .add-cta-detail .cta-detail-image {
    grid-row: span 2/span 3;
    grid-column-start: 2;
    grid-row-start: 1;
    padding-bottom: 5.208vw;
  }
  .add-cta .add-cta-detail .cta-detail-image img {
    width: 55.556vw;
  }
}
/* ------- fv ------- */
.fv-bg {
  background-image: url(../../assets_sankyo/images/fv-bg.jpg.webp);
}
.fv-bg .lifoop-logo {
  padding-top: 30.667vw;
  grid-template-rows: 20.667vw 12.8vw -webkit-max-content;
  grid-template-rows: 20.667vw 12.8vw max-content;
}
.fv-bg .fv-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2.667vw;
}
.fv-bg .fv-price dt {
  margin-right: 1em;
}
.fv-bg .fv-price small {
  font-size: 75%;
}
.fv-bg .fv-btn {
  margin-top: 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.fv-bg .fv-btn a {
  background-color: var(--color-green2);
  font-size: 2.933vw;
  color: var(--color-text-light);
  padding: 0.75em 1em;
  border-radius: 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 57%;
  -webkit-box-shadow: 5px 6px 12px 1px rgba(46, 177, 132, 0.45);
          box-shadow: 5px 6px 12px 1px rgba(46, 177, 132, 0.45);
}

@media screen and (min-width: 751px) {
  .fv-bg {
    background-image: url(../../assets/images/fv-bg-pc@2x.jpg.webp);
  }
  .fv-bg .lifoop img {
    margin-top: 14%;
  }
  .fv-bg .lifoop-logo {
    padding-top: 0;
    margin-top: 15%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr -webkit-max-content;
    grid-template-rows: 1fr 1fr max-content;
    height: 45%;
    gap: 1.458vw;
  }
  .fv-bg .lifoop-logo .fv-catchcopy .fv-text-02 {
    margin-bottom: 0;
  }
  .fv-bg .fv-price {
    font-size: 1.528vw;
    margin-top: -1.389vw;
    margin-bottom: 0.694vw;
  }
  .fv-bg .fv-price dt, .fv-bg .fv-price dd {
    letter-spacing: 0.1vw;
  }
  .fv-bg .fv-btn {
    margin-top: 0;
  }
  .fv-bg .fv-btn a {
    width: 40%;
    border-radius: 1.042vw;
    font-size: 1.667vw;
    letter-spacing: 0.1vw;
    -webkit-box-shadow: 10px 8px 16px 1px rgba(46, 177, 132, 0.61);
            box-shadow: 10px 8px 16px 1px rgba(46, 177, 132, 0.61);
  }
}