/* これがelementary直下 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&family=Varela+Round:wght@400&display=swap');
    body {
      font-family: 'M PLUS Rounded 1c', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f8e9;
      color: #333;
      font-smooth: always;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      transform: rotate(0.03deg);
    }

    header {
      background-color: #558b2f;
      color: white;
      padding: 1.5rem;
      text-align: center;
    }

    nav {
      justify-content: center;
      background-color: #7cb342;
      padding: 0.5rem 1rem;
      display: flex;
      gap: 1rem;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    nav a:hover {
      text-decoration: underline;
    }

    main {
      max-width: 900px;
      margin: 2rem auto;
      padding: 1rem;
      background: white;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      animation: fadeIn 1s ease;
    }

    h1 {
      font-size: 2.2rem;
      color: #33691e;
      border-bottom: 2px solid #33691e;
      padding-bottom: 0.5rem;
    }

    header h1 {
      color: #FFFFFF;
      border-bottom: none;
      padding-bottom: 0.5rem;
    }

    h2 {
      color: #33691e;
    }

    h2 a {
      color: #33691e;
      text-decoration: underline;
    }

    h2 a:visited {
      color: #33691e;
    }

    h2 a:hover {
      text-decoration: none;
    }

    h2 a:active {
      color: #33691e;
    }

    section {
      margin-bottom: 2rem;
    }

    footer {
      text-align: center;
      padding: 1rem;
      background-color: #b58ccf;
      color: #333333;
    }
    footer a {
      color: #333333;
      text-decoration: underline;
    }

    footer a:visited {
      color: #333333;
    }

    footer a:hover {
      text-decoration: none;
    }

    footer a:active {
      color: #333333;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
  
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.5rem 0;
      font-size: 1rem;
      background-color: #f9fbe7;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      border: 1px solid #c5e1a5;
      border-radius: 8px;
    }

    thead {
      background-color: #aed581;
    }

    thead th {
      padding: 0.75rem 1rem;
      text-align: left;
      font-weight: bold;
      color: #33691e;
      border: 1px solid #c5e1a5;
    }

    tbody td {
      padding: 0.75rem 1rem;
      border: 1px solid #dce775;
    }

    tbody tr:nth-child(even) {
      background-color: #f1f8e9;
    }

    tbody tr:hover {
      background-color: #dce775;
    }
    .image-box {
      margin: 1.5rem 0;
      text-align: center;
    }

    .image-box img {
      max-width: 100%;
      height: auto;
      border: 1px solid #ccc;
      border-radius: 4px;
    }