/* =========================
   Piyo CHAYAMA TOP
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400&display=swap');

/* ページ全体 */
.piyo-home {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  padding: 10vh 10vw 8vh;

  background-color: #f4f0e7;
  background-image:
    radial-gradient(rgba(80, 70, 55, 0.08) 0.6px, transparent 0.6px),
    radial-gradient(rgba(80, 70, 55, 0.05) 0.5px, transparent 0.5px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;

  color: #292722;
  font-family: "Courier New", Courier, monospace;
  text-shadow: 0 0 1.2px currentColor;
}

/* サイト名 */
.piyo-header {
  text-align: center;
}

.piyo-header h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400 !important;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

/* メニュー */
.piyo-menu {
  margin-top: 15vh;
  display: flex;
  flex-direction: column;
  gap: 8vh;
  align-items: center;
}

/* Create / Novel */
.piyo-item {
  display: flex;
  flex-direction: column;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  text-align: center;
}

/* メニュータイトル */
.piyo-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 説明文 */
.piyo-sub {
  margin-top: 14px;
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* hover */
.piyo-item:hover .piyo-title {
  text-decoration: underline;
  text-underline-offset: 8px;
}

/* フッター */
.piyo-footer {
  margin-top: 18vh;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: center;
}

.piyo-footer p {
  margin-bottom: 0.8em;
}

.piyo-footer a {
  color: inherit;
}

/* スマホ */
@media (max-width: 600px) {
  .piyo-home {
    padding: 8vh 8vw 7vh;
  }

  .piyo-menu {
    margin-top: 12vh;
    gap: 7vh;
  }

  .piyo-footer {
    margin-top: 15vh;
  }
}