@charset "UTF-8";

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

1. FOUNDATION.
   1.1. CONTENT SCOPE.
   1.2. RESET.
2. LAYOUT.
3. COMPONENTS.
   3.1. TEXT.
   3.2. BUTTON.
   3.3. CALLOUT.
   3.4. MESSAGE.
   3.5. GROUP.
   3.6. ANCHOR.
   3.7. CAPTION.
4. PROJECT.
   4.1. SECTION.
   4.2. SECTION EYE.
   4.2. SECTION EVENT.
5. UTILITIES.
   5.1. MARGIN, PADDING.
   5.2. RESPONSIVE VISIBILITY.
=============================================================================================== */

/* ===============================================================================================
1. FOUNDATION.
=============================================================================================== */

/* ------------------------------------------------------------------------------------------------
1.1. CONTENT SCOPE.
------------------------------------------------------------------------------------------------ */

html {
  scroll-behavior: smooth;
}
.post-content {
  /*---------- PRIMITIVE COLOR TOKENS ----------*/
  --color-sky-50: oklch(0.9728 0.0178 223.59); /* #eaf9ff */
  --color-sky-400: oklch(0.7553 0.1476 234.91); /* #30bdff */
  --color-blue-500: oklch(0.623 0.1993 258.26); /* #2c82fc */
  --color-pink-400: oklch(0.6994 0.1953 7.54); /* #fd5e88 */
  --color-pink-450: oklch(0.67 0.1953 7.54); /* #f2547f */
  --color-orange-600: oklch(0.6571 0.1865 45.42); /* #e96200 */
  --color-cream-50: oklch(0.9884 0.0138 88.68); /* #fffbf1 */
  --color-neutral-800: oklch(0.3211 0 0); /* #333333 */
  --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 */
  --font-family-japanese-sans: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  /*---------- SEMANTIC COLOR TOKENS ----------*/
  --color-text-primary: var(--color-neutral-800);
  --color-background-primary: var(--color-neutral-0);
  --font-body: var(--font-family-japanese-sans);

  /*---------- BASE ----------*/
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
}

@media (max-width: 767.98px) {
  .post-content {
    font-size: 14px;
    line-height: 1.7;
  }
}
@media (min-width: 768px) {
  .post-content {
    font-size: 16px;
    line-height: 1.8;
  }
}

/* ------------------------------------------------------------------------------------------------
1.2. RESET.
------------------------------------------------------------------------------------------------ */

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-weight: 700;
  line-height: 1.5;
}

/* ===============================================================================================
2. LAYOUT.
=============================================================================================== */

.l-container {
  inline-size: 100%;
}

@media (max-width: 767.98px) {
  .l-container {
    padding-inline: 15px;
  }
}
@media (min-width: 768px) {
  .l-container {
    padding-inline: 20px;
  }
}

/* ===============================================================================================
3. COMPONENTS.
=============================================================================================== */

/* ------------------------------------------------------------------------------------------------
3.1. TEXT.
------------------------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .c-text-sm {
    font-size: 13px;
  }
  .c-text-xs {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .c-text-sm {
    font-size: 15px;
  }
  .c-text-xs {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------------------------------------
3.2. BUTTON.
------------------------------------------------------------------------------------------------ */
.c-btn {
  --btn-background-primary: var(--color-pink-400);
  --btn-background-primary-hover: var(--color-pink-450);
  --btn-background-secondary: var(--color-neutral-0);
  --btn-color-primary: var(--color-neutral-0);
  --btn-color-secondary-oklch: var(--color-neutral-1000-oklch);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 340px;
  text-decoration: none;
  background-color: var(--btn-background-primary);
  border-radius: 10px;
  box-shadow: 0 8px 14px oklch(var(--btn-color-secondary-oklch) / 15%);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.c-btn__text {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--btn-color-primary);
}
.c-btn__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: -10px;
  background-color: var(--btn-background-secondary);
  border-radius: 50%;
}
.c-btn__icon img {
  inline-size: 11px;
  block-size: auto;
}

