/* ========================
  Variables
======================== */
:root {
  --color-black: #000;
  --color-blue: #204385;
  --color-brown: #743a00;
  --color-cyan: #06b5cc;
  --color-gray: #6b6b6b;
  --color-gray-dark: #242424;
  --color-green: #66b300;
  --color-green-dark: #009333;
  --color-green-pale: #e4f1d1;
  --color-green-pale2: #e7f8e5;
  --color-orange: #ffa700;
  --color-peach: #fff6ed;
  --color-red: #df3f26;
  --color-white: #fff;
  --color-yellow: #ffea00;
  --font-heading: "Toppan Bunkyu Gothic", "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
  --font-jp: "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
  --kv-progress: 0;
  --radius-badge: 6.25rem;
  --radius-card: 1rem;
  --radius-small: 0.5rem;
  --shadow-card: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.15);
}

/* ========================
  Base
  ※ 基本リセットは reset.css を参照。ここでは reset.css で
    カバーされていない項目のみ補う。
======================== */
body {
  background-color: var(--color-green-pale);
  color: var(--color-black);
  font-family: var(--font-jp);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

body.is-menuOpen {
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

h2,
h3 {
  font-family: var(--font-heading);
}

/* ========================
  Skip Link
======================== */
.skipLink {
  background-color: var(--color-white);
  color: var(--color-green-dark);
  left: 0.5rem;
  padding: 0.5rem 1rem;
  position: absolute;
  top: -3rem;
  transition: top 0.2s;
  z-index: 100;
}

.skipLink:focus {
  top: 0.5rem;
}

/* ========================
  Button
======================== */
.btn {
  border-radius: var(--radius-badge);
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 2.5rem;
  text-align: center;
}

.btn--primary {
  background-color: var(--color-green-dark);
  color: var(--color-white);
  position: relative;
  transition: all 0.3s;
}

.btn--primary::before {
  background-color: rgba(98, 210, 162, 0.2);
  border-radius: var(--radius-badge);
  content: "";
  display: block;
  height: calc(100% + 1.25rem);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 1.25rem);
  z-index: -1;
}

@media (hover: hover) {
  .btn--primary:hover {
    background-color: var(--color-white);
    color: var(--color-green-dark);
  }
}

/* ========================
  Header
======================== */
.header {
  background-color: transparent;
  left: 0;
  position: fixed;
  top: 0;
  transition: background-color 0.4s ease;
  width: 100%;
  z-index: 50;
}

.header.is-scrolled {
  background-color: var(--color-white);
}

.header__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 90rem;
  padding: 1rem 1.5rem;
}

.header__logo img {
  width: 21.875rem;
}

.header__nav {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  padding-top: 0.625rem;
}

.header__navList {
  display: flex;
  gap: 1.8rem;
}

.header__navLink {
  border-bottom: 0.25rem solid transparent;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding-bottom: 0.8125rem;
  transition:
    color 0.3s,
    border-bottom-color 0.3s;
  white-space: nowrap;
}

.header__navLink:hover,
.header__navLink.is-current {
  border-bottom-color: var(--color-green-dark);
  border-width: 4px;
  color: var(--color-green-dark);
}

.header__menuBtn {
  display: none;
}

@media screen and (max-width: 767px) {
  .header__inner {
    padding: 0.75rem 1rem;
  }

  .header__logo img {
    width: 12.8125rem;
  }

  .header__navList {
    display: none;
  }

  .header__menuBtn {
    align-items: center;
    background-color: var(--color-green-dark);
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
    z-index: 70;
  }

  .header__menuBtnBar {
    background-color: var(--color-white);
    display: block;
    height: 2px;
    transition:
      transform 0.3s,
      opacity 0.3s;
    width: 1.25rem;
  }

  .header__menuBtn[aria-expanded="true"] .header__menuBtnBar:nth-child(1) {
    transform: translateY(0.375rem) rotate(45deg);
  }

  .header__menuBtn[aria-expanded="true"] .header__menuBtnBar:nth-child(2) {
    opacity: 0;
  }

  .header__menuBtn[aria-expanded="true"] .header__menuBtnBar:nth-child(3) {
    transform: translateY(-0.375rem) rotate(-45deg);
  }
}

/* ========================
  SP Menu
======================== */
.spMenu {
  background-color: rgba(0, 0, 0, 0.4);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.3s;
  visibility: hidden;
  z-index: 65;
}

.spMenu.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.spMenu__inner {
  background-color: var(--color-white);
  height: 100%;
  overflow-y: auto;
  padding: 5.5rem 1.5rem 2.5rem;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.3s;
  width: min(20rem, 80%);
}

.spMenu.is-open .spMenu__inner {
  transform: translateX(0);
}

.spMenu__closeBtn {
  cursor: pointer;
  height: 1.5rem;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  width: 1.5rem;
}

