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;
}

/* Prevent flex children from stretching to the same (tall) height
   which causes large blank space under the left column when the right
   column is taller (carousel/video list). */
.home-flex-grid {
    align-items: flex-start;
}

.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%;
    }
}



/* 右カラム（2列目）の右側に余白を追加して要素が端に張り付かないようにする */
.home-flex-grid .home-flex-item:last-child {
    padding-right: 12px;
}
@media (max-width: 960px) {
    /* 狭い画面では余白を小さくする */
    .home-flex-grid .home-flex-item:last-child {
        padding-right: 12px;
    }
}

/* 動画エリア */
.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;
}

.video-link { display:block; width:100%; height:100%; position:relative; }
.video-thumb { display:block; width:100%; height:auto; object-fit:cover; }
.video-play-button { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
.video-thumb-generic { width:96px; height:96px; display:flex; align-items:center; justify-content:center; margin:12px auto; }
.video-link { display:flex; align-items:center; justify-content:center; padding:8px; }
.video-link .sr-only { position:absolute; left:-9999px; }
.video-file-list { display:flex; flex-direction:column; gap:8px; }
.video-file-link { display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:6px; text-decoration:none; color:inherit; }
.video-file-link:hover { background: rgba(0,0,0,0.04); }
.video-file-icon { color: #d9534f; }
.video-file-name { font-size:14px; }
.video-file-empty { color:#666; font-size:14px; }

/* Video section styling */
.video-section { margin-top: 1rem; }
.video-section-title { font-size: 1.1rem; margin: 0 0 8px 0; color: #333; }
.video-file-meta { display:flex; flex-direction:column; }
.video-file-size { font-size: 12px; color: #888; }
.video-file-link .video-file-icon { flex: 0 0 28px; width: 28px; height: 28px; }


.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);
}

/*--- シンプルカルーセル 対応　ここから ---*/
    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;
}

/* デバッグサムネイル */
.debug-thumb {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border: 2px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    display: inline-block;
}

/* 強制優先: 自前スライダー（simple-slider）を1枚表示で安定させる */
.carousel-outer-wrapper.simple-slider {
    position: relative !important;
    width: 100% !important;
    /* 横幅は動画に合わせつつ、高さは画像に合わせて自動にする（画像全体表示） */
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
}
.carousel-outer-wrapper.simple-slider .slides {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    transition: transform 0.5s ease-in-out !important;
    width: 100% !important;
    height: 100% !important;
}
.carousel-outer-wrapper.simple-slider .slide {
    flex: 0 0 100% !important;
    display: block !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important; /* 画像の高さに合わせる */
    box-sizing: border-box !important;
}
.carousel-outer-wrapper.simple-slider .slide-img {
    /* 幅をコンテナに合わせ、縦は必要に応じてトリミングしてでも合わせる */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 幅を優先して埋める（縦はトリミング） */
    display: block !important;
    margin: 0 auto !important;
}

/* 動画の高さをカルーセルと合わせる（デスクトップ） */
.video-wrapper {
    height: 400px !important;
}
.home-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 動画はコンテナを埋める */
}

/* 両者の横幅を確実に一致させるための追加ルール */
.carousel-outer-wrapper.simple-slider,
.video-wrapper {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* スライドイメージがコンテナ幅に確実に合わせる */
.carousel-outer-wrapper.simple-slider .slides,
.carousel-outer-wrapper.simple-slider .slide {
    width: 100% !important;
}
.carousel-outer-wrapper.simple-slider .slide-caption {
    position: absolute !important;
    left: 0; right: 0; bottom: 8px;
    text-align: center; color: #fff; background: rgba(0,0,0,0.35);
    padding: 6px 8px; font-size: 14px; z-index: 5;
}
.carousel-outer-wrapper.simple-slider .slide-btn {
    position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 40px !important; height: 48px !important; background: rgba(0,0,0,0.35) !important; color: #fff !important;
    border: none !important; border-radius: 6px !important; z-index: 10 !important; cursor: pointer !important;
}
.carousel-outer-wrapper.simple-slider .slide-btn.prev { left: 8px !important; }
.carousel-outer-wrapper.simple-slider .slide-btn.next { right: 8px !important; }
.carousel-outer-wrapper.simple-slider .slide-bullets { position: absolute !important; bottom: 8px !important; left: 50% !important; transform: translateX(-50%) !important; display:flex !important; gap:8px !important; z-index:12 !important; }
.carousel-outer-wrapper.simple-slider .slide-bullet { width:10px !important; height:10px !important; border-radius:50% !important; background: rgba(255,255,255,0.5) !important; border:none !important; }
.carousel-outer-wrapper.simple-slider .slide-bullet.active { background: rgba(255,255,255,0.95) !important; }

/* コンテナ */
.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;
}

/* 強制表示と配置リセット：MudCarousel の内部要素が隠れたり transform で外れる問題を防ぐ */
.mud-carousel .mud-carousel-swipe,
.mud-carousel .mud-carousel-item,
.mud-carousel .carousel-item-wrapper,
.mud-carousel .mud-carousel-slides,
.mud-carousel .mud-carousel-item img,
.mud-carousel .mud-carousel-swipe > div {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mud-carousel .mud-carousel-item img,
.mud-carousel img.carousel-img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    z-index: 3 !important;
}

/* 1枚表示に揃える：スライド要素を横並びにし各スライド幅を100%に固定 */
.mud-carousel .mud-carousel-swipe > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    /* スライドを縦方向に伸ばし、高さを揃える */
    align-items: stretch !important;
    gap: 0 !important;
}

