@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;

    font-family: "Noto Sans JP", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
}

a,
a:hover,
a:visited {
    color: inherit;
}

html {
    scroll-behavior: smooth;
}

:root {
    --theme_color: #e50000;
    --theme_color_rgb: 229, 0, 0;
    --sub_color: #ececec;
    --table_index_color: #333;
    --table_row_color: #ffffffdc;
    --base_color: #ffffff;
    --sub_font: #858585;
    --dark_w__light_b: #333;
    --top_card_color: #fdfdfd;
}

body {
    min-height: 100svh;
    position: relative;
    overflow-x: hidden;
    /* overflow: hidden; */
    /* background: rgb(1, 53, 21); */
    /* scroll-snap-type: y proximity;
    height: 100svh;
    overflow: auto; */
}

.container {
    width: 100%;
    height: 100%;
    padding: 0 min(2%, 16px);
    display: flex;
    align-items: center;
}

/*-------loading------  */
.loading {
    width: 100%;
    height: 100vh;
    background: #fff;
    align-content: center;
    text-align: center;
    position: absolute;
    inset: 0;
    z-index: 99999;
}
.loading > img {
    width: 40%;
    max-width: 300px;
    user-select: none;
    animation: loading_anime 1.2s infinite alternate;
}
/*
@keyframes loading_anime {
    0% {
        opacity: 0.1;
        scale: 1;
    }
    100% {
        opacity: 1;
        scale: 1.08;
    }
}*/

