/* Shared invitation on the public and member homepages. */
.survey-notice {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  align-items: center;
  gap: 32px;
  margin: 32px 0;
  padding: 32px;
  background: #dde8e1;
  border: 1px solid #b5c9bd;
  border-left: 4px solid #2f6f64;
  color: #1b2924;
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-align: left;
  scroll-margin-top: 112px;
}
.survey-notice .survey-notice-label {
  margin: 0 0 12px;
  color: #255b53;
  font: 700 14px/1.7 "Zen Kaku Gothic New", sans-serif;
  letter-spacing: .04em;
}
#kitten-survey h2 {
  margin: 0 0 16px;
  color: #1b2924;
  font: 700 28px/1.5 "Zen Old Mincho", serif;
  font-size: 28px !important;
  letter-spacing: .02em;
}
.survey-notice .survey-notice-description {
  max-width: 40em;
  margin: 0;
  color: #1b2924;
  font: 400 16px/1.8 "Zen Kaku Gothic New", sans-serif;
}
.survey-notice .survey-notice-disclaimer {
  margin: 16px 0 0;
  color: #455b50;
  font: 400 13px/1.8 "Zen Kaku Gothic New", sans-serif;
}
.survey-notice .survey-notice-meta {
  margin: 0 0 16px;
  color: #255b53;
  font: 700 14px/1.8 "Zen Kaku Gothic New", sans-serif;
}
.survey-notice .survey-notice-link {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: #2f6f64;
  color: #fff;
  border: 1px solid #2f6f64;
  border-radius: 4px;
  font: 700 16px/1.5 "Zen Kaku Gothic New", sans-serif;
  text-decoration: none;
}
.survey-notice .survey-notice-link::before,
.survey-notice .survey-notice-link::after { content: none; }
.survey-notice .survey-notice-link:hover,
.survey-notice .survey-notice-link:active { background: #255b53; }
.survey-notice .survey-notice-link:focus-visible {
  outline: 3px solid #255b53;
  outline-offset: 4px;
}
.survey-notice .survey-notice-external {
  margin: 12px 0 0;
  color: #455b50;
  font: 400 12px/1.8 "Zen Kaku Gothic New", sans-serif;
}
@media (max-width: 800px) {
  .survey-notice { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  #kitten-survey h2 { font-size: 24px !important; }
  .survey-notice .survey-notice-action { max-width: 400px; width: 100%; }
}