.mud-carousel .mud-carousel-item,
.mud-carousel .mud-carousel-item-default,
.mud-carousel .carousel-item-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    /* スライド内のコンテンツは高さいっぱいに伸ばす */
    align-items: stretch !important;
    justify-content: center !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* 表示領域外は隠す */
.mud-carousel {
    overflow: hidden !important;
}

/* 緊急対応: カルーセル内の画像が見えない問題を強制的に解消するスタイル */
.mud-carousel, .mud-carousel .mud-carousel-swipe, .mud-carousel .mud-carousel-item, .carousel-item-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.mud-carousel img.carousel-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    z-index: 2 !important;
    margin: 0 auto !important;
}
.mud-carousel .mud-carousel-item {
    overflow: visible !important;
}

/* 強制表示: MudCarousel 内の画像を確実に表示させるデバッグ用ルール */
/* (デバッグ用ルールを削除しました) */


/* スマホ時だけ高さ変更 */
@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;
}

/* バレットアクティブ色（必要なら調整） */
.simple-bullet.active {
    background: rgba(255,255,255,0.95);
}

/* コンテナ */
.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;
}

/* 右側上のカルーセル：角を少し丸める（面取り） */
.carousel-outer-wrapper {
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    /* 裏で角が切れないように clip-path で強制的に面取りする */
    -webkit-clip-path: inset(0 round 8px) !important;
    clip-path: inset(0 round 8px) !important;
    background-clip: padding-box;
}

/* MudBlazor のデフォルトで 0 にされている場合を上書き（上側の角も確実に丸める） */
.carousel-outer-wrapper .mud-carousel,
.carousel-outer-wrapper .mud-swipearea,
.carousel-outer-wrapper .mud-carousel-item,
.carousel-outer-wrapper .mud-carousel .mud-swipearea {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    overflow: hidden !important;
    -webkit-clip-path: inset(0 round 8px) !important;
    clip-path: inset(0 round 8px) !important;
}

/* 画像自体にも角丸を適用して見た目を揃える（上側を確実に丸める） */
.carousel-outer-wrapper img.carousel-img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.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;
}

/*Home.razor*/
/* ▼ MudDataGrid 全体をブラウザ幅に合わせて縮める */
.my-datagrid .mud-data-grid {
    width: 100%;
}

/* ▼ ヘッダー中央寄せ（MudDataGrid 9.x は th ではなく div） */
.my-datagrid .mud-data-grid-header .mud-data-grid-column-header {
    justify-content: center !important;
    text-align: center !important;
}

/* ▼ 各列の最小幅（min-width にすることでレスポンシブになる） */
.my-datagrid .mud-data-grid-column-header,
.my-datagrid .mud-data-grid-cell {
    min-width: 60px;
}

/* ▼ 銘柄列だけ折り返し禁止（1列目） */
.my-datagrid .mud-data-grid-row .mud-data-grid-cell:nth-child(1) {
    white-space: nowrap !important;
}

/* ▼ 銘柄列のヘッダーも折り返し禁止 */
.my-datagrid .mud-data-grid-header .mud-data-grid-column-header:nth-child(1) {
    white-space: nowrap !important;
    min-width: 180px !important;
}



