@charset "UTF-8";

/* ===============================================================================================
[TABLE OF CONTENTS]

1. FOUNDATION.
 - DESIGN TOKENS.
 - RESET.
2. LAYOUT.
3. COMPONENTS.
 - TEXT.
 - LIST & ITEM.
 - BUTTON.
 - TITLE.
 - CALLOUT.
 - MESSAGE.
 - PHOTO.
 - SLIDER.
 - BANNER.
 - GROUP.
 - FLOWER.
 - ANCHOR.
 - EVENT.
4. PROJECT.
 - MAIN VISUAL.
 - SECTION.
 - SECTION EYE.
5. UTILITIES.
 - BACKGROUND COLOR.
 - MARGIN, PADDING.
 - RESPONSIVE VISIBILITY.
=============================================================================================== */

/* ===============================================================================================
1. FOUNDATION.
=============================================================================================== */
/* ------------------------------------------------------------------------------------------------
[FOUNDATION] DESIGN TOKENS.
------------------------------------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
}
.post-content {
  /* ---------- [Unit] ---------- */
  --u-unit: 0.25rem;
  /* ---------- [Semantic] Color ---------- */
  --color-green-300: oklch(0.7465 0.1593 125.9); /* #94be40 */
  --color-green-400: oklch(0.6414 0.1559 127.38); /* #729d1d */
  --color-green-500: oklch(0.4592 0.1132 151.83); /* #126936 */
  --color-green-500-oklch: 0.4592 0.1132 151.83; /* #126936 */
  --color-orange-500: oklch(0.7836 0.1639 72.81); /* #f7a513 */
  --color-orange-500-oklch: 0.7836 0.1639 72.81; /* #f7a513 */
  --color-orange-550: oklch(0.73 0.165 72.81); /* #e6960b */
  --color-orange-550-oklch: 0.73 0.165 72.81; /* #e6960b */
  --color-cream-50: oklch(0.9694 0.0145 110.88); /* #f5f6eb */
  --color-cream-100: oklch(0.9676 0.0433 91.26); /* #fff4d4 */
  --color-neutral-0: #ffffff;
  --color-neutral-0-oklch: 1 0 0; /* #ffffff */
  --color-neutral-800: oklch(0.3211 0 0); /* #333333 */
  --color-neutral-1000-oklch: 0 0 0; /* #000000 */

  /* ---------- [Base] Document ---------- */
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: calc(var(--u-unit) * 3.5);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-0);
}

