/**
 * 商品詳細ページ共通CSS
 * フレーム・コンタクトレンズ・キャンペーン・ニュース・店舗・イベント詳細で共通使用
 * 
 * Phase 4でApp.razorグローバル読み込みに移行
 * Phase 5: frame-detail.css → product-detail.css にリネーム
 * 
 * 【修正履歴】
 * - 2026-01-26: ギャラリースワイプ矢印をデスクトップでも表示（ホバー時のみ）
 */

/* ========================================
   ページ全体のアニメーション
   ======================================== */
.page-fade-in {
    animation: pageFadeIn 0.6s ease-out;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   画像ギャラリー
   ======================================== */
.gallery-main {
    aspect-ratio: 4 / 3;
    background: #ffffff;
}

.gallery-main img {
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 追加: AI着用イメージ生成 ========== */
/* AI生成バッジ（[data-ai-badge]）表示中はホバー時のズームヒント（右下の白い丸）を
   上方へ退避して重なりを防ぐ。
   注釈2行を追加しバッジが3行分の高さになったため退避量は5.5remとする（変更: 実物との差異に関する注釈追加）。
   :has() 非対応ブラウザでは一時的な重なりのみで実害なし */
.gallery-main:has([data-ai-badge]:not([hidden])) .gallery-zoom-hint {
    bottom: 5.5rem;
}
/* ========== /追加: AI着用イメージ生成 ========== */

/* ========================================
   サムネイルギャラリー - フィルムストリップ風
   ======================================== */

/* ギャラリーラッパー */
.thumbnail-gallery-wrapper {
    position: relative;
}

/* スクロールコンテナ */
.thumbnail-scroll-container {
    position: relative;
}

/* サムネイルトラック - 横スクロール */
.thumbnail-track {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.thumbnail-track::-webkit-scrollbar {
    display: none;
}

/* サムネイルアイテム */
.thumbnail-item {
    border-radius: 0;
    opacity: 0.6;
}

.thumbnail-item:hover {
    opacity: 0.85;
    /* 上移動エフェクトを無効化 */
    transform: none !important;
}

.thumbnail-item.active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.9);
}

/* サムネイル画像 */
.thumbnail-item img {
    opacity: inherit;
    transition: opacity 0.15s ease;
}

/* 選択インジケーター - 下部バー */
.thumbnail-indicator {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.15s ease;
}

.thumbnail-item.active .thumbnail-indicator {
    transform: scaleX(1);
}

/* フェードグラデーション */
.thumbnail-fade-left,
.thumbnail-fade-right {
    transition: opacity 0.2s ease;
}

.thumbnail-fade-left.visible {
    opacity: 1;
}

.thumbnail-fade-right.hidden {
    opacity: 0;
}

/* ドットインジケーター(モバイル) */
.thumbnail-dot {
    transition: all 0.2s ease;
}

/* カウンター */
.thumbnail-counter {
    font-variant-numeric: tabular-nums;
}

/* サムネイルのフォーカス */
.thumbnail-item:focus-visible {
    outline: 2px solid #1e293b;
    outline-offset: 2px;
}

/* ナビゲーションボタン */
.thumbnail-nav-btn {
    flex-shrink: 0;
}

.thumbnail-nav-btn:focus-visible {
    outline: 2px solid #1e293b;
    outline-offset: 2px;
}

/* トラックラッパー */
.thumbnail-track-wrapper {
    min-width: 0; /* flex childのoverflow対応 */
}

/* ========================================
   Enhanced Lightbox(高機能モーダル)
   ======================================== */
.frame-lightbox-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.frame-lightbox-overlay.frame-lightbox-active {
    opacity: 1;
    visibility: visible;
}

/* Lightbox画像 - GPUアクセラレーション最適化 + アニメーション */
#frame-lightbox-image {
    pointer-events: none;
    max-width: none !important;
    max-height: none !important;
    touch-action: none;
    will-change: transform, width, height, opacity;
    transform-origin: 0 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* ふわっと表示アニメーション */
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.25s ease-out, filter 0.25s ease-out;
}

#frame-lightbox-image.frame-image-loaded {
    opacity: 1;
    filter: blur(0);
}

/* ビューポート */
#frame-lightbox-viewport {
    cursor: grab;
    touch-action: none;
    /* レイヤー分離でパフォーマンス向上 */
    isolation: isolate;
}