@keyframes animateBtnArrow {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

@media (max-width: 767.98px) {
  .c-btn {
    min-block-size: 45px;
    padding: 10px 35px 10px 10px;
  }
}

@media (min-width: 768px) {
  .c-btn {
    min-block-size: 60px;
    padding: 10px 45px 10px 20px;
  }
}

@media (any-hover: hover) {
  .c-btn:hover {
    background-color: var(--btn-background-primary-hover);
  }
  .c-btn:hover .c-btn__icon {
    animation: animateBtnArrow 1s infinite linear;
  }
}

/* ------------------------------------------------------------------------------------------------
3.3. CALLOUT.
------------------------------------------------------------------------------------------------ */
.c-callout {
  --callout-color-primary: var(--color-neutral-0);
  --callout-color-primary-oklch: var(--color-neutral-0-oklch);
  --callout-color-secondary: var(--color-sky-400);

  background-color: var(--callout-color-secondary);
}
.c-callout__title {
  margin-block-end: 5px;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  color: oklch(var(--callout-color-primary-oklch) / 40%);
}
.c-callout__desc {
  color: var(--callout-color-primary);
}

@media (max-width: 767.98px) {
  .c-callout {
    padding-block: 25px;
  }
}

@media (min-width: 768px) {
  .c-callout {
    padding: 30px 10px;
  }
}

/* ------------------------------------------------------------------------------------------------
3.4. MESSAGE.
------------------------------------------------------------------------------------------------ */
.c-message {
  --message-color-primary: var(--color-blue-500);
  --message-color-secondary: var(--color-pink-400);
  --message-color-tertiary: var(--color-orange-600);

  display: flex;
}
.c-message__body {
  flex: 1;
  min-inline-size: 1px;
  margin-block-start: -0.35em;
}
.c-message__name {
  font-weight: 700;
}
.c-message__name--primary {
  color: var(--message-color-primary);
}
.c-message__name--secondary {
  color: var(--message-color-secondary);
}
.c-message__name--tertiary {
  color: var(--message-color-tertiary);
}
.c-message__img {
  width: 100%;
}

@media (max-width: 767.98px) {
  .c-message + .c-message {
    margin-block-start: 25px;
  }
  .c-message__avatar {
    inline-size: 62px;
  }
  .c-message__body {
    padding-inline-start: 12px;
  }
}
@media (min-width: 768px) {
  .c-message + .c-message {
    margin-block-start: 30px;
  }
  .c-message__avatar {
    inline-size: 120px;
  }
  .c-message__body {
    padding-inline-start: 20px;
  }
}

/* ------------------------------------------------------------------------------------------------
3.5. GROUP.
------------------------------------------------------------------------------------------------ */

.c-group {
  --group-color-primary: var(--color-blue-500);
  --group-background-primary: var(--color-blue-500);
  --group-background-secondary: var(--color-neutral-0);
}
.c-group__header {
  padding: 15px 20px;
  background-color: var(--group-background-secondary);
}
.c-group__title {
  position: relative;
  color: var(--group-color-primary);
}
.c-group__title::before {
  content: "";
  position: absolute;
  inset-block-start: 0.8em;
  inset-inline-start: 0;
  block-size: 1px;
  background-color: var(--group-background-primary);
}
.c-group--secondary .c-group__body {
  background-color: var(--group-background-secondary);
}

@media (max-width: 767.98px) {
  .c-group__header {
    padding: 15px;
  }
  .c-group__title {
    padding-inline-start: 35px;
    font-size: 14px;
  }
  .c-group__title::before {
    inline-size: 25px;
  }
  .c-group__body {
    padding-block: 25px;
  }
}

@media (min-width: 768px) {
  .c-group__header {
    padding: 15px 20px;
  }
  .c-group__title {
    padding-inline-start: 40px;
    font-size: 16px;
  }
  .c-group__title::before {
    inline-size: 30px;
  }
  .c-group__body {
    padding-block: 30px;
  }
}

/* ------------------------------------------------------------------------------------------------
3.6. ANCHOR.
------------------------------------------------------------------------------------------------ */

.c-anchor {
  --anchor-background-primary: var(--color-neutral-0);
  --anchor-background-primary-oklch: var(--color-neutral-0-oklch);
  --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
  );
}
.c-anchor__link {
  position: relative;
  display: flex;
  align-items: center;
  background-color: oklch(var(--anchor-background-primary-oklch) / 60%);
}
.c-anchor__icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--anchor-background-primary);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.c-anchor__icon img {
  inline-size: 30px;
  block-size: auto;
  scale: 0.7;
  transition: scale 0.5s var(--anchor-ease-hover);
}
.c-anchor__text {
  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) {
  .c-anchor__link:hover .c-anchor__icon {
    background-color: oklch(var(--anchor-background-primary-oklch) / 0%);
  }
  .c-anchor__link:hover .c-anchor__icon img {
    scale: 1;
    transition: scale 0.5s 0.1s var(--anchor-ease-hover);
  }
  .c-anchor__link:hover .c-anchor__text {
    text-decoration-color: currentColor;
  }
}

