body {
  background-color: goldenrod;
  background-image:
  repeating-linear-gradient(
    90deg,
    #ececec ,
    #ececec 4px,
    transparent 1px,
    transparent 32px
  ),
  repeating-linear-gradient(
    0deg,
    #ececec ,
    #ececec 4px,
    #d8d8d8f8 1px,
    #d8d8d8f8 32px
  );
  margin: 0;
  padding: 0;

  font-family: "M PLUS 1 Code", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

  .back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('orig/img/pixelart_2017.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
    background-position: top;
    image-rendering: pixelated;
  }

.fumoto36-logo {
  text-align: center;
  /* margin: 50px 10px 50px auto; */
  padding: 20px;
  display: flex;
  justify-content: center;
}

.fumoto36-logo img {
  width: 15vw;
  min-width: 200px;
  filter: drop-shadow(10px 10px 10px #616161c3);
}

.subtitle {
  text-align: center;
  max-width: 1000px;
  margin: 10px auto;
  padding: 0.5em;
  background-image: linear-gradient(135deg, #ffe95b, #ffc82f);
  box-shadow:
    6px 6px 10px 0px #274a9066,
    -6px -6px 10px 0px #fdfeff,
    inset 2px 2px 1px #feffdf,
    inset -2px -2px 1px #dba31f;
  border-radius: 60px;
}

/* 新しく追加するスタイル */
.subtitle img {
  text-align: center;
  height: clamp(3em, calc(100vw / 15), 4em);
  width: auto;
  margin-left: 20px;
  margin-top: 5px;
  filter:drop-shadow(10px 10px 10px #7f5311);
}

  .container {
    padding: 10px;
    /* 他のcontent-wrapperのスタイル */
  }

  .contents-grid  {
    display: flex;
    flex-wrap: wrap; /* 要素が幅に収まらない場合に折り返す */
    /* max-width: 1200px; */
    padding: 0px 30px;
    margin: 0 auto;
    justify-content: center; /* 追加 */
  }

  .contents-card {
    padding-bottom: 3rem;
    background-color: #ffffffd2;
    padding: 15px;
    margin: 10px;
    width: 300px;
    border-radius: 20px;
    box-shadow:
      6px 6px 10px 0px #274a9066,
      -6px -6px 10px 0px #fdfeff,
      inset 2px 2px 1px #feffdf,
      inset -2px -2px 1px #adadad;
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
  }

  .contents-card img {
    /* position: absolute; */
    width: 100%;
    height: auto;
    object-fit: cover;
    padding-bottom: 0px;
    margin-bottom: 15px;
  }

  .contents-card h1 {
    font-size: 1.2em;
    color: #555555;
    padding: 10px;
    margin: -15px -15px;
    font-weight: 900;
    text-align: center;
  }

  .contents-card p {
    text-align: center;
    font-size: 0.9em;
    margin: 0 10px 15px;
    font-weight: 500;
  }

  .contents-grid a {
    text-decoration: none; /* リンクの下線を消す */
    width: auto;
  }

  .contents-card:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease-in-out;
  }

  /* スマートフォン向けのスタイル（例：最大幅600pxの場合） */
@media screen and (max-width: 800px) {
    .contents-grid {
      padding: 0px 0px;
    }

    .contents-grid a {
      max-width: 45vw;
    }

    .contents-card {
      width: auto;
      flex-grow: 1;
      min-width: 120px; /* 極端に小さくなるのを防ぐための設定 (任意) */
      font-size: 0.6em;
    }
}