#frame-lightbox-viewport:active {
    cursor: grabbing;
}

/* ナビゲーターパネル */
#frame-navigator-panel {
    transition: opacity 0.2s ease;
}

#frame-navigator-thumb {
    transition: opacity 0.2s ease;
}

#frame-navigator-rect {
    transition: all 0.1s ease-out;
}

/* サムネイルストリップ - フィルムストリップ風デザイン */
[data-strip-index] {
    transition: all 0.15s ease;
}

/* サムネイルアイテム基本スタイル */
.lightbox-thumb-item {
    position: relative;
    overflow: hidden;
    /* 角を丸めない - シャープなエッジ */
    border-radius: 0;
}

/* サムネイル画像 */
.lightbox-thumb-item img {
    transition: opacity 0.15s ease;
}

/* 選択インジケーター - 下部バー */
.lightbox-thumb-indicator {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

/* 選択中のサムネイル */
.lightbox-thumb-active {
    background-color: transparent !important;
}

.lightbox-thumb-active > div {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.lightbox-thumb-active img {
    opacity: 0.9 !important;
}

.lightbox-thumb-active .lightbox-thumb-indicator {
    transform: scaleX(1) !important;
}

/* ホバー効果 */
.lightbox-thumb-item:hover img {
    opacity: 0.7;
}

/* フォーカス時の白枠を完全に削除 */
.lightbox-thumb-item,
.lightbox-thumb-item:focus,
.lightbox-thumb-item:focus-visible,
.lightbox-thumb-item:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ボタンのデフォルトスタイルをリセット */
button.lightbox-thumb-item {
    -webkit-tap-highlight-color: transparent;
}

/* ツールバーボタン */
#frame-zoom-in-btn:disabled,
#frame-zoom-out-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ナビゲーションボタンのホバー効果 */
[data-frame-lightbox-prev] > div,
[data-frame-lightbox-next] > div {
    transition: all 0.2s ease;
}

/* キーボードショートカット表示 */
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75em;
}

/* ========================================
   旧Lightbox(互換性維持)
   ======================================== */
.lightbox-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-container.lightbox-visible {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lightboxの入場アニメーション */
.lightbox-container.lightbox-visible .lightbox-image {
    animation: lightboxZoomIn 0.3s ease-out;
}

@keyframes lightboxZoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   カルーセル
   ======================================== */
.carousel-track {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

/* スクロールスナップ */
.carousel-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* マウスドラッグ用カーソル */
.carousel-track {
    cursor: grab;
    user-select: none;
}

.carousel-track:active,
.carousel-track.dragging {
    cursor: grabbing;
    scroll-snap-type: none; /* ドラッグ中はスナップを無効化 */
}

/* ドラッグ中はリンククリックを無効化 */
.carousel-track.dragging a {
    pointer-events: none;
}

/* スクロールバー非表示ユーティリティ */
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* カルーセルボタンのホバー効果 */
[data-carousel-prev],
[data-carousel-next] {
    transition: all 0.2s ease;
}

[data-carousel-prev]:disabled,
[data-carousel-next]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ========================================
   スワイプインジケーター(モバイル用)
   ======================================== */

/* フェードグラデーション */
.carousel-fade-right,
.carousel-fade-left {
    transition: opacity 0.3s ease;
}

/* カルーセルトラックの -mx-2 に対応するため、フェードをネガティブ位置に配置 */
/* これによりカードの端もフェード効果がカバーされる */
.carousel-fade-left {
    left: -0.5rem !important; /* カルーセルトラックの-mx-2をカバー */
}

.carousel-fade-right {
    right: -0.5rem !important; /* カルーセルトラックの-mx-2をカバー */
}

/* ドットインジケーター */
.carousel-dot {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot.active {
    width: 1rem;
    background-color: #475569;
}

/* スワイプヒントアニメーション */
@keyframes swipeHint {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(4px);
        opacity: 0.6;
    }
}

.animate-swipe-hint {
    animation: swipeHint 1.5s ease-in-out infinite;
}

/* 右端スワイプ矢印インジケーター(左右揺れアニメーション) */
@keyframes swipeArrowRight {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(4px);
    }
    75% {
        transform: translateX(-2px);
    }
}

@keyframes swipeArrowLeft {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(2px);
    }
}

.animate-swipe-arrow-right {
    animation: swipeArrowRight 1.8s ease-in-out infinite;
}

.animate-swipe-arrow-left {
    animation: swipeArrowLeft 1.8s ease-in-out infinite;
}

/* スワイプ矢印の表示制御 */
.carousel-swipe-arrow {
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

/* ボタンとしてのスタイル */
button.carousel-swipe-arrow {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

button.carousel-swipe-arrow:focus-visible > div {
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.3);
}

/* ホバー時にアニメーション停止(有効時のみ) */
button.carousel-swipe-arrow:not(.disabled):hover .animate-swipe-arrow-right,
button.carousel-swipe-arrow:not(.disabled):hover .animate-swipe-arrow-left {
    animation: none;
}

/* 無効時の拒否モーション */
@keyframes shakeReject {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

/* 左矢印 */
.carousel-arrow-left {
    opacity: 1;
}

/* 左矢印の無効状態 */
.carousel-arrow-left.disabled > div {
    background-color: rgba(248, 250, 252, 0.98);
    border-color: rgba(241, 245, 249, 0.9);
    box-shadow: none;
}

.carousel-arrow-left.disabled .arrow-icon {
    display: none;
}

.carousel-arrow-left.disabled .reject-icon {
    display: block;
}

.carousel-arrow-left.disabled .animate-swipe-arrow-left {
    animation: none;
}

/* 左矢印が有効時のアニメーション */
.carousel-arrow-left:not(.disabled) .animate-swipe-arrow-left {
    animation: swipeArrowLeft 1.8s ease-in-out infinite;
}

/* 右矢印の無効状態 */
.carousel-arrow-right.disabled > div {
    background-color: rgba(248, 250, 252, 0.98);
    border-color: rgba(241, 245, 249, 0.9);
    box-shadow: none;
}

.carousel-arrow-right.disabled .arrow-icon {
    display: none;
}

.carousel-arrow-right.disabled .reject-icon {
    display: block;
}

.carousel-arrow-right.disabled .animate-swipe-arrow-right {
    animation: none;
}

/* 右矢印が有効時のアニメーション */
.carousel-arrow-right:not(.disabled) .animate-swipe-arrow-right {
    animation: swipeArrowRight 1.8s ease-in-out infinite;
}

/* ×アイコン(デフォルトは非表示、無効時は非常に薄い色) */
.reject-icon {
    display: none;
    color: #e2e8f0;
}

/* 無効ボタンクリック時の拒否アニメーション */
.carousel-swipe-arrow.disabled.shake > div {
    animation: shakeReject 0.4s ease-in-out;
}

/* 初回表示時のパルスアニメーション(右端グラデーション) */
@keyframes pulseFade {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.carousel-fade-right.pulse {
    animation: pulseFade 2s ease-in-out 3;
}

/* スワイプ可能インジケーター(カード右端の矢印) */
@keyframes peekCard {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-8px);
    }
}

/* モバイルでのタッチフィードバック */
@media (hover: none) and (pointer: coarse) {
    [data-carousel] a:active article {
        transform: scale(0.98);
    }
}

/* ========================================
   スペック項目のアニメーション
   ======================================== */
.spec-item {
    position: relative;
    padding-left: 0;
    transition: padding-left 0.2s ease;
}

.spec-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: #1e293b;
    transition: width 0.2s ease;
}

/* ========================================
   Proseスタイルの調整
   ======================================== */
.prose-slate {
    --tw-prose-body: #475569;
    --tw-prose-headings: #1e293b;
    --tw-prose-links: #1e293b;
}

.prose-slate p {
    margin-bottom: 1em;
}

.prose-slate p:last-child {
    margin-bottom: 0;
}

.prose-slate ul,
.prose-slate ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.prose-slate li {
    margin: 0.5em 0;
}

.prose-slate a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose-slate a:hover {
    text-decoration-color: #94a3b8;
}

/* ========================================
   レスポンシブ調整
   ======================================== */

/* ビューポートのデフォルト(PC) */
.frame-lightbox-viewport {
    top: 70px;
    bottom: 60px;
}

/* PC - 複数画像時はサムネイルストリップ分の余白 */
.frame-lightbox-viewport.has-multiple-images {
    bottom: 130px;
}

/* スマホ用ビューポート */
@media (max-width: 640px) {
    .gallery-main {
        aspect-ratio: 1 / 1;
    }
    
    /* モバイルではビューポート調整 - 新UI対応 */
    /* 単一画像時: ズームコントロールパネル分 */
    .frame-lightbox-viewport {
        top: 50px;
        bottom: 100px;
    }
    
    /* 複数画像時: サムネイルストリップ + ズームコントロール分 */
    .frame-lightbox-viewport.has-multiple-images {
        bottom: 140px;
    }
}

/* タブレット */
@media (min-width: 641px) and (max-width: 1023px) {
    .frame-lightbox-viewport {
        top: 70px;
        bottom: 80px;
    }
}

@media (min-width: 1024px) {
    .gallery-main {
        aspect-ratio: 1 / 1;
    }
}

/* スマホ用ズームボタンの無効状態 */
#frame-zoom-in-btn-mobile:disabled,
#frame-zoom-out-btn-mobile:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* PC表示時はスマホ用UIを確実に非表示 */
@media (min-width: 640px) {
    #frame-lightbox-mobile-header {
        display: none !important;
    }
}

