@charset "utf-8";
@media screen and (max-width:768px) {
/*===== # PRESET =====*//*#region*/
body {
  --font-size_0: 12px;
  --font-size_1: 14px;
  --font-size_2: 16px;
  --font-size_3: 18px;
  --font-size_4: 20px;
  --font-size_5: 24px;
  font-size: var(--font-size_1);
}
div.content > *:not(:last-child) {
  margin-bottom: 30px;
}

/* headline */
h2 {
  max-width: max-content;
}
h2::before {
  right: -10px;
  bottom: -10px;
  width: 100px;
}

/* button */
section a[role="button"] {
  margin-inline: auto;
  width: 100%;
}

/*===== # HEADER =====*//*#region*/
header img {
  width: 40%;
}
/*===== / HEADER =====*//*#endregion*/

/*===== # HERO =====*//*#region*/
section#hero {
  justify-content: flex-end;
}
section#hero .hero__background {
  margin-right: -27.5%;
  width: 255%;
}
section#hero .hero__logo {
  top: 15%;
  left: 52%;
  width: 70%;
}
section#hero .hero__discription {
  top: 22%;
  left: 50%;
  font-size: 2.5cqw;
}
section#hero .hero__illustration {
  top: 45%;
  left: 50%;
  width: 60%;
}
section#hero .hero__catchcopy {
  top: 75%;
  left: 50%;
  font-size: 5cqw;
  line-height: 1.5em;
}
section#hero .hero__catchcopy .wbr {
  display: none;
}
section#hero .hero__catchcopy::before {
  right: 0%;
  bottom: -5%;
  width: 20cqw;
}
section#hero .hero__subcopy {
  top: 87%;
  left: 50%;
  font-size: 2cqw;
}
section#hero .hero__function {
  display: none;
}
section#hero .hero__navigation {
  display: none;
}

/*===== # BLOG =====*//*#region*/
section#blog .blog__feature {
  padding: 20px;
}
section#blog .blog__feature article {
  grid-template-columns: 1fr;
  grid-template-areas:
    "thumbnail"
    "title"
    "snippet"
    "link";
}
section#blog .blog__feature article .blog__title {
  margin-top: 0.5em;
}
section#blog .blog__recommendation ul {
  flex-direction: column;
}
section#blog .blog__recommendation article {
  /* grid-template-columns: 30% 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 20px;
  grid-template-areas:
    "thumbnail title"
    "thumbnail snippet"; */
    padding: 20px;
}
section#blog .blog__recommendation article .blog__snippet {
  display: none;
}
section#blog .blog__search ul {
  flex-wrap: wrap;
  --gap: 20px;
}
section#blog .blog__search li {
  flex-basis: calc(50% - 10px);
}
/*===== / BLOG =====*//*#endregion*/

/*===== # MEMBER =====*//*#region*/
section#member ul {
  --case-visible-count: 3.5;
  --case-gap: 3dvw;
  --case-duration: 8s;
}
/*===== / MEMBER =====*//*#endregion*/

/*===== # EVENT =====*//*#region*/
section#event .event__schedule {
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "image"
    "list";  
}
section#event .event__schedule ul {
  margin-top: 1em;
}
section#event article {
  grid-template-columns: 30% 30% 1fr;
}
/*===== / EVENT =====*//*#endregion*/

/*===== # FOOTER =====*//*#region*/
footer .footer__logo {
  width: 50%;
}
/*===== / FOOTER =====*//*#endregion*/

}