@charset "UTF-8";
/*--------------------------------------
	いいね！のある暮らし
---------------------------------------*/
.page__like img, .page__like picture {
  display: inline;
}

.like-inner {
  max-width: min(60.9375vw, 780px);
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .like-inner {
    max-width: 85.7142857143vw;
  }
}

.like-mv {
  position: relative;
  z-index: 1;
  height: min(48.4375vw, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(../images/like/mv_bg_pc.jpg) center/cover;
}
@media screen and (max-width: 767px) {
  .like-mv {
    height: 80vw;
    gap: 8.5714285714vw;
    background: url(../images/like/mv_bg_sp.jpg) center/cover;
  }
}
.like-mv__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: min(4.21875vw, 54px);
}
.like-mv__title {
  width: min(68.671875vw, 879px);
}
@media screen and (max-width: 767px) {
  .like-mv__title {
    width: 85.5714285714vw;
  }
}
.like-mv__nav ul {
  display: flex;
  align-items: flex-end;
  gap: min(2.5vw, 32px);
}
@media screen and (max-width: 767px) {
  .like-mv__nav ul {
    gap: 2.8571428571vw;
  }
}
.like-mv__anchor {
  display: block;
  height: min(15.078125vw, 193px);
  transition: transform 0.5s ease;
}
@media screen and (max-width: 767px) {
  .like-mv__anchor {
    height: 22.2857142857vw;
  }
}
.like-mv__anchor img {
  width: auto;
  height: 100%;
}
.like-mv__anchor:hover {
  transform: translateY(10px);
}

.like-section {
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--header-height));
  padding: calc(min(8.59375vw, 110px) + var(--header-height)) 0 min(6.25vw, 80px);
}
@media screen and (max-width: 767px) {
  .like-section {
    padding: calc(12.1428571429vw + var(--header-height)) 0 5.7142857143vw;
  }
}
.like-section::before {
  position: absolute;
  z-index: -2;
  top: var(--header-height);
  left: 0;
  right: 0;
  content: "";
  width: 100%;
  aspect-ratio: 1280/488;
}
@media screen and (max-width: 767px) {
  .like-section::before {
    aspect-ratio: 700/633;
  }
}
.like-section.like-sec-1::before {
  background: url(../images/like/sec-1_bg_pc.png) center/cover;
}
@media screen and (max-width: 767px) {
  .like-section.like-sec-1::before {
    background: url(../images/like/sec-1_bg_sp.png) center/cover;
  }
}
.like-section.like-sec-2::before {
  background: url(../images/like/sec-2_bg_pc.png) center/cover;
}
@media screen and (max-width: 767px) {
  .like-section.like-sec-2::before {
    background: url(../images/like/sec-2_bg_sp.png) center/cover;
  }
}
.like-section.like-sec-3::before {
  background: url(../images/like/sec-3_bg_pc.png) center/cover;
}
@media screen and (max-width: 767px) {
  .like-section.like-sec-3::before {
    background: url(../images/like/sec-3_bg_sp.png) center/cover;
  }
}
.like-section.like-sec-4::before {
  background: url(../images/like/sec-4_bg_pc.png) center/cover;
}
@media screen and (max-width: 767px) {
  .like-section.like-sec-4::before {
    background: url(../images/like/sec-4_bg_sp.png) center/cover;
  }
}
.like-section::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(to right, #0071bc 0%, #00004e 100%);
  mix-blend-mode: multiply;
}
.like-section__title {
  height: min(11.09375vw, 142px);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .like-sec-1 .like-section__title {
    height: 49.2857142857vw;
  }
  .like-sec-2 .like-section__title {
    height: 59.7142857143vw;
  }
  .like-sec-3 .like-section__title {
    height: 49vw;
  }
  .like-sec-4 .like-section__title {
    height: 59.5714285714vw;
  }
}
.like-section__title img {
  display: inline;
  width: auto;
  height: 100%;
}
.like-section__contents {
  max-width: min(90.625vw, 1160px);
  margin: min(6.40625vw, 82px) auto 0;
  padding: min(1.5625vw, 20px) min(4.6875vw, 60px) min(5.46875vw, 70px);
  border-radius: min(1.5625vw, 20px);
  background: #fff;
}
@media screen and (max-width: 767px) {
  .like-section__contents {
    max-width: 90.4285714286vw;
    padding: 0 2.8571428571vw 2.8571428571vw;
    border-radius: 2.8571428571vw;
  }
}
.like-section__block {
  padding: min(3.125vw, 40px) 0;
  border-bottom: 1px solid #004d97;
}
@media screen and (max-width: 767px) {
  .like-section__block {
    padding: 10vw 0 7.1428571429vw;
  }
}
.like-section__block:last-child {
  border-bottom: none;
}
.like-section__heading {
  height: min(8.359375vw, 107px);
  margin-left: max(-1.71875vw, -22px);
}
@media screen and (max-width: 767px) {
  .like-section__heading {
    margin-left: 0;
  }
  .like-sec-1 .like-section__block:nth-of-type(1) .like-section__heading {
    height: 22vw;
  }
  .like-sec-1 .like-section__block:nth-of-type(2) .like-section__heading {
    height: 22.4285714286vw;
  }
  .like-sec-1 .like-section__block:nth-of-type(3) .like-section__heading {
    height: 22.8571428571vw;
  }
  .like-sec-2 .like-section__block:nth-of-type(1) .like-section__heading {
    height: 23.4285714286vw;
  }
  .like-sec-2 .like-section__block:nth-of-type(2) .like-section__heading {
    height: 23.4285714286vw;
  }
  .like-sec-2 .like-section__block:nth-of-type(3) .like-section__heading {
    height: 23.5714285714vw;
  }
  .like-sec-3 .like-section__block:nth-of-type(1) .like-section__heading {
    height: 22.1428571429vw;
  }
  .like-sec-3 .like-section__block:nth-of-type(2) .like-section__heading {
    height: 22.1428571429vw;
  }
  .like-sec-3 .like-section__block:nth-of-type(3) .like-section__heading {
    height: 22vw;
  }
  .like-sec-3 .like-section__block:nth-of-type(4) .like-section__heading {
    height: 21.8571428571vw;
  }
  .like-sec-4 .like-section__block:nth-of-type(1) .like-section__heading {
    height: 22vw;
  }
  .like-sec-4 .like-section__block:nth-of-type(2) .like-section__heading {
    height: 21.8571428571vw;
  }
  .like-sec-4 .like-section__block:nth-of-type(3) .like-section__heading {
    height: 24.7142857143vw;
  }
}
.like-section__heading img {
  width: auto;
  height: 100%;
}
.like-section__lead {
  margin-top: min(1.40625vw, 18px);
}
@media screen and (max-width: 767px) {
  .like-section__lead {
    margin-top: 4.2857142857vw;
  }
}

