/* premixed.html の <h2 class="h4 metal"> に適用するスタイル */
h2.h4.metal {
    color: #333;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
    background: linear-gradient(to bottom, #ffffff, #e0e0e0);
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    padding: 0px 15px;
    text-align: center;
    margin: 10px 0px;
    width: 100%;
    display: block;
    box-sizing: border-box;
    font-size: 1rem; /* 文字サイズを調整 */
}

/* .main-content 内の <h1> と <h2> に適用するスタイル */
.main-content h1 {
    font-size: 1.3rem; /* 文字サイズを調整 */
}

.main-content h2 {
    font-size: 1.1rem; /* 文字サイズを調整 */
}

/* main-content の最大幅をlgサイズに合わせる */
.main-content {
    max-width: 960px; /* lgサイズの最大幅 */
    margin-left: auto;
    margin-right: auto;
}

/* xlとxxlのブレークポイントで左右に空白を追加 */
@media (min-width: 1200px) {
    .main-content {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1400px) {
    .main-content {
        padding-left: 1rem; /* パディングを減らしてコンテンツ領域を確保 */
        padding-right: 1rem; /* パディングを減らしてコンテンツ領域を確保 */
    }
}

.imginline ul.inline {
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none; /* リストマーカーを非表示にする */
}

.imginline ul.inline li {
    margin: 10px;
}

.imginline ul.inline li img {
    display: block;
    margin: 0 auto;
}

/* lg以上の画面サイズで横並びにする */
@media (min-width: 992px) {
    .imginline ul.inline {
        display: flex;
        justify-content: center;
    }
    
    .imginline ul.inline li {
        display: inline-block;
        width: auto;
        margin: 0 10px;
    }
}

/* フッターボタンのスタイル */
.fixed-download-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    border-top: 1px solid #ccc;
    text-align: center;
    padding: 8px 0;
}

.btn-custom {
    background-color: #e0e0e0;
    color: #333;
    font-size: 0.8rem;
    padding: 3px 10px;
}

.custom-blue {
    color: #1e3a8a; /* 濃い青色 */
    text-decoration: none;
}

.custom-blue:hover {
    color: #162c5d; /* ホバー時の色 */
    text-decoration: underline;
}

.nowrap {
    white-space: nowrap;
}

.modal-backdrop {
    background-color: #ffffff !important;
}