@keyframes loading_anime {
    0% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

/* ---- */

/* ------------header-------------- */
header {
    width: 100%;
    height: 50px;
    padding: 5px 0;
    /* background: var(--theme_color); */
    box-shadow: 0px 2px 4px #00000029;
    position: relative;
    z-index: 800;
    /* position: sticky;
    top: 0; */
}

header > .container {
    max-width: none;
}

.header_logo {
    height: 30px;
    width: fit-content;
    padding-right: 24px;
    /* width: 100%; */
    /* background: url("../img/KIREI_produce_logo_margin.png") no-repeat center center;
    background-size: contain; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;

    & > a {
        display: block;
        margin-block: auto;
    }
    & > a > img {
        height: 30px;
        vertical-align: bottom;
    }
}

/* .burger {
    width: 30px;
    height: 30px;
    background: url("../img/KP_logo_bunny.png") no-repeat center center;
    background-size: contain;
    cursor: pointer;
    transition: transform 0.6s;
} */

.header_scroll {
    background: #ffffff49;
    /* background: rgba(var(--theme_color_rgb), 0.4); */
    backdrop-filter: blur(1px);
    box-shadow: 0px 2px 4px #00000000;
    position: fixed;
    top: 0;
    animation: scroll_anime 0.3s;
}

@keyframes scroll_anime {
    0% {
        opacity: 0;
        top: -50%;
    }
    /* 90% {
        opacity: 0.5;
      } */
    100% {
        opacity: 1;
        top: 0;
    }
}

/* .burger_box {
  width: 40px;
  height: 40px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  padding: 3px 2px;
  transition: transform 0.6s;
}

.burger_logo {
  width: 100%;
  user-select: none;
} */

/* .burger_clicked.burger {
    transform: rotateY(720deg);
} */

/* ------- burger --------------------------------- */

.burger_box {
    height: 35px;
    width: 35px;
    /* background: #000; */
    padding: 4px;
    display: flex;
    /* display: none; */
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
}

.burger_bar {
    width: 90%;
    height: 4px;
    border-radius: 10px;
    background: var(--dark_w__light_b);
    transition: all 0.8s;
}

.burger_clicked > .burger_bar:nth-child(1) {
    /* background: #c42317; */
    transform: rotate(45deg) translate(7px, 6px);
    /* animation: burger_bar_1 1s; */
}
.burger_clicked > .burger_bar:nth-child(2) {
    /* background: #2490c2; */
    scale: 0;
    opacity: 0;
    /* animation: burger_bar_2 2s; */
}
.burger_clicked > .burger_bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
    /* animation: burger_bar_3 1s; */

    /* background: #e4e128; */
}

/* menu */
.burger_menu {
    /* display: none; */
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 750;
    width: 100%;
    /* 要調整 */
    max-width: 400px;
    transform: translateX(-100%);
    transition: transform 0.6s;
}

@media screen and (width < 745px) {
    .burger_menu {
        width: 100%;
        max-width: none;
    }
}

.burger_menu .menu_list {
    width: 100%;
    height: 100svh;
    background: #000000e1;
}

.burger_menu .menu_list_item {
    cursor: pointer;
    width: 100%;

    & > a {
        padding: 12px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
        height: 70px;
        font-size: 24px;
    }
    & > a:hover {
        background: color-mix(in srgb, rgba(var(--theme_color_rgb), 0.8), #000000e7 20%);
        transition: background 0.6s;
    }
    & > a > img {
        object-fit: contain;
        height: 40px;
    }
}

.list_visible {
    transform: translateX(0);
    transition: all 0.8s;
}

/* -- */
/* .wrapper {
    width: 100%;
    height: 100svh;
} */

.question_box {
    visibility: hidden;
    cursor: default;
    & > a {
        display: block;
    }
}
.fa-circle-question {
    font-size: 24px;
    color: var(--dark_w__light_b);
}

/* -------Hero------------ */
.hero {
    height: calc(100svh - 40px);
    width: 100%;
    background: #f03f3f;
    position: relative;
    /* margin-bottom: 40px; */
}

.hero > .container {
    display: grid;
    place-items: center;
}

.hero > .container > img {
    width: max(33%, 350px);
    max-width: 500px;
    border: 2px solid #fff;
}

.hero_arrow {
    position: absolute;
    bottom: 90px;
    left: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    & > a {
        display: block;
    }

    & > a > span > .fa-chevron-down {
        color: #fff;
    }
}

.hero_arrow > a > span {
    margin-top: -10px;
    animation: to_below_arrow 1.6s linear infinite alternate;
}

.hero_arrow > a > span:nth-child(1) {
    animation-delay: 0s;
}
.hero_arrow > a > span:nth-child(2) {
    animation-delay: 0.4s;
}
.hero_arrow > a > span:nth-child(3) {
    animation-delay: 0.8s;
}

.hero_arrow > a > span:nth-child(1) > .fa-chevron-down {
    font-size: 24px !important;
}
.hero_arrow > a > span:nth-child(2) > .fa-chevron-down {
    font-size: 26px !important;
}
.hero_arrow > a > span:nth-child(3) > .fa-chevron-down {
    font-size: 28px !important;
}

@keyframes to_below_arrow {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
}

/* ------main---------------------- */
main {
    width: 100%;
    /* min-height: calc(100svh - 40px - 50px - 10px); */
    min-height: calc(100svh - 50px - 50px);
    /* height: 100svh; */
    overflow: hidden;
    background: var(--sub_color);
    /* margin-top: 50px; */
}

main > .container {
    display: flex;
    flex-direction: column;
    text-wrap: wrap;
    z-index: -1;
}

.search_area {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sub_color);

    border-bottom: 2px solid #fff;
    z-index: 1;
}

.search_form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    --border_size: 2px;
    /* padding: 15px 0; */
    z-index: 1;
    position: relative;
}

.search_input_code {
    width: 90%;
    /* max-width: 500px; */
    font-size: 18px;
    height: 40px;
    padding: 2px 8px 1px 8px;
    background: #ffffff;
    backdrop-filter: blur(10px);
    /* box-shadow: 0px 2px 4px #00000029 inset; */
    /* backdrop-filter: invert(80%); */
    /* border: var(--theme_color) var(--border_size) solid; */
    border: none;
    border-bottom: 1px solid #fff;
    /* border: 1px solid #eee; */

    /* border-radius: 10px; */
    outline: none;
}

