/* AI Warrant page — Tailwind handles layout/typography; keep stateful & complex rules here */

#ai_warrant {
    --ai-banner-height: 250px;
    --ai-chevron-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 8L12 16L5 8' stroke='%231A7B99' stroke-width='1.5' stroke-linejoin='round' /%3E%3C/svg%3E");
}

/* ─── Hero banner (transitions & bg image) ─── */
#ai_warrant .ai_warrant_banner_slider,
#ai_warrant .ai_warrant_banner_panels,
#ai_warrant .ai_warrant_banner_slide,
#ai_warrant .ai_warrant_banner_slide_container,
#ai_warrant .ai_warrant_banner_inner {
    height: var(--ai-banner-height);
}

#ai_warrant .ai_warrant_banner_panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    z-index: 0;
}

#ai_warrant .ai_warrant_banner_panel.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/*#ai_warrant .ai_warrant_banner_visual {
    background-image: url(../images/img_ai_hub.png);
}*/

#ai_warrant .ai_warrant_banner_copy_panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

#ai_warrant .ai_warrant_banner_copy_panel.active {
    opacity: 1;
    visibility: visible;
}

#ai_warrant .ai_warrant_banner_copy_panel:not(.active) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#ai_warrant .banner_content_group {
    max-width: calc(100% - 520px);
}

@media (max-width: 767px) {
    #ai_warrant .ai_warrant_banner_area {
        padding: 24px 0;
    }

    #ai_warrant .ai_warrant_banner_slider {
        height: auto;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #ai_warrant .ai_warrant_banner_panels {
        height: auto;
        position: relative;
        order: 2;
    }

    #ai_warrant .ai_warrant_banner_panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        height: auto;
        transition: opacity 0.45s ease, visibility 0.45s ease;
    }

    #ai_warrant .ai_warrant_banner_panel.active {
        position: relative;
        opacity: 1;
        visibility: visible;
    }

    #ai_warrant .ai_warrant_banner_slide,
    #ai_warrant .ai_warrant_banner_slide_container {
        height: auto;
        position: relative;
    }

    #ai_warrant .ai_warrant_banner_visual {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        top: auto;
        right: auto;
    }

    #ai_warrant .ai_warrant_banner_inner {
        position: relative;
        height: auto;
        order: 1;
        padding: 0 16px;
    }

    #ai_warrant .banner_content_group {
        max-width: 100%;
        height: auto;
    }

    #ai_warrant .ai_warrant_banner_copy_stack {
        position: relative;
        width: 100%;
    }

    #ai_warrant .ai_warrant_banner_copy_panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        height: auto;
    }

    #ai_warrant .ai_warrant_banner_copy_panel.active {
        position: relative;
        opacity: 1;
        visibility: visible;
    }



}

#ai_warrant .banner_dot {
    transition: width 0.25s ease, background-color 0.25s ease;
}

#ai_warrant .banner_dot.active {
    width: 14px;
    background-color: #1A7B99;
}

#ai_warrant .banner_dot:hover {
    background-color: #1A7B99;
    opacity: 0.85;
}

/* ─── Anchor tab bar (active states & icons) ─── */
#ai_warrant .ai_warrant_anchor_tab {
    transition: background-color 0.2s ease, color 0.2s ease;
}

#ai_warrant .ai_warrant_anchor_tab:last-child {
    border-right: none;
}

#ai_warrant .ai_warrant_anchor_tab:hover:not(.active) {
    background-color: #F5F7F8;
}

#ai_warrant .ai_warrant_anchor_tab.active {
    background-color: #1A7B99;
    color: #FFFFFF;
}

#ai_warrant .anchor_tab_icon_ai {
    background-image: url(../images/icon_anchor_AI.svg);
}

#ai_warrant .anchor_tab_icon_trend {
    background-image: url(../images/icon_anchor_chart.svg);
}

#ai_warrant .anchor_tab_icon_rocket {
    background-image: url(../images/icon_anchor_labeltop.svg);
}

#ai_warrant .anchor_tab_icon_hot {
    background-image: url(../images/icon_anchor_fire.svg);
}

#ai_warrant .anchor_tab_icon_learn {
    background-image: url("../images/icon_anchor_Q&A.svg");
}

#ai_warrant .ai_warrant_anchor_tab.active .anchor_tab_icon {
    filter: brightness(0) invert(1);
}

@media (max-width: 1024px) {
    #ai_warrant .ai_warrant_anchor_tab.active {
        color: #31373D !important;
    }

    #ai_warrant .ai_warrant_anchor_tab .anchor_tab_icon,
    #ai_warrant .ai_warrant_anchor_tab.active .anchor_tab_icon {
        filter: brightness(0) invert(0);
    }
}

