/**
 * カスタムスタイル - style.css の上書き
 * 変更履歴を明確にするため、修正点はこのファイルに記述
 */

/* ==========================================================================
   スライダー位置調整
   ========================================================================== */

/**
 * プログレスバーの位置を右寄せに変更
 * - left: auto と right: 0 を追加
 */
.top-fv__inner .top-fv-slide-contaier .top-fv-slide .slider__progress {
    left: auto;
    right: 0;
    @media screen and (max-width: 767px) {
        left: 20px;
        right: auto;
        max-width: calc(100% - 40px);
        width: calc(100% - 40px);
    }
}

/**
 * ナビゲーションボタンの位置を右から左に変更
 * - right: 40px → left: 40px
 */
.top-fv__inner .top-fv-slide-contaier .top-fv-slide .slider__nav {
    right: auto;
    left: 40px;

    @media screen and (max-width: 767px) {
        display: none;
    }
}

/**
 * ナビゲーションボタンの位置を左から右に変更
 * - right: 40px → left: 40px
 */
.top .top-case__inner .top-case-contents .swiper-top-case .slider__nav {
    right: auto;
    left: 40px;
    @media screen and (max-width: 767px) {
        display: none;
    }
}

/**
 * プログレスバーの位置を右寄せに変更
 * - left: auto と right: -20px を追加
 */
.top .top-case__inner .top-case-contents .swiper-top-case .slider__progress {
    left: auto;
    right: -20px;
    @media screen and (max-width: 767px) {
        left: 0px;
        right: auto;
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================================================
   導入事例セクション - タグスタイル
   ========================================================================== */

/**
 * タグコンテナ
 * - 横並び、8pxの間隔
 */
.top-case-card__data--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/**
 * タグ個別スタイル
 * - 枠線付き、角丸、12pxフォント
 */
.top-case-card__data--tags .case-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 100px;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .top-case-card__data--tags {
        gap: 6px;
        margin-top: 8px;
    }

    .top-case-card__data--tags .case-tag {
        padding: 3px 10px;
        font-size: 10px;
    }
}