.input_container {
    height: 100%;
    max-width: 600px;
    width: 95%;
    margin-inline: auto;
    position: relative;
    display: flex;
    align-items: center;
}

#valid_msg {
    font-size: 16px !important;
    color: rgb(177, 16, 16);
    font-weight: 600;
    padding: 0 5px;
    opacity: 0;
    position: absolute;
    top: 7px;
}

.invalid {
    animation: valid_error 0.8s ease-out;
}

@keyframes valid_error {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(5%);
    }
    20% {
        transform: translateX(-3%);
    }
    30% {
        transform: translateX(3%);
    }
    40% {
        transform: translateX(-3%);
    }
    50% {
        transform: translateX(3%);
    }
    60% {
        transform: translateX(-3%);
    }
    70% {
        transform: translateX(3%);
    }
}

.input_wrapper {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    -webkit-appearance: none;
    border: var(--theme_color) 3px solid;
    background: #fff;
    border-radius: 10px;
}

.clear_btn_wrapper {
    visibility: hidden;
    cursor: pointer;
    height: 40px;
    display: flex;
    justify-content: center;
    margin: 0 8px 0 5px;
}

.clear_btn {
    height: 18px;
    margin: auto;
    color: #ccc;
    font-size: 20px;
}

.search_submit_btn {
    width: 15%;
    max-width: 35px;
    height: inherit;
    padding: 5px 0;
    /* background: var(--theme_color); */
    background: transparent;
    border-radius: 0 10px 10px 0;
    /* border: solid var(--border_size)
      color-mix(in srgb, var(--theme_color), #000 20%); */
    border: none;
    outline: none;
    cursor: pointer;

    & .fa-magnifying-glass {
        color: var(--theme_color);
        font-size: 22px;
        transition: rotate 1s;
    }
}

.glass_anime {
    rotate: 360deg;
    transition: rotate 1s;
}
/* --- */
.result_area {
    /* width: 100%; */
    /* background: #fff; */
    min-height: 20svh;
    display: flex;
    justify-content: center;
    position: relative;
}
.result_insert {
    width: 100%;
}

.result_insert > .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    /* background: var(--sub_color); */
    /* あえて分けてる↓ */
    padding-top: 20px;
    padding-bottom: 20px;
}

.info_search {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    position: absolute;
    bottom: -40px;
    left: 33%;
    opacity: 0;
    user-select: none;
}

.info_table {
    position: absolute;
    left: 10px;
    top: 120px;
    opacity: 0;
    user-select: none;
}

.tip {
    background: #000000cc;
    border-radius: 10px;
    color: #eee;
    padding: 5px 20px;
    position: relative;
}

.info_search > .tip::before {
    content: "";
    position: absolute;
    top: -14px;
    background: inherit;
    height: 15px;
    width: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.info_table > .tip::before {
    content: "";
    position: absolute;
    bottom: -20px;
    background: inherit;
    height: 20px;
    width: 15px;
    clip-path: polygon(0 0, 100% 0, 120% 100%);
}

/* --- */
/* [id*="tooltip"] {
    opacity: 0;
    background: #333;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
    position: relative;
    width: fit-content;
}

#tooltip::after {
    content: "";
    background: #333;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -10px;
} */

.tooltip[data-show] {
    /* display: block; */
    opacity: 1;
}

/* ---result--- */

.result_insert_text {
    width: 100%;
    min-height: 600px;
    color: #333;
    & > p {
        margin: 10px 0;
        color: #000;
        /* text-align: center; */
        padding: 0 2%;
    }
}

/* .top_page_container {
    padding: 20px min(4%, 24px);
    display: grid;
    gap: 20px; */
/* grid-template-columns: repeat(auto-fit, minmax(var(--top_card_size), 1fr)); */
/* grid-template-columns: repeat(3, 1fr); */
/* place-items: center;

    width: 100%;
    height: fit-content;
} */

:root {
    --top_card_h: 410px;
}

.top_card {
    /* background: var(--table_row_color); */
    background: var(--top_card_color);
    height: var(--top_card_h);
    width: 95%;
    max-width: 910px;
    border-radius: 10px;
    padding: 5px max(4%, 20px);
    align-content: center;
    box-shadow: 0px 2px 4px #00000029, 0px -2px 4px #f8f8f829;
    margin-bottom: 10px;
}

.top_card_header {
    padding: 15px 0 5px;
    height: 60px;
    & > h3 {
        font-size: 24px;
        font-weight: 900;
    }
}

.top_card_main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: calc(100% - 60px);
    & .top_card_main_img {
        width: 100%;
        height: 60%;
    }
    & p {
        height: 30%;
        width: 100%;
        padding: 0 18px;
    }
}

