html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



h1, .caption {
        text-align:center;
}
p{
    font-size:1rem;
}

/* タブボタンのスタイル */
.tab-buttons {
    display: flex;
    
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: 2px solid black; /* 全体のボーダーを指定 */
    background-color: #f4f4f4;
    margin-right: -2px; /* タブ間のボーダー重複を相殺 */
    border-bottom:none;
    border-radius: 3px;
}
.tab-button:last-child {
    background-color:rgb(217, 217, 217);
}

.tab-button.active {
    background-color: #007bff;
    color: white;
}

/* タブコンテンツのスタイル */
.tab-content {
    display: none;
    padding: 10px;
    background-color: #f9f9f9;
    border: 2px solid #3e3e3e;
    max-width:800px;
    width:90%;
    box-sizing: border-box; /* Includes padding in the width calculation */
    margin: 0; /* Remove unnecessary spacing */
}

.tab-content.active {
    display: block;
}





/* コピーボタンのスタイル */
.copy-btn {
    display: block;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.notification {
    display: inline-block;
    width: 100%;
    background-color: #28a745;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
}

/* コードブロックのスタイル */


.code-block {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    display: block;
    width: 100%;
    max-width: 100%; /* Prevents overflow on smaller viewports */
    box-sizing: border-box; /* Includes padding and border in the width calculation */
    white-space: pre-wrap; /* Allows text to wrap properly */
    word-wrap: break-word; /* Breaks long words or URLs */
    margin: 0 auto; /* Centers the block if the parent has space */
}

/* 各セクションの背景色 */
.container {
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    width: 100%; /* Adjust width as needed */

}

  
 /* 背景色をコードボックスセクションに適用 */
ul {
    list-style: none;
    margin: 0px -20px; /* 親の padding を打ち消す */
    padding: 0;
  }
  
  ul li {
    padding: 20px; /* li 内部の余白 */
  }
  
  /* 背景色を必要とする ul のみ対応 */
  .code-section > li:nth-child(odd) {
    background-color: pink; /* 奇数行の背景色 */
  }
  
  .code-section > li:nth-child(even) {
    background-color: rgb(211, 211, 211); /* 偶数行の背景色 */
  }