@charset "UTF-8";
body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  background-attachment: fixed;
  /* スクロールしても背景は固定 */
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  background: rgba(255, 255, 255, 0.1);
  /* さらに薄い白背景 */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  /* グラデーションの方向を左上 → 右下に修正 */
  background-image: linear-gradient(to top left, rgba(62, 21, 134, 0.25), rgba(255, 255, 255, 0.05)); }

.top {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center; }
  .top .container {
    width: 100%;
    max-width: 800px; }
  .top h1 {
    text-align: center;
    font-weight: 800;
    color: #000;
    background: linear-gradient(90deg, #7b67c8 0%, #3e1586 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent; }
    .top h1 .ja {
      font-size: 40px; }
    .top h1 .en {
      font-size: 25px; }
  .top .describe_this_group .message {
    text-align: right; }
    .top .describe_this_group .message span {
      background: linear-gradient(-10deg, #705cbf 0%, #3e1586 100%);
      color: #fff;
      border-radius: 1em;
      padding: 0.8em 1.2em;
      display: inline-block;
      margin-bottom: 1.2em;
      font-weight: 500;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); }
  .top .article_cards {
    display: flex; }
    .top .article_cards .article_card {
      max-width: 90%;
      background: #fffffff5;
      border-radius: 5px;
      margin: 10px; }
      .top .article_cards .article_card .thumbnail_area img {
        width: 100%;
        border-radius: 5px; }
      .top .article_cards .article_card .title_area {
        padding: 5px;
        font-weight: bold;
        font-size: 18px; }

.documents {
  width: 100%; }
  .documents .container {
    width: 98%;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto; }
    .documents .container h2 {
      font-weight: 800;
      font-size: 25px;
      text-align: center; }

.beautiful-card {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.7);
  /* ほぼ白。読みやすさ重視 */
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  max-width: calc(760px - 4rem);
  width: calc(95% - 4rem);
  margin-right: auto;
  margin-left: auto;
  margin: 2rem auto;
  color: #000; }

footer {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  color: #666;
  border-top: #666 1px solid;
  padding: 20px 0px; }