/* ─── Tab 1: sector cards & index compare ─── */
#ai_warrant .ai_sector_card_icon,
#ai_warrant .ai_index_compare_icon {
    display: block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#ai_warrant .ai_sector_icon_chip {
    background-image: url(../images/icon_ai_chip.svg);
}

#ai_warrant .ai_sector_icon_robot {
    background-image: url(../images/icon_ai_robot.svg);
}

#ai_warrant .ai_sector_icon_chat {
    background-image: url(../images/icon_ai_chat.svg);
}

#ai_warrant .ai_sector_icon_stethoscope {
    background-image: url(../images/icon_ai_stethoscope.svg);
}

#ai_warrant .ai_index_compare_icon {
    background-image: url(../images/icon_ai_group.svg);
}

#ai_warrant .sort_icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#ai_warrant .sort_icon_rise {
    background-image: url(../images/icon_ai_topgainer.svg);
}

#ai_warrant .sort_icon_drop {
    background-image: url(../images/icon_ai_toplaggards.svg);
}

#ai_warrant .type_btn.active .sort_icon {
    filter: brightness(0) invert(1);
}

#ai_warrant .ai_sector_data_table th {
    font-weight: 400;
    color: #5A5F64;
    padding: 12px 8px;
    background-color: #F5F7F8;
    border-bottom: 1px solid #DFDFE0;
    text-align: left;
}

#ai_warrant .ai_sector_data_table .ai_sector_col_jpm {
    width: 1%;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    text-align: left;
    vertical-align: middle;
}

#ai_warrant .ai_sector_col_jpm_line {
    display: block;
}

#ai_warrant .ai_sector_data_table td {
    padding: 12px 8px;
    border-bottom: none;
    font-weight: 600;
    vertical-align: middle;
}

#ai_warrant .ai_sector_data_table td:nth-child(2) {
    border-left: 1px solid #DFDFE0;
    padding-left: 0;
}

#ai_warrant .ai_sector_card.is-expanded .ai_sector_data_table tbody tr:last-child td {
    border-bottom: 1px solid #DFDFE0;
}

#ai_warrant .ai_sector_data_table tbody tr.ai_sector_row_extra {
    display: none;
}

#ai_warrant .ai_sector_card.is-expanded .ai_sector_data_table tbody tr.ai_sector_row_extra {
    display: table-row;
}

#ai_warrant .ai_sector_card:not(.is-expanded) .ai_sector_card_toggle::before,
#ai_warrant .ai_index_compare_card:not(.is-expanded) .ai_sector_card_toggle::before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 100%;
    height: 40px;
    background: linear-gradient(to top, #FFFFFF, transparent);
    pointer-events: none;
    z-index: 1;
}

#ai_warrant .ai_sector_card:not(.is-expanded) .ai_sector_card_toggle,
#ai_warrant .ai_index_compare_card:not(.is-expanded) .ai_sector_card_toggle {
    position: relative;
}

#ai_warrant .ai_sector_toggle_icon {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

#ai_warrant .ai_sector_card.is-expanded .ai_sector_toggle_icon,
#ai_warrant .ai_index_compare_card.is-expanded .ai_sector_toggle_icon {
    transform: rotate(-90deg);
}

#ai_warrant .rise,
#ai_warrant .drop {
    color: #31373D;
}

#ai_warrant .ai_change_cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 160px;
}

@media (max-width: 767px) {

    #ai_warrant .ai_sector_data_table td,
    #ai_warrant .ai_sector_data_table th {
        padding: 8px;
    }

    #ai_warrant .ai_change_cell {
        min-width: 140px;
    }
}

#ai_warrant .ai_change_track {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 24px;
    background: none;
    border-radius: 0;
    flex-shrink: 0;
}

#ai_warrant .ai_change_track .rise,
#ai_warrant .ai_change_track .drop {
    flex-shrink: 0;
    white-space: nowrap;
}

#ai_warrant .ai_change_fill {
    height: 24px;
    min-width: 2px;
    border-radius: 0;
    flex-shrink: 0;
}

#ai_warrant .ai_change_rise .ai_change_fill {
    background-color: #0A6A17;
}

#ai_warrant .ai_change_drop .ai_change_fill {
    background-color: #AE0000;
}

#ai_warrant .ai_index_compare_table .bar {
    height: 24px;
}

@media (max-width: 767px) {

    #ai_warrant .ai_index_compare_table .focus-items>a:nth-child(2) {
        display: none !important;
    }

    .ai_active_treemap_legend_bar {
        width: calc(100% - 125px);
    }
}

#ai_warrant .ai_index_compare_table .ai_index_compare_hidden .bar_area span {
    display: none;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar_area span,
#ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area span {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 70px;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar {
    background-color: #0A6A17;
}


#ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar_area span {
    right: -75px;
    text-align: left;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area>div {
    float: right;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area span {
    left: -75px;
    text-align: right;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar {
    background-color: #AE0000;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar_area {
    padding-left: 0;
    padding-right: 0;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar_area span {
    margin-left: 8px;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area span {
    margin-right: 8px;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area {
    padding-left: 0;
    padding-right: 0;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area>div {
    flex-direction: row-reverse;
}

#ai_warrant .ai_index_compare_table .bar_area .rise,
#ai_warrant .ai_index_compare_table .bar_area .drop {
    color: #31373D;
}

#ai_warrant #ai_index_compare_chart th.ai_index_compare_asset_col {
    border-left: none;
    border-right: none;
}

#ai_warrant #ai_index_compare_chart td.ai_index_compare_asset_col {
    border-left: 1px solid #DFDFE0;
    border-right: 1px solid #DFDFE0;
}

#ai_warrant #ai_index_compare_chart.ai_index_compare_table {
    isolation: isolate;
    border-bottom: none;
}

#ai_warrant .ai_index_compare_card.is-expanded #ai_index_compare_chart.ai_index_compare_table {
    margin-bottom: 42px;
    border-bottom: 1px solid #DFDFE0;
}

@media (max-width: 1023px) {
    #ai_warrant .ai_index_compare_card.is-expanded #ai_index_compare_chart.ai_index_compare_table {
        margin-bottom: 0;
    }
}

#ai_warrant .ai_index_compare_table .ai_index_compare_chart_axis {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#ai_warrant #ai_index_compare_chart .ai_index_compare_chart_axis {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

#ai_warrant .ai_index_compare_card:not(.is-expanded) #ai_index_compare_chart .ai_index_compare_chart_axis {
    line-height: 0;
    font-size: 0;
    color: transparent;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_chart_axis ul {
    height: 100%;
    width: calc(35% + 20px);
    justify-content: space-between;
    margin: 0 0 0 -10px;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_chart_axis ul li .line {
    background: #efeff0;
    width: 1px;
    margin: 0 auto;
    height: 100%;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_chart_axis ul li {
    width: 20px;
}

#ai_warrant .ai_index_compare_table .ai_index_compare_chart_axis ul.positive {
    margin-left: calc(15% - 20px);
}

#ai_warrant #ai_index_compare_chart>table {
    position: relative;
    z-index: 1;
    background-color: transparent;
}

#ai_warrant #ai_index_compare_chart thead th {
    background-color: #F5F7F8;
}

#ai_warrant #ai_index_compare_chart tbody td {
    background-color: transparent;
}

#ai_warrant #ai_index_compare_chart tbody td:last-child {
    background-color: #FAF8F2;
}

#ai_warrant .ai_index_compare_card tbody tr.ai_index_compare_row_extra {
    display: none;
}

#ai_warrant .ai_index_compare_card.is-expanded tbody tr.ai_index_compare_row_extra {
    display: table-row;
}

/* ─── Tab 2: trend legend dots ─── */
#ai_warrant .ai_trend_legend_dot_hstech {
    background-color: #1A7B99;
}

#ai_warrant .ai_trend_legend_dot_hsi {
    background-color: #E38524;
}

#ai_warrant .ai_trend_legend_dot_hscei {
    background-color: #31373D;
}

/* ─── Tab 3: express table ─── */
#ai_warrant #ai_express_table tbody tr:last-child td {
    border-bottom: 1px solid #DFDFE0;
}

/* ─── Tab 4: treemap flex ratios & tiers ─── */
#ai_warrant .ai_active_treemap_cell--1 {
    flex: 2442 1 0;
    min-width: 0;
}

#ai_warrant .ai_active_treemap_upper_right {
    flex: 4528 1 0;
    min-width: 0;
}

#ai_warrant .ai_active_treemap_cell--2 {
    flex: 1526 1 0;
}

#ai_warrant .ai_active_treemap_cell--3 {
    flex: 1231 1 0;
}

#ai_warrant .ai_active_treemap_cell--4 {
    flex: 973 1 0;
}

#ai_warrant .ai_active_treemap_cell--5 {
    flex: 788 1 0;
}

#ai_warrant .ai_active_treemap_lower {
    flex: 2229 1 0;
    min-height: 0;
}

#ai_warrant .ai_active_treemap_cell--6 {
    flex: 687 1 0;
}

#ai_warrant .ai_active_treemap_cell--7 {
    flex: 452 1 0;
}

#ai_warrant .ai_active_treemap_cell--8 {
    flex: 424 1 0;
}

#ai_warrant .ai_active_treemap_cell--9 {
    flex: 338 1 0;
}

