/*--------------------------------------------------
  Base
--------------------------------------------------*/
html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body{
  -webkit-text-size-adjust: 100%;
}

#main {
  font-family: "Noto Sans CJK JP", "Noto Sans", sans-serif!important;
}

@media not all and (min-width: 769px) {
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}


/*--------------------------------------------------
  PageSpecific
--------------------------------------------------*/
/* navigation
-------------------------*/
@media not all and (min-width: 769px) {
  .navigation-container {
    position: relative;
    width: 100%;
    height: 247px;
    background-image: url('../images/malamaweek/bg_dark.jpg');
    background-position: center;
    z-index: 0;
  }
  .navigation-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #077B33;
    opacity: .7;
  }
}
@media screen and (min-width: 769px) {
  .navigation-container {
    background-size: cover;
    background-image: url('../images/malamaweek/bg_navi.jpg');
  }
}

.navigation {
  display: flex;
  gap: 1px;
  text-align: center;
}
@media not all and (min-width: 769px) {
  .navigation {
    position: relative;
    max-width: 260px;
    flex-direction: column;
    padding-top: 60px;
    margin: 0 auto -53px;
    z-index: 1;
  }
}
@media screen and (min-width: 769px) {
  .navigation {
    width: 966px;
    padding-top: 20px;
    margin: 0 auto;
  }
}

.navigation-item {
  display: block;
  background-color: #F5F7FA;
  text-decoration: none;
  font-size: 0;
  padding: 22px 0;
  transition: background-color .3s;
}
.navigation-item span{
  font-size: 1rem;
  line-height: 1rem;
  color: #4C2501;
  font-weight: 500;
  transition: color .3s;
}
@media not all and (min-width: 769px) {
  .navigation-item {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .navigation-item {
    width: calc(993px / 4);
  }
}
@media (hover: hover) {
  .navigation-item:hover {
    background-color: #4C2501;
  }
  .navigation-item:hover span {
    color: #F5F7FA;
  }
}


/* mv
-------------------------*/
.mv {
  text-align: center;
  background-repeat: no-repeat;
  background-position: top 0 center;
  background-color: #0D676D;
}
.mv__page-title {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0px 1px 6px rgba(0,0,0,0.5);
}
.mv__lead {
  color: #ffffff;
  font-size: 0.875rem;
  margin-top: 24px;
  text-shadow: 0px 1px 6px rgba(0,0,0,0.5);
}
@media not all and (min-width: 769px) {
  .mv__lead {
    padding-bottom: 37px;
  }
}

@media not all and (min-width: 769px) {
  .mv {
    aspect-ratio: 375 / 420;
    width: 100%;
    max-height: 420px;
    background-size: cover;
    background-image: url('../images/malamaweek/mv_sp.jpg');
    padding: 105px calc(20 / 375 * 100%) 20px;
  }
  .mv__page-title {
    font-size: 2rem;
    line-height: 41px;
  }
}
@media screen and (min-width: 769px) {
  .mv {
    min-height: 600px;
    text-align: center;
    background-size: auto 600px;
    background-image: url('../images/malamaweek/mv_pc.jpg');
    padding: 225px 0 30px;
  }
  .mv__page-title {
    font-size: 2.5rem;
    line-height: 52px;
  }
}


/* parallax-bg
-------------------------*/
.parallax-bg::before {
  content: "";
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("../images/malamaweek/bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-color: #fff;
  z-index: -1;
}


/* section
-------------------------*/
#how-to-enjoy.section,
#schedule.section {
  padding-top: 120px;
}
#event.section {
  padding-top: 80px;
}
#venue-guide.section {
  padding-bottom: 160px;
}
#malama-hawaii.section {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media not all and (min-width: 769px) {
  #explanation.section {
    padding-top: 73px;
  }
  #schedule.section {
    padding-bottom: 94px;
  }
  #event.section {
    padding-bottom: 86px;
  }
  #venue-guide.section {
    padding-top: 94px;
  }
}
@media screen and (min-width: 769px) {
  .section {
    padding: 0 20px;
  }
  #explanation.section {
    padding-top: 100px;
  }
  #schedule.section {
    padding-bottom: 73px;
  }
  #event.section {
    padding-bottom: 120px;
  }
  #venue-guide.section {
    padding-top: 160px;
  }
}
.section--background-green {
  background-color: #e6f6eb;
}
.section--background-white {
  background-color: #ffffff;
}
.section--background-beige {
  background-color: #FAF6EF;
}