/* セーフエリア対応(iPhoneノッチ等) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ========================================
   アクセシビリティ
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .page-fade-in,
    .lightbox-image,
    .gallery-main img,
    [data-thumbnail],
    .spec-item,
    .spec-item::before,
    .frame-lightbox-overlay,
    #frame-lightbox-image,
    #frame-navigator-rect {
        animation: none;
        transition: none;
    }
}

/* フォーカス表示 */
[data-main-image]:focus {
    outline: 2px solid #1e293b;
    outline-offset: 2px;
}

[data-lightbox-close]:focus,
[data-lightbox-prev]:focus,
[data-lightbox-next]:focus,
[data-dot-index]:focus,
#frame-lightbox-close:focus,
[data-frame-lightbox-prev]:focus,
[data-frame-lightbox-next]:focus,
[data-strip-index]:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* ========================================
   ホバーエフェクト強化
   ======================================== */
/* メイン画像のホバーグロー効果 */
.gallery-main {
    position: relative;
    isolation: isolate;
}

.gallery-main::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 
        0 0 0 1px rgba(30, 41, 59, 0.1),
        0 20px 25px -5px rgba(0, 0, 0, 0.05),
        0 8px 10px -6px rgba(0, 0, 0, 0.05);
    pointer-events: none;
}

.gallery-main:hover::after {
    opacity: 1;
}

