body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  background-color: #ffff;
  font-family: "Zen Maru Gothic";
  font-weight: bold;
  justify-content: center;
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #50BAFF, #4049FF);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(150%);
  transition: clip-path 1s cubic-bezier(0.77, 0, 0.01, 1);
  pointer-events: auto;
}

#loading-screen.is-hidden {
  clip-path: circle(0%);
  pointer-events: none;
}

.loading-content {
  text-align: center;
}

.loading-chars1 {
  width: 30%;
  margin-bottom: 20px;
}

.loading-chars2 {
  width: 30%;
  margin-bottom: 20px;
}

.loading-text {
  color: white;
  font-size: 24px;
  font-weight: bold;
  font-family: "Zen Maru Gothic";
}

.loading-text span {
  opacity: 0;
  animation: blink 1.5s infinite;
}

.loading-text span:nth-child(2) {
  animation-delay: 0.3s;
}

.loading-text span:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.title {
  display: block;
  margin: 0 auto;
  margin-top: 5vw;
  width: 80vw;
}

.subtitle {
  font-size: 20;
  text-align: center;
  color: #404040;
  margin: 0px;
  padding: 0%;
}

h3 {
  /* (20px / 480px) * 100 = 4.17vw */
  font-size: 4.2vw;
  /* 変更 */
  text-align: center;
  color: #404040;
  margin: 0;
  padding: 0;
}

/* 親要素のスタイル */
.flex-container {
  display: flex;
  justify-content: center;
}

.tenjizyouhou {
  font-family: "Zen Maru Gothic", sans-serif;
  display: inline-block;
  background-color: #ffffff;
  border: 3px solid #d1d1d1;
  /* padding: (1px / 480px)*100 = 0.2vw, (5px / 480px)*100 = 1.04vw */
  padding: 0.2vw 1.05vw;
  /* 変更 */
  /* font-size: (20px / 480px)*100 = 4.17vw */
  font-size: 4.2vw;
  /* 変更 */
  font-weight: 600;
  color: #333;
  margin-bottom: 3%;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
}

.card-container {
  display: grid;
  /* flexからgridに変更 */
  gap: 1.5rem;
  /* vwから固定感のあるremに変更 (約24px) */
  grid-template-columns: 1fr;
  /* スマホでは1列表示 */
  max-width: 1460px;
  /* PCで表示が広がりすぎないように最大幅を設定 */
  margin: 0 auto;
  /* コンテナ自体を中央寄せ */
  padding-bottom: 4rem;
  /* ページ最下部に余白を追加 */
}

.info-card {
  font-family: "Zen Maru Gothic", sans-serif;
  background-color: white;
  border: 2px solid #404040;
  /* border-radius: (10px / 480px)*100 = 2.08vw */
  border-radius: 2.1vw;
  /* 変更 */
  width: 90vw;
  /* 画面幅の90%を維持 */
  margin: 0 auto;
  /* padding: (15px / 480px)*100 = 3.125vw */
  padding: 3.1vw;
  /* 変更 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 3%;
  box-sizing: border-box;
}

.top-section {
  display: flex;
  align-items: flex-start;
  /* gap: (15px / 480px)*100 = 3.125vw */
  gap: 3.1vw;
  /* 変更 */
}

.card-image {
  font-family: "Zen Maru Gothic", sans-serif;
  /* width: (160px / 480px)*100 = 33.3vw */
  width: 33.3vw;
  /* 変更 */
  /* height: (120px / 480px)*100 = 25vw */
  height: 25vw;
  /* 変更 */
  /* border-radius: (5px / 480px)*100 = 1.04vw */
  border-radius: 1.05vw;
  /* 変更 */
  object-fit: cover;
  /* 画像が引き伸ばされないように追加 */
}

.text-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.dantaimei {
  font-family: "Zen Maru Gothic", sans-serif;
  /* margin: (5px / 480px)*100 = 1.04vw */
  margin: 1.05vw 0;
  /* 変更 */
  font-size: 1.5em;
  font-weight: bold;
}

.comment-section {
  /* margin-top: (15px / 480px)*100 = 3.125vw */
  margin-top: 3.1vw;
  /* 変更 */
}