.like-sec-1__text {
  position: relative;
  z-index: 1;
  width: min(28.59375vw, 366px);
  margin: min(2.34375vw, 30px) auto max(-2.109375vw, -27px);
}
@media screen and (max-width: 767px) {
  .like-sec-1__text {
    width: 66.2857142857vw;
    margin: 4vw auto -2vw;
  }
}
.like-sec-1__shopWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(1.71875vw, 22px);
}
@media screen and (max-width: 767px) {
  .like-sec-1__shopWrap {
    grid-template-columns: auto;
    gap: 3.1428571429vw;
  }
}
.like-sec-1__shopImg {
  cursor: pointer;
  transition: opacity 0.5s ease;
}
.like-sec-1__shopImg:hover {
  opacity: 0.7;
}
.like-sec-1__shopList {
  display: none;
}
.like-sec-1__img {
  margin-top: min(2.34375vw, 30px);
}
@media screen and (max-width: 767px) {
  .like-sec-1__img {
    width: 70.1428571429vw;
    margin: 7.1428571429vw auto 0;
  }
}

.like-sec-2__row {
  display: grid;
  grid-template-columns: min(31.484375vw, 403px) auto;
  gap: min(0.9375vw, 12px);
  margin-top: min(3.125vw, 40px);
}
@media screen and (max-width: 767px) {
  .like-sec-2__row {
    display: flex;
    flex-direction: column-reverse;
    gap: 4.2857142857vw;
    margin-top: 4.2857142857vw;
  }
}
.like-sec-2__list {
  display: flex;
  flex-direction: column;
  gap: min(0.546875vw, 7px);
}
@media screen and (max-width: 767px) {
  .like-sec-2__list {
    gap: 1.4285714286vw;
  }
}
.like-sec-2__list li {
  padding: min(0.46875vw, 6px) 0;
  font-family: var(--font_family-zen_kaku_gothic_new);
  font-weight: bold;
  font-size: min(1.171875vw, 15px);
  letter-spacing: 0.09em;
  line-height: 2;
  color: #fff;
  background: #004d97;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .like-sec-2__list li {
    padding: 1.2857142857vw;
    font-size: 3.1428571429vw;
  }
}
.like-sec-2__button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: min(3.125vw, 40px);
  width: min(26.5625vw, 340px);
  height: min(5.234375vw, 67px);
  border-radius: 100vmax;
  color: #fff;
  background: #bd0039;
  transition: transform 0.5s ease;
}
@media screen and (max-width: 767px) {
  .like-sec-2__button {
    margin: 7.1428571429vw auto 0;
    width: 71.4285714286vw;
    height: 14.2857142857vw;
  }
}
.like-sec-2__button span {
  font-family: var(--font_family-mincho);
  font-size: min(1.5625vw, 20px);
  font-weight: 600;
  font-feature-settings: "palt";
  letter-spacing: 0.06em;
  text-align: center;
  text-indent: -1em;
}
@media screen and (max-width: 767px) {
  .like-sec-2__button span {
    font-size: 4vw;
  }
}
.like-sec-2__button:after {
  position: absolute;
  top: 50%;
  right: min(0.859375vw, 11px);
  translate: 0 -50%;
  content: "";
  width: min(2.734375vw, 35px);
  height: min(2.734375vw, 35px);
  background: url(../images/like/icon_arrow_circle.svg) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
  .like-sec-2__button:after {
    right: 2.2857142857vw;
    width: 7.1428571429vw;
    height: 7.1428571429vw;
  }
}
.like-sec-2__button:hover {
  transform: translateX(10px);
}
.like-sec-2 .like-section__block:nth-of-type(1) .like-sec-2__img {
  margin-top: max(-2.1875vw, -28px);
  margin-right: max(-1.40625vw, -18px);
}
@media screen and (max-width: 767px) {
  .like-sec-2 .like-section__block:nth-of-type(1) .like-sec-2__img {
    margin: 0;
  }
}
.like-sec-2 .like-section__block:nth-of-type(2) .like-sec-2__img {
  margin-top: max(-1.5625vw, -20px);
  margin-right: max(-1.171875vw, -15px);
}
@media screen and (max-width: 767px) {
  .like-sec-2 .like-section__block:nth-of-type(2) .like-sec-2__img {
    margin: 0;
  }
}
.like-sec-2 .like-section__block:nth-of-type(3) .like-sec-2__img {
  margin-top: max(-4.6875vw, -60px);
  margin-right: max(-1.953125vw, -25px);
}
@media screen and (max-width: 767px) {
  .like-sec-2 .like-section__block:nth-of-type(3) .like-sec-2__img {
    margin: -5.7142857143vw 0;
  }
}