/* カード型関連商品のホバー */
[data-carousel] article {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-carousel] a:hover article {
    transform: translateY(-4px);
}

/* ========================================
   ローディング状態
   ======================================== */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   ユーティリティ
   ======================================== */
/* スクロール時のスムーズさ */
html {
    scroll-behavior: smooth;
}

/* タッチデバイスでのタップハイライト無効化 */
[data-thumbnail],
[data-main-image],
[data-lightbox-close],
[data-lightbox-prev],
[data-lightbox-next],
[data-dot-index],
[data-carousel-prev],
[data-carousel-next],
#frame-lightbox-close,
[data-frame-lightbox-prev],
[data-frame-lightbox-next],
[data-strip-index],
#frame-zoom-in-btn,
#frame-zoom-out-btn,
#frame-zoom-fit-btn,
#frame-zoom-100-btn,
[data-gallery-arrow-left],
[data-gallery-arrow-right] {
    -webkit-tap-highlight-color: transparent;
}

/* 画像のドラッグ防止(Lightbox用) */
.lightbox-image,
#frame-lightbox-image {
    user-select: none;
    -webkit-user-drag: none;
}

/* サムネイルストリップのスクロールバー非表示 */
[data-strip-index] {
    scrollbar-width: none;
}

/* ========================================
   拒否アニメーション(JavaScript用)
   ======================================== */
.animate-reject {
    animation: shakeReject 0.4s ease-in-out;
}

/* ========================================
   ギャラリースワイプ矢印（モバイル＆デスクトップ対応）
   【修正】デスクトップでも複数画像がある場合は表示（ホバー時のみ）
   ======================================== */

