/* ===== Klaro Cookie Banner - Japan Official ===== */

/* 底部横幅 */
.klaro .cookie-notice {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #1a1a1a !important;
    border-radius: 0 !important;
    border-top: 1px solid #333 !important;
    padding: 20px 40px !important;
    z-index: 99999 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3) !important;
}

.klaro .cookie-notice .cn-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.klaro .cookie-notice .cn-body > p {
    color: #ccc !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

/* 设定管理链接样式 */
.klaro .cookie-notice .cn-body .cn-learn-more {
    background: transparent !important;
    color: #aaa !important;
    border: 1px solid #555 !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-decoration: none !important;
    transition: border-color 0.2s, color 0.2s !important;
}

.klaro .cookie-notice .cn-body .cn-learn-more:hover {
    border-color: #888 !important;
    color: #fff !important;
}

/* 按钮行：靠右排列 */
.klaro .cookie-notice .cn-buttons {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* 設定を管理する（cn-learn-more 移入后） */
.klaro .cookie-notice .cn-buttons .cn-learn-more {
    background: transparent !important;
    color: #aaa !important;
    border: 1px solid #555 !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-decoration: none !important;
    transition: border-color 0.2s, color 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    box-sizing: border-box !important;
}

.klaro .cookie-notice .cn-buttons .cn-learn-more:hover {
    border-color: #888 !important;
    color: #fff !important;
}

/* 全部承認 */
.klaro .cookie-notice .cm-btn.cm-btn-success {
    background: #fff !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    height: 40px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    transition: background 0.2s !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
    background: #e8e8e8 !important;
}

/* 拒否 */
.klaro .cookie-notice .cm-btn.cm-btn-danger {
    background: transparent !important;
    color: #aaa !important;
    border: 1px solid #555 !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    height: 40px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    transition: border-color 0.2s, color 0.2s !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover {
    border-color: #888 !important;
    color: #fff !important;
}


.klaro .cookie-modal {
    font-family: 'Noto Sans JP', sans-serif !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.5) !important;
}

/* 禁止 modal 自带的灰色遮罩层重叠 */
.klaro .cookie-modal .cm-bg,
.klaro .cm-bg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
}

/* 隐藏 poweredBy */
.klaro .cookie-modal .cm-footer .cm-powered-by,
.klaro .cm-powered-by {
    display: none !important;
}

.klaro .cookie-modal .cm-modal {
    background: #fff !important;
    border-radius: 12px !important;
    max-width: 560px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    position: relative !important;
}

/* 中间内容区独立滚动 */
.klaro .cookie-modal .cm-modal .cm-body {
    overflow-y: auto !important;
    flex: 1 !important;
    padding: 20px 32px 0 32px !important;
}

/* header：只有 logo（左）+ 关闭（右），单行 */
.klaro .cookie-modal .cm-modal .cm-header {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 12px 12px 0 0 !important;
    background: #fff !important;
    position: relative !important;
}

/* h1/p 在 header 里，视觉隐藏，靠 JS 克隆到 body 顶部显示 */
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header p {
    display: none !important;
}

/* logo 左对齐 */
.klaro .cookie-modal .cm-modal .cm-header .klaro-modal-logo {
    height: 24px !important;
    width: auto !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* 关闭按钮推到最右 */
.klaro .cookie-modal .cm-modal .hide {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    position: static !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #666 !important;
    fill: #666 !important;
    padding: 0 !important;
    transition: color 0.15s !important;
}

/* body 顶部注入的标题/描述 */
.klaro .cookie-modal .cm-modal .cm-body .klaro-injected-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
}