.card-text {
  font-family: "Zen Maru Gothic", sans-serif;
  /* font-size: (15px / 480px)*100 = 3.125vw */
  font-size: 3.1vw;
  /* 変更 */
  text-align: left;
  margin-left: 0;
  color: #000000;
}

.note {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.8em;
  color: #000000;
  /* margin-top: (10px / 480px)*100 = 2.08vw */
  margin-top: 2.1vw;
  /* 変更 */
}

@media screen and (max-width:345px) {
  .site-footer {
    /* ヘッダーと同じグラデーション背景 */
    background: linear-gradient(to right, #4FBEFF, #4049FF);
    color: white;
    /* テキストの基本色を白に */
    padding: 25px 20px;
    /* 内側の余白（上下に多め） */
    text-align: center;
    /* 中の要素を中央揃えに */
    bottom: 0;
    z-index: 1000;
    /* ヘッダーと同じく、最前面に表示 */
  }


  .footer-content {
    height: 100px;
    max-width: 1200px;
    margin: 0 auto;
    /* コンテンツ全体の横幅を制限し、中央に配置 */
    z-index: 1000;
    /* ヘッダーと同じく、最前面に表示 */
  }

  /* SNSアイコンのリンクのコンテナ */
  .sns-links {
    display: flex;
    /* アイコンを横並びにする */
    justify-content: center;
    /* 中央に寄せる */
    align-items: center;
    /* 垂直方向の中央を揃える */
    gap: 40px;
    /* アイコン間の隙間 */
    margin-bottom: 15px;
    /* 下のアカウント名との余白 */
    z-index: 1000;
    /* ヘッダーと同じく、最前面に表示 */
  }

  /* SNSアイコンの画像 */
  .sns-links img {
    width: 30px;
    /* アイコンの幅 */
    height: 30px;
    /* アイコンの高さ */
    transition: opacity 0.3s;
    /* ホバー時のアニメーション */
    z-index: 1000;
    /* ヘッダーと同じく、最前面に表示 */
  }

  /* アイコンにマウスを乗せたときに少し薄くする */
  .sns-links a:hover img {
    opacity: 0.8;
  }

  /* アカウント名 */
  .account-name {
    margin: 0;
    /* pタグのデフォルトマージンをリセット */
    font-size: 14px;
    /* 文字サイズを少し小さめに */
    font-weight: bold;
    /* 文字を太く */
    letter-spacing: 1px;
    /* 文字間隔を少し広げる */
    z-index: 1000;
    /* ヘッダーと同じく、最前面に表示 */
  }
}

/*タブレット以上*/
@media screen and (min-width: 768px) {

  .title {
    display: block;
    margin: 0 auto;
    margin-top: 5vw;
    width: 80vw;
  }
.subtitle {
    font-size: 40px;
    text-align: center;
    color: #404040;
    margin: 0px;
    padding: 0%;
  }
  h3 {
    /* font-size: 20px; -> (20px / 1000px) * 100 = 2vw */
    font-size: 2vw;
    /* 変更 */
    text-align: center;
    color: #404040;
    margin: 0;
    padding: 0;
  }

  .flex-container {
    display: flex;
    justify-content: center;
  }

  .tenjizyouhou {
    font-family: "Zen Maru Gothic", sans-serif;
    display: inline-block;
    background-color: #ffffff;
    border: 3px solid #d1d1d1;
    /* 境界線はpxのままを推奨 */
    /* padding: 1px 5px; -> 0.1vw 0.5vw */
    padding: 0.1vw 0.5vw;
    /* 変更 */
    /* font-size: 20px; -> 2vw */
    font-size: 2vw;
    /* 変更 */
    font-weight: 600;
    color: #333;
    margin-bottom: 3%;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    /* 影はpxのままを推奨 */
  }

  /* Flexコンテナの設定 */
  .card-container {
    font-family: "Zen Maru Gothic", sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* gap: 20px; -> 2vw */
    gap: 2vw;
    /* 変更 */
    /* width: 720px; -> 72vw */
    width: 72vw;
    /* 変更 */
    /* margin: 20px auto 0; -> 2vw auto 0 */
    margin: 2vw auto 0;
    /* 変更 */
    padding: 0;
  }

  /* カード自体の設定 */
  .info-card {
    font-family: "Zen Maru Gothic", sans-serif;
    background-color: white;
    border: 2px solid #404040;
    /* border-radius: 10px; -> 1vw */
    border-radius: 1vw;
    /* 変更 */
    /* width: 350px; -> 35vw (コンテナ72vwに2枚+隙間2vwで収まる) */
    width: 35vw;
    /* 変更 */
    /* padding: 15px; -> 1.5vw */
    padding: 1.5vw;
    /* 変更 */
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    margin: 0;
    box-sizing: border-box;
  }

  .top-section {
    display: flex;
    align-items: flex-start;
    /* gap: 15px; -> 1.5vw */
    gap: 1.5vw;
    /* 変更 */
  }

  .card-image {
    font-family: "Zen Maru Gothic", sans-serif;
    /* width: 160px; -> 16vw */
    width: 16vw;
    /* 変更 */
    /* height: 120px; -> 12vw */
    height: 12vw;
    /* 変更 */
    /* border-radius: 5px; -> 0.5vw */
    border-radius: 0.5vw;
    /* 変更 */
    object-fit: cover;
    /* 画像の比率を維持 */
  }

  .text-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .dantaimei {
    font-family: "Zen Maru Gothic", sans-serif;
    /* margin: 5px 0; -> 0.5vw 0 */
    margin: 0.5vw 0;
    /* 変更 */
    font-size: 1.5em;
    font-weight: bold;
  }

  .comment-section {
    /* margin-top: 15px; -> 1.5vw */
    margin-top: 1.5vw;
    /* 変更 */
  }

  .card-text {
    font-family: "Zen Maru Gothic", sans-serif;
    /* font-size: 15px; -> 1.5vw */
    font-size: 1.5vw;
    /* 変更 */
    text-align: left;
    margin-left: 0;
    color: #000000;
    text-shadow: none;
  }

  .text-group .card-text {
    color: #000000;
    
  }


  .note {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 0.8em;
    color: #666;
    /* margin-top: 10px; -> 1vw */
    margin-top: 1vw;
    /* 変更 */
  }
}

/*pc以上*/
@media screen and (min-width: 1200px) {

  .title {
    display: block;
    margin: 0 auto;
    margin-top: 5vw;
    width: 80vw;
  }

  h3 {
    font-size: 40px;
    text-align: center;
    color: #404040;
    margin: 0px;
    padding: 0%;
  }

  .flex-container {
    display: flex;
    justify-content: center;
  }

  .tenjizyouhou {
    font-family: "Zen Maru Gothic", sans-serif;
    display: inline-block;
    background-color: #ffffff;
    border: 3px solid #d1d1d1;
    padding: 1px 5px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    /* %指定から固定値に変更 */
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
  }

  .card-container {
    font-family: "Zen Maru Gothic", sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* カード3枚(350px*4) + 隙間(20px*3) = 1460px */
    max-width: 1460px;
    width:100%;
    margin: 0 auto;
    /* コンテナ自体を中央寄せ */
  }

  .info-card {
    font-family: "Zen Maru Gothic", sans-serif;
    /* "Zen aru Gothic"から修正 */
    background-color: white;
    border: 2px solid #404040;
    border-radius: 10px;
    width: 350px;
    padding: 15px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /* paddingとborderをwidthに含める */
    /* marginは親要素(.card-container)のgapで管理するため削除 */
  }

  .top-section {
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }

  .card-image {
    font-family: "Zen Maru Gothic", sans-serif;
    width: 160px;
    height: 120px;
    border-radius: 5px;
    background-color: #eee;
    /* 画像がない場合の背景色 */
  }

  .text-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .dantaimei {
    font-family: "Zen Maru Gothic", sans-serif;
    margin: 5px 0;
    font-size: 26px;
    font-weight: bold;
  }

  .comment-section {
    margin-top: 15px;
  }

  /* 「展示場所」などの文字のスタイル */
  .card-text {
    font-family: "Zen Maru Gothic", sans-serif;
    /* 引用符とカンマを修正 */
    font-size: 15px;
    text-align: left;
    margin-left: 0;
    color: #000000;
  }

  .note {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 20px;
    color: #000000;
    margin-top: 10px;
  }
}