h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ホームページ用フレックスレイアウト（MudGrid の代わり） */
.home-flex-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 24px;
}

.home-flex-item {
    flex: 1 1 calc(50% - 12px);
    min-width: 300px;
    box-sizing: border-box;
}

@media (max-width: 960px) {
    .home-flex-item {
        flex: 1 1 100%;
    }
}

/* 動画エリア */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    overflow: hidden;
}

.video-wrapper-idle {
    cursor: pointer;
}

.video-wrapper-playing {
    cursor: default;
}

.home-video {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.home-video[controls] {
    pointer-events: auto;
}


.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

/*--- シンプルカルーセル 対応　ここから ---*/

/* カルーセル全体 */
.simple-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    border: 1px solid transparent;
    -webkit-clip-path: inset(0 round 12px);
    clip-path: inset(0 round 12px);
}

/* カルーセルコンテナ */
.carousel-container-simple {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* スライドラッパー */
.carousel-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* スライド */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* 画像 */
.carousel-img-simple {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* キャプション */
.carousel-caption-simple {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-top: 8px;
    font-size: 14px;
    color: white;
    opacity: 0.9;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 0;
}

/* コントロールボタン */
.carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0 10px;
    pointer-events: none;
}

.carousel-btn {
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.carousel-btn-prev:hover,
.carousel-btn-next:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .carousel-container-simple {
        height: 250px;
    }
}

/*--- シンプルカルーセル 対応　ここまで ---*/
/* キャリセルコンテナ */
.carousel-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 12px) !important;
}

/* 画像の基本スタイル */
.carousel-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* コンテナ */
.carousel-item-wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

/* キャプション */
.carousel-caption {
    margin-top: 8px;
    font-size: 14px;
    color: white;
    opacity: 0.9;
}

/* Carousel 高さ（PC） */
.carousel-outer-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mud-carousel {
    height: 400px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 1.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}


/* スマホ時だけ高さ変更 */
@media (max-width: 600px) {
    .mud-carousel {
        height: 250px !important;
    }
}

/* Swipe エリア */
.mud-swipearea {
    overflow: hidden !important;
    border-radius: 0 !important;
}