.section__inner {
  width: 100%;
  margin: 0 auto;
}
@media not all and (min-width: 769px) {
  .section__inner {
    padding: 0 calc(20 / 375 * 100%);
  }
  .section__inner.section__inner--sp-nowrap {
    padding-right: 0;
    padding-left: 0;
  }
}
@media screen and (min-width: 769px) {
  .section__inner {
    max-width: 996px;
  }
}

/* section-heading
-------------------------*/
.section-heading {
  text-align: center;
  color: #4C2501;
}
.section-heading--text-black {
  color: #2C2A29;
}

@media not all and (min-width: 769px) {
  .section-heading {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 769px) {
  .section-heading {
    font-size: 2rem;
  }
}


/* section-lead
-------------------------*/
.section-lead {
  color: #2C2A29;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  margin-top: 8px;
}


/* section-contents
-------------------------*/
@media not all and (min-width: 769px) {
  .section-heading + .section-contents {
    margin-top: 24px;
  }
}
@media screen and (min-width: 769px) {
  .section-heading + .section-contents {
    margin-top: 32px;
  }
}



/* explanation
-------------------------*/
@media not all and (min-width: 769px) {
  .explanation {
    margin-top: 8px;
  }
}

.explanation__text {
  font-size: 1rem;
  color: #4C2501;
  text-align: center;
  line-height: 1.75;
}
.explanation__note {
  font-size: 0.875rem;
  color: #333333;
  text-align: center;
}
@media not all and (min-width: 769px) {
  .explanation__note {
    margin-top: 24px;
  }
}
@media screen and (min-width: 769px) {
  .explanation__note {
    margin-top: 40px;
  }
}


/* enjoying
-------------------------*/
.enjoying {
  display: flex;
  gap: 0 24px;
}
@media not all and (min-width: 769px) {
  .enjoying {
    flex-direction: column;
  }
}
@media screen and (min-width: 769px) {
  .enjoying {
    gap: 0 24px;
  }
}


.enjoying-item__heading {
  font-size: 1.625rem;
  line-height: 33.80px;
  text-align: center;
  color: #4C2501;
  padding: 24px 0 16px;
}
.enjoying-item__img img {
  width: 100%;
}
.enjoying-item__text {
  font-size: 0.875rem;
  color: #4C2501;
  margin-top: 16px;
}
@media not all and (min-width: 769px) {
  .enjoying-item {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .enjoying-item {
    width: calc((100% - 48px) / 3);
  }
}


/* event-schedule
-------------------------*/
.event-schedule__icon-sup {
  margin-top: 24px;
}
.event-schedule__table-container {
  overflow-x: auto;
}
@media not all and (min-width: 769px) {
  .event-schedule__table-container {
    padding-inline: calc(20 / 375 * 100%);
    margin-inline: calc(-20 / 375 * 100%);
  }
}


/* schedule-table
-------------------------*/
.schedule-table {
  width: 994px;
  border: 1px solid #C0C5CC;
  border-collapse: collapse;
}
.schedule-table__row + .schedule-table__row {
  border-top: 1px solid #C0C5CC;
}
.schedule-table__heading + .schedule-table__detail {
  border-left: 1px solid #C0C5CC;
}
.schedule-table__heading {
  width: 249px; 
  font-size: 0.875rem;
  font-weight: bold;
  color: #4C2501;
  padding: 16px;
  background-color: #FAF6EF;
}
.schedule-table__detail {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
}
.schedule-table__store-name {
  width: 250px;
  font-size: 0.875rem;
  color: #4C2501;
}
.schedule-table__program-icons {
  display: flex;
  gap: 8px;
}
.schedule-table__program-icon {
  width: 30px;
}
.schedule-table__program-icon img {
  width: 100%;
  height: auto;
}
.schedule-table__detail-link {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.875rem;
  color: #077B33;
  text-decoration: none;
  line-height: 0.7;
  padding: 12px 1em;
  border: 1px solid #077B33;
  border-radius: 100px;
  background-color: #ffffff;
  margin-left: auto;
  transition: all .3s;
}
.schedule-table__detail-link::after {
  content: '';
  width: 13px;
  height: 8px;
  background-color: #077B33;
  mask-image: url("../images/malamaweek/icon_arrow.svg");
  -webkit-mask-image: url("../images/malamaweek/icon_arrow.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: top 0 center;
  -webkit-mask-position: top 0 center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transition: background-color .3s;
}
@media (hover: hover) {
  .schedule-table__detail-link:hover {
    color: #ffffff;
    background-color: #077B33;
  }
  .schedule-table__detail-link:hover::after {
    background-color: #ffffff;
  }
}

/* icon-sup
-------------------------*/
.icon-sup {
  display: flex;
}
.icon-sup__row {
  display: flex;
  align-items: center;
}
.icon-sup__detail {
  font-size: 0.875rem;
  color: #4C2501;
}

@media not all and (min-width: 769px) {
  .icon-sup {
    flex-direction: column;
    gap: 12px;
  }
  .venue__tab-triggers {
    overflow-x: auto;
    padding-inline: calc(20 / 375 * 100%);
    margin: 0 calc(-20 / 375 * 100%);
  }
  .venue__tab-trigger {
    flex-shrink: 0;
  }
}
@media screen and (min-width: 769px) {
  .icon-sup {
    align-items: center;
    gap: 24px;
  }
}

/* venue
-------------------------*/
.venue__tab-switchers {
  display: flex;
  gap: 16px 8px;
  padding-bottom: 8px;
}
.venue__tab-switcher {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: #4C2501;
  line-height: 0.7;
  padding: 16px;
  background-color: #FAF6EF;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s;
}
.venue__tab-switcher.is-active {
  color: #FFFFFF;
  background-color: #077B33;
  position: relative;
  cursor: default;
}
.venue__tab-switcher.is-active::after {
  display: block;
  content: '';
  width: 16px;
  height: 8px;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: #077B33;
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}
.venue__tab-contents {
  margin-top: 32px;
}

@media not all and (min-width: 769px) {
  .venue__tab-switchers {
    overflow-x: auto;
    padding-inline: calc(20 / 375 * 100%);
    margin-inline: calc(-20 / 375 * 100%);
  }
  .venue__tab-switcher {
    flex-shrink: 0;
  }
}
@media screen and (min-width: 769px) {
  .venue__tab-switchers {
    flex-wrap: wrap;
  }
}
@media (hover: hover) {
  .venue__tab-switcher:hover {
    color: #ffffff;
    background-color: #077B33;
  }
}

/* venue-contents
-------------------------*/
.venue-contents {
  display: none;
}
.venue-contents.is-active {
  display: block;
}
.venue-contents__info {
  display: grid;
  color: #4C2501;
}
.venue-contents__image {
  grid-area: image;
}
.venue-contents__date {
  grid-area: date;
  font-size: 1.625rem;
}
.venue-contents__place {
  grid-area: place;
  font-size: 0.875rem;
  font-weight: bold;
  margin-top: auto;
}
.venue-contents__program {
  grid-area: program;
  font-size: 0.875rem;
  font-weight: bold;
}
.venue-contents__detail {
  grid-area: detail;
  font-size: 0.875rem;
}
.venue-contents__access {
  grid-area: access;
  width: 100%;
  max-width: 160px;
  font-size: 0.875rem;
  text-align: center;
  text-decoration: none;
  color: #077B33;
  padding: 8px 1rem;
  border: 1px solid #077B33;
  border-radius: 100px;
  background-color: #ffffff;
  margin-inline: auto;
  transition: all .3s;
}
.venue-contents__seminar {
  margin-top: 112px;
}
.venue-contents__workshop {
  margin-top: 80px;
}
.venue-contents__souvenir {
  margin-top: 80px;
}

@media not all and (min-width: 769px) {
  .venue-contents__info {
    gap: 8px;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 
    "image"
    "date"
    "place"
    "program"
    "detail"
    "access";
  }
  .venue-contents__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 200;
  }
  .venue-contents__date {
    margin-top: 16px;
  }
  .venue-contents__place {
    margin-top: 24px;
  }
  .venue-contents__detail {
    margin-top: 10px;
  }
  .venue-contents__access {
    margin-top: 22px;
  }
  .venue-contents__campaigns {
    margin-top: 50px;
  }

}
@media screen and (min-width: 769px) {
  .venue-contents__info {
    gap: 8px 24px;
    grid-template-rows: auto 1fr auto auto auto;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
    "image date"
    "image place"
    "image program"
    "image detail"
    "image access";
  }
  .venue-contents__campaigns {
    margin-top: 60px;
  }
  .venue-contents__image {
    max-width: 434px;
  }
  .venue-contents__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 434 / 260;
  }
  .venue-contents__access {
    margin-top: 24px;
  }
}

@media (hover: hover) {
  .venue-contents__access:hover {
    color: #ffffff;
    background-color: #077B33;
  }
}

/* venue-campaign
-------------------------*/
.venue-campaign {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.venue-campaign__item {
  width: calc((100% - 16px) / 2);
  color: #ffffff;
  background-image: url('../images/malamaweek/bg_dark.jpg');
  background-position: center;
  background-size: cover;
  text-align: center;
  position: relative;
  z-index: 1;
}
.venue-campaign__item--full {
  width: 100%;
}
.venue-campaign__item::before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #077B33;
  opacity: .9;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.venue-campaign__heading {
  font-weight: bold;
}
.venue-campaign__text {
  font-size: 0.875rem;
  margin-top: 8px;
}

.venue-campaign__lead-text {
  font-size: 1rem;
  color: #4C2501;
  line-height: 1.75;
  text-align: center;
  margin-top: 16px;
}
.venue-campaign__link {
  display: block;
  width: 100%;
  max-width: 180px;
  font-size: 0.875rem;
  text-align: center;
  text-decoration: none;
  color: #077B33;
  padding: 8px 1rem;
  border: 1px solid #077B33;
  border-radius: 100px;
  background-color: #ffffff;
  margin: 22px auto 0;
  transition: all .3s;
}

@media not all and (min-width: 769px) {
  .venue-campaign__item {
    padding: 24px 8px;
  }
  .venue-campaign__item--full {
    padding: 24px 20px;
  }
  .venue-campaign__heading {
    font-size: 1rem;
  }
}
@media screen and (min-width: 769px) {
  .venue-campaign__item {
    padding: 24px;
  }
  .venue-campaign__heading {
    font-size: 1.25rem;
  }
}
@media (hover: hover) {
  .venue-campaign__link:hover {
    color: #ffffff;
    border: 1px solid #ffffff;
    background-color: #077B33;
  }
}



/* event-card
-------------------------*/
.event-cards {
  display: flex;
  margin-top: 40px;
}
@media not all and (min-width: 769px) {
  .event-cards {
    flex-direction: column;
    gap: 24px 0;
  }
}
@media screen and (min-width: 769px) {
  .event-cards {
    flex-wrap: wrap;
    gap: 40px 24px;
  }
}

.event-card__heading {
  color: #2C2A29;
  margin-top: 24px;
}
.event-card__text {
  font-size: 0.875rem;
  color: #333333;
}
@media not all and (min-width: 769px) {
  .event-card {
    width: 100%;
  }
  .event-card__img{
    position: relative;
    aspect-ratio: 335 / 200;
    overflow: hidden;
  }
  .event-card__img img{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
  }
  .event-card__heading {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .event-card__text {
    margin-top: 16px;
  }
}
@media screen and (min-width: 769px) {
  .event-card {
    width: calc((100% - 24px) / 2);
  }
  .event-card__img img{
    width: 100%;
  }
  .event-card__heading {
    font-size: 1.625rem;
  }
  .event-card__text {
    margin-top: 24px;
  }
}


/* event-item-card
-------------------------*/
.event-item-cards {
  display: flex;
}
@media not all and (min-width: 769px) {
  .event-item-cards {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 5px calc(20 / 375 * 100%);
    margin: 0 calc(-20 / 375 * 100%);
  }
}
@media screen and (min-width: 769px) {
  .event-item-cards {
    gap: 32px 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.event-item-card {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 4px;
  position: relative;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
}
.event-item-card.event-item-card--benefit .event-item-card__thumb {
  position: relative;
}
.event-item-card.event-item-card--benefit .event-item-card__thumb::after {
  content: '';
  width: 40px;
  height: 54px;
  background: url('../images/christmas/label_apdx.png') no-repeat center / cover;
  position: absolute;
  bottom: -10px;
  right: 8px;
}
@media not all and (min-width: 769px) {
  .event-item-card {
    scroll-snap-align: center;
    width: calc(( 236 / 335) * 100%);
    flex-shrink: 0;
  }
}
@media screen and (min-width: 769px) {
  .event-item-card {
    width: calc((100% - 48px) / 4);
  }
}

.coming-soon {
  font-size: 3rem;
  font-weight: bold;
  color:#03933A ;
  text-align: center;
  margin: 24px 0;
}

.event-item-card__thumb img {
  aspect-ratio: 236 / 140;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-item-card__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px;
  position: relative;
}

.event-item-card__schedule {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  letter-spacing: -0.05em;
}

.event-item-card__schedule-date {
  flex-shrink: 0;
  font-size: 0.875rem;
}
.event-item-card__schedule-date span {
  font-size: 1.5rem;
  font-weight: bold;
}
.event-item-card__schedule-time {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: bold;
  margin-left: auto;
}

.event-item-card__title {
  font-size: 1rem;
  font-weight: bold;
  margin-top: 8px;
}
.event-item-card__text {
  font-size: 0.8rem;
  margin-top: 4px;
  margin-bottom:8px;
}

.event-item-card__detail {
  display: inline-flex;
  width: 100%;
  gap: 8px;
  align-items: baseline;
  font-size: 0.75rem;
  line-height: 0.75rem;
  margin-top: 8px;
}
.event-item-card__detail::before {
  flex-shrink: 0;
  content: '';
  width: 10px;
  height: 10px;
  background-color: #697180;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: top 0 center;
  -webkit-mask-position: top 0 center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.event-item-card__detail.event-item-card__detail--time::before {
  mask-image: url("../images/christmas/field_time.svg");
  -webkit-mask-image: url("../images/christmas/field_time.svg");
}
.event-item-card__detail.event-item-card__detail--campaign::before {
  mask-image: url("../images/malamaweek/star.svg");
  -webkit-mask-image: url("../images/malamaweek/star.svg");
}

.event-item-card__bottom {
  text-align: center;
  padding-top: 16px;
  margin-top: auto;
}
.event-item-card__detail.event-item-card__detail--campaign + .event-item-card__bottom {
  padding-top: 0;
}

.event-item-card__amount {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: baseline;
}

.event-item-card__price {
  font-size: 1.125rem;
  font-weight: bold;
  text-align: right;
  word-break: break-all;
  color: #D63333;
}
.event-item-card__price span {
  font-size: 0.75rem;
}

.event-item-card__button {
  max-width: 335px;
  margin: 16px auto 0;
}


/* souvenir-card
-------------------------*/
.souvenir-cards {
  display: flex;
  gap: 16px;
}
@media not all and (min-width: 769px) {
  .souvenir-cards {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding: 5px calc(20 / 375 * 100%);
    margin: 0 calc(-20 / 375 * 100%);
  }
}
@media screen and (min-width: 769px) {
  .souvenir-cards {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.souvenir-cards__item img{
  width: 100%;
}
@media not all and (min-width: 769px) {
  .souvenir-cards__item {
    scroll-snap-align: center;
    width: calc(( 320 / 335) * 100%);
    flex-shrink: 0;
  }
}
@media screen and (min-width: 769px) {
  .souvenir-cards__item {
    width: calc(( 100% - 32px ) /3);
  }
}


/* malama-hawaii
-------------------------*/
.malama-hawaii__text {
  font-size: 1rem;
  color: #4C2501;
  line-height: 1.75;
  text-align: center;
  margin-top: 24px;
}
.malama-hawaii__button {
  max-width: 256px;
  margin: 24px auto 0;
}

/* button-container
-------------------------*/
.button-container {
  max-width: 280px;
  margin: 40px auto 0;
}


/* page-bottom
-------------------------*/
.page-bottom {
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-color: #BEA78C;
}

.page-bottom .button-container {
  margin-top: 0;
}
@media not all and (min-width: 769px) {
  .page-bottom .button-container {
    padding: 90px 1rem;
  }
}
@media screen and (min-width: 769px) {
  .page-bottom .button-container {
    padding: 56px 1rem;
  }
}


/* pill-button
-------------------------*/
.pill-button {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  padding: 14px 1rem;
  background-color: #fff;
  border: 1px solid #9F7442;
  border-radius: 60px;
  transition: all .3s;
}
.pill-button__text {
  font-size: 0.875rem;
  color: #333;
  transition: color .3s;
}
@media (hover: hover) {
  .pill-button:hover {
    background-color: #9F7442;
  }
  .pill-button:hover .pill-button__text {
    color: #fff;
  }
}

.pill-button--to-top {
  border: 1px solid #fff;
}
@media (hover: hover) {
  .pill-button--to-top:hover {
    border: 1px solid #fff;
    background-color: #E2E2E2;
  }
  .pill-button--to-top:hover .pill-button__text {
    color: #000;
  }
}

.pill-button--event-item {
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #41B26C;
  border-radius: 50px;
}
.pill-button--event-item .pill-button__text {
  color: #03933A;
}
@media (hover: hover) {
  .pill-button--event-item:hover {
    background-color: #41B26C;
  }
  .pill-button--event-item:hover .pill-button__text {
    color: #fff;
  }
}

.pill-button--malama-hawaii {
  padding: 12px 1rem;
  background-color: #10069F;
  border: 1px solid #10069F;
}
.pill-button--malama-hawaii .pill-button__text {
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
  border-radius: 100px;
}
@media (hover: hover) {
  .pill-button--malama-hawaii:hover {
    background-color: #fff;
    border: 1px solid #10069F;
  }
  .pill-button--malama-hawaii:hover .pill-button__text {
    color: #10069F;
  }
}