.spMenu__closeBtnBar {
  background-color: var(--color-green-dark);
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

.spMenu__closeBtnBar:nth-child(1) {
  transform: rotate(45deg);
}

.spMenu__closeBtnBar:nth-child(2) {
  transform: rotate(-45deg);
}

.spMenu__navList {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.spMenu__navLink {
  color: var(--color-green-dark);
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.spMenu__ctaList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
}

.spMenu__ctaItem img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .spMenu {
    display: none;
  }
}

/* ========================
  Fixed CTA（ご利用中／はじめてのお客様へ）
======================== */
.fixedCta {
  position: fixed;
  right: 1.5rem;
  top: 7rem;
  z-index: 60;
}

.fixedCta__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fixedCta__item a {
  cursor: pointer;
  display: block;
  transition: all 0.3s;
}

@media (hover: hover) {
  .fixedCta__item a:hover {
    opacity: 0.7;
  }
}

.fixedCta__item img {
  width: 15rem;
}

@media screen and (max-width: 767px) {
  .fixedCta {
    bottom: 0.5rem;
    left: 0.5rem;
    opacity: 0;
    pointer-events: none;
    right: 0.5rem;
    top: auto;
    transition: opacity 0.3s ease;
  }

  .fixedCta__list {
    flex-direction: row;
    gap: 0.5rem;
  }

  .fixedCta__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .fixedCta__item img {
    width: 100%;
  }

  body.is-kvScrolled .fixedCta {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ========================
  Page Background（KV〜Campaignの固定背景）
======================== */
.pageBg {
  align-items: center;
  background: radial-gradient(ellipse 60% 70% at center, var(--color-white) 0%, var(--color-white) 30%, var(--color-green-pale) 75%);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 0;
}

@media screen and (max-width: 767px) {
  .pageBg {
    background: radial-gradient(ellipse 70% 77% at center, var(--color-white) 0%, var(--color-white) 42%, var(--color-green-pale) 82%);
  }
}

.pageBg__stage {
  aspect-ratio: 1440 / 820;
  position: relative;
  width: min(90rem, 100%, calc(100vh * 1440 / 820));
}

@media screen and (max-width: 767px) {
  .pageBg__stage {
    align-items: center;
    aspect-ratio: 3 / 4;
    display: flex;
    justify-content: center;
  }

  .pageBg__stage h1 img {
    margin-inline: auto;
  }
}

/* ========================
  Section common
======================== */
.campaign,
.members,
.newCustomer,
.history,
.voice,
.concept {
  padding: 5rem 0;
  scroll-margin-top: 5rem;
}

.newCustomer,
.voice {
  background-color: var(--color-green-dark);
  position: relative;
  z-index: 1;
}

.members {
  background-color: var(--color-white);
  padding-block: 7.8rem 17.5rem;
  position: relative;
  z-index: 1;
}

.members::after {
  aspect-ratio: 144/14;
  background-image: url(../images/newcustomer-imgGroup13.svg);
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -1px;
  content: "";
  display: block;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.newCustomer {
  padding-block: 8.3rem 8.8rem;
}

.campaign__inner,
.members__inner,
.newCustomer__inner,
.history__inner,
.voice__inner,
.concept__inner {
  margin: 0 auto;
  max-width: 82.5rem;
  padding: 0 1.25rem;
  position: relative;
}

/* ========================
  Scroll Fade-in
======================== */
.js-fadeIn {
  opacity: 0;
  transform: translateY(2.5rem) scale(0.97);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-fadeIn.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.campaign__prizeItem:nth-child(2) {
  transition-delay: 0.08s;
}

.campaign__prizeItem:nth-child(3) {
  transition-delay: 0.16s;
}

.campaign__prizeItem:nth-child(4) {
  transition-delay: 0.24s;
}

.memberCard:nth-child(2),
.newCustomerCard:nth-child(2),
.voiceCard:nth-child(2) {
  transition-delay: 0.1s;
}

.memberCard:nth-child(3),
.newCustomerCard:nth-child(3),
.voiceCard:nth-child(3) {
  transition-delay: 0.2s;
}

.voiceCard:nth-child(4) {
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .js-fadeIn,
  .kv__messageLead.js-fadeIn,
  .kv__messageText.js-fadeIn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.members__title,
.newCustomer__title,
.history__title,
.voice__title,
.concept__title {
  color: var(--color-green-dark);
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0.5rem;
  text-align: center;
}

.campaign__lead,
.members__lead,
.newCustomer__lead,
.history__lead,
.voice__lead {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 1.5rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .campaign,
  .members,
  .newCustomer,
  .history,
  .voice,
  .concept {
    padding: 17vw 0;
  }

  .members__title,
  .newCustomer__title,
  .history__title,
  .voice__title,
  .concept__title {
    font-size: 1.75rem;
  }
}

/* ========================
  KV（30周年メッセージ）
======================== */
.kv {
  height: 300vh;
  position: relative;
  z-index: 1;
}

.kv__sticky {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.kv__stage {
  aspect-ratio: 1440 / 820;
  position: relative;
  width: min(90rem, 100%, calc(100vh * 1440 / 820));
}

.kv__main {
  left: 50%;
  opacity: calc(1.2 - var(--kv-progress));
  position: absolute;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 44%;
  z-index: 3;
}

.kv__message {
  left: 50%;
  opacity: var(--kv-progress);
  position: absolute;
  text-align: center;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(90%, 40rem);
  z-index: 2;
}

.kv__messageTitle {
  color: var(--color-green-dark);
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  margin-inline: auto;
  width: 20.625rem;
}

.kv__messageTitle img {
  display: block;
  height: auto;
  width: 100%;
}

.kv__messageLead {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 4.5rem;
}

.kv__messageText {
  font-size: 1.125rem;
  letter-spacing: 2px;
  line-height: 2.2;
  margin-top: 2rem;
}

.kv__messageLead.js-fadeIn,
.kv__messageText.js-fadeIn {
  opacity: 1;
  transform: none;
  transition: none;
}

.kv__decoList {
  height: 100%;
  left: 0;
  opacity: calc(1.2 - var(--kv-progress));
  position: absolute;
  top: 0;
  transition: opacity 0.5s;
  width: 100%;
}

.kv__deco {
  /* animation: kvFloat 4.4s ease-in-out infinite; */
  position: absolute;
}

.kv__deco img {
  width: 100%;
}

.kv__deco--chatGlow {
  animation-delay: 0.2s;
  left: 3%;
  top: 15%;
  width: 5%;
  z-index: 1;
}

.kv__deco--chat {
  animation-delay: 0.6s;
  left: 23%;
  top: 21%;
  width: 6%;
  z-index: 2;
}

.kv__deco--thumbsSmall {
  animation-delay: 1.1s;
  left: 31%;
  top: 12%;
  width: 5%;
  z-index: 1;
}

.kv__deco--envelope {
  animation-delay: 0.4s;
  left: 61%;
  top: 14%;
  width: 5%;
  z-index: 2;
}

.kv__deco--wifi {
  animation-delay: 0.9s;
  left: 70%;
  top: 28%;
  width: 11%;
  z-index: 2;
}

.kv__deco--laptopGlow {
  animation-delay: 0.3s;
  left: -3%;
  top: 84%;
  width: 21%;
  z-index: 1;
}

.kv__deco--laptop {
  animation-delay: 0.8s;
  left: 72%;
  top: 38%;
  width: 23%;
  z-index: 2;
}

.kv__deco--lockGlow {
  animation-delay: 0.5s;
  left: 93%;
  top: 72%;
  width: 5%;
  z-index: 1;
}

.kv__deco--lock {
  animation-delay: 1.3s;
  left: 13%;
  top: 39%;
  width: 6%;
  z-index: 2;
}

.kv__deco--cart {
  animation-delay: 1.6s;
  left: 58%;
  top: 96%;
  width: 6%;
  z-index: 2;
}

.kv__deco--phoneGlow {
  animation-delay: 0.7s;
  left: 70%;
  top: 80%;
  width: 6%;
  z-index: 1;
}

.kv__deco--phone {
  animation-delay: 1.4s;
  left: 8%;
  top: 58%;
  width: 21%;
  z-index: 2;
}

.kv__deco--tower {
  animation-delay: 1.8s;
  left: 29%;
  top: 84%;
  width: 11%;
  z-index: 2;
}

.kv__deco--blob {
  animation-delay: 2.1s;
  left: 23%;
  top: 42%;
  width: 5%;
  z-index: 2;
}

.kv__deco--thumbs {
  animation-delay: 1s;
  left: 76%;
  top: 86%;
  width: 10%;
  z-index: 1;
}

@keyframes kvFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.8rem);
  }
}

@keyframes kvTitleIn {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media screen and (max-width: 767px) {
  .kv {
    height: auto;
  }

  .kv__sticky {
    height: auto;
    position: static;
  }

  .kv__stage {
    aspect-ratio: auto;
    padding: 3rem 1.5rem;
    width: 100%;
  }

  .kv__main {
    left: auto;
    opacity: 1;
    position: relative;
    top: auto;
    transform: none;
    transition:
      opacity 1s ease,
      z-index 0s 1s;
    width: 70%;
    z-index: 3;
  }

  body.is-kvScrolled .kv__main,
  body.is-kvScrolled .kv__decoList {
    opacity: 0.2;
    z-index: 0;
  }

  .kv__message {
    margin-top: 80vh;
    opacity: 1;
    padding-top: 20vh;
    position: static;
    transform: none;
    width: 100%;
  }

  .kv__messageTitle {
    max-width: none;
    width: 15.5rem;
  }

  .kv__messageTitle img {
    animation: kvTitleIn 0.6s ease forwards;
    opacity: 0;
  }

  .kv__messageLead {
    font-size: 1.125rem;
    letter-spacing: 4%;
    line-height: 2.1;
    margin-top: 1.7rem;
  }

  .kv__messageText {
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 2;
    margin-top: 1.5rem;
    text-align: left;
  }

  .kv__deco--chatGlow {
    width: 15%;
  }

  .kv__deco--chat {
    width: 16%;
  }

  .kv__deco--thumbsSmall {
    width: 15%;
  }

  .kv__deco--envelope {
    width: 15%;
  }

  .kv__deco--wifi {
    left: 60%;
    top: 35%;
    width: 21%;
  }

  .kv__deco--laptopGlow {
    width: 31%;
  }

  .kv__deco--laptop {
    width: 40%;
  }

  .kv__deco--lockGlow {
    width: 15%;
  }

  .kv__deco--lock {
    left: -10%;
    width: 16%;
  }

  .kv__deco--cart {
    width: 16%;
  }

  .kv__deco--phoneGlow {
    width: 16%;
  }

  .kv__deco--phone {
    top: 75%;
    width: 40%;
  }

  .kv__deco--tower {
    left: 50%;
    top: 85%;
    width: 21%;
  }

  .kv__deco--blob {
    width: 15%;
  }

  .kv__deco--thumbs {
    width: 20%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .kv__messageLead.js-fadeIn,
    .kv__messageText.js-fadeIn {
      opacity: 0;
      transform: translateY(3rem);
      transition:
        opacity 0.6s ease 0.3s,
        transform 0.6s ease 0.3s;
    }

    .kv__messageLead.js-fadeIn.is-inview,
    .kv__messageText.js-fadeIn.is-inview {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ========================
  KV Scroll Hint
======================== */
.kv__scrollHint {
  display: none;
}

@media screen and (max-width: 767px) {
  .kv__scrollHint {
    align-items: center;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    opacity: 1;
    pointer-events: none;
    position: fixed;
    right: 1.25rem;
    transition: opacity 0.5s ease;
    z-index: 40;
  }

  body.is-kvScrolled .kv__scrollHint {
    opacity: 0;
  }

  .kv__scrollHintText {
    color: var(--color-green-dark);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 2px;
  }

  .kv__scrollHintIcon {
    animation: kvScrollHintBounce 1.6s ease-in-out infinite;
    border-bottom: 2px solid var(--color-green-dark);
    border-right: 2px solid var(--color-green-dark);
    height: 0.5rem;
    width: 0.5rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .kv__scrollHintIcon {
      animation: none;
    }
  }
}

@keyframes kvScrollHintBounce {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
  }

  50% {
    transform: rotate(45deg) translate(0.25rem, 0.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv__deco,
  .campaign__amountTrack,
  .concept__avatarItem {
    animation: none;
  }

  .kv__messageTitle img {
    animation: none;
    opacity: 1;
  }
}

/* ========================
  Campaign
======================== */
.campaign {
  overflow-x: clip;
  padding-block: 1rem 0;
  position: relative;
  z-index: 1;
}

.campaign::after {
  aspect-ratio: 144/14;
  background-image: url(../images/members-curve.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  width: 100%;
}

.campaign__label {
  left: 1.25rem;
  position: absolute;
  text-align: center;
  top: -2rem;
  width: fit-content;
}

.campaign__label img {
  width: 20.4375rem;
}

.campaign__amount {
  background-color: var(--color-green-dark);
  color: var(--color-white);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0.8rem;
  overflow: hidden;
  padding: 0.8rem 0;
  width: 100vw;
}

.campaign__amountTrack {
  animation: campaignAmountMarquee 40s linear infinite;
  display: flex;
  width: max-content;
}

.campaign__lead {
  margin-top: 1.9rem;
}

.campaign__amountItem {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 0.8;
  padding: 0 2rem;
  white-space: nowrap;
}

@keyframes campaignAmountMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.campaign__titleDeco {
  margin: 1rem auto 0;
  text-align: center;
  width: 11.25rem;
}

.campaign__titleDeco--bottom {
  margin: 1rem auto 0;
  text-align: center;
  transform: rotate(180deg);
  width: 11.25rem;
}

.campaign__title {
  margin: 1.5rem auto 0;
  text-align: center;
  width: 43rem;
}

.campaign__amountNumber {
  color: var(--color-orange);
  font-size: 4rem;
  font-weight: 700;
  margin: 0 0.25rem;
  position: relative;
  top: -3px;
}

.campaign__prizeList {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.8rem;
}

.campaign__prizeList--top {
  grid-template-columns: 66%;
  justify-content: center;
  margin-top: 2.5rem;
}

.campaign__prizeList--major {
  gap: 3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  width: 86%;
}

.campaign__prizeList--minor {
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 3.5rem;
}

.campaign__prizeItem {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.campaign__note {
  color: var(--color-black);
  font-size: 0.75rem;
  margin-top: 2rem;
  text-align: right;
}

.campaign__more {
  margin-top: 3rem;
  text-align: center;
}

.campaign__more a {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 5%;
  min-width: 25rem;
  padding: 1.8rem;
  position: relative;
}

.campaign__more a::after {
  background-image: url(../images/arrow-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 0.75rem;
  position: absolute;
  right: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
}

@media (hover: hover) {
  .campaign__more a:hover::after {
    background-image: url(../images/arrow-green.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

@media screen and (max-width: 767px) {
  .campaign {
    padding-block: 6rem 4rem;
  }
  .campaign::after {
    background-image: url(../images/members-curve-mobile.svg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .campaign__inner {
    padding-block: 5vw 23vw;
  }
  .campaign__titleDeco {
    width: 9rem;
  }
  .campaign__titleDeco--bottom {
    width: 9rem;
  }
  .campaign__label {
    top: -4rem;
  }
  .campaign__label img {
    width: 15rem;
  }

  .campaign__amountTrack {
    animation: unset;
    width: auto;
  }

  .campaign__amount {
    padding: 0;
  }

  .campaign__amountItem:not(:first-child) {
    display: none;
  }

  .campaign__amountItem {
    display: block;
    font-size: clamp(1.4rem, -1.1rem + 10.67vw, 1.5rem);
    line-height: 1.6;
    margin-inline: auto;
    padding: 0 0 0.8rem 0;
    width: fit-content;
  }

  .campaign__amountNumber {
    font-size: 3rem;
    margin-inline: 0.5rem;
    position: relative;
    top: 0.2rem;
  }

  .campaign__amountText {
    letter-spacing: 0.05em;
  }

  .campaign__title {
    margin-top: 1rem;
    width: 17rem;
  }

  .campaign__lead {
    line-height: 1.8;
    margin: 1.4rem calc(50% - 50vw) 0;
  }

  .campaign__prizeList {
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .campaign__prizeItem picture {
    display: block;
  }

  .campaign__prizeList--top {
    grid-template-columns: minmax(0, 21.875rem);
    margin-top: 24vw;
  }

  .campaign__prizeList--major {
    grid-template-columns: minmax(0, 21.875rem);
    justify-content: center;
    width: auto;
  }

  .campaign__prizeList--minor {
    gap: 1.5rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign__more a {
    min-width: auto;
    padding-block: 1.9rem;
    width: 100%;
  }

  .campaign__note {
    line-height: 1.8;
    margin-top: 1.5rem;
    text-align: left;
  }

  .campaign__more {
    margin-top: 1.5rem;
  }
}

/* ========================
  Members（ご利用中のお客様へ）
======================== */
.members__title-area {
  display: flex;
  justify-content: space-between;
}

.members__title {
  letter-spacing: 2px;
  text-align: left;
}

.members__label {
  padding-top: 1rem;
  width: 26.625rem;
}

.members__lead {
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1.4;
  margin-top: 1.875rem;
}

.members__cardList {
  display: flex;
  flex-wrap: wrap;
  gap: 4.8rem 2.5%;
  margin-top: 3.5rem;
}

.memberCard {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  width: calc((100% - 5%) / 3);
  /* box-shadow: var(--shadow-card); */
}

.memberCard--lucky {
  width: 100%;
}

.memberCard__link {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.memberCard__body {
  flex: 1;
  margin-top: 2rem;
}

.memberCard:nth-child(n + 2) .memberCard__body {
  margin-top: 1.2rem;
}

.memberCard__title-area {
  align-items: center;
  column-gap: 2rem;
  display: flex;
}

.memberCard__title {
  color: var(--color-blue);
  font-size: 1.25rem;
  letter-spacing: 2px;
  text-align: left;
}

.memberCard--lucky .memberCard__title {
  color: var(--color-green-dark);
  font-size: 2rem;
  letter-spacing: 2px;
}

.memberCard--tokai .memberCard__title {
  color: var(--color-blue);
  font-weight: 700;
}

.memberCard--libmo .memberCard__title {
  color: #e2261a;
}

.memberCard__catch {
  border: 1px solid var(--color-green-dark);
  border-radius: 8px;
  color: var(--color-green-dark);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 0.8rem 1rem;
  width: fit-content;
}

.memberCard__text {
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1.8;
  margin-top: 1.4rem;
}

.memberCard--tokai .memberCard__text,
.memberCard--libmo .memberCard__text {
  margin-top: 0.9rem;
}

.memberCard__note {
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1.7;
}

.memberCard__arrow {
  align-items: center;
  background-color: var(--color-green-dark);
  border-radius: 50%;
  bottom: 0;
  color: var(--color-white);
  display: flex;
  height: 2.5rem;
  justify-content: center;
  position: absolute;
  right: 0;
  transition: transform 0.3s;
  width: 2.5rem;
}

.memberCard:nth-child(n + 2) .memberCard__arrow {
  bottom: unset;
  margin: 1rem 0 0 auto;
  position: relative;
  right: unset;
}

.memberCard__arrow::after {
  content: "\2192";
  font-size: 1.25rem;
}

.memberCard__link:hover .memberCard__arrow {
  transform: scale(1.15);
}

.memberCard__more {
  align-items: center;
  background-color: var(--color-green-dark);
  border-radius: var(--radius-badge);
  color: var(--color-white);
  display: none;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 0.7rem 1.5rem;
  width: fit-content;
}

.memberCard__more::after {
  background-image: url(../images/arrow-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 0.65rem;
  width: 0.65rem;
}

.members__note {
  font-size: 0.75rem;
  margin-top: 2.5rem;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .members {
    padding-bottom: 10.5rem;
  }

  .members__title-area {
    flex-direction: column;
  }

  .members__title--jp {
    display: contents;
  }

  .members__label {
    max-width: 100%;
    order: 1;
    width: 14.125rem;
  }
  .members__title {
    margin-top: 2rem;
    order: 2;
  }

  .members__lead {
    line-height: 1.8;
    letter-spacing: 2px;
    margin-top: 1.3rem;
    order: 3;
    text-align: left;
  }
  .members__cardList {
    grid-template-areas: "lucky""tokai""libmo";
    grid-template-columns: 1fr;
    margin-top: 2rem;
    row-gap: 2rem;
  }

  .memberCard {
    width: 100%;
  }

  .memberCard--lucky {
    grid-row: auto;
  }

  .memberCard__title-area {
    flex-direction: column;
  }

  .memberCard__body {
    padding-right: 0;
  }

  .memberCard:nth-child(n + 2) .memberCard__body {
    margin-top: 2rem;
  }

  .memberCard--lucky .memberCard__title {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1;
    margin-top: 0.75rem;
    text-align: left;
    width: 100%;
  }
  .memberCard__catch {
    font-size: 1.125rem;
    letter-spacing: 0;
    line-height: 1.5;
    margin-inline: 0 auto;
    padding: 0.375rem 0.625rem;
    width: fit-content;
  }
  .memberCard__text {
    font-feature-settings: "palt";
    font-size: 0.875rem;
    margin-top: 1rem;
  }
  .memberCard__note {
    font-feature-settings: "palt";
    font-size: 0.875rem;
  }
  .memberCard__more {
    display: flex;
    margin-inline: auto;
  }

  .memberCard__arrow {
    height: 2rem;
    width: 2rem;
  }

  .memberCard__arrow::after {
    font-size: 1rem;
  }

  .members__note {
    line-height: 1.5;
    text-align: left;
  }
}

/* ========================
  New Customer（はじめてのお客様へ）
======================== */
.newCustomer__title-area {
  display: flex;
  justify-content: space-between;
}
.newCustomer__title--jp {
  padding-top: 1rem;
}
.newCustomer__title {
  color: var(--color-yellow);
  letter-spacing: 2px;
  text-align: left;
}
.newCustomer__lead {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.4;
}
.newCustomer__label {
  width: 21.25rem;
}
.newCustomer__cardList {
  display: grid;
  gap: 1rem;
  grid-template-areas: "left1 right1""left1 right2";
  margin-top: 4rem;
}

.newCustomerCard {
  max-width: 47.9375rem;
  margin-inline: auto;
}

.newCustomerCard--left {
  grid-area: left1;
}

.newCustomerCard--right1 {
  grid-area: right1;
}

.newCustomerCard--right2 {
  grid-area: right2;
}

.newCustomer__cardList:has(.newCustomerCard:only-child) {
  grid-template-areas: "left1";
  grid-template-columns: 1fr;
}

.newCustomerCard__image {
  border-radius: var(--radius-card);
}

@media screen and (max-width: 767px) {
  .newCustomer {
    padding-block: 20vw 21vw;
  }
  .newCustomer__title-area {
    flex-direction: column;
  }

  .newCustomer__title--jp {
    display: contents;
  }

  .newCustomer__label {
    margin-inline: auto 0;
    order: 1;
    max-width: 100%;
    width: 16rem;
  }

  .newCustomer__title {
    margin-top: 2rem;
    order: 2;
  }

  .newCustomer__lead {
    line-height: 1.8;
    order: 3;
    text-align: left;
  }

  .newCustomer__cardList {
    grid-template-areas: "left1""right1""right2";
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }
}

/* ========================
  History（あの頃のインターネット）
======================== */

.history {
  background-color: transparent;
  overflow-x: clip;
  padding-bottom: 16.5rem;
  position: relative;
  z-index: 1;
}

.history::before {
  aspect-ratio: 144/14;
  background-image: url(../images/history-curve.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: -1px;
  width: 100%;
}

.history::after {
  aspect-ratio: 144/14;
  background-image: url(../images/voice-imgExclude.svg);
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -1px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  width: 100%;
}

/* お客様の声セクションが非表示の場合、historyの背景はtransparentなので
   ::afterの緑を白に差し替えるだけで「上は背景そのまま、下は白」のカーブになる */
.history:has(+ .concept)::after {
  background-image: url(../images/voice-imgExclude-white.svg);
}

.history__inner {
  padding-top: 11.5rem;
}

.history__title-area {
  align-items: center;
  column-gap: 15.5%;
  display: flex;
}

.history__title {
  letter-spacing: 2px;
  text-align: left;
}

.history__lead {
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 1.3rem;
  text-align: left;
}

.history__label {
  padding-top: 1rem;
  width: 14.9375rem;
}

.historySlider {
  margin-top: 4.8rem;
}

.swiper-wrapper {
  align-items: center;
}

.history__swiper {
  min-height: 30.0625rem;
  overflow: visible;
  padding: 2.5rem 0 0;
}

.history__swiper .swiper-wrapper {
  --swiper-wrapper-transition-timing-function: linear;
}

.history__slide {
  background-color: var(--color-white);
  border: 1px solid var(--color-green-dark);
  border-radius: 25rem;
  padding-block: 2.9375rem 1.3rem;
  position: relative;
  text-align: center;
  width: 15rem;
}

.history__slideBadge {
  background-color: var(--color-orange);
  border-radius: var(--radius-badge);
  color: var(--color-white);
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.375rem 1rem;
  white-space: nowrap;
  z-index: 2;
}

.history__slideEra {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 1rem;
}

.history__slideCircle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 2.2rem auto 0;
  overflow: hidden;
  padding: 0.25rem;
  width: 12rem;
}

.history__slideImage {
  clip-path: circle(50% at 50% 50%);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.swiper-slide-active.history__slide {
  background-color: var(--color-green-dark);
}

.swiper-slide-active .history__slideEra {
  color: var(--color-white);
}

.swiper-slide-active .history__slideCircle {
  background-color: var(--color-green-dark);
}

.swiper-slide-active .history__slideImage {
  border-radius: 50%;
}

@media screen and (min-width: 768px) {
  .swiper-slide-active.history__slide {
    transform: scale(1.3333);
    z-index: 1;
  }
}

.history__sliderText {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.8;
  min-height: 3.6em;
  text-align: center;
}

.history__pagination {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin: 3.6rem auto 0;
  position: relative;
  width: fit-content;
}

.history__pagination::before {
  background-color: var(--color-green);
  content: "";
  height: 0.0625rem;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: calc(100% - 56px);
  z-index: 0;
}

.history__paginationYear {
  background-color: var(--color-green-pale);
  color: var(--color-green-dark);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0 0.5rem;
  position: relative;
  z-index: 1;
}

.history__paginationSwiper {
  align-items: flex-start;
  display: flex;
  gap: 3.75rem;
  justify-content: center;
  position: relative;
  top: -8px;
  width: auto;
}

.history__paginationSwiper .swiper-pagination-bullet {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-black);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  margin: 0;
  min-height: 3.25rem;
  opacity: 1;
  padding: 0 0.5rem;
  position: relative;
  transition:
    color 0.4s,
    font-size 0.4s;
  width: auto;
  z-index: 1;
}

.pagination-year::before {
  background-color: var(--color-white);
  border: 1px solid var(--color-green-dark);
  border-radius: 50%;
  content: "";
  display: block;
  height: 1rem;
  margin-inline: auto;
  width: 1rem;
}

.history__paginationSwiper .swiper-pagination-bullet-active.pagination-year::before {
  background-color: var(--color-green-dark);
}

.history__paginationSwiper .swiper-pagination-bullet-active {
  color: var(--color-black);
  font-size: 1.25rem;
}

@media screen and (max-width: 767px) {
  .history {
    padding-bottom: 24vw;
  }
  .history__inner {
    padding-top: 2rem;
  }
  .history__title-area {
    column-gap: 0;
    flex-direction: column;
  }

  .history__title {
    margin-top: 1rem;
  }

  .history__label {
    margin-inline: 0 auto;
    max-width: 100%;
    width: 11rem;
  }

  .history__title--jp {
    margin-top: 0.5rem;
  }

  .historySlider {
    margin-top: 2.5rem;
  }

  .history__swiper {
    min-height: 29rem;
  }

  .history__slideCircle {
    margin-top: 1rem;
    width: 60%;
  }

  .swiper-slide-active .history__slideCircle {
    margin-top: 2.5rem;
    width: 90%;
  }

  .swiper-slide-active.history__slide {
    padding-block: 2.3rem 1rem;
  }

  .swiper-slide-active .history__slideBadge {
    font-size: 1.5rem;
    padding: 0.2rem 1rem;
  }

  .swiper-slide-active .history__slideEra {
    font-size: 1.125rem;
    margin-top: 0.8rem;
  }

  .history__pagination {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 5rem;
    row-gap: 0.5rem;
    width: auto;
  }

  .history__pagination::before {
    top: 4px;
    width: calc(100% - 45px);
  }

  .history__paginationYear {
    font-size: 0.75rem;
  }

  .history__paginationSwiper {
    gap: 0;
  }

  .history__paginationSwiper .swiper-pagination-bullet {
    font-size: 0.75rem;
    padding: 0 0.25rem;
  }

  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    font-size: 1rem;
    margin: 0.25rem 0.5rem;
  }

  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
    font-size: 1.3rem;
  }
}

/* ========================
  Voice（お客様の声）
======================== */
.voice {
  padding-block: 8rem 9rem;
}

.voice__title-area {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.voice__title {
  color: var(--color-yellow);
  letter-spacing: 2px;
  text-align: left;
}

.voice__lead {
  color: var(--color-white);
  font-size: 1rem;
}

.voice__label {
  width: 10.875rem;
}

.voice__cardList {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  margin-top: 4rem;
}

.voiceCard {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  text-align: left;
}

.voiceCard__image {
  align-self: start;
  margin-inline: auto;
  width: 85%;
}

.voiceCard__info {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem 2rem 1rem;
}

.voiceCard__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.voiceCard__comment {
  font-size: 1rem;
  line-height: 1.3;
  margin-top: 1.2rem;
}

.voiceCard__name {
  color: var(--color-green-dark);
  font-size: 0.875rem;
  margin-top: 1.7rem;
}

@media screen and (max-width: 767px) {
  .voice {
    padding-block: 5rem;
  }
  .voice__title-area {
    align-items: flex-start;
    flex-direction: column;
  }

  .voice-title--jp {
    display: contents;
  }

  .voice__label {
    max-width: 100%;
    order: 1;
    margin-inline: auto 0;
    width: 8.5rem;
  }

  .voice__title {
    margin-top: 1.8rem;
    order: 2;
  }

  .voice__lead {
    line-height: 1.8;
    order: 3;
    text-align: left;
  }

  .voice__cardList {
    row-gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 2rem;
  }

  .voiceCard__image {
    width: 75%;
  }

  .voiceCard__info {
    margin-inline: auto;
    padding-top: 1.5rem;
    width: 90%;
  }

  .voiceCard__comment {
    margin-top: 1rem;
  }
}

/* ========================
  Brand Concept
======================== */
.concept {
  background-color: var(--color-white);
  padding-block: 8.5rem 0;
  position: relative;
  z-index: 1;
}

.concept::before {
  aspect-ratio: 144/14;
  background-image: url(../images/brand-curve.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: -1px;
  width: 100%;
}

main .history + .concept::before {
  background-image: none;
}

.concept::after {
  aspect-ratio: 144/14;
  background-image: url(../images/bg-brand-bottom.png);
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -1px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  width: 100%;
}

.concept__wrapper {
  max-width: unset;
  padding-bottom: 35vw;
}

.concept__inner {
  padding-bottom: 15rem;
}

.concept__label {
  margin-inline: auto;
  width: min(80rem, 90%);
}

.concept__tag {
  margin: 7vw auto 0;
  width: 31.75rem;
}

.concept__title {
  color: var(--color-green-dark);
  font-size: 2.8vw;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: 2vw;
}

.concept__text {
  font-size: 1.25rem;
  line-height: 1.8;
  margin-top: 1rem;
  position: relative;
  text-align: center;
  z-index: 3;
}

.concept__more {
  margin-top: 2.5rem;
  text-align: center;
}

.concept__more a {
  font-size: 1.125rem;
  letter-spacing: -4%;
  padding: 1.4rem 3.8rem;
  position: relative;
}

.concept__more a::after {
  background-image: url(../images/arrow-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 0.75rem;
  position: absolute;
  right: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
}

@media (hover: hover) {
  .concept__more a:hover::after {
    background-image: url(../images/arrow-green.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.concept__avatarItem {
  animation: conceptAvatarFloat 3.6s ease-in-out infinite;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
}

.concept__avatarItem img,
.concept__deco img {
  width: 100%;
}

.concept__avatarItem--1 {
  animation-delay: 0s;
  left: 16%;
  top: 68%;
  width: 17%;
  z-index: 2;
}

.concept__avatarItem--2 {
  animation-delay: 0.6s;
  left: 85%;
  top: 24%;
  width: 13%;
  z-index: 2;
}

.concept__avatarItem--3 {
  animation-delay: 1.2s;
  left: 11%;
  top: 40%;
  width: 11%;
  z-index: 2;
}

.concept__avatarItem--4 {
  animation-delay: 1.8s;
  left: 81%;
  top: 60%;
  width: 11%;
  z-index: 2;
}

@keyframes conceptAvatarFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-0.6rem);
  }
}

@media screen and (max-width: 767px) {
  .concept {
    padding-block: 8rem 0;
  }

  .concept__wrapper {
    padding-bottom: 110vw;
  }

  .concept__inner {
    background-position: center top 35%;
    background-size: contain;
    padding-bottom: 26.6vw;
  }

  .concept__label {
    width: 100%;
  }

  .concept__title {
    font-size: 6vw;
    margin-top: 6vw;
  }

  .concept__tag {
    margin-top: 11vw;
    max-width: 100%;
    width: min(18rem, 80%);
  }

  .concept__text {
    font-size: 1.125rem;
    line-height: 1.8;
  }

  .concept__avatarItem--1 {
    left: unset;
    right: -14%;
    top: 105%;
    width: 37%;
  }

  .concept__avatarItem--2 {
    left: unset;
    right: 0;
    top: 18%;
    width: 27%;
  }

  .concept__avatarItem--3 {
    left: 32%;
    top: 100%;
    width: 27%;
  }

  .concept__avatarItem--4 {
    left: 24%;
    top: -2%;
    width: 23%;
  }

  .concept__more a {
    font-size: 4vw;
    padding: 3vw 12vw;
  }

  .concept__more a::after {
    height: 3.5vw;
    right: 5vw;
    width: 3.5vw;
  }

  .deco-city1 {
    position: absolute;
    top: -9%;
    right: 0%;
    height: 6.25rem;
    width: 13.375rem;
  }

  .deco-city2 {
    position: absolute;
    top: 115%;
    left: 0%;
    height: 6.25rem;
    width: 10.375rem;
  }

  .deco_sp1 {
    position: absolute;
    top: 8%;
    left: 6%;
    height: 1.4063rem;
    width: 1.4063rem;
  }

  .deco_sp2 {
    position: absolute;
    top: 109%;
    left: 34%;
    height: 2.75rem;
    width: 3.875rem;
  }

  .deco_sp3 {
    position: absolute;
    top: 86%;
    left: 11%;
    height: 2.75rem;
    width: 2.9375rem;
  }

  .deco_sp4 {
    position: absolute;
    top: 3%;
    right: 3%;
    height: 4.4375rem;
    width: 4.125rem;
  }

  .deco_sp5 {
    position: absolute;
    top: -16%;
    left: 6%;
    height: 2rem;
    width: 2.125rem;
  }

  .deco_sp6 {
    position: absolute;
    top: 116%;
    left: 90%;
    height: 1.4063rem;
    width: 1.4063rem;
  }

  .deco_sp7 {
    position: absolute;
    top: 116%;
    left: 50%;
    height: 0.9375rem;
    width: 0.9375rem;
  }

  .deco_sp8 {
    position: absolute;
    top: 104%;
    left: 7%;
    transform: rotate(45deg);
    height: 1.875rem;
    width: 1.875rem;
  }
}

/* ========================
  Footer
======================== */
.footer {
  background-color: var(--color-green-dark);
  color: var(--color-white);
  padding: 12rem 0 2rem;
  position: relative;
  z-index: 1;
}

.footer::before {
  aspect-ratio: 463/360;
  background-image: url(../images/img-footer-aniv.png);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -65%);
  width: 28.9375rem;
}

.footer__inner {
  margin: 0 auto;
  max-width: 82.5rem;
  padding: 0 1.25rem;
  text-align: center;
}

.footer__linkList {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.8rem;
  justify-content: center;
}

.footer__link {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .footer__link:hover {
    opacity: 0.7;
  }
}

.footer__copyright {
  color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin-top: 3.2rem;
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .footer {
    padding-top: 7rem;
  }
  .footer__inner {
    text-align: start;
  }
  .footer::before {
    transform: translate(-50%, -79%);
    width: 64%;
  }
  .footer__linkList {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ========================
  Utility
======================== */
.for-pc {
  display: block;
}

.for-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .for-pc {
    display: none;
  }

  .for-sp {
    display: block;
  }
}

/* #19: keep the reviewed card; provide both specified destinations. */
.memberCard__destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.memberCard__destinations a {
  text-underline-offset: 0.2em;
}
.memberCard__destinations a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.newCustomerCard--left > a {
  display: block;
}

/* pageTop */

.detailBackTop {
  background: white;
  border: 1px solid var(--color-green-dark);
  border-radius: 50%;
  bottom: 32px;
  color: var(--color-green-dark);
  display: grid;
  font-size: 32px;
  height: 80px;
  place-items: center;
  position: fixed;
  right: 32px;
  transition: opacity 0.3s ease-out;
  width: 80px;
  z-index: 40;
}

@media (hover: hover) {
  .detailBackTop:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 767px) {
  .detailBackTop {
    right: 25px;
    bottom: 57px;
    height: 3.75rem;
    width: 3.75rem;
  }

  .detailBackTop img {
    height: 18px;
    width: 18px;
  }
}