.klaro .cookie-modal .cm-modal .cm-body .klaro-injected-desc {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.7 !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.klaro .cookie-modal .cm-modal .hide svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #666 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

.klaro .cookie-modal .cm-modal .hide:hover,
.klaro .cookie-modal .cm-modal .hide:hover svg {
    color: #1a1a1a !important;
    fill: currentColor !important;
    background: transparent !important;
}

.klaro .cookie-modal .cm-modal .hide:hover {
    color: #1a1a1a !important;
    background: transparent !important;
}

.klaro .cookie-modal .cm-modal .hide svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

/* cm-body 里 Klaro 原生的 h1/p 隐藏（内容已克隆到 injected 元素） */
.klaro .cookie-modal .cm-modal .cm-body h1.title,
.klaro .cookie-modal .cm-modal .cm-body > p:not(.klaro-injected-desc) {
    display: none !important;
}

/* ===== 服务列表 ===== */

/* 隐藏 checkbox — 只视觉隐藏，完全不干扰事件 */
.klaro .cookie-modal input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

/* ul.cm-purposes */
.klaro .cookie-modal .cm-purposes {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* li.cm-purpose 每行 */
.klaro .cookie-modal .cm-purposes .cm-purpose {
    border-top: 1px solid #eee !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 隐藏 cm-caret（加减号 + 「1 サービス」文字） */
.klaro .cookie-modal .cm-caret {
    display: none !important;
}

/* 标题行 label.cm-list-label：标题(左) | toggle/required(右) */
.klaro .cookie-modal .cm-purposes .cm-purpose > label.cm-list-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px 0 !important;
    gap: 12px !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 分类名称 span.cm-list-title */
.klaro .cookie-modal .cm-purposes .cm-purpose > label.cm-list-label .cm-list-title {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    min-width: 0 !important;
}

/* toggle 推到右侧 */
.klaro .cookie-modal .cm-purposes .cm-purpose > label.cm-list-label .cm-switch {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* required 文字（常に有効） */
.klaro .cookie-modal .cm-required {
    font-size: 12px !important;
    color: #888 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* required item：隐藏 toggle，只显示文字 */
.klaro .cookie-modal label.cm-list-label .cm-required ~ .cm-switch {
    display: none !important;
}

/* 隐藏子 service 列表 — 每个 purpose 只显示一行 */
.klaro .cookie-modal .cm-purposes .cm-purpose .cm-services {
    display: none !important;
}

/* 隐藏「用途: xxx」行，保留 cm-list-description 描述 */
.klaro .cookie-modal .cm-purposes .cm-purpose p.purposes {
    display: none !important;
}

/* purpose 描述文字 */
.klaro .cookie-modal .cm-purposes .cm-purpose .cm-list-description {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #666 !important;
    line-height: 1.7 !important;
    margin: 0 0 12px 0 !important;
}

/* 隐藏 disableAll 行（すべて無効にする）*/
.klaro .cookie-modal .cm-toggle-all {
    display: none !important;
}

/* Toggle 开关 — 强制隔离，防止被全局 .slider 污染 */
.klaro .cookie-modal .cm-switch {
    position: relative !important;
    display: inline-block !important;
    width: 40px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

.klaro .cookie-modal .cm-switch .slider {
    position: absolute !important;
    cursor: pointer !important;
    inset: 0 !important;
    width: 40px !important;
    height: 22px !important;
    background: #ccc !important;
    border-radius: 22px !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    transform: none !important;
    /* 重置全局 .slider 可能带来的任何属性 */
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.klaro .cookie-modal .cm-switch .slider::before {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    left: 3px !important;
    bottom: 3px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform 0.2s !important;
    transform: translateX(0) !important;
    /* 重置全局可能的 ::before 样式 */
    border: none !important;
    box-shadow: none !important;
}

/* Klaro 通过 input:checked 控制 toggle 视觉状态，slider 上的 .active 是固定 class 不代表 checked 状态 */
.klaro .cookie-modal .cm-list-input:checked ~ label .cm-switch .slider,
.klaro .cookie-modal .cm-list-input.cm-list-input:checked + label .cm-switch .slider {
    background: #1a1a1a !important;
}

.klaro .cookie-modal .cm-list-input:checked ~ label .cm-switch .slider::before,
.klaro .cookie-modal .cm-list-input:checked + label .cm-switch .slider::before {
    transform: translateX(18px) !important;
}

/* 弹窗底部按钮 */
.klaro .cookie-modal .cm-footer {
    border-top: 1px solid #eee !important;
    margin-top: 0 !important;
    padding: 20px 32px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-success {
    background: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 0 5px !important;
}

.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-success:hover {
    background: #333 !important;
}

.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-danger {
    background: transparent !important;
    color: #666 !important;
    border: 1px solid #ddd !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    margin: 0 5px !important;
}

.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-danger:hover {
    border-color: #999 !important;
    color: #1a1a1a !important;
}

/* 遮罩层 */
.klaro .cookie-modal-overlay {
    background: rgba(0,0,0,0.5) !important;
}

/* 链接颜色 */
.klaro a.klaro-link {
    color: #fff !important;
    text-decoration: underline !important;
}

/* 响应式 */
@media (max-width: 768px) {
    .klaro .cookie-notice {
        padding: 16px !important;
    }
    .klaro .cookie-notice .cn-body {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .klaro .cookie-notice .cn-buttons {
        width: 100% !important;
    }
}