.like-sec-3__row {
  display: grid;
  grid-template-columns: auto min(26.640625vw, 341px);
  align-items: start;
  margin-top: min(2.109375vw, 27px);
  font-family: var(--font_family-notoserifjp);
}
@media screen and (max-width: 767px) {
  .like-sec-3__row {
    grid-template-columns: auto;
    gap: 5.7142857143vw;
    margin-top: 7.7142857143vw;
  }
}
.like-sec-3__text {
  font-size: min(1.09375vw, 14px);
  letter-spacing: 0.15em;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .like-sec-3__text {
    max-width: 75vw;
    margin: 0 auto;
    font-size: clamp(13px, 2.5714285714vw, 18px);
  }
}
.like-sec-3__caption {
  margin-top: 2em;
  font-size: min(0.78125vw, 10px);
  letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
  .like-sec-3__caption {
    max-width: 75vw;
    margin: 2em auto 0;
    font-size: clamp(10px, 1.8571428571vw, 13px);
  }
}
.like-sec-3__img figcaption {
  margin-top: 0.5em;
  font-size: min(0.78125vw, 10px);
  letter-spacing: 0.15em;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .like-sec-3__img figcaption {
    font-size: clamp(10px, 1.8571428571vw, 13px);
  }
}
.like-sec-3__imgWrap {
  display: grid;
  grid-template-columns: min(33.125vw, 424px) auto;
  gap: min(1.71875vw, 22px);
  margin-top: min(1.71875vw, 22px);
}
@media screen and (max-width: 767px) {
  .like-sec-3__imgWrap {
    grid-template-columns: auto;
    gap: 1.8571428571vw;
    margin-top: 2.8571428571vw;
  }
  .like-sec-3__imgWrap img:nth-of-type(2) {
    width: 65.7142857143vw;
  }
}

.like-spacer {
  position: relative;
  z-index: 1;
  height: min(9.53125vw, 122px);
  background: url(../images/like/mv_bg_pc.jpg) center/cover;
}
@media screen and (max-width: 767px) {
  .like-spacer {
    height: 31.7142857143vw;
    background: url(../images/like/mv_bg_sp.jpg) center/cover;
  }
}

.fadein_up {
  transform: translateY(6%);
  opacity: 0;
  transition: all 1s ease-out;
}
.fadein_up.on {
  transform: translateY(0%);
  opacity: 1;
}

.flat_in {
  transition: all 1.6s;
  opacity: 0;
  transform: scale(1.1);
}
.flat_in.on {
  opacity: 1;
  transform: scale(1);
}/*# sourceMappingURL=like.css.map */