/* Kome.razor　*/
/* 巨大ボタン */
.kome-button-large {
    font-size: 2.5rem; /* 文字を超巨大化 */
    padding: 10px 16px; /* ボタンの余白 */
    font-weight: bold;
    background: linear-gradient(90deg, #fff352, #ff0d3d);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* アイコンも巨大化 */
/* アイコンも巨大化 */
.kome-icon {
    font-size: 1.5rem;
}

/* ホバー時の軽い演出 */
.kome-button-large:hover {
    opacity: 0.9;
}

/* スマホ時の調整 */
@media (max-width: 600px) {
    .kome-button-large {
        font-size: 2rem;
        padding: 16px 24px;
    }

}

/* CTA buttons: make widths uniform and prevent wrapping */
.cta-buttons {
    width: 100%;
    max-width: none; /* fill the parent content width so buttons align with table */
    display: flex;
    flex-direction: column;
    align-items: stretch !important; /* make child buttons fill available width */
    gap: 12px;
}
.cta-buttons .cta-button {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px !important;
}
.cta-buttons .cta-button .mud-button-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Ensure left side of text is not clipped (some MudButton internals may leave negative margin when icon removed) */
.cta-buttons .cta-button {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.cta-buttons .cta-button .mud-button-label {
    display: inline-block;
    padding-left: 2px; /* small inward offset to ensure glyphs aren't cut */
}
/* Ensure the large kome button also doesn't wrap */
.kome-button-large {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
}

/* ▼ MudDataGrid を横スクロール可能にするラッパー */
.datagrid-scroll-wrapper {
    overflow-x: auto;
    width: 100%;
}

    /* ▼ MudDataGrid のテーブルに最小幅を設定（列幅合計より大きく） */
    .datagrid-scroll-wrapper .mud-table {
        min-width: 520px; /* 銘柄220 + 重量40 + 精米40 + 価格60 + padding */
    }

.col-meigara {
    width: 220px;
    white-space: nowrap;
    text-align: left; /* データ行の左寄せ */
}

.kome-title {
    text-align: center;
}

.kome-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .kome-table th,
    .kome-table td {
        border: 1px solid #ccc;
        padding: 4px 6px;
    }

        /* ▼ 銘柄ヘッダだけ中央寄せ */
        .kome-table th.col-meigara {
            text-align: center;
        }

        /* ▼ 銘柄データ行は左寄せ */
        .kome-table td.col-meigara {
            text-align: left;
        }

.col-weight {
    width: 40px;
    text-align: center;
}

.col-seimai {
    width: 40px;
    text-align: center;
}

.col-price {
    width: 60px;
    text-align: right;
}

/* ▼ 交互の背景色 */
.bgcolor1 {
    background-color: #fafafa;
}

.bgcolor2 {
    background-color: #ffffff;
}

/* 横スクロールを許可（スマホで切れない） */
.kome-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

/* テーブルの最小幅（列が潰れないように） */
.kome-table {
    min-width: 480px; /* 必要なら 520px などに変更可 */
}

/* 列幅（PC時） */
.col-meigara {
    width: 180px;
    white-space: nowrap;
}

.col-weight {
    width: 60px;
    text-align: center;
}

.col-seimai {
    width: 60px;
    text-align: center;
}

.col-price {
    width: 60px;
    text-align: right;
}

/* スマホ時（画面幅が狭いとき） */
@media (max-width: 600px) {
    .col-meigara {
        width: 140px;
        font-size: 14px;
    }

    .col-weight {
        width: 50px;
        font-size: 14px;
    }

    .col-seimai {
        width: 50px;
        font-size: 14px;
    }

    .col-price {
        width: 60px;
        font-size: 14px;
    }

    .kome-table {
        min-width: 420px; /* スマホ用に少し縮める */
    }
}

/* Responsive CTA buttons */
/* CTA ボタンのカスタムスタイルは削除しました（元のレイアウトに戻す場合は適宜CSSを追加してください） */

/* Reduce gap between info alert and the kome title */

/* tighten vertical spacing around alerts and title */
.options-list { margin-top: 12px; margin-bottom: 6px; }
.options-item { margin-bottom: 6px; }
.info-alert {
    margin: 4px 0 4px 0 !important; /* top/right/bottom/left */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.kome-title {
    margin-top: 0 !important; /* remove extra top gap */
    margin-bottom: 6px !important;
    font-size: 1.1rem;
}

/* If MudPaper padding causes large gap, slightly reduce it for this section */
.home-flex-item .pa-4 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Reduce vertical gap between the top hero area and the product grid that follows */
.home-flex-grid {
    margin-bottom: 6px !important;
}
.home-flex-grid + .mud-grid {
    margin-top: 6px !important;
}
.home-flex-grid .home-flex-item .pa-4 {
    padding-bottom: 6px !important;
}

/* Strong overrides to eliminate unexpected large vertical gap
   Force zero margins/paddings where MudBlazor adds spacing */
.home-flex-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.home-flex-grid {
    align-content: flex-start !important;
}
.home-flex-item {
    align-self: flex-start !important;
}
.home-flex-grid .home-flex-item {
    margin-bottom: 0 !important;
}
.home-flex-grid .mud-paper,
.home-flex-grid .home-mudpaper,
.home-flex-grid .pa-4 {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
}
/* Ensure the following MudGrid is pulled up */
.home-flex-grid + .mud-grid,
.home-flex-grid + .MudGrid {
    margin-top: 6px !important;
    padding-top: 0 !important;
}

/* Strong overrides to ensure tight spacing (important to override component styles) */
.home-flex-item .info-alert,
.home-flex-item .options-item,
.home-flex-item .options-list {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
.home-flex-item .info-alert {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.home-flex-item .kome-title {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
}
/* Reduce any extra container spacing that may come from MudPaper */
.home-flex-item > .pa-4,
.home-flex-item .pa-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}