.mud-carousel-swipe {
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* カルーセルアイテムに角丸を適用 */
.mud-carousel-item {
    overflow: hidden !important;
    border-radius: 0 !important;
}

.mud-carousel-item-default {
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* すべてのカルーセルアイテムトランジション状態 */
.mud-carousel-item-enter,
.mud-carousel-item-exit,
.mud-carousel-transition-slide-prev-enter,
.mud-carousel-transition-slide-next-enter,
.mud-carousel-transition-slide-prev-exit,
.mud-carousel-transition-slide-next-exit,
.mud-carousel-transition-fade-enter,
.mud-carousel-transition-fade-exit {
    overflow: hidden !important;
}

/* PC用（md以上） */
@media (min-width: 960px) {
    .mud-carousel {
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .mud-swipearea {
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .mud-carousel-swipe {
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .mud-carousel-item {
        overflow: hidden !important;
        border-radius: 0 !important;
    }
}

/* 矢印ボタン - inline style を上書き */
button[aria-label="Previous"].mud-icon-button {
    opacity: 0.4 !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
    z-index: 10 !important;
    visibility: visible !important;
    position: absolute !important;
    left: 10px !important;
}

button[aria-label="Next"].mud-icon-button {
    opacity: 0.4 !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
    z-index: 10 !important;
    visibility: visible !important;
    position: absolute !important;
    right: 10px !important;
}

/* ホバー時（濃くなる） */
button[aria-label="Previous"].mud-icon-button:hover,
button[aria-label="Next"].mud-icon-button:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 0.7 !important;
}

/* ドット（バレット）非表示 - aria-label で "Index" を含むボタンをターゲット */
button[aria-label*="Index"].mud-icon-button {
    display: none !important;
}

.mud-carousel :deep(.mud-carousel-bullets) {
    display: none !important;
}

.mud-carousel :deep(.mud-carousel-dot) {
    display: none !important;
}

.mud-carousel-bullets-container {
    display: none !important;
}
/*---Carousel 対応　ここまで ---*/

/* MudDataGrid */
.bgcolor1 {
    background-color: #fffafa;
}

.bgcolor2 {
    background-color: #fff0f5;
}

/* compact toolbar */
.my-datagrid .mud-table-toolbar,
.my-datagrid .mud-toolbar-root,
.my-datagrid .mud-toolbar {
    min-height: 0 !important;
    height: 32px !important; /* 好みの高さに調整 */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* 内部コンテンツを詰める */
.my-datagrid .compact-toolbar-inner {
    height: 28px !important;
    padding: 0 6px !important;
    gap: 6px;
    align-items: center;
}

    /* テキスト行高さを詰める */
    .my-datagrid .compact-toolbar-inner .mud-typography-root,
    .my-datagrid .compact-toolbar-inner .mud-typography {
        line-height: 1 !important;
        margin: 0 !important;
        font-size: 0.85rem !important;
    }

/* alternating row colors */
.my-datagrid .mud-table-row:nth-child(odd),
.bgcolor1 {
    background-color: rgba(0,0,0,0.03) !important; /* 好みで調整 */
}

.my-datagrid .mud-table-row:nth-child(even),
.bgcolor2 {
    background-color: transparent !important;
}

/* hover 優先 */
.my-datagrid .mud-table-row:hover {
    background-color: rgba(102,126,234,0.08) !important;
}

/* homeの*/
.home-mudpaper {
    margin-top: 12px; /* 上側の空き幅（ここで調整） */
}

/* スマホ等狭い画面では控えめに */
@media (max-width: 600px) {
    .home-mudpaper {
        margin-top: 8px;
    }
}

/* MudTable 送料テーブル - ヘッダーのグラデーション */
.shipping-table .mud-table-head .shipping-header {
    background: linear-gradient(90deg, #0d3817 0%, #a5d6a7 100%);
    color: white !important;
    font-weight: bold;
}

/* セルのテキスト色も明示的に白に */
.shipping-table .mud-table-head .shipping-header {
    --mud-palette-text-primary: white;
}

/* MudTable 送料テーブル - 行のグラデーション */
.shipping-table .mud-table-body .mud-table-row {
    background: linear-gradient(90deg, #f0f8f0 0%, #e8f5e9 100%);
}

/* ホバー時の色 */
.shipping-table .mud-table-body .mud-table-row:hover {
    background: linear-gradient(90deg, #dceedd 0%, #c8e6c9 100%) !important;
}

/* 奇数行と偶数行で異なるグラデーション */
.shipping-table .mud-table-body .mud-table-row:nth-child(odd) {
    background: linear-gradient(90deg, #f0f8f0 0%, #e8f5e9 100%);
}

.shipping-table .mud-table-body .mud-table-row:nth-child(even) {
    background: linear-gradient(90deg, #e8f5e9 0%, #dceedd 100%);
}

/* オプションリストのスタイル */
.options-list {
    margin-top: 20px;
}

.options-item {
    background: linear-gradient(90deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left: 4px solid #2e7d32 !important;
    padding: 16px !important;
    border-radius: 4px;
}

    .options-item:hover {
        background: linear-gradient(90deg, #c8e6c9 0%, #a5d6a7 100%);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

/* ========== コンパクトなデータグリッド用スタイル ========== */
.compact-datagrid :deep(.mud-table-cell) {
    padding: 4px 8px !important;
    font-size: 13px !important;
}

.compact-datagrid :deep(.mud-table-head) {
    background-color: #f5f5f5;
}

.compact-datagrid :deep(.mud-table-head th) {
    font-weight: 600;
    padding: 8px !important;
}

/* カラムの幅を調整 */
.compact-datagrid :deep(th:nth-child(1)) {
    width: 40%;
}

.compact-datagrid :deep(th:nth-child(2)) {
    width: 20%;
}

.compact-datagrid :deep(th:nth-child(3)) {
    width: 20%;
}

.compact-datagrid :deep(th:nth-child(4)) {
    width: 20%;
}

/* ツールバーをコンパクトに */
.compact-toolbar-inner {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 0;
}

<!--
タイトル部分 -->
<div class="hero-section" >
<MudText Typo="Typo.h4" Class="mb-4" Style="color: darkgreen; font-weight: bold;" >
ミルキークイーン　にじのきらめき　送料無料
</MudText >
<!-- CTA ボタン -->
<div class="cta-buttons mb-4" >
<MudButton Variant="Variant.Filled" Color="Color.Error" Size="Size.Large"
Link="/" Class="cta-button mb-3" >
<MudIcon Icon="@Icons.Material.Filled.ShoppingCart" Class="mr-2" > </MudIcon >
2026年新米 振込専用ご注文はこちら。PayPay送金OK！
</MudButton >

<MudButton Variant="Variant.Filled" Color="Color.Error" Size="Size.Large"
Link="https://ag.aiik.net/" Target="_blank" Class="cta-button" >
<MudIcon Icon="@Icons.Material.Filled.CreditCard" Class="mr-2" > </MudIcon >
クレジットカード、コンビニ支払い等のご注文はこちら！
</MudButton >
</div >
<!-- 注記 -->
<MudAlert Severity="Severity.Info" Class="info-alert" >
<MudIcon Icon="@Icons.Material.Filled.Info" Class="mr-2" > </MudIcon >
商品受け取りに来られる場合はご連絡お願いします。値引きします。
</MudAlert >
</div >