@charset "UTF-8";
/* --- フォント関連 ---*/
/* --- CSS start ---*/
html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  position: relative;
  font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  line-height: 1;
}

img {
  width: 100%;
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: unset;
}

ul,
ol,
li {
  list-style: none;
}

main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
div,
address,
iframe,
canvas,
hr,
textarea {
  display: block;
}

textarea {
  resize: vertical;
  overflow: hidden;
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 0;
}

input,
button,
select {
  vertical-align: middle;
  border-radius: 0;
  box-sizing: border-box;
  border: 0;
  background: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
  white-space: normal;
  outline: 0;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
}

button,
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
select {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
}

select::-ms-expand {
  display: none;
}

table {
  border-collapse: collapse;
}

.header__wrapper {
  position: fixed;
  z-index: 1000;
  background-color: rgba(2, 147, 152, 0.67);
  height: 13.3333333333vw;
  width: 100%;
  padding: 2.6666666667vw 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}
.header__wrapper.is-show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.header.is-open .header__wrapper {
  background-color: unset;
}
.header__logo {
  width: 22.5333333333vw;
}
.header.is-open .header__logo {
  opacity: 0;
}
.header__toggle--btn {
  position: relative;
  display: block;
  height: 5.3333333333vw;
  width: 7.0666666667vw;
}
.header__toggle--line {
  display: inline-block;
  width: 100%;
  height: 0.1rem;
  background-color: #fff;
  transition: all 0.4s ease;
}
.header__toggle--top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0%;
}
.header.is-open .header__toggle--top {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.header__toggle--mid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header.is-open .header__toggle--mid {
  opacity: 0;
}
.header__toggle--btm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 100%;
}
.header.is-open .header__toggle--btm {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-pc {
  background-color: rgba(2, 147, 152, 0.67);
  width: 100%;
  padding: 1.0416666667vw 2.6041666667vw;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}
.nav-pc.is-show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-pc__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-pc__logo {
  display: inline-block;
  width: 7.65625vw;
  max-width: 14.7rem;
}
.nav-pc__lists {
  display: flex;
  justify-content: space-between;
  width: 53.3854166667vw;
}
.nav-pc__list {
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  font-size: min(1.375vw, 2.64rem);
}
.nav-pc__list--jp {
  font-family: "yu-mincho-pr6n", sans-serif;
}

.nav-sp {
  background-image: url("../img/bg-nav.webp");
  background-size: cover;
  position: fixed;
  right: 0;
  z-index: -1;
  transform: translateX(50%);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}
.header.is-open .nav-sp {
  z-index: 100;
  transform: translateX(0%);
  opacity: 1;
}
.nav-sp__lists {
  padding: 33.3333333333vw 0vw 16vw 13.3333333333vw;
}
.nav-sp__list {
  color: #fff;
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: min(7.0666666667vw, 5.3rem);
}
.nav-sp__list:not(:last-of-type) {
  margin-bottom: 14vw;
}
.nav-sp__list--jp {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: min(6.6666666667vw, 5rem);
}
.nav-sp__list::before {
  content: url("../img/nav-list-dot.webp");
  display: inline-block;
  transform: scale(0.5);
  position: relative;
  top: 0.2rem;
}
.nav-sp__list span {
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.ttl-en {
  color: #fff;
  font-size: min(12.5066666667vw, 9.38rem);
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  letter-spacing: -0.04em;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .ttl-en {
    font-size: min(3.9114583333vw, 7.51rem);
  }
}

.more-btn {
  display: block;
  width: 66.2666666667vw;
  height: 10.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .more-btn {
    width: min(18.59375vw, 35.7rem);
    height: min(3.0208333333vw, 5.8rem);
  }
}

.forPc {
  display: none !important;
}
@media only screen and (min-width: 992px) {
  .forPc {
    display: block !important;
  }
}

@media only screen and (min-width: 992px) {
  .forSp {
    display: none !important;
  }
}

.temp-lp {
  max-width: 65rem;
  margin: 0 auto;
}

.fv {
  position: relative;
}
.fv__logo {
  position: absolute;
  z-index: 20;
  width: 28vw;
  top: 6vw;
  left: 50%;
  transform: translateX(-50%);
}
.fv__imgWrapper {
  overflow: hidden;
  width: 100%;
}
.fv__img {
  filter: blur(10px);
  transition: all 1.5s ease;
}
.fv__img.fadeIn {
  filter: blur(0px);
  transform: scale(1.05);
}
.fv__catch {
  width: 39.6vw;
  position: absolute;
  top: 58.1333333333vw;
  left: 9.3333333333vw;
  color: #4a5452;
  z-index: 20;
}
@media only screen and (min-width: 992px) {
  .fv__catch {
    width: 20.8854166667vw;
    top: 21.71875vw;
    left: 13.6979166667vw;
  }
}
.fv__itemName {
  position: absolute;
  top: 122.6666666667vw;
  left: 50%;
  transform: translate(-50%);
  width: 43.3333333333vw;
}
.fv__hashtag {
  position: absolute;
  top: 130.1333333333vw;
  left: 50%;
  transform: translateX(-50%);
  width: 81.8666666667vw;
}
.fv__btn {
  position: relative;
  top: -21.3333333333vw;
  margin: 0 auto;
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
  width: 88.4vw;
}
@media only screen and (min-width: 992px) {
  .fv__btn {
    position: absolute;
    width: 26.5625vw;
    top: 50.625vw;
    right: 0;
  }
}
@media only screen and (min-width: 992px) {
  .fv__pcTxt--hashtag {
    position: absolute;
    top: 33.8541666667vw;
    left: 13.6979166667vw;
    width: 25.3645833333vw;
    z-index: 2;
  }
}

.movie {
  background-image: url("../img/bg-movie.webp");
  margin-top: -13.3333333333vw;
  padding-top: 20vw;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) {
  .movie {
    margin-top: -20.8333333333vw;
    padding-top: 10.4166666667vw;
    background-image: url("../img/bg-movie-pc.webp");
    background-position: top;
    background-size: cover;
    padding-bottom: 15.625vw;
  }
}
.movie__hashtag {
  width: 84vw;
  margin: 0 auto 10.4vw;
}
.movie__hashtag img {
  visibility: hidden;
}
@media only screen and (min-width: 992px) {
  .movie__hashtag {
    width: min(30.7291666667vw, 59rem);
    margin: 0 auto 3.90625vw;
  }
  .movie__hashtag img {
    visibility: visible;
  }
}
.movie__ttl {
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  font-size: min(7.3333333333vw, 5.5rem);
  margin-bottom: 2.4vw;
  color: #515151;
}
@media only screen and (min-width: 992px) {
  .movie__ttl {
    font-size: min(2.6041666667vw, 5rem);
    margin-bottom: 0.9375vw;
  }
}
.movie__desc {
  font-family: "yu-mincho-pr6n", sans-serif;
  text-align: center;
  margin-bottom: 8vw;
  font-size: min(4vw, 3rem);
}
@media only screen and (min-width: 992px) {
  .movie__desc {
    font-size: min(1.40625vw, 2.7rem);
    margin-bottom: 3.125vw;
  }
}
.movie__thumb {
  position: relative;
  width: 100%;
  box-shadow: 1rem 1.5rem 2rem 0.8rem rgba(126, 177, 168, 0.55);
}
@media only screen and (min-width: 992px) {
  .movie__thumb {
    margin: 0 auto;
    width: min(53.6458333333vw, 103rem);
  }
}
.movie__thumb--btn {
  width: 14vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 992px) {
  .movie__thumb--btn {
    width: 5.46875vw;
  }
}

.lity-wrap {
  background-image: url("../img/bg-movie-modal.webp");
  background-size: cover;
  background-position: center;
}
.lity-wrap::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url("../img/movie-close.webp");
  background-size: cover;
  top: 2rem;
  right: 2rem;
  width: min(5.3333333333vw, 4rem);
  height: min(5.3333333333vw, 4rem);
}
@media only screen and (min-width: 992px) {
  .lity-wrap::after {
    top: 3rem;
    right: 3rem;
    width: min(2.0833333333vw, 4rem);
    height: min(2.0833333333vw, 4rem);
  }
}
@media only screen and (min-width: 992px) {
  .lity-wrap {
    background-image: url("../img/bg-movie-modal-pc.webp");
  }
}

.lity-close {
  opacity: 0;
}

.campaign {
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 95%, rgb(255, 255, 255) 100%), url("../img/bg-campaign.webp");
  padding-top: 38.6666666667vw;
  padding-bottom: 34.6666666667vw;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) {
  .campaign {
    padding-top: 0;
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 95%, rgb(255, 255, 255) 100%), url("../img/bg-campaign-pc.webp");
    background-size: cover;
    padding-bottom: 6.6666666667vw;
  }
}
.campaign__txtWrapper {
  padding: 0 12vw 0;
}
@media only screen and (min-width: 992px) {
  .campaign__txtWrapper {
    padding: 0;
    text-align: center;
  }
}
.campaign__concept {
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  color: #29ad95;
  font-size: min(6.9333333333vw, 5.2rem);
  margin-bottom: 9.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .campaign__concept {
    font-size: min(2.6041666667vw, 5rem);
    margin-bottom: 3.9583333333vw;
  }
}
.campaign__catch {
  color: #4a5452;
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: min(10.6666666667vw, 8rem);
  line-height: 1.41;
  margin-bottom: 6.6666666667vw;
  letter-spacing: 0.1em;
}
@media only screen and (min-width: 992px) {
  .campaign__catch {
    font-size: min(2.9166666667vw, 5.6rem);
    margin-bottom: 1.0416666667vw;
  }
}
.campaign__desc {
  color: #353535;
  font-size: min(4.3vw, 2.8rem);
  line-height: 2.5;
  margin-bottom: 13.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .campaign__desc {
    font-size: min(1.25vw, 2.4rem);
    line-height: 2.9;
    margin-bottom: 0;
  }
}
.campaign__item {
  position: relative;
  width: 100%;
  height: 121.3333333333vw;
  margin-bottom: 26.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .campaign__item {
    margin-bottom: 0;
    height: 47.3958333333vw;
  }
}
.campaign__item--br1 {
  position: absolute;
  top: 0;
  width: 36vw;
  mix-blend-mode: multiply;
}
.campaign__item--br2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36vw;
  mix-blend-mode: multiply;
}
.campaign__item--main {
  position: relative;
  z-index: 20;
  margin: 0 auto;
  width: 74.5333333333vw;
  top: 16vw;
  box-shadow:
    0 0 5rem 0.8rem rgba(216, 222, 221, 0.4),
    2.2rem 3.1rem 2.7rem 0.2rem rgba(79, 82, 80, 0.29);
}
.campaign__item--main.js-fog {
  overflow: hidden;
}
.campaign__item--main.js-fog img {
  filter: blur(16px) brightness(1.35);
  transform: scale(1.06);
  transition:
    filter 1.6s ease,
    transform 1.6s ease;
}
.campaign__item--main.js-fog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 1.6s ease;
}
.campaign__item--main.js-fog.is-revealed img {
  filter: blur(0) brightness(1);
  transform: scale(1);
}
.campaign__item--main.js-fog.is-revealed::after {
  opacity: 0;
}
@media only screen and (min-width: 992px) {
  .campaign__item--main {
    top: 12.5vw;
    width: min(23.5416666667vw, 45.2rem);
  }
}
@media only screen and (min-width: 992px) {
  .campaign__item--brPc1 {
    position: absolute;
    top: -0.5208333333vw;
    right: 15.625vw;
    width: min(12.4479166667vw, 23.9rem);
  }
}
@media only screen and (min-width: 992px) {
  .campaign__item--brPc2 {
    position: absolute;
    top: 23.4375vw;
    right: 4.6875vw;
    width: min(10.9375vw, 21rem);
  }
}
@media only screen and (min-width: 992px) {
  .campaign__item--brPc3 {
    position: absolute;
    top: 19.53125vw;
    right: 24.7395833333vw;
    width: min(23.3333333333vw, 44.8rem);
  }
}
@media only screen and (min-width: 992px) {
  .campaign__item--brPc4 {
    position: absolute;
    top: 5.7291666667vw;
    left: 23.9583333333vw;
    width: min(20.0520833333vw, 38.5rem);
  }
}
@media only screen and (min-width: 992px) {
  .campaign__item--brPc5 {
    position: absolute;
    top: 34.375vw;
    left: 13.8541666667vw;
    width: min(17.4479166667vw, 33.5rem);
  }
}
@media only screen and (min-width: 992px) {
  .campaign__item--brPc6 {
    position: absolute;
    top: 13.5416666667vw;
    left: 4.9479166667vw;
    width: min(12.4479166667vw, 23.9rem);
  }
}
.campaign__present {
  position: relative;
  background-image: url("../img/bg-present.webp");
  background-size: cover;
  background-repeat: no-repeat;
  width: 89.3333333333vw;
  margin: 0 auto;
  padding: 13.7333333333vw 4.6666666667vw 6.6666666667vw;
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
}
.campaign__present img {
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
@media only screen and (min-width: 992px) {
  .campaign__present {
    background-image: url("../img/bg-present-pc.webp");
    width: min(45.6458333333vw, 151rem);
    margin: 2.6041666667vw auto 0;
    padding: 2.53125vw 2.25vw 1.90625vw;
  }
}
.campaign__present--circle {
  position: absolute;
  top: -5.4666666667vw;
  left: -2.8vw;
  width: 32vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--circle {
    top: -2.6041666667vw;
    left: 13.0208333333vw;
    width: 11.5104166667vw;
  }
}
.campaign__present--rebon {
  position: absolute;
  z-index: 0;
  width: 34vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--rebon {
    width: 10.0625vw;
  }
}
.campaign__present--rebon--01 {
  top: 0;
  right: 0;
}
.campaign__present--rebon--02 {
  bottom: 0;
  left: 0;
}
.campaign__present--ttl {
  width: 44vw;
  margin: 0 auto 2.9333333333vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--ttl {
    width: 24.4791666667vw;
    margin: 0 auto 2.2083333333vw;
  }
}
.campaign__present--subTtl {
  font-size: min(7.0666666667vw, 5.3rem);
  line-height: 1.3;
  text-align: center;
  color: #219c84;
  margin-bottom: 5.2vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--subTtl {
    font-size: min(2.96875vw, 5.7rem);
    margin-bottom: 1.71875vw;
  }
}
.campaign__present--hashtag {
  width: 53.6vw;
  margin: 0 auto 6.4vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--hashtag {
    width: 21.09375vw;
    margin: 0 auto 0.5208333333vw;
  }
}
.campaign__present--detailWrapper {
  position: relative;
  z-index: 1;
}
.campaign__present--item--01 {
  margin: 0 auto 7.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--item--01 {
    margin: 0 auto 1.5625vw;
  }
}
.campaign__present--item--02 {
  margin: 0 auto 9.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--item--02 {
    margin: 0 auto 3.90625vw;
  }
}
@media only screen and (min-width: 992px) {
  .campaign__present--item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.campaign__present--item--thumb {
  margin-bottom: 8vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--item--thumb {
    width: 33.8541666667vw;
    margin-bottom: 0;
  }
}
.campaign__present--item--content {
  width: 74vw;
  margin: 0 auto;
}
@media only screen and (min-width: 992px) {
  .campaign__present--item--content {
    width: 28.90625vw;
    margin: unset;
  }
}
@media only screen and (min-width: 992px) {
  .campaign__present--item--name {
    text-align: center;
    color: #219c84;
    margin-bottom: 2.8645833333vw;
  }
}
@media only screen and (min-width: 992px) {
  .campaign__present--item--present {
    font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: min(1.4583333333vw, 2.8rem);
    letter-spacing: 0.1em;
    margin-bottom: 1.40625vw;
  }
}
@media only screen and (min-width: 992px) {
  .campaign__present--item--set {
    font-size: min(2.2916666667vw, 4.4rem);
    letter-spacing: 0.1em;
    margin-bottom: 1.40625vw;
  }
}
@media only screen and (min-width: 992px) {
  .campaign__present--youkou--wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5625vw;
  }
}
.campaign__present--howTo {
  margin-bottom: 3.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--howTo {
    width: 25.5208333333vw;
    margin-bottom: 0;
  }
}
.campaign__present--howMany {
  width: 72.6666666667vw;
  margin: 0 auto 4.4vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--howMany {
    width: 37.7604166667vw;
    margin: unset;
  }
}
.campaign__present--termImg {
  width: 78vw;
  margin: 0 auto 3.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--termImg {
    width: 36.9791666667vw;
    margin: 0 auto 2.0833333333vw;
  }
}
.campaign__present--apply--btns {
  display: flex;
  justify-content: center;
  margin-bottom: 5.3333333333vw;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .campaign__present--apply--btns {
    margin-top: 1.3vw;
    margin-bottom: 2.0833333333vw;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
.campaign__present--apply--btn {
  width: 32.6666666667vw;
  margin: 0 2.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--apply--btn {
    width: min(12.7083333333vw, 24.4rem);
    margin: 0 1.0416666667vw;
  }
}
.campaign__present--kiyaku--btn {
  display: block;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  text-decoration: underline;
  font-size: 1.8666666667vw;
}
@media only screen and (min-width: 992px) {
  .campaign__present--kiyaku--btn {
    font-size: 0.8333333333vw;
    margin-bottom: 0;
  }
}
.campaign__modal {
  overflow: visible;
  width: 93.3333333333vw;
  height: 133.3333333333vw;
  background-color: transparent;
  padding: 2rem;
  border: 0.1rem solid #fff;
  border-radius: 0.8rem;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    overlay 0.3s ease allow-discrete,
    display 0.3s ease allow-discrete;
}
@starting-style {
  .campaign__modal {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%);
  }
}
@media only screen and (min-width: 992px) {
  .campaign__modal {
    width: 62.5vw;
    height: 46.875vw;
  }
}
.campaign__modal::after {
  content: "";
  position: absolute;
  top: -8.6666666667vw;
  right: 3.3333333333vw;
  width: min(5.3333333333vw, 4rem);
  height: min(5.3333333333vw, 4rem);
  background-image: url("../img/movie-close.webp");
  background-size: cover;
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .campaign__modal::after {
    top: -2.34375vw;
    right: 0vw;
    width: min(1.5625vw, 3rem);
    height: min(1.5625vw, 3rem);
  }
}
.campaign__modal:not([open]) {
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
}
.campaign__modal::backdrop {
  background-image: url("../img/bg-modal.webp");
  background-size: cover;
  background-position: right;
  transition:
    opacity 0.3s ease,
    overlay 0.3s ease allow-discrete,
    display 0.3s ease allow-discrete;
}
@starting-style {
  .campaign__modal::backdrop::backdrop {
    opacity: 0;
  }
}
@media only screen and (min-width: 992px) {
  .campaign__modal::backdrop {
    background-image: url("../img/bg-modal-pc.webp");
    background-position: right;
  }
}
.campaign__modal--inner {
  width: 100%;
  height: 99%;
}
.campaign__modal--ttl {
  font-size: min(4vw, 3rem);
  text-align: center;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 992px) {
  .campaign__modal--ttl {
    font-size: min(1.5625vw, 3rem);
  }
}
.campaign__modal--body {
  color: #fff;
  max-height: 100%;
  overflow-y: auto;
  margin-right: -1.4rem;
  padding-right: 1.4rem;
  scrollbar-color: #fff transparent;
}
.campaign__modal--body::-webkit-scrollbar {
  width: 0.6rem;
}
.campaign__modal--body::-webkit-scrollbar-track {
  background: transparent;
}
.campaign__modal--body::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 1rem;
}
.campaign__modal--body--ttl {
  font-size: min(3.3333333333vw, 2.5rem);
  line-height: 1.7;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: -1rem;
}
.campaign__modal--body--ttl::before {
  content: url("../img/campaign-modal-dot.webp");
  display: inline-block;
  transform: scale(0.4);
  position: relative;
}
@media only screen and (min-width: 992px) {
  .campaign__modal--body--ttl {
    font-size: min(1.3020833333vw, 2.5rem);
  }
}
.campaign__modal--body--txt {
  font-size: min(3.3333333333vw, 2.5rem);
  line-height: 1.7;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 992px) {
  .campaign__modal--body--txt {
    font-size: min(1.3020833333vw, 2.5rem);
    margin-bottom: 3rem;
  }
}
.campaign__modal--body--txt sup {
  transform: scale(0.8);
}
.campaign__modal--body--txt span {
  padding-left: 1em;
  text-indent: -1em;
}
.campaign__modal--body--txt a {
  text-decoration: underline;
}
.campaign__modal--body--caution {
  font-size: min(2.6666666667vw, 2rem);
  line-height: 1.7;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-left: 1em;
  text-indent: -1em;
}
@media only screen and (min-width: 992px) {
  .campaign__modal--body--caution {
    font-size: min(1.0416666667vw, 2rem);
    margin-top: -3rem;
    margin-bottom: 3rem;
  }
}

.habit__merits--imgInner {
  position: relative;
}
.habit__merits--imgInner.js-fog {
  overflow: hidden;
}
.habit__merits--imgInner.js-fog img {
  filter: blur(16px) brightness(1.35);
  transform: scale(1.06);
  transition:
    filter 1.6s ease,
    transform 1.6s ease;
}
.habit__merits--imgInner.js-fog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 1.6s ease;
}
.habit__merits--imgInner.js-fog.is-revealed img {
  filter: blur(0) brightness(1);
  transform: scale(1);
}
.habit__merits--imgInner.js-fog.is-revealed::after {
  opacity: 0;
}