@media screen and (width < 1000px) {
    .result_insert_text > p {
        font-size: 16px;
    }
}

#top_card_main_img_1 {
    background: url("../img/step1.png") center no-repeat;
    background-size: contain;
}
#top_card_main_img_2 {
    background: url("../img/step2.png") center no-repeat;
    background-size: contain;
}
#top_card_main_img_3 {
    background: url("../img/step3.png") center no-repeat;
    background-size: contain;
}

.splide__list li {
    place-items: center;
    display: grid;
}

/* @media screen and (width < 1000px) {
    .top_page_container {
        grid-template-columns: repeat(1, 1fr);
        place-items: center;
    }
} */

.search_hit_page_area {
    max-height: 120px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.search_hit_page_area > :first-child {
    font-size: 20px;
    margin: 10px 0;
}

.search_sub_text {
    margin: 10px 0;
    font-size: 16px;
    color: var(--sub_font);
}

.btn_wrapper {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
}

#now_no {
    min-width: 150px;
    margin-bottom: 20px;
}

#page_next,
#page_prev {
    width: 100%;
    text-align: center;
    background: var(--theme_color);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    &:hover {
        color: color-mix(in srgb, #333, #fff 20%);
    }
}

.fa-caret-right,
.fa-caret-left {
    font-size: 29px;
    color: #fff;
    /* margin: 0 50px; */
    user-select: none;
}

/* ---------register code--------------- */
.code_reg_form {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    row-gap: 10px;
    justify-content: center;
    align-items: center;
}

#code_reg_form_input {
    padding: 0 5%;
    border-radius: 10px;
    border: 1px solid #333;
    width: 210px;
    height: 36px;
}

#code_reg_form_submit {
    background: #0b6ae6;
    color: #fff;
    height: 40px;
    width: 160px;
    padding: 5px 0;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;

    &:hover {
        background: color-mix(in srgb, #0b6ae6, #fff 20%);
    }
    &:hover .fa-paper-plane {
        transition: all 0.4s;
        transform: rotate(360deg);
    }
    &:focus > .fa-paper-plane {
        transform: translate(100px, -20px);
        /* animation: paper_plane 10s linear; */
        transition: transform 0.8s;
    }
}

/* ------ Reception complete ---------- */
.rep_comp_container {
    width: 100%;
    height: 80svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: rep_ani 2s;
    position: relative;
}
.rep_comp_container > img {
    width: 250px;
    height: auto;
    animation-delay: 0.8s;
}

.rep_comp_container > p {
    font-size: 20px;
    animation-delay: 1.5s;
}