@media (min-width: 768px) {
  .post-content {
    font-size: calc(var(--u-unit) * 4);
    line-height: 1.8;
  }
}
/* ------------------------------------------------------------------------------------------------
[FOUNDATION] RESET.
------------------------------------------------------------------------------------------------ */
.post-content :where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.5;
}
.post-content :where(b, strong) {
  font-weight: 700;
}
/* ===============================================================================================
2. LAYOUT.
=============================================================================================== */
.post-content .l-container {
  inline-size: 100%;
  padding-inline: calc(var(--u-unit) * 3.75);
}
@media (min-width: 768px) {
  .post-content .l-container {
    padding-inline: calc(var(--u-unit) * 5);
  }
}
/* ===============================================================================================
3. COMPONENTS.
=============================================================================================== */
/* ------------------------------------------------------------------------------------------------
[COMPONENTS] TEXT.
------------------------------------------------------------------------------------------------ */
.post-content .c-text-sm {
  font-size: calc(var(--u-unit) * 3.25);
}
.post-content .c-text-xs {
  font-size: calc(var(--u-unit) * 3);
}
@media (min-width: 768px) {
  .post-content .c-text-sm {
    font-size: calc(var(--u-unit) * 3.75);
  }
  .post-content .c-text-xs {
    font-size: calc(var(--u-unit) * 3.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] LIST & ITEM.
------------------------------------------------------------------------------------------------ */
/* ---------- [List] Marker Base ---------- */
.post-content .c-list-dot > li,
.post-content .c-list-circle > li,
.post-content .c-list-star > li {
  position: relative;
  padding-inline-start: 1.3em;
}
.post-content .c-list-dot > li::before,
.post-content .c-list-circle > li::before,
.post-content .c-list-star > li::before {
  content: var(--list-marker);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}
/* ---------- [List] Marker Variants ---------- */
.post-content .c-list-dot {
  --list-marker: "・";
}
.post-content .c-list-circle {
  --list-marker: "●";
}
.post-content .c-list-star {
  --list-marker: "※";
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] BUTTON.
------------------------------------------------------------------------------------------------ */
.post-content .c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  max-inline-size: calc(var(--u-unit) * 85);
  min-block-size: calc(var(--u-unit) * 11.25);
  padding: calc(var(--u-unit) * 2.5) calc(var(--u-unit) * 8.75) calc(var(--u-unit) * 2.5) calc(var(--u-unit) * 2.5);
  text-decoration: none;
  background-color: var(--color-orange-500);
  border-radius: calc(var(--u-unit) * 2.5);
  box-shadow: 0 calc(var(--u-unit) * 2) calc(var(--u-unit) * 3.5) oklch(var(--color-neutral-1000-oklch) / 15%);
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.post-content .c-btn__text {
  font-size: calc(var(--u-unit) * 4.5);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-neutral-0);
}
.post-content .c-btn__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--u-unit) * 2.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--u-unit) * 5);
  block-size: calc(var(--u-unit) * 5);
  margin-block-start: calc(var(--u-unit) * -2.5);
  background-color: var(--color-neutral-0);
  border-radius: 50%;
}
.post-content .c-btn__icon img {
  inline-size: calc(var(--u-unit) * 2.75);
  block-size: auto;
}
@keyframes animateBtnArrow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(var(--u-unit) * 1.25));
  }
}
@media (any-hover: hover) {
  .post-content .c-btn:hover {
    background-color: var(--color-orange-550);
  }
  .post-content .c-btn:hover .c-btn__icon {
    animation: animateBtnArrow 1s infinite linear;
  }
}
@media (max-width: 767.98px) {
  .post-content .c-btn__icon {
    animation: animateBtnArrow 1s infinite linear;
  }
}
@media (min-width: 768px) {
  .post-content .c-btn {
    min-block-size: calc(var(--u-unit) * 15);
    padding: calc(var(--u-unit) * 2.5) calc(var(--u-unit) * 11.25) calc(var(--u-unit) * 2.5) calc(var(--u-unit) * 5);
  }
  .post-content .c-btn__text {
    font-size: calc(var(--u-unit) * 5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] TITLE.
------------------------------------------------------------------------------------------------ */
.post-content .c-title {
  position: relative;
  padding-inline-start: calc(var(--u-unit) * 8.75);
  font-size: calc(var(--u-unit) * 3.5);
  color: var(--color-green-500);
}
.post-content .c-title::before {
  content: "";
  position: absolute;
  inset-block-start: 0.8em;
  inset-inline-start: 0;
  inline-size: calc(var(--u-unit) * 6.25);
  block-size: 1px;
  background-color: var(--color-green-500);
}
@media (min-width: 768px) {
  .post-content .c-title {
    padding-inline-start: calc(var(--u-unit) * 10);
    font-size: calc(var(--u-unit) * 4);
  }
  .post-content .c-title::before {
    inline-size: calc(var(--u-unit) * 7.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] CALLOUT.
------------------------------------------------------------------------------------------------ */
.post-content .c-callout {
  padding-block: calc(var(--u-unit) * 5.5) calc(var(--u-unit) * 6.25);
  background-color: var(--color-green-500);
}
.post-content .c-callout__title {
  margin-block-end: calc(var(--u-unit) * 1.25);
  font-size: calc(var(--u-unit) * 5.5);
  font-style: italic;
  color: oklch(var(--color-neutral-0-oklch) / 40%);
}
.post-content .c-callout__desc {
  color: var(--color-neutral-0);
}
@media (min-width: 768px) {
  .post-content .c-callout {
    padding: calc(var(--u-unit) * 7.5) calc(var(--u-unit) * 2.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] MESSAGE.
------------------------------------------------------------------------------------------------ */
.post-content .c-message {
  display: flex;
}
.post-content .c-message + .c-message {
  margin-block-start: calc(var(--u-unit) * 6);
}
.post-content .c-message__body {
  flex: 1;
  min-inline-size: 1px;
}
.post-content .c-message__name {
  font-weight: 700;
}
.post-content .c-message__name--primary {
  color: var(--color-green-500);
}
.post-content .c-message__name--secondary {
  color: var(--color-orange-500);
}
.post-content .c-message__name--tertiary {
  color: var(--color-green-400);
}
.post-content .c-message__img {
  width: 100%;
}
.post-content .c-message__avatar {
  inline-size: calc(var(--u-unit) * 15.5);
}
.post-content .c-message__body {
  padding-inline-start: calc(var(--u-unit) * 3);
}
@media (min-width: 768px) {
  .post-content .c-message + .c-message {
    margin-block-start: calc(var(--u-unit) * 7.5);
  }
  .post-content .c-message__avatar {
    inline-size: calc(var(--u-unit) * 30);
  }
  .post-content .c-message__body {
    padding-inline-start: calc(var(--u-unit) * 5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] PHOTO.
------------------------------------------------------------------------------------------------ */
.post-content .c-photo {
  --anchor-background-primary-oklch: var(--color-neutral-0-oklch);

  position: relative;
}
.post-content .c-photo__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  line-height: 1.5;
  font-weight: 500;
  background-color: oklch(var(--anchor-background-primary-oklch) / 80%);
}
@media (max-width: 767.98px) {
  .post-content .c-photo + .c-photo {
    margin-block-start: calc(var(--u-unit) * 6.25);
  }
  .post-content .c-photo__cap {
    padding: calc(var(--u-unit) * 1.5) calc(var(--u-unit) * 2.5);
    font-size: calc(var(--u-unit) * 3);
  }
}
@media (min-width: 768px) {
  .post-content .c-photo + .c-photo {
    margin-block-start: calc(var(--u-unit) * 7.5);
  }
  .post-content .c-photo__cap {
    padding: calc(var(--u-unit) * 2.5);
    font-size: calc(var(--u-unit) * 3.5);
  }
}
.post-content .c-photo img {
  width: 100%;
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] SLIDER.
------------------------------------------------------------------------------------------------ */
.post-content .c-slider {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  position: relative;
}
.post-content .c-slider__track {
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}
.post-content .c-slider__list {
  display: flex;
  align-items: stretch;
  gap: calc(var(--u-unit) * 2.5);
  backface-visibility: hidden;
  will-change: transform;
}
.post-content .c-slider__slide {
  flex: 0 0 auto;
  max-inline-size: 640px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.5;
  cursor: pointer;
}
.post-content .c-slider__slide.is-active {
  opacity: 1;
  cursor: default;
}
.post-content .c-slider__card {
  border-radius: calc(var(--u-unit) * 2);
  overflow: hidden;
  position: relative;
}
.post-content .c-slider__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.post-content .c-slider__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  inline-size: 100%;
  padding-block-start: calc(var(--u-unit) * 5);
  visibility: hidden;
}
.post-content .c-slider.is-initialized .c-slider__controls {
  visibility: visible;
}
.post-content .c-slider__pagination {
  display: flex;
  align-items: center;
  gap: calc(var(--u-unit) * 1.5);
}
.post-content .c-slider__page {
  inline-size: calc(var(--u-unit) * 4);
  block-size: calc(var(--u-unit) * 1.5);
  border: none;
  border-radius: calc(var(--u-unit) * 1);
  background-color: oklch(var(--color-neutral-1000-oklch) / 15%);
  cursor: pointer;
  padding: 0;
  transition:
    inline-size 0.475s cubic-bezier(0.625, 0.05, 0, 1),
    background-color 0.475s cubic-bezier(0.625, 0.05, 0, 1);
}
.post-content .c-slider__page.is-active {
  inline-size: calc(var(--u-unit) * 8);
  background-color: var(--color-orange-500);
}
.post-content .c-slider__arrows {
  display: flex;
  gap: calc(var(--u-unit) * 2);
}
.post-content .c-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--u-unit) * 10);
  block-size: calc(var(--u-unit) * 10);
  border: 1px solid oklch(var(--color-neutral-1000-oklch) / 15%);
  border-radius: 50%;
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-800);
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.475s cubic-bezier(0.625, 0.05, 0, 1),
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.post-content .c-slider.is-draggable .c-slider__track {
  cursor: grab;
}
.post-content .c-slider.is-dragging .c-slider__track {
  cursor: grabbing;
}
@media (any-hover: hover) {
  .post-content .c-slider__page:hover {
    background-color: var(--color-orange-550);
  }
  .post-content .c-slider__arrow:hover {
    transform: scale(1.08);
    background-color: var(--color-green-500);
    border-color: var(--color-green-500);
    color: var(--color-neutral-0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-content .c-slider__slide,
  .post-content .c-slider__page,
  .post-content .c-slider__arrow {
    transition: none;
  }
}
.post-content .c-slider:focus {
  outline: none;
}
.post-content .c-slider:focus-visible {
  outline: 2px solid var(--color-orange-500);
  outline-offset: 4px;
}
.post-content .c-slider__page:focus-visible,
.post-content .c-slider__arrow:focus-visible {
  outline: 2px solid var(--color-green-500);
  outline-offset: 2px;
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] BANNER.
------------------------------------------------------------------------------------------------ */
.post-content .c-banner {
  position: relative;
}
.post-content .c-banner__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1cqw;
}
.post-content .c-banner__title {
  font-size: 4.8em;
  color: var(--color-neutral-0);
  text-shadow: 0 1.1em 1.1em oklch(var(--color-green-500-oklch) / 35%);
}
.post-content .c-banner__title strong {
  font-size: 1.225em;
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] GROUP.
------------------------------------------------------------------------------------------------ */
.post-content .c-group--secondary .c-group__body {
  background-color: var(--color-neutral-0);
}
.post-content .c-group--secondary .c-group__message {
  background-color: var(--color-neutral-0);
}
.post-content .c-group__body,
.post-content .c-group__message,
.post-content .c-group__photo {
  padding-block: calc(var(--u-unit) * 6.25);
}
.post-content .c-group__header {
  padding: calc(var(--u-unit) * 3.75);
  background-color: var(--color-neutral-0);
}
.post-content .c-group__photo {
  background-color: var(--color-neutral-0);
}
.post-content .c-group__photo .c-list-photo {
  max-inline-size: calc(var(--u-unit) * 160);
  margin-inline: auto;
}
.post-content .p-group__photo-desc {
  margin-block-start: calc(var(--u-unit) * 4);
  font-weight: 500;
  color: var(--color-green-500);
}
.post-content .c-group__item + .c-group__item {
  margin-block-start: calc(var(--u-unit) * 5);
}
.post-content .c-group__item .c-title {
  margin-block-end: calc(var(--u-unit) * 1.25);
}
.post-content .c-group__item-desc strong {
  color: var(--color-green-400);
}
.post-content .c-group__btn {
  padding-block-end: calc(var(--u-unit) * 6.25);
  text-align: center;
  background-color: var(--color-neutral-0);
}
@media (min-width: 768px) {
  .post-content .c-group__body,
  .post-content .c-group__message,
  .post-content .c-group__photo {
    padding-block: calc(var(--u-unit) * 7.5);
  }
  .post-content .c-group__header {
    padding: calc(var(--u-unit) * 3.75) calc(var(--u-unit) * 5);
  }
  .post-content .p-group__photo-desc {
    margin-block-start: calc(var(--u-unit) * 5);
  }
  .post-content .c-group__btn {
    padding-block-end: calc(var(--u-unit) * 7.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] FLOWER.
------------------------------------------------------------------------------------------------ */
.post-content .c-flower {
  --c-flower-sprout: oklch(0.7681 0.2044 130.85);
  --c-flower-mature: var(--color-green-500);
  --c-flower-bloom: var(--color-orange-500);
  --c-flower-stem-40: oklch(0.6482 0.1754 131.68);
  --c-flower-stem-65: oklch(0.5628 0.1567 139.6);
  --c-flower-stem-85: oklch(0.5018 0.1333 146.62);
  --c-flower-leaf-60: oklch(0.63 0.1698 134.27);
  --c-flower-leaf-80: oklch(0.5308 0.1462 142.33);
  --c-flower-bloom-0: oklch(0.9052 0.1657 98.11);
  --c-flower-bloom-35: oklch(0.8369 0.1644 84.43);
  --c-flower-bloom-75: oklch(0.7686 0.1647 70.08);

  overflow: hidden;
}
.post-content .c-flower:hover {
  transform: scale(1.05);
}
.post-content .c-flower__svg {
  width: calc(var(--u-unit) * 5);
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.post-content .c-flower__stem {
  fill: var(--c-flower-mature);
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.post-content .c-flower__leaf-b {
  fill: var(--c-flower-mature);
  transform-origin: 0% 92%;
  transform-box: fill-box;
}
.post-content .c-flower__leaf-m {
  fill: var(--c-flower-mature);
  transform-origin: 30% 90%;
  transform-box: fill-box;
}
.post-content .c-flower__bloom {
  fill: var(--c-flower-mature);
  transform-origin: 0% 80%;
  transition: fill 0.3s ease;
  transform-box: fill-box;
}
@keyframes pc-stem {
  0% {
    opacity: 0;
    fill: var(--c-flower-sprout);
    clip-path: inset(100% 0 0 0);
    transform: scaleY(0.05);
  }
  15% {
    opacity: 1;
    fill: var(--c-flower-sprout);
  }
  40% {
    fill: var(--c-flower-stem-40);
  }
  65% {
    fill: var(--c-flower-stem-65);
    clip-path: inset(0 0 0 0);
    transform: scaleY(1);
  }
  85% {
    fill: var(--c-flower-stem-85);
  }
  100% {
    opacity: 1;
    fill: var(--c-flower-mature);
    clip-path: inset(0 0 0 0);
    transform: scaleY(1);
  }
}
@keyframes pc-leaf-b {
  0% {
    opacity: 0;
    fill: var(--c-flower-sprout);
    transform: scale(0);
  }
  30% {
    opacity: 1;
    fill: var(--c-flower-sprout);
  }
  60% {
    fill: var(--c-flower-leaf-60);
  }
  80% {
    fill: var(--c-flower-leaf-80);
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    fill: var(--c-flower-mature);
    transform: scale(1);
  }
}
@keyframes pc-leaf-m {
  0% {
    opacity: 0;
    fill: var(--c-flower-sprout);
    transform: scale(0);
  }
  30% {
    opacity: 1;
    fill: var(--c-flower-sprout);
  }
  60% {
    fill: var(--c-flower-leaf-60);
  }
  80% {
    fill: var(--c-flower-leaf-80);
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    fill: var(--c-flower-mature);
    transform: scale(1);
  }
}
@keyframes pc-bloom {
  0% {
    opacity: 0;
    fill: var(--c-flower-bloom-0);
    transform: scale(0);
  }
  35% {
    opacity: 1;
    fill: var(--c-flower-bloom-35);
  }
  75% {
    fill: var(--c-flower-bloom-75);
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    fill: var(--c-flower-bloom);
    transform: scale(1);
  }
}
@media (min-width: 768px) {
  .post-content .c-flower__svg {
    width: calc(var(--u-unit) * 6.2);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] ANCHOR.
------------------------------------------------------------------------------------------------ */
.post-content .c-anchor + .c-anchor {
  margin-block-start: 2px;
}
.post-content .c-anchor__link {
  position: relative;
  display: block;
  min-block-size: calc(var(--u-unit) * 11.25);
  padding: calc(var(--u-unit) * 2.5) calc(var(--u-unit) * 2.5) calc(var(--u-unit) * 2.5) calc(var(--u-unit) * 12);
  background-color: oklch(var(--color-neutral-0-oklch) / 60%);
}
.post-content .c-anchor__icon {
  position: absolute;
  inset-block-start: calc(var(--u-unit) * 1.7);
  inset-inline-start: calc(var(--u-unit) * 2.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--u-unit) * 7.5);
  block-size: calc(var(--u-unit) * 7.5);
  padding-block-start: calc(var(--u-unit) * 1.25);
  padding-inline-start: calc(var(--u-unit) * 0.5);
  background-color: var(--color-neutral-0);
  border-radius: 50%;
}
.post-content .c-anchor__text {
  font-size: calc(var(--u-unit) * 3);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: auto;
}
@media (any-hover: hover) {
  .post-content .c-anchor__link:hover .c-flower__stem {
    animation: pc-stem 1.3s cubic-bezier(0.25, 1, 0.5, 1) both;
  }
  .post-content .c-anchor__link:hover .c-flower__leaf-b {
    animation: pc-leaf-b 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.22s both;
  }
  .post-content .c-anchor__link:hover .c-flower__leaf-m {
    animation: pc-leaf-m 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.38s both;
  }
  .post-content .c-anchor__link:hover .c-flower__bloom {
    animation: pc-bloom 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) 0.5s both;
  }
  .post-content .c-anchor__link:hover .c-anchor__text {
    text-decoration-color: currentColor;
  }
}
@media (min-width: 768px) {
  .post-content .c-anchor + .c-anchor {
    margin-block-start: calc(var(--u-unit) * 1);
  }
  .post-content .c-anchor__link {
    padding: calc(var(--u-unit) * 3) calc(var(--u-unit) * 7.5) calc(var(--u-unit) * 3) calc(var(--u-unit) * 20);
  }
  .post-content .c-anchor__icon {
    inset-inline-start: calc(var(--u-unit) * 7.5);
    inline-size: calc(var(--u-unit) * 8.75);
    block-size: calc(var(--u-unit) * 8.75);
  }
  .post-content .c-anchor__text {
    font-size: calc(var(--u-unit) * 3.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] EVENT.
------------------------------------------------------------------------------------------------ */
.post-content .c-event + .c-event {
  margin-block-start: calc(var(--u-unit) * 4);
}
.post-content .c-event__heading {
  margin-block-end: calc(var(--u-unit) * 2.5);
}
.post-content .c-event__title {
  display: inline-block;
  padding: calc(var(--u-unit) * 1.75) calc(var(--u-unit) * 4);
  font-weight: 700;
  color: var(--color-green-500);
  border: 1px solid var(--color-green-500);
  border-radius: calc(var(--u-unit) * 50);
}
@media (min-width: 768px) {
  .post-content .c-event + .c-event {
    margin-block-start: calc(var(--u-unit) * 5.25);
  }
  .post-content .c-event__heading {
    margin-block-end: calc(var(--u-unit) * 3);
  }
}
/* ===============================================================================================
4. PROJECT.
=============================================================================================== */
/* ------------------------------------------------------------------------------------------------
[PROJECT] MAIN VISUAL.
------------------------------------------------------------------------------------------------ */
.post-content .p-mv__title img {
  width: 100%;
}
/* ------------------------------------------------------------------------------------------------
[PROJECT] SECTION.
------------------------------------------------------------------------------------------------ */
.post-content .p-section {
  container-type: inline-size;
  background-color: var(--color-cream-100);
}
.post-content .p-section__header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 16em;
  padding: calc(var(--u-unit) * 2);
  font-size: 1cqw;
  text-align: center;
  background-color: var(--color-green-500);
}
.post-content .p-section__body {
  padding-block: calc(var(--u-unit) * 6);
}
.post-content .p-section__title {
  font-size: 5.88em;
  color: var(--color-neutral-0);
}
.post-content .p-section__btn {
  margin-block-start: calc(var(--u-unit) * 6.25);
  text-align: center;
}
.post-content .p-section__text {
  margin-block-start: calc(var(--u-unit) * 6.25);
  font-size: calc(var(--u-unit) * 3);
  text-align: end;
}
@media (min-width: 768px) {
  .post-content .p-section__body {
    padding-block: calc(var(--u-unit) * 7.5);
  }
  .post-content .p-section__btn {
    margin-block-start: calc(var(--u-unit) * 7.5);
  }
  .post-content .p-section__text {
    margin-block-start: calc(var(--u-unit) * 7.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[PROJECT] SECTION EYE.
------------------------------------------------------------------------------------------------ */
.post-content .p-eye {
  background-color: var(--color-cream-100);
}
.post-content .p-eye__btn {
  margin-block-start: calc(var(--u-unit) * 6.25);
  text-align: center;
}
@media (min-width: 768px) {
  .post-content .p-eye__btn {
    margin-block-start: calc(var(--u-unit) * 7.5);
  }
}
/* ===============================================================================================
5. UTILITIES.
=============================================================================================== */
/* ------------------------------------------------------------------------------------------------
[UTILITIES] BACKGROUND COLOR.
------------------------------------------------------------------------------------------------ */
.post-content .u-bgc-primary-light {
  background-color: var(--color-green-300);
}
.post-content .u-bgc-light {
  background-color: var(--color-neutral-0);
}
.post-content .u-bgc-tertiary-light {
  background-color: var(--color-cream-50);
}
.post-content .u-bgc-tertiary-strong {
  background-color: var(--color-cream-100);
}
/* ------------------------------------------------------------------------------------------------
[UTILITIES] MARGIN, PADDING.
------------------------------------------------------------------------------------------------ */
/* ---------- MARGIN BLOCK START ---------- */
.post-content .u-mbs-md {
  margin-block-start: calc(var(--u-unit) * 6.25);
}
@media (min-width: 768px) {
  .post-content .u-mbs-md {
    margin-block-start: calc(var(--u-unit) * 7.5);
  }
}
/* ---------- PADDING BLOCK START ---------- */
.post-content .u-pbs-md {
  padding-block-start: calc(var(--u-unit) * 6.25);
}
@media (min-width: 768px) {
  .post-content .u-pbs-md {
    padding-block-start: calc(var(--u-unit) * 7.5);
  }
}
/* ---------- PADDING BLOCK END ---------- */
.post-content .u-pbe-none {
  padding-block-end: 0;
}
.post-content .u-pbe-md {
  padding-block-end: calc(var(--u-unit) * 6.25);
}
@media (min-width: 768px) {
  .post-content .u-pbe-md {
    padding-block-end: calc(var(--u-unit) * 7.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[UTILITIES] RESPONSIVE VISIBILITY.
------------------------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .post-content .u-hide-max-md {
    display: none;
  }
}
@media (min-width: 768px) {
  .post-content .u-hide-min-md {
    display: none;
  }
}