@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.
------------------------------------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");

html {
  scroll-behavior: smooth;
}
.post-content {
  /* ---------- [Unit] ---------- */
  --u-unit: 0.25rem;
  /* ---------- [Color] ---------- */
  --color-red-500: oklch(0.5105 0.1748 25.98); /* #b52b2b */
  --color-red-550: oklch(0.46 0.175 25.98); /* #a3171c */
  --color-navy-900: oklch(0.2534 0.0735 250.91); /* #002344 */
  --color-cream-50: oklch(0.9938 0.0197 103.65); /* #fffeef */
  --color-neutral-100: oklch(0.9491 0 0); /* #eeeeee */
  --color-neutral-500: oklch(0.6066 0 0); /* #828282 */
  --color-neutral-800: oklch(0.3211 0 0); /* #333333 */
  --color-neutral-0: #ffffff;
  --color-neutral-0-oklch: 1 0 0; /* #ffffff */
  --color-neutral-1000: oklch(0 0 0); /* #000000 */
  --color-neutral-1000-oklch: 0 0 0; /* #000000 */
  /* ---------- [Font] ---------- */
  --font-noto-sans-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-yu-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  /* ---------- [Base] ---------- */
  font-family: var(--font-noto-sans-jp);
  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] 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-red-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);
  inline-size: calc(var(--u-unit) * 5);
  block-size: calc(var(--u-unit) * 5);
  margin-block-start: calc(var(--u-unit) * -2.5);
  border-radius: 50%;
}
.post-content .c-btn__icon img {
  inline-size: 100%;
  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-red-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-family: var(--font-yu-mincho);
  font-size: calc(var(--u-unit) * 3.5);
  color: var(--color-navy-900);
}
.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-red-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);
}
.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-1000-oklch) / 40%);
}
.post-content .c-callout__desc {
  font-weight: 500;
  color: var(--color-neutral-1000);
}
.post-content .c-callout__btn {
  margin-block-start: calc(var(--u-unit) * 6.25);
  text-align: center;
}
@media (min-width: 768px) {
  .post-content .c-callout {
    padding: calc(var(--u-unit) * 7.5) calc(var(--u-unit) * 2.5);
  }
  .post-content .c-callout__btn {
    margin-block-start: calc(var(--u-unit) * 7.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 {
  margin-block-end: calc(var(--u-unit) * 0.5);
  font-weight: 700;
}
.post-content .c-message__name--primary {
  color: var(--color-navy-900);
}
.post-content .c-message__name--secondary {
  color: var(--color-red-500);
}
.post-content .c-message__name--tertiary {
  color: var(--color-neutral-1000);
}
.post-content .c-message__name--quaternary {
  color: var(--color-neutral-800);
}
.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 {
  position: relative;
}
.post-content .c-photo + .c-photo {
  margin-block-start: calc(var(--u-unit) * 6.25);
}
.post-content .c-photo img {
  width: 100%;
}
.post-content .c-photo__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: calc(var(--u-unit) * 1.5) calc(var(--u-unit) * 2.5);
  font-size: calc(var(--u-unit) * 3);
  font-weight: 500;
  line-height: 1.5;
  background-color: oklch(var(--color-neutral-0-oklch) / 80%);
}
@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) calc(var(--u-unit) * 3.5);
    font-size: calc(var(--u-unit) * 3.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] SLIDER.
------------------------------------------------------------------------------------------------ */
.post-content .c-slider {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}
.post-content .c-slider__track {
  position: relative;
  overflow: hidden;
  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: calc(var(--u-unit) * 159);
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.post-content .c-slider__slide.is-active {
  opacity: 1;
  cursor: default;
}
.post-content .c-slider__card {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--u-unit) * 2);
}
.post-content .c-slider__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.post-content .c-slider__controls {
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding-block-start: calc(var(--u-unit) * 5);
}
.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);
  padding: 0;
  background-color: oklch(var(--color-neutral-1000-oklch) / 15%);
  border: none;
  border-radius: calc(var(--u-unit) * 1);
  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);
  cursor: pointer;
}
.post-content .c-slider__page.is-active {
  inline-size: calc(var(--u-unit) * 8);
  background-color: var(--color-red-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);
  padding: 0;
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-0);
  border: 1px solid oklch(var(--color-neutral-1000-oklch) / 15%);
  border-radius: 50%;
  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;
  cursor: pointer;
}
.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-red-550);
  }
  .post-content .c-slider__arrow:hover {
    color: var(--color-neutral-0);
    background-color: var(--color-red-500);
    border-color: var(--color-red-500);
    transform: scale(1.08);
  }
}
@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-red-500);
  outline-offset: 4px;
}
.post-content .c-slider__page:focus-visible,
.post-content .c-slider__arrow:focus-visible {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] BANNER.
------------------------------------------------------------------------------------------------ */
.post-content .c-banner {
  position: relative;
  container-type: inline-size;
}
.post-content .c-banner__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.post-content .c-banner__title {
  font-family: var(--font-yu-mincho);
  font-size: 4.8cqw;
  color: var(--color-neutral-0);
}
.post-content .c-banner__title strong {
  font-size: 5.88cqw;
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] GROUP.
------------------------------------------------------------------------------------------------ */
.post-content .c-group {
  background-color: var(--color-neutral-100);
}
.post-content .c-group__body,
.post-content .c-group__message {
  padding-block: calc(var(--u-unit) * 6.25);
}
.post-content .c-group__photo,
.post-content .c-group__btn {
  padding-block-end: 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 .c-list-photo {
  max-inline-size: calc(var(--u-unit) * 159);
  margin-inline: auto;
}
.post-content .c-group__btn {
  text-align: center;
}
@media (min-width: 768px) {
  .post-content .c-group__body,
  .post-content .c-group__message {
    padding-block: calc(var(--u-unit) * 7.5);
  }
  .post-content .c-group__photo,
  .post-content .c-group__btn {
    padding-block-end: calc(var(--u-unit) * 7.5);
  }
  .post-content .c-group__header {
    padding: calc(var(--u-unit) * 3.75) calc(var(--u-unit) * 5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] ANCHOR.
------------------------------------------------------------------------------------------------ */
.c-anchor {
  --anchor-ease-hover: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
}
.post-content .c-anchor + .c-anchor {
  margin-block-start: 2px;
}
.post-content .c-anchor__link {
  position: relative;
  display: block;
  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.25);
  inset-inline-start: calc(var(--u-unit) * 2.5);
  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);
  background-color: var(--color-neutral-0);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.post-content .c-anchor__icon img {
  inline-size: calc(var(--u-unit) * 6.5);
  block-size: auto;
  scale: 0.8;
  transition: scale 0.5s var(--anchor-ease-hover);
}
.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-anchor__icon {
    background-color: oklch(var(--color-neutral-0-oklch) / 0%);
  }
  .post-content .c-anchor__link:hover .c-anchor__icon img {
    scale: 1;
    transition: scale 0.5s 0.1s var(--anchor-ease-hover);
  }
  .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-block-start: calc(var(--u-unit) * 1.75);
    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__icon img {
    inline-size: calc(var(--u-unit) * 7);
  }
  .post-content .c-anchor__text {
    font-size: calc(var(--u-unit) * 3.5);
  }
}
/* ------------------------------------------------------------------------------------------------
[COMPONENT] EVENT.
------------------------------------------------------------------------------------------------ */
.post-content .c-event {
  margin-block-end: calc(var(--u-unit) * 4);
}
@media (min-width: 768px) {
  .post-content .c-event {
    margin-block-end: calc(var(--u-unit) * 5.25);
  }
}
/* ===============================================================================================
4. PROJECT.
=============================================================================================== */
/* ------------------------------------------------------------------------------------------------
[PROJECT] MAIN VISUAL.
------------------------------------------------------------------------------------------------ */
.post-content .p-mv__title img {
  width: 100%;
}
/* ------------------------------------------------------------------------------------------------
[PROJECT] SECTION.
------------------------------------------------------------------------------------------------ */
.post-content .p-section__body {
  padding-block: calc(var(--u-unit) * 6.25);
}
.post-content .p-section__btn,
.post-content .p-section__text {
  margin-block-start: calc(var(--u-unit) * 6.25);
}
.post-content .p-section__btn {
  text-align: center;
}
.post-content .p-section__text {
  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,
  .post-content .p-section__text {
    margin-block-start: calc(var(--u-unit) * 7.5);
  }
}
/* ===============================================================================================
5. UTILITIES.
=============================================================================================== */
/* ------------------------------------------------------------------------------------------------
[UTILITIES] COLOR.
------------------------------------------------------------------------------------------------ */
.post-content .u-c-light {
  color: var(--color-neutral-0);
}
/* ------------------------------------------------------------------------------------------------
[UTILITIES] BACKGROUND COLOR.
------------------------------------------------------------------------------------------------ */
.post-content .u-bgc-primary {
  background-color: var(--color-neutral-100);
}
.post-content .u-bgc-primary-strong {
  background-color: var(--color-neutral-500);
}
.post-content .u-bgc-secondary {
  background-color: var(--color-cream-50);
}
.post-content .u-bgc-light {
  background-color: var(--color-neutral-0);
}
.post-content .u-bgc-square {
  background: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/09/08231131/t-hachioji-jissen-261006_bg_square_sp.png") repeat left calc(var(--u-unit) * -0.5) top calc(var(--u-unit) * -0.5);
}
@media (min-width: 768px) {
  .post-content .u-bgc-square {
    background: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/09/08231130/t-hachioji-jissen-261006_bg_square.png") repeat left calc(var(--u-unit) * -3) top calc(var(--u-unit) * -3);
  }
}
/* ------------------------------------------------------------------------------------------------
[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-none {
  padding-block-start: 0;
}
.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;
  }
}