.habit {
  padding-top: 13.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit {
    overflow: hidden;
    padding-top: 7.8125vw;
  }
}
.habit__logo {
  position: relative;
  z-index: 10;
  width: 40.6666666667vw;
  margin: 0 auto 5.7333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__logo {
    width: 17.7083333333vw;
    margin: 0 auto 1.5625vw;
  }
}
.habit__desc {
  color: #5a5a5a;
  position: relative;
  z-index: 10;
  font-size: min(4.4vw, 3.3rem);
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .habit__desc {
    font-size: min(1.6666666667vw, 3.2rem);
  }
}
.habit__item {
  position: relative;
  margin-top: -1.3rem;
}
@media only screen and (min-width: 992px) {
  .habit__item {
    margin-top: -39.0625vw;
  }
}
.habit__item--txt {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-weight: normal;
  position: absolute;
  top: 22vw;
  left: 18.6666666667vw;
  color: #008868;
  writing-mode: vertical-rl;
  line-height: 1.5;
  letter-spacing: 0.16em;
  font-size: min(7.7186666667vw, 5.789rem);
}
@media only screen and (min-width: 992px) {
  .habit__item--txt {
    font-size: min(2.7604166667vw, 5.3rem);
    top: 46.875vw;
    left: 36.9791666667vw;
  }
}
.habit__item--txt span {
  font-size: min(7.4093333333vw, 5.557rem);
  line-height: 1.3;
  letter-spacing: 0.24em;
}
@media only screen and (min-width: 992px) {
  .habit__item--txt span {
    font-size: min(2.65625vw, 5.1rem);
  }
}
.habit__wrapper {
  position: relative;
  background-image: linear-gradient(to bottom, transparent 0 80%, #ebeef3 80% 100%), url("../img/bg-habit.webp");
  background-size: cover;
  padding-top: 40vw;
  padding-bottom: 48.6666666667vw;
  margin-top: -29.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__wrapper {
    padding-top: 0;
    padding-bottom: 10.4166666667vw;
    margin-top: -11.4583333333vw;
    background-image: url("../img/bg-habit-pc.webp");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 80%;
  }
}
.habit__merits--img {
  position: relative;
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
}
.habit__merits--main {
  position: relative;
  display: inline-block;
}
.habit__merits--txt--summary {
  font-family: "yu-mincho-pr6n", sans-serif;
  color: #008868;
  line-height: 1.3;
  font-size: min(6.9333333333vw, 5.2rem);
  margin-bottom: 3.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--txt--summary {
    font-size: min(1.9791666667vw, 3.8rem);
    margin-bottom: 0.5208333333vw;
  }
}
.habit__merits--txt--desc {
  color: #4a5452;
  line-height: 1.8;
  font-size: min(4.2666666667vw, 3.2rem);
}
@media only screen and (min-width: 992px) {
  .habit__merits--txt--desc {
    font-size: min(1.2135416667vw, 2.3rem);
  }
}
.habit__merits--rf {
  position: relative;
  margin-bottom: 66.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--rf {
    left: -6.25vw;
    margin-bottom: 8.8541666667vw;
  }
}
.habit__merits--rf--main {
  margin-left: 27.3333333333vw;
}
.habit__merits--rf--bg {
  position: absolute;
  top: 30vw;
  width: 43.8666666667vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--rf--bg {
    width: min(25.3125vw, 48.6rem);
    top: 9.8958333333vw;
    left: 11.4583333333vw;
  }
}
.habit__merits--rf--img {
  width: 63.2vw;
  margin-bottom: 8vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--rf--img {
    width: min(23.75vw, 45.6rem);
    margin-bottom: 2.0833333333vw;
  }
}
.habit__merits--rf--txt {
  position: absolute;
  bottom: -8vw;
  left: -4vw;
  width: 29.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--rf--txt {
    bottom: -2.34375vw;
    left: -0.5208333333vw;
    width: min(8.8541666667vw, 17rem);
  }
}
.habit__merits--chg {
  position: relative;
  margin-bottom: 83.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--chg {
    margin-bottom: 11.9791666667vw;
  }
}
.habit__merits--chg--main {
  margin-right: auto;
}
@media only screen and (min-width: 992px) {
  .habit__merits--chg--main {
    margin-left: 44.53125vw;
  }
}
.habit__merits--chg--bg {
  position: absolute;
  top: -33.3333333333vw;
  right: 0vw;
  width: 43.8666666667vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--chg--bg {
    width: min(22.7604166667vw, 43.7rem);
    top: -13.0208333333vw;
    right: 10.4166666667vw;
  }
}
.habit__merits--chg--img {
  width: 76.6666666667vw;
  margin-bottom: 13.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--chg--img {
    width: min(33.9583333333vw, 65.2rem);
    margin-bottom: 3.1770833333vw;
  }
}
.habit__merits--chg--txt {
  position: absolute;
  bottom: -9.3333333333vw;
  right: -8vw;
  width: 28vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--chg--txt {
    bottom: -3.125vw;
    right: -3.125vw;
    width: min(8.0729166667vw, 15.5rem);
  }
}
.habit__merits--chg .habit__merits--txt {
  text-align: right;
}
.habit__merits--kp {
  position: relative;
  margin-bottom: 18vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--kp {
    margin-bottom: 5.5729166667vw;
  }
}
.habit__merits--kp--main {
  margin-left: 9.6vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--kp--main {
    margin-left: 32.1354166667vw;
  }
}
.habit__merits--kp--bg {
  position: absolute;
  top: -46vw;
  width: 52.1333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--kp--bg {
    width: min(21.9270833333vw, 42.1rem);
    top: -18.2291666667vw;
    left: 20.3125vw;
  }
}
.habit__merits--kp--img {
  width: 60.2666666667vw;
  margin-left: 11.7333333333vw;
  margin-bottom: 10.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--kp--img {
    width: min(32.7604166667vw, 62.9rem);
    margin-left: 0;
    margin-bottom: 2.6041666667vw;
  }
}
.habit__merits--kp--txt {
  position: absolute;
  bottom: -7.0666666667vw;
  left: -16.6666666667vw;
  width: 22.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .habit__merits--kp--txt {
    bottom: -2.0833333333vw;
    left: 0vw;
    width: min(6.4583333333vw, 12.4rem);
  }
}
.habit__plus {
  width: 8.9333333333vw;
  margin: 0 auto 16.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .habit__plus {
    width: min(3.4895833333vw, 6.7rem);
    margin: 0 auto 3.75vw;
  }
}
.habit__more {
  position: relative;
}
.habit__more--header {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-weight: normal;
  position: relative;
  display: block;
  width: fit-content;
  text-align: center;
  margin-left: 28vw;
  margin-bottom: 8vw;
  color: #008868;
  font-size: min(6.9333333333vw, 5.2rem);
  line-height: 1.27;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 992px) {
  .habit__more--header {
    font-size: min(2.171875vw, 4.17rem);
    margin: 0 auto;
    margin-bottom: 2.6041666667vw;
    text-align: center;
  }
}
.habit__more--header span {
  position: absolute;
  top: -7.3333333333vw;
  left: -14vw;
  display: block;
  width: 27.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .habit__more--header span {
    width: min(8.8541666667vw, 17rem);
    top: -2.6041666667vw;
    left: -4.6875vw;
  }
}
@media only screen and (min-width: 992px) {
  .habit__more--items {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}
.habit__more--item {
  position: relative;
  z-index: 10;
  box-shadow: 1.5rem 2.5rem 4.5rem rgba(47, 87, 82, 0.3);
  width: 91.3333333333vw;
  margin: 0 auto;
  border-radius: 0.8rem;
}
.habit__more--item:not(:last-of-type) {
  margin-bottom: 10.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .habit__more--item {
    width: min(22.5vw, 43.2rem);
    margin: 0 3.125vw;
  }
}
@media only screen and (min-width: 992px) {
  .habit__more--bg {
    filter: blur(2px);
    position: absolute;
    top: 13.0208333333vw;
    opacity: 0.67;
    left: 50%;
    transform: translateX(-50%);
    width: min(69.1666666667vw, 132.8rem);
    box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
  }
}

.about {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: url("../img/bg-about.webp");
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 14.8vw;
  padding-bottom: 48vw;
}
@media only screen and (min-width: 992px) {
  .about {
    padding-top: 15.625vw;
    padding-bottom: 10.4166666667vw;
    background-image: url("../img/bg-about-pc.png");
  }
}
.about__ripple {
  position: absolute;
  z-index: -1;
  width: 4rem;
  height: 4rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 3.5s ease-out forwards;
}
.about__ttl {
  text-align: center;
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #29ad95;
  font-size: min(6.9333333333vw, 5.2rem);
  font-weight: normal;
  margin-bottom: 14.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .about__ttl {
    font-size: min(2.6041666667vw, 5rem);
    margin-bottom: 4.1666666667vw;
  }
}
.about__subTtl {
  font-family: "yu-mincho-pr6n", sans-serif;
  text-align: center;
  color: #4a5452;
  font-size: min(10.6666666667vw, 8rem);
  font-weight: normal;
  margin-bottom: 8vw;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 992px) {
  .about__subTtl {
    font-size: min(2.9166666667vw, 5.6rem);
    margin-bottom: 1.3020833333vw;
  }
}
.about__subTtl span {
  font-family: "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: min(9.3333333333vw, 7rem);
}
@media only screen and (min-width: 992px) {
  .about__subTtl span {
    font-size: min(3.28125vw, 6.3rem);
  }
}
.about__desc {
  text-align: center;
  line-height: 2.14;
  color: #404040;
  font-size: min(3.7333333333vw, 2.8rem);
}
@media only screen and (min-width: 992px) {
  .about__desc {
    font-size: min(1.25vw, 2.4rem);
  }
}
.about__slides {
  margin-bottom: 40vw;
}
.about__slides.js-pin-ready {
  display: grid;
  place-items: center;
}
.about__slide {
  position: relative;
}
.about__slides.js-pin-ready .about__slide {
  grid-area: 1/1;
  width: 100%;
  opacity: 0;
}
.about__slide--thumb {
  width: 90.6666666667vw;
  margin: 0 auto;
}
.about__slide--txt {
  position: absolute;
  top: 90.6666666667vw;
  left: 50%;
  transform: translateX(-50%);
  width: 89.3333333333vw;
  margin: 0 auto;
}
.about__slide--txt--header {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-weight: normal;
  text-align: center;
  line-height: 1.44;
  letter-spacing: 0.08em;
  color: #008868;
  font-size: min(6.3733333333vw, 4.78rem);
  margin-bottom: 6.6666666667vw;
}
.about__slide--txt--desc {
  line-height: 2.14;
  color: #4a5452;
  font-size: min(3.7333333333vw, 2.8rem);
  letter-spacing: 0.08em;
}
.about__slide--txt--desc sup {
  font-size: min(2.6666666667vw, 2rem);
}
.about__slide--txt--caution {
  padding-left: 1em;
  text-indent: -1em;
  margin-top: 2.6666666667vw;
  color: #4a5452;
  font-size: min(2.9333333333vw, 2.2rem);
  line-height: 1.7;
}
@media only screen and (min-width: 992px) {
  .about__main {
    width: 82.2916666667vw;
    margin: 0 auto;
  }
}
.about__conclusion {
  position: relative;
}
@media only screen and (min-width: 992px) {
  .about__conclusion {
    width: min(42.0833333333vw, 80.8rem);
    margin: 0 auto;
  }
}
.about__conclusion__logo {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  width: 27.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .about__conclusion__logo {
    top: 11.9791666667vw;
    width: min(8.8541666667vw, 17rem);
  }
}

@keyframes ripple {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(6);
  }
}
.lineup {
  background-image: url("../img/bg-lineup.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) {
  .lineup {
    background-image: url("../img/bg-lineup-pc.webp");
  }
}
.lineup__fstWrapper {
  padding: 23.3333333333vw 6vw 30vw;
}
@media only screen and (min-width: 992px) {
  .lineup__fstWrapper {
    padding: 11.71875vw 0 7.8125vw;
  }
}
.lineup__secWrapper {
  padding: 24vw 6vw 34.6666666667vw;
  background-image: linear-gradient(rgba(101, 185, 170, 0.6), rgba(101, 185, 170, 0.6));
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) {
  .lineup__secWrapper {
    padding: 6.25vw 0 10.4166666667vw;
  }
}
.lineup__ttl {
  color: #29ad95;
  margin-bottom: 18.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .lineup__ttl {
    margin-bottom: 5.6770833333vw;
  }
}
.lineup__main {
  margin-bottom: 9.3333333333vw;
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
}
@media only screen and (min-width: 992px) {
  .lineup__main {
    width: min(56.6145833333vw, 108.7rem);
    margin: 0 auto 4.8958333333vw;
  }
}
.lineup__items {
  margin-bottom: 14.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .lineup__items {
    width: min(80vw, 144rem);
    margin: 0 auto 3.4375vw;
    display: flex;
    align-items: end;
    justify-content: space-between;
  }
}
.lineup__item {
  font-weight: 500;
  color: #4a5452;
  font-size: min(4.02666666667vw, 3.2rem);
}
@media only screen and (min-width: 992px) {
  .lineup__item {
    font-size: min(1.0666666667vw, 2.05rem);
  }
}
.lineup__item:not(:last-of-type) {
  margin-bottom: 13.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .lineup__item:not(:last-of-type) {
    margin-right: min(3.75vw, 5rem);
    margin-bottom: 0;
  }
}
.lineup__item--flex {
  display: flex;
  align-items: center;
  margin-bottom: 2vw;
}
@media only screen and (min-width: 992px) {
  .lineup__item--flex {
    margin-bottom: 0.78125vw;
  }
}
.lineup__item--iyaku {
  display: inline-block;
  padding: 2vw 2.6666666667vw;
  border: 0.1rem solid #4a5452;
  margin-right: 2vw;
}
@media only screen and (min-width: 992px) {
  .lineup__item--iyaku {
    padding: 0.4166666667vw 0.5208333333vw;
    margin-right: 0.78125vw;
  }
}
.lineup__item--seibun {
  font-size: min(3.2vw, 2.4rem);
}
@media only screen and (min-width: 992px) {
  .lineup__item--seibun {
    font-size: min(0.8vw, 1.53rem);
  }
}
.lineup__item--name {
  line-height: 1.37;
}
.lineup__item--name--brand {
  font-size: min(3.3333333333vw, 2.5rem);
}
@media only screen and (min-width: 992px) {
  .lineup__item--name--brand {
    font-size: min(0.9375vw, 1.7rem);
  }
}
.lineup__item--cate {
  line-height: 1.37;
  position: relative;
  left: -1rem;
  font-size: min(3.3333333333vw, 2.5rem);
}
@media only screen and (min-width: 992px) {
  .lineup__item--cate {
    font-size: min(0.9375vw, 1.7rem);
  }
}
.lineup__item--btn {
  margin-left: auto;
}
.lineup__item--arrow {
  margin-top: 3.3333333333vw;
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .lineup__item--arrow {
    margin-top: 0.5208333333vw;
  }
}
.lineup__plus {
  margin: 0 auto 12.6666666667vw;
  width: 8.5333333333vw;
}
@media only screen and (min-width: 992px) {
  .lineup__plus {
    width: min(1.9791666667vw, 3.8rem);
    margin-bottom: 2.65625vw;
  }
}
.lineup__recommend {
  padding: 10.6666666667vw 4.8vw 12.2666666667vw;
  border: 0.1rem solid #29ad95;
  box-shadow:
    1.1rem 1rem 1rem 1rem rgba(9, 45, 42, 0.2),
    inset 1.1rem 1rem 1rem rgba(9, 45, 42, 0.15);
}
@media only screen and (min-width: 992px) {
  .lineup__recommend {
    width: min(56.875vw, 109.2rem);
    padding: 2.9166666667vw 3.90625vw 3.90625vw;
    margin: 0 auto;
    box-shadow:
      1.1rem 1rem 1rem 0.1rem rgba(9, 45, 42, 0.2),
      inset 1.1rem 1rem 1rem rgba(9, 45, 42, 0.15);
  }
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--wrapper {
    display: flex;
    justify-content: space-between;
  }
}
.lineup__recommend--ttl {
  width: 38.6666666667vw;
  margin: 0 auto 2vw;
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--ttl {
    width: min(9.1145833333vw, 17.5rem);
    margin-bottom: 0.625vw;
  }
}
.lineup__recommend--ttlJp {
  color: #29ad95;
  text-align: center;
  font-size: min(4.2666666667vw, 3.2rem);
  margin-bottom: 8vw;
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--ttlJp {
    font-size: min(1vw, 19.2rem);
    margin-bottom: 3.125vw;
  }
}
.lineup__recommend--item {
  margin-bottom: 8.6666666667vw;
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--item {
    width: min(22.5vw, 43.2rem);
    height: max-content;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--content {
    width: min(22.1875vw, 42.6rem);
  }
}
.lineup__recommend--desc {
  font-size: min(3.7333333333vw, 2.8rem);
  line-height: 1.71;
  color: #4a5452;
  margin-bottom: 6.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--desc {
    font-size: min(1.046875vw, 2.01rem);
    margin-bottom: 2.0833333333vw;
  }
}
.lineup__recommend--name {
  color: #4a5452;
  text-align: center;
  font-size: min(4.2666666667vw, 3.2rem);
  line-height: 1.3;
  margin-bottom: 6.6666666667vw;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--name {
    font-size: min(1.1979166667vw, 2.3rem);
    margin-bottom: 1.5625vw;
  }
}
.lineup__recommend--name--brand {
  font-size: min(3.7333333333vw, 2.8rem);
}
@media only screen and (min-width: 992px) {
  .lineup__recommend--name--brand {
    font-size: min(0.9375vw, 1.8rem);
  }
}
.lineup__recommend--btn {
  margin: 0 auto;
}
.lineup__add--ttl {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: min(6.9333333333vw, 5.2rem);
  text-align: center;
  color: #fff;
  margin-bottom: 10.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .lineup__add--ttl {
    font-size: min(2.1354166667vw, 4.1rem);
    margin-bottom: 3.90625vw;
  }
}
@media only screen and (min-width: 992px) {
  .lineup__add--wrapper {
    display: flex;
    align-items: center;
    justify-self: center;
    width: min(56.875vw, 109.2rem);
    margin: 0 auto;
  }
}
.lineup__add--item {
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
  margin-bottom: 8vw;
}
@media only screen and (min-width: 992px) {
  .lineup__add--item {
    width: min(26.875vw, 51.6rem);
    height: max-content;
    margin-bottom: 3.90625vw;
    margin-right: 2.8645833333vw;
  }
}
.lineup__add--desc {
  font-size: min(3.7333333333vw, 2.8rem);
  line-height: 1.7;
  color: #fff;
  margin-bottom: 12.6666666667vw;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 992px) {
  .lineup__add--desc {
    font-size: min(1.09375vw, 2.1rem);
    margin-bottom: 4.3229166667vw;
    letter-spacing: 0;
  }
}
.lineup__add--name {
  font-size: min(4.2666666667vw, 3.2rem);
  text-align: center;
  color: #fff;
  margin-bottom: 6.6666666667vw;
  letter-spacing: 0.07em;
  line-height: 1.3;
}
@media only screen and (min-width: 992px) {
  .lineup__add--name {
    font-size: min(1.2604166667vw, 2.42rem);
    margin-bottom: 2.34375vw;
  }
}
.lineup__add--name--brand {
  font-size: min(3.7333333333vw, 2.8rem);
}
@media only screen and (min-width: 992px) {
  .lineup__add--name--brand {
    font-size: min(0.9375vw, 1.8rem);
  }
}

.other {
  padding: 22.6666666667vw 6.6666666667vw 44vw;
  background-image: url("../img/bg-other.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) {
  .other {
    padding: 7.8125vw 0 7.8125vw;
    background-image: url("../img/bg-other-pc.webp");
  }
}
.other__link {
  margin-bottom: 28vw;
}
@media only screen and (min-width: 992px) {
  .other__link {
    margin-bottom: min(6.7708333333vw, 13rem);
  }
}
.other__link--ttl {
  margin-bottom: 16vw;
}
@media only screen and (min-width: 992px) {
  .other__link--ttl {
    margin-bottom: 4.4270833333vw;
  }
}
.other__link--desc {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: min(5.3333333333vw, 4rem);
  color: #4a5452;
  text-align: center;
  margin-bottom: 8.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .other__link--desc {
    font-size: 1.5625vw;
    margin-bottom: min(2.6041666667vw, 5rem);
  }
}
.other__link--btn {
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
}
.other__link--btn:not(:last-of-type) {
  margin-bottom: 7.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .other__link--btn:not(:last-of-type) {
    margin-bottom: 2.0833333333vw;
  }
}
@media only screen and (min-width: 992px) {
  .other__link--btn {
    width: min(24.1145833333vw, 46.3rem);
    margin: 0 auto;
  }
}
.other__share--ttl {
  margin-bottom: 8.6666666667vw;
}
@media only screen and (min-width: 992px) {
  .other__share--ttl {
    margin-bottom: 2.1875vw;
  }
}
.other__share--btns {
  display: flex;
  justify-content: space-between;
  width: 58.6666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 992px) {
  .other__share--btns {
    width: min(14.6875vw, 28.2rem);
  }
}
.other__share--btn {
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
  width: 17.0666666667vw;
}
@media only screen and (min-width: 992px) {
  .other__share--btn {
    width: min(4.3229166667vw, 8.3rem);
  }
}

.footer {
  background-image: url("../img/bg-footer.webp");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 10vw 0 4vw;
}
@media only screen and (min-width: 992px) {
  .footer {
    background-image: url("../img/bg-footer-pc.webp");
    padding: 2.0833333333vw 0 1.40625vw;
  }
}
.footer__logo {
  width: 30vw;
  margin: 0 auto 3.3333333333vw;
}
@media only screen and (min-width: 992px) {
  .footer__logo {
    width: min(7.8125vw, 15rem);
    margin-bottom: 0.8854166667vw;
  }
}
.footer__txtLink {
  width: 30vw;
  margin: 0 auto 11.0666666667vw;
}
@media only screen and (min-width: 992px) {
  .footer__txtLink {
    width: min(7.8125vw, 15rem);
    margin-bottom: 1.8229166667vw;
  }
}
.footer__copy {
  font-size: min(1.8666666667vw, 1.4rem);
  color: #fff;
  text-align: center;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 992px) {
  .footer__copy {
    font-size: min(0.46875vw, 0.9rem);
  }
}

.campaign__present--ttl {
  text-align: center;
}

.campaign__present--ttl img {
  max-width: 70%;
  margin: 0 auto;
}

.campaign-oneper {
  max-width: 60%;
  margin: 20px auto;
}

.campaign-product {
  margin-top: 30px;
}

.campaign-product img {
  margin-bottom: 30px;
}

@media only screen and (max-width: 991px) {
  .campaign-oneper {
    max-width: 80%;
  }
  .campaign-product2 {
    margin-top: 11vw; /* SP top spacing */
  }

  .campaign-product2 img {
    margin-bottom: 20px;
  }

  .campaign__present--ttl {
    width: 75vw;
  }

  .campaign__present {
    padding: 13.733333vw 3.666667vw 6.6666666667vw;
  }

  .campaign__present--ttl img {
    width: 100%;
  }

  .campaign__present--apply--btns {
    width: 93%;
    margin-left: auto;
    margin-right: auto;
  }

  .campaign-product2 .cs1 img {
    max-width: 96%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }

  .campaign-product2 .cs2 img {
    width: 100%; /* SP side spacing */
    max-width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* PC only: size control for .cs1 (campaign6) */
@media only screen and (min-width: 992px) {
  .campaign-product2 .cs1 img {
    width: 24.145833vw;
    max-width: 100%;
    display: block;
    margin-top: 1.3vw; /* top spacing */
    margin-bottom: 1.3vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* PC only: size control for .cs2 (campaign5) */
@media only screen and (min-width: 992px) {
  .campaign-product2 .cs2 img {
    width: 30.145833vw;
    max-width: 100%;
    display: block;
    margin-top: 2vw; /* top spacing */
    margin-left: auto;
    margin-right: auto;
  }
}

/* Campaign closed: cover over campaign6 / campaign7 / apply buttons */
.campaign-end {
  position: relative;
}

/* .campaign-end__items is a second .campaign-product2, so drop its duplicated top gap */
.campaign-end__items {
  margin-top: 0;
}

.campaign-end__cover {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.campaign-end__cover img {
  display: block;
  width: 100%;
  height: 100%;
  /* flat grey bands top and bottom absorb the crop, so the text never distorts */
  object-fit: cover;
  object-position: center;
  margin-bottom: 0;
}

/* habit more items: shadow on the image itself */
.habit__more--item img {
  box-shadow: 1rem 1rem 1.5rem rgba(47, 87, 82, 0.3);
  border-radius: 0.8rem;
}