@media (max-width: 767.98px) {
  .c-anchor + .c-anchor {
    margin-block-start: 2px;
  }
  .c-anchor__link {
    min-block-size: 42px;
    padding: 10px 10px 10px 46px;
  }
  .c-anchor__icon {
    inset-inline-start: 10px;
    inline-size: 28px;
    block-size: 28px;
  }
  .c-anchor__text {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .c-anchor + .c-anchor {
    margin-block-start: 4px;
  }
  .c-anchor__link {
    min-block-size: 50px;
    padding: 10px 30px 10px 75px;
  }
  .c-anchor__icon {
    inset-inline-start: 30px;
    inline-size: 35px;
    block-size: 35px;
  }
  .c-anchor__text {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------------------------------------
3.7. CAPTION.
------------------------------------------------------------------------------------------------ */
.c-caption {
  --anchor-background-primary-oklch: var(--color-neutral-0-oklch);
}
.c-caption__figure {
  position: relative;
}
.c-caption__figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 9.5px 10px;
  line-height: 1.5;
  background-color: oklch(var(--anchor-background-primary-oklch) / 70%);
}

@media (max-width: 767.98px) {
  .c-caption + .c-caption {
    margin-block-start: 25px;
  }
  .c-caption__figcaption {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .c-caption + .c-caption {
    margin-block-start: 30px;
  }
  .c-caption__figcaption {
    font-size: 14px;
  }
}

/* ---------- LIST CAPTION ---------- */
.c-list-caption {
  max-inline-size: 640px;
  margin-inline: auto;
}

/* ===============================================================================================
4. PROJECT.
=============================================================================================== */

/* ------------------------------------------------------------------------------------------------
4.1. SECTION.
------------------------------------------------------------------------------------------------ */
.p-section {
  --section-background-primary: var(--color-cream-50);

  background-color: var(--section-background-primary);
}
.p-section__title img {
  width: 100%;
}
.p-section--last .p-section__header {
  padding-block-end: 0;
}
.p-section__btn {
  text-align: center;
}

@media (max-width: 767.98px) {
  .p-section--first .p-section__header {
    padding-block-start: 25px;
  }
  .p-section .c-list-caption {
    margin-block: 25px;
  }
  .p-section__btn {
    margin-block-start: 25px;
  }
}

@media (min-width: 768px) {
  .p-section--first .p-section__header {
    padding-block-start: 30px;
  }
  .p-section .c-list-caption {
    margin-block: 30px;
  }
  .p-section__btn {
    margin-block-start: 30px;
  }
}

/* ------------------------------------------------------------------------------------------------
4.2. SECTION MAIN VISUAL.
------------------------------------------------------------------------------------------------ */

.p-mv__title img {
  width: 100%;
}

/* ------------------------------------------------------------------------------------------------
4.3. SECTION EYE.
------------------------------------------------------------------------------------------------ */
.p-eye {
  --eye-background-primary: var(--color-sky-50);

  background-color: var(--eye-background-primary);
}
.p-eye__btn {
  text-align: center;
}

@media (max-width: 767.98px) {
  .p-eye {
    padding-block-end: 25px;
  }
  .p-eye .c-group {
    margin-block-start: 25px;
  }
  .p-eye__btn {
    margin-block-start: 25px;
  }
}
@media (min-width: 768px) {
  .p-eye {
    padding-block-end: 30px;
  }
  .p-eye .c-group {
    margin-block-start: 30px;
  }
  .p-eye__btn {
    margin-block-start: 30px;
  }
}

/* ------------------------------------------------------------------------------------------------
4.4. SECTION EVENT.
------------------------------------------------------------------------------------------------ */

.p-event {
  --event-background-primary: var(--color-sky-400);
  --event-color-primary: var(--color-neutral-0);
  --event-color-primary-oklch: var(--color-neutral-0-oklch);

  color: var(--event-color-primary);
  background-color: var(--event-background-primary);
}
.p-event__title {
  font-size: 24px;
}
.p-event__item {
  padding-block: 12px;
  border-block-end: 1px solid var(--event-color-primary);
}
.p-event__item-title {
  font-size: 16px;
  font-weight: 700;
}
.p-event__item-desc {
  font-size: 14px;
}
.p-event__btn {
  text-align: center;
}
.p-event__text {
  font-size: 12px;
  color: oklch(var(--event-color-primary-oklch) / 50%);
  text-align: end;
}

@media (max-width: 767.98px) {
  .p-event {
    padding-block: 25px;
  }
  .p-event__btn {
    margin-block-start: 25px;
  }
  .p-event__text {
    margin-block-start: 25px;
  }
}

@media (min-width: 768px) {
  .p-event {
    padding-block: 30px;
  }
  .p-event__btn {
    margin-block-start: 30px;
  }
  .p-event__text {
    margin-block-start: 30px;
  }
}

/* ===============================================================================================
5. UTILITIES.
=============================================================================================== */

/* ------------------------------------------------------------------------------------------------
5.1. MARGIN, PADDING.
------------------------------------------------------------------------------------------------ */

/* ---------- MARGIN BLOCK START ---------- */
.post-content .u-mbs-30 {
  margin-block-start: 30px;
}

/* ---------- MARGIN BLOCK END ---------- */
.post-content .u-mbe-30 {
  margin-block-end: 30px;
}

/* ---------- PADDING BLOCK START ---------- */
.post-content .u-pbs-30 {
  padding-block-start: 30px;
}

/* ---------- PADDING BLOCK END ---------- */
.post-content .u-pbe-30 {
  padding-block-end: 30px;
}

/* ------------------------------------------------------------------------------------------------
4.2. 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;
  }
}