html,
    body {
      overflow-x: hidden;
      max-width: 100vw;
    }

    body {
      font-family: 'Meiryo', 'Hiragino Sans', sans-serif;
      font-size: 1.1em;
      line-height: 1.5;
      color: #f0f0f0;
      background-color: #1a1a1a;
      padding: 20px;
      margin: 0;
    }

    h2,
    h3,
    h4 {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      font-weight: bold;
    }

    h2 {
      font-size: 1.5em;
      border-bottom: 2px solid #ff8c00;
      padding-bottom: 5px;
    }

    h3 {
      font-size: 1.3em;
      padding-left: 5px;
      border-left: 4px solid #ff8c00;
    }

    h4 {
      font-size: 1.1em;
      color: #ff8c00;
    }

    p {
      font-size: 1em;
      margin: 5px;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }

    .container2 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }

    .footer {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(1000px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }


    .item {
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .item:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }



    /* blue theme */
    .d_blue {
      background-color: #1e3a8a;
      border-left: 5px solid #60a5fa;
    }

    .d_blue h3,
    .d_blue h4 {
      color: #60a5fa;
      border-color: #60a5fa;
    }

    /* purple theme */
    .d_purple {
      background-color: #4c1d95;
      border-left: 5px solid #c084fc;
    }

    .d_purple h3,
    .d_purple h4 {
      color: #c084fc;
      border-color: #c084fc;
    }

    /* green theme */
    .d_green {
      background-color: #064e3b;
      border-left: 5px solid #34d399;
    }

    .d_green h3,
    .d_green h4 {
      color: #34d399;
      border-color: #34d399;
    }

    /* red theme */
    .d_red {
      background-color: #7f1d1d;
      border-left: 5px solid #f87171;
    }

    .d_red h3,
    .d_red h4 {
      color: #f87171;
      border-color: #f87171;
    }

    /* yellow theme */
    .d_yellow {
      background-color: #78350f;
      border-left: 5px solid #fbbf24;
    }

    .d_yellow h3,
    .d_yellow h4 {
      color: #fbbf24;
      border-color: #fbbf24;
    }

    /* cyan theme */
    .d_cyan {
      background-color: #164e63;
      border-left: 5px solid #22d3ee;
    }

    .d_cyan h3,
    .d_cyan h4 {
      color: #22d3ee;
      border-color: #22d3ee;
    }

    /* pink theme */
    .d_pink {
      background-color: #831843;
      border-left: 5px solid #f472b6;
    }

    .d_pink h3,
    .d_pink h4 {
      color: #f472b6;
      border-color: #f472b6;
    }

    /* dark theme */
    .d_dark {
      background-color: #232f38;
      border-left: 5px solid #006590;
    }

    .d_dark h3,
    .d_dark h4 {
      color: #f472b6;
      border-color: #f472b6;
    }

    /* lime theme */
    .d_lime {
      background-color: #365314;
      border-left: 5px solid #a3e635;
    }

    .d_lime h3,
    .d_lime h4 {
      color: #a3e635;
      border-color: #a3e635;
    }

    th,
    td {
      color: #ffffff;
      /* セル内のテキスト色 */
      padding: 8px;
      text-align: left;
    }

    ul {
      padding-left: 1.2em;
      margin: 0.5em 0;
    }

    li {
      color: #f0f0f0;
      margin-bottom: 0.3em;
      list-style-type: square;
    }

    .todo {
      color: #ff8c00;
      font-weight: bold;
    }

    .todo::before {
      content: "★ ";
    }

    a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dotted;
      transition: color 0.2s;
    }

    a:hover {
      color: #ff8c00;
      border-bottom: 1px solid;
    }

    .artist {
      color: #ff8c00;
      font-weight: bold;
    }

    .htitle {
      background-color: #ff8c00;
      color: #1a1a1a;
      padding: 8px 12px;
      border-radius: 4px;
      display: inline-block;
      margin-top: 10px;
      font-weight: bold;
    }

    img {
      width: 50%;
      /* 元のサイズの50%に */
      height: auto;
      /* アスペクト比を維持 */
    }

    .top {
      width: 50%;
      /* 元のサイズの50%に */
      height: auto;
      /* アスペクト比を維持 */
    }

    iframe {
      width: 50%;
      /* 元のサイズの50%に */
      height: auto;
      /* アスペクト比を維持 */
    }


    .musicality {
      width: 80%;
      /* 元のサイズの50%に */
      height: auto;
      /* アスペクト比を維持 */
    }

    .icon-mname::before {
      content: "🎵";
      /* Unicode文字 */
      margin-right: 8px;
      color: green;
    }

    .icon-artist::before {
      content: "🎶";
      /* Unicode文字 */
      margin-right: 8px;
      color: green;
    }

    .icon-canta::before {
      content: "🎙";
      /* Unicode文字 */
      margin-right: 8px;
      color: green;
    }

    .icon-bareha::before {
      content: "⚢";
      /* Unicode文字 */
      margin-right: 11px;
      color: green;
    }

    /* または絵文字 */
    .emoji-text::before {
      content: "📌";
      margin-right: 2px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }

      body {
        font-size: 1em;
        padding: 10px;
      }
    }