#ai_warrant .ai_active_treemap_cell--10 {
    flex: 328 1 0;
}

#ai_warrant .ai_active_treemap_cell--tier-1 {
    background-color: #005075;
}

#ai_warrant .ai_active_treemap_cell--tier-2 {
    background-color: #1A7B99;
}

#ai_warrant .ai_active_treemap_cell--tier-3 {
    background-color: #2B9AB3;
}

#ai_warrant .ai_active_treemap_cell--tier-4 {
    background-color: #6BC0CA;
    color: #31373D;
}

#ai_warrant .ai_active_treemap_cell--tier-5 {
    background-color: #9DE5EC;
    color: #31373D;
}

#ai_warrant .ai_active_treemap_cell--tier-6 {
    background-color: #D5EBF0;
    color: #31373D;
}

#ai_warrant .ai_active_treemap_cell:hover {
    z-index: 4;
    overflow: visible;
}

#ai_warrant .ai_active_treemap_tooltip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    min-width: 200px;
    padding: 16px;
    border-radius: 8px;
    background-color: #FAF8F2;
    color: #31373D;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translate(-50%, 12px);
    pointer-events: none;
    white-space: nowrap;
}

#ai_warrant .ai_active_treemap_tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FAF8F2;
}

#ai_warrant .ai_active_treemap_tooltip_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DFDFE0;
    font-size: 18px;
    font-weight: 600;
}

#ai_warrant .ai_active_treemap_tooltip_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#ai_warrant .ai_active_treemap_tooltip_row>span:last-child {
    font-weight: 600;
}

#ai_warrant .ai_active_treemap_tooltip_row+.ai_active_treemap_tooltip_row {
    margin-top: 4px;
}

#ai_warrant .ai_active_treemap_cell.is-tooltip-visible .ai_active_treemap_tooltip {
    display: block;
}

#ai_warrant #ai_active_table thead th {
    height: 44px;
    box-sizing: border-box;
    vertical-align: middle;
}

#ai_warrant #ai_active_table tbody td {
    height: 64px;
    box-sizing: border-box;
    vertical-align: middle;
}

#ai_warrant #ai_active_table tbody tr.ai_active_row_top td {
    background-color: #FAF8F2;
}

#ai_warrant #ai_active_table thead th:first-child,
#ai_warrant #ai_active_table tbody td:first-child {
    position: static;
    width: 72px;
    border-right: none;
}

#ai_warrant #ai_active_table thead tr:first-child th::before,
#ai_warrant #ai_active_table thead th:first-child::after,
#ai_warrant #ai_active_table tbody td:first-child::after {
    display: none;
}

#ai_warrant #ai_active_table tbody tr:last-child td {
    border-bottom: 1px solid #DFDFE0;
}

/* ─── Tab 5: FAQ & subscribe ─── */
#ai_warrant .ai_learn_faq_icon {
    background-image: var(--ai-chevron-icon);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

#ai_warrant .ai_learn_faq_item.is-open {
    background-color: #F5F7F8;
    overflow: visible;
}

#ai_warrant .ai_learn_faq_item.is-open .ai_learn_faq_trigger {
    background-color: transparent;
}

#ai_warrant .ai_learn_faq_item.is-open .ai_learn_faq_icon {
    transform: rotate(180deg);
}

#ai_warrant .ai_learn_faq_panel {
    display: none;
}

#ai_warrant .ai_learn_faq_item.is-open .ai_learn_faq_panel {
    display: block;
    background-color: transparent;
}

#ai_warrant .ai_learn_subscribe_top::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 190px;
    height: calc(190px * 130 / 200);
    background-image: url(../images/img_banner_subscribe.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 190px auto;
    pointer-events: none;
}

#ai_warrant .ai_learn_subscribe_input::placeholder {
    color: #83878B;
}

/* anchor nav 凍結 */
.ai_warrant_anchor_area.is-scrolled {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 7;
}

/*money flow*/

@media (max-width: 1023px) {
    #ai_warrant .ai_index_compare_table .bar_area,
    #ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar_area,
    #ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        padding: 6px 0;
    }

    #ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar_area span,
    #ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area span { 
        position: unset;
        transform: unset;
        width: 100%;
    }

    #ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area {
        flex-direction: row-reverse;
    }

    #ai_warrant #ai_index_compare_chart tbody td {
        padding: 6px 0;
    }

    #ai_warrant #ai_index_compare_chart .ai_index_compare_asset_col  {
        padding: 6px 3px;
        width: 25%;
    }
    #ai_warrant .ai_index_compare_table .ai_index_compare_drop .bar_area span {
        margin-right: 0;
    }
    #ai_warrant .ai_index_compare_table .ai_index_compare_rise .bar_area span {
        margin-left: 0;
    }
}