/* ギャラリー矢印コンテナ */
.gallery-swipe-arrows {
    pointer-events: none;
    z-index: 10;
}

/* ギャラリー矢印ボタン */
.gallery-arrow {
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.gallery-arrow:active {
    transform: scale(0.9);
}

/* 矢印アイコンのアニメーション */
.gallery-arrow-icon {
    transition: transform 0.15s ease;
}

/* 左矢印のパルスアニメーション */
@keyframes galleryArrowPulseLeft {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-3px);
        opacity: 1;
    }
}

/* 右矢印のパルスアニメーション */
@keyframes galleryArrowPulseRight {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(3px);
        opacity: 1;
    }
}

/* 無効状態（端の画像の場合） */
.gallery-arrow.opacity-30 .gallery-arrow-icon {
    animation: none;
}

/* ========== モバイル用スタイル ========== */
@media (max-width: 639px) {
    .gallery-swipe-arrows {
        /* モバイルでは常に表示 */
        display: flex !important;
    }
    
    .gallery-arrow-left .gallery-arrow-icon {
        animation: galleryArrowPulseLeft 2s ease-in-out infinite;
    }
    
    .gallery-arrow-right .gallery-arrow-icon {
        animation: galleryArrowPulseRight 2s ease-in-out infinite;
    }
}

/* ========== デスクトップ用スタイル（ホバー時のみ表示） ========== */
@media (min-width: 640px) {
    /* 【修正】デスクトップでも表示（非表示ルールを削除） */
    .gallery-swipe-arrows {
        display: flex !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    /* ギャラリーメイン画像をホバー時に矢印を表示 */
    .gallery-main:hover .gallery-swipe-arrows {
        opacity: 1;
    }
    
    /* デスクトップ用矢印スタイル - 大きめで見やすく */
    .gallery-arrow {
        width: 2.5rem;
        height: 2.5rem;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .gallery-arrow:hover {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: scale(1.05);
    }
    
    .gallery-arrow:active {
        transform: scale(0.95);
    }
    
    .gallery-arrow .gallery-arrow-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    /* デスクトップではアニメーションを停止（ホバー時は静的） */
    .gallery-arrow-left .gallery-arrow-icon,
    .gallery-arrow-right .gallery-arrow-icon {
        animation: none;
    }
    
    /* ホバー時のアイコンアニメーション */
    .gallery-arrow:hover .gallery-arrow-icon {
        transform: scale(1.1);
    }
    
    /* 無効状態の矢印 */
    .gallery-arrow.opacity-30 {
        opacity: 0.3 !important;
        cursor: default;
    }
    
    .gallery-arrow.opacity-30:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

/* フォーカス時のスタイル */
.gallery-arrow:focus-visible {
    outline: 2px solid #1e293b;
    outline-offset: 2px;
}

/* ========================================
   Lightbox サムネイルストリップ矢印
   ======================================== */

.lightbox-strip-container {
    position: relative;
}

.lightbox-strip-track {
    /* スクロールバー非表示（scrollbar-hideクラスと併用） */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.lightbox-strip-track::-webkit-scrollbar {
    display: none;
}

/* 矢印ボタン共通スタイル */
.lightbox-strip-arrow {
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    /* 背景を濃くして視認性向上 */
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 4px;
    /* 矢印を白くして見やすく */
    color: white !important;
}

/* 矢印アイコンにドロップシャドウを追加 */
.lightbox-strip-arrow svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    stroke-width: 2.5;
}

/* ホバー時のスタイル */
.lightbox-strip-arrow:hover {
    background: rgba(0, 0, 0, 0.85) !important;
    color: white !important;
}

/* コンテナホバー時に矢印表示 */
.lightbox-strip-container:hover .lightbox-strip-arrow {
    opacity: 1;
}

/* スクロール可能な場合のみ矢印を表示 */
.lightbox-strip-arrow.hidden {
    display: none !important;
}

/* 左端/右端到達時の透明度 */
.lightbox-strip-arrow.at-edge {
    opacity: 0.3 !important;
    pointer-events: none;
}

/* タッチデバイスでは常に表示 */
@media (hover: none) {
    .lightbox-strip-arrow {
        opacity: 0.9;
    }
    
    .lightbox-strip-arrow.at-edge {
        opacity: 0.3 !important;
    }
}