@keyframes rep_ani {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.gage_container {
    width: 200px;
}
.gage {
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #fc524c, var(--theme_color));
    border-radius: 5px;
    animation: gage_bar 3s ease-out;
}
@keyframes gage_bar {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.goto_home_btn {
    margin: 20px;
    border-radius: 10px;
    height: 35px;
    background: #333;
    color: #eee !important;
    padding: 2px 14px;
    display: inline-block;
}

/* ------------ 投稿一覧 ------------------- */
.unreg_code_table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

.unreg_code_table thead tr th {
    border-bottom: 1px solid var(--table_row_color);
    padding: 8px 0;
    color: var(--table_index_color);
}

.unreg_code_table td {
    text-align: center;
    padding: 6px;
    color: var(--table_index_color);
}

/* ------------------------- table ---------------------------------- */
.div_table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.div_thead {
    display: table-header-group;
}

.thead_tr {
    display: table-row;
}
.thead_tr > .th {
    background: var(--table_index_color);
    color: #ffff;
    /* width: 200px; */
    text-align: center;
    padding: 4px 0;
}

.th {
    display: table-cell;
}

.div_tbody_lp-block {
    display: table-row-group;
}

.div_td {
    /* background: #eee; */
    padding: 10px;
}

@media screen and (width>=745px) {
    .outer-tr_lp-table {
        display: table-row;
        cursor: pointer;
    }

    .inner_tr {
        display: contents;
    }
    .clip_b > .div_td {
        text-align: center;
    }

    .div_td {
        display: table-cell;
        text-align: center;
        background: var(--table_row_color);
        padding: 15px 5px;
        vertical-align: middle;
    }
    .td_menu {
        text-align: left;
    }

    .outer-tr_lp-table:hover .div_td {
        /* background: color-mix(in srgb, rgba(var(--theme_color_rgb), 0.8), #ffffffdc 30%); */
    }

    .lp-index {
        display: none;
    }
    .lp-card {
        display: contents;
    }

    .match_table {
        margin-bottom: 30px;
    }
    .match_table .div_td {
        /* background: color-mix(in srgb, var(--theme_color), #fff 50%); */
        /* border-bottom: 5px solid rgb(0, 181, 236); */
        /* color: rgb(29, 69, 245); */
        font-weight: 600;
    }
}
/* ----- card -------------- */
@media screen and (width<745px) {
    .div_table {
        display: contents;
    }
    /* header消す */
    .div_thead {
        display: none;
    }
    /* テーブル化 */
    .div_tbody_lp-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 95%;
        row-gap: 10px;
    }
    .lp-card {
        border-radius: 20px;
        padding: 15px 25px;
        background: var(--table_row_color);
        box-shadow: 0px 2px 4px #00000029;
        cursor: pointer;
    }
    .outer-tr_lp-table {
        display: table;
    }
    .inner_tr {
        display: table-row;
    }
    .clip_b > .div_td {
        text-align: left;
    }
    .lp-index {
        display: table-cell;
        width: 150px;
    }
    .div_td {
        padding: 5px 10px;
    }
}

/*-- result loading -- */
.loader_wrapper {
    display: grid;
    place-items: center;
    width: 200px;
    height: 100%;
    margin: auto auto;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader {
    color: var(--dark_w__light_b);
    font-size: 7px;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
}
.loader:before,
.loader:after {
    content: "";
    position: absolute;
    top: 0;
}
.loader:before {
    left: -3.5em;
    animation-delay: -0.32s;
}
.loader:after {
    left: 3.5em;
}

@keyframes bblFadInOut {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

/* ------footer------------------ */
footer {
    position: relative;
}

footer > .container {
    background: var(--base_color);
    /* margin-top: 10px; */
    padding: 10px 0;
    width: 100%;
    height: 50px;
    /* position: fixed;
    bottom: 0; */
    text-align: center;
    box-shadow: 0px -2.5px 4px #00000029;
    font-size: clamp(14px, 1.2vw, 16px);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---go to Top ----*/
.go_to_top {
    /* display: none; */
    opacity: 0;
    /* visibility: hidden; */
    position: fixed;
    bottom: 20px;
    right: 5%;
    cursor: default;
    transition: 0.3s;
}

.fa-rocket {
    color: rgba(var(--theme_color_rgb), 0.9);
    font-size: 45px;
    transform: rotate(-45deg);
    text-shadow: 0px 2px 4px #0000003f;
}

.shot {
    transform: translateY(-500px);
    animation: rocket_ex 1s;
    cursor: default;
}

@keyframes rocket_ex {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(20px);
    }
    99% {
        opacity: 1;
    }
    100% {
        transform: translateY(-1000px);
        opacity: 0;
    }
}

/* .clip {
    height: 30px;
    cursor: pointer;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}*/
.fa-clipboard,
.fa-clipboard-check {
    font-size: 24px;
    margin: 0 5px;
    opacity: 1;
    transition-property: display, opacity;
    transition-duration: 1s;

    @starting-style {
        height: 0px;
        opacity: 0.5;
    }
}

.fa-clipboard-check {
    color: rgb(4, 192, 176);
}

.div_td > div {
    opacity: 1;
    transition-property: display, opacity;
    transition-duration: 1s;

    @starting-style {
        height: 0px;
        opacity: 0.5;
    }
}

.div_td > div:nth-child(2) {
    display: none;
}

#tooltip {
    display: none;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    background: #222;
    color: white;
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
    font-size: 90%;
}

/*
.copy_box {
    color: #0fa894;
    display: none;

    transition-property: display, opacity;
    transition-duration: 1s;

    @starting-style {
        height: 0px;
        opacity: 0;
    }
} */

.pop {
    background: #000000ea;
    color: rgba(6, 206, 189, 0.979);
    min-width: 250px;
    width: fit-content;
    padding: 5px 20px;
    text-align: left;
    border-radius: 5px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    animation: pop 0.6s linear;
    transition: all 0.8s;

    & > .fa-circle-info {
        margin: 0 10px;
    }
    /* transition: opacity 0.5s; */
}

.pop::before {
    content: "\f05a";
    font: 900 16px/1.5 "Font Awesome 6 Free";
    margin: 0 10px 0 0;
}

@keyframes pop {
    0% {
        transform: translateY(20px);
    }
    40% {
        transform: translateY(-10px);
    }
    70% {
        transform: translateY(0);
    }
}

/* -----------------night mode----------------------------
@media (prefers-color-scheme: dark) {
    body {
        background: #000;
        color: rgb(200, 201, 202);
    }

    :root {
        --theme_color: #e50000;
        --theme_color_rgb: 299, 0, 0;
        --sub_color: #868686;
        --table_index_color: #0f0f0f;
        --table_row_color: #363636dc;
        --base_color: #313131;
        --sub_font: #858585;
        --dark_w__light_b: #fff;
        --top_card_color: #e7e7e7;
    }

    #now_no {
        color: #000;
    }

    .search_hit_page_area > p {
        color: #000;
    }

    .loading {
        background: #000000;
    }
}
 */
/* -----banner----------- */
.banner_wrapper {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 40px;
    left: 2px;
    width: 375px;
    height: 100px;
    background: #ffffff50;
    backdrop-filter: blur(2px);
    object-fit: cover;

    padding: 2px;
    z-index: 20;
}

.banner_wrapper > .fa-xmark {
    margin: 0 5px 0 auto;
    cursor: pointer;
}

.banner_wrapper > a {
    display: block;
}

.banner_wrapper > a > img {
    width: 100%;
}

/* ------pallet go go ---------- */
.pallet {
    width: 130px;
    height: 100px;
    background: url("../img/pallet_go.png") no-repeat center center;
    background-size: contain;
    position: fixed;
    bottom: 50%;
    right: 10px;
    transform: translate(10vw, 0);
    z-index: 10;
    animation: pallet_gogo 3s ease-out infinite;
}

@media screen and (width < 754px) {
    .pallet {
        animation: pallet_gogo 2s ease-out infinite;
    }
}

@keyframes pallet_gogo {
    0% {
        transform: translate(0, 0vh);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translate(-120vw, 0);
    }
}

/* ----------tooltip[popper]------------- */
#tooltip {
    /* ... */
    opacity: 0;
    background: #333;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
    position: relative;
    width: fit-content;
}

#tooltip::after {
    content: "";
    background: #333;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -10px;
}

#tooltip[data-show] {
    /* display: block; */
    opacity: 1;
}