@charset "utf-8";
/* CSS Document */

/******************************************************/

/*****************
 *   Container   *
 ****************/

/* レスポンシブ */
/* Flex親 */
.flex-container {
  display: flex;
  flex-wrap: nowrap;       /* PCは折り返さない */
  gap: 10px;               /* カード間の隙間 */
  justify-content: flex-start;  /* 左寄せ、中央も可: center */
}

/* カード自体 */
.card {
  flex: 1 1 auto;          /* 幅を内容に合わせる */
  box-sizing: border-box;
  padding: 10px;
  border: none;
  text-align: center;      /* 画像・リンク中央寄せ */
}

/* カード内の画像 */
.card .item img {
  display: block;          /* ブロックにして margin 中央 */
  margin: 0 auto 10px auto;
  width: 150px;            /* 固定幅 */
  height: auto;
}

/* リンク */
.card .item a {
  display: inline-block;
  text-decoration: none;
  margin-top: 5px;
}

/* スマホ対応（縦並び） */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column; /* 縦並び */
    gap: 10px;
  }

  .card {
    width: 100%;           /* 幅いっぱい */
  }

  .card .item img {
    width: 100%;           /* 横幅いっぱいに拡大 */
    max-width: 150px;      /* 元画像サイズを上限 */
  }
}

/********
 * Font *
 ********/

.italyfair{
    background: linear-gradient(to right,#008000 40%,#98fb98 10%,#ff69b4 2%,#ff0000 48%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 100%;
    font-weight: bold;
    display: inline-block;
}

.shadow{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    text-shadow:
           1px 1px 0px #000, -1px -1px 0px #000,
          -1px 1px 0px #000,  1px -1px 0px #000,
           1px 0px 0px #000, -1px  0px 0px #000,
           0px 1px 0px #000,  0px -1px 0px #000;
    margin: 0;
}