@import url('https://fonts.googleapis.com/css2?family=Murecho&family=Rubik:wght@700&display=swap');
@font-face {
    font-family: "logofont";
    src: url(../fonts/BukhariScript.ttf) format(truetype);
}

/*********************************************
* default layout
*********************************************/

html, body, main {
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
}
body {
    background-color: #fff;
}
body * {
    font-family: 'Murecho', sans-serif;
}

.full-size {
    width: 100%;
}
.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container {
    flex-grow: 0;
}

.title-rotate {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-10deg);
}
.title-wrapper {
    display: flex;
    justify-content: center;
}
.is-logo {
    width: fit-content;
    margin: 0 auto !important;
    font-family: 'logofont', sans-serif;
    color: #fd9790;
    /* -webkit-text-stroke:12px #fd9790; */
    position: relative;
    font-weight: 400;
}
h1.is-logo {
    font-size: 7rem;
}
h2.is-logo {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: -10px !important;
}
h1.is-logo.ecoa {
    top: -22px;
    font-family: 'Murecho', sans-serif;
    font-weight: bold;
    font-size: 8rem;
}
h1.is-logo.eco::before,
h1.is-logo.eco::after {
    content: "eco";
}
h1.is-logo.ecoa::before,
h1.is-logo.ecoa::after {
    content: "A";
}
h1.is-logo.web::before,
h1.is-logo.web::after {
    content: "web";
}
h1.is-logo::before,
h1.is-logo::after {
    -webkit-text-stroke: 0;
    position: absolute;
}
h1.is-logo::before{
    top: -7px;
    left: -4px;
    color: #f6f3e4;
}
h1.is-logo::after{
    top: 7px;
    left: 5px;
    color: #fecfcb;
    width: max-content;
    z-index: -1;
}
h2.is-logo::before,
h2.is-logo::after {
    content: "廃棄物のデータ管理をワンクリックで";
    -webkit-text-stroke: 0;
    position: absolute;
}
h2.is-logo::before{
    top: -2px;
    left: -1px;
    color: #f6f3e4;
}
h2.is-logo::after{
    top: 2px;
    left: 1px;
    color: #fecfcb;
    width: max-content;
    z-index: -1;
}

/* タブとパネル */
.tab-panel {
    display: none !important;
}
.tab-panel.is-active {
    display: flex !important;
    flex-direction: column;
}

/*********************************************
* common layout
*********************************************/

/* set text */
.txSmall  { font-size: 10px; }
.tSmall  { font-size: 11px; }
.tLead  {  font-size: 20px; }
.tLarge  { font-size: 22px; }
.txLarge { font-size: 24px; }
.tsxLarge { font-size: 28px; }

/* set float */
.fLeft { float:left !important;}
.fRight { float:right !important;}

/* set text-color */
.cRed { color:#e40000; }
.cRed2 {color:#e40000;font-weight: 600;}
.cRed3 { color:#e40000;text-decoration: underline;font-weight: 900; }
.cBlue { color:#00349f; }
.cBlue2 { color:#00349f;font-weight: 600; }
.cBlue3 { color:#00349f;text-decoration: underline;font-weight: 900; }

/* set width */
.w10 {width: 9%;}
.w15 { width: 14%; }
.w20 { width: 19%; }
.w30 { width: 29%; }
.w40 { width: 39%; }
.w50 { width: 49%; }
.w60 { width: 59%; }
.w70 { width: 69%; }
.w80 { width: 79%; }
.w90 { width: 89%; }
.w99 { width: 99%; }
.w100 { width: 100%; }

/*********************************************
* original layout
*********************************************/
.login-back {
    position: relative;
    background: url(../images/aizen_pict/IMG_4119.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.login-back::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 黒幕 */
    background-color: rgba(0, 0, 0, 50%);
    /* 白幕(背景透過してるように見せる) */
    /* background-color: rgba(255, 255, 255, 50%); */
    /* 黒と白幕(黒幕重ねつつ背景透過してるように見せる) */
    /* background-color: rgba(180, 180, 180, 75%); */
}

/* selectの後に文字追加したとき上下中央にする */
.flex-select {
    display: flex;
    align-items: center;
}
.flex-select .select {
    margin-right: 5px;
}

/* 残りの縦いっぱい */
.section.list_input form {
    display: flex;
    flex-direction: column;
}
.section.list_input .table-container {
    flex: 1;
}

/* テーブル */
.section.list_input form.on-tab {
    /*height: calc(100vh - 230px);*/
}
.section.list_input form.header-only {
    height: calc(100vh - 140px);
}
.section.list_input .table-container {
    overflow-y: auto;
}
.section.list_input {
    padding: 1.5rem 0.8rem;
}
@media screen and (min-width: 1024px) {
    .section.list_input .container {
        max-width: 1180px;
    }
}
.section.list_input .table {
    border-collapse: separate;
}

.section.list_input .table.is-striped thead th {
    border: none;
    border-top: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.section.list_input .table.is-striped thead th:last-child {
    border-right: 1px solid #dbdbdb;
}
.section.list_input .table.is-striped tbody td,
.section.list_input .table.is-striped tbody th {
    border: none;
    border-left: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.section.list_input .table.is-striped tbody td:last-child {
    border-right: 1px solid #dbdbdb;
}

.section.list_input .table.is-narrow td,
.section.list_input .table.is-narrow th {
    padding: .2em;
    vertical-align: middle;
}

.section.list_input .table thead th,
.section.list_input .table .tanni,
.section.list_input .table .keiyakusho-limit,
.section.list_input .table .kyokasho-limit,
.section.list_input .table .oboegaki-limit,
.section.list_input .table .keiyakusho,
.section.list_input .table .oboegaki {
    text-align: center;
}
.section.list_input .table .no,
.section.list_input .table .april,
.section.list_input .table .may,
.section.list_input .table .june,
.section.list_input .table .july,
.section.list_input .table .august,
.section.list_input .table .september,
.section.list_input .table .october,
.section.list_input .table .november,
.section.list_input .table .december,
.section.list_input .table .january,
.section.list_input .table .february,
.section.list_input .table .march,
.section.list_input .table .sum,
.section.list_input .table .cases ,
.section.list_input .table .store-num,
.section.list_input .table .dan,
.section.list_input .table .kanen,
.section.list_input .table .syoku,
.section.list_input .table .pla,
.section.list_input .table .pet,
.section.list_input .table .bin,
.section.list_input .table .kan,
.section.list_input .table .happou,
.section.list_input .table .paper,
.section.list_input .table .keikou,
.section.list_input .table .kongou,
.section.list_input .table .kandenchi,
.section.list_input .table .denchi_other,
.section.list_input .table .odei,
.section.list_input .table .ara,
.section.list_input .table .gyushi,
.section.list_input .table .haiyu,
.section.list_input .table thead #kikan-haiki-sum th:not(:first-child) {
    text-align: right;
}
.section.list_input .table .hinmoku {
    max-width: 150px;
}

.section.list_input .table thead th {
    background-color: #BDD7F0;
    white-space: nowrap;
    /* 縦スクロール時に固定する */
    /*
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    */
    /* tbody内のセルより手前に表示する */
    z-index: 2;
}
.section.list_input .table thead #kikan-haiki-sum th {
    /* 縦スクロール時に固定する */
    /*
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    background-color: #f4f4b1;
    z-index: 1;
    */
}
.section.list_input .table thead th:first-child {
    /* ヘッダー行内の他のセルより手前に表示する */
    z-index: 3;
}
.section.list_input .table th:first-child {
    /* 横スクロール時に固定する */
    position: -webkit-sticky;
    position: sticky;
    left: 0;
}

.section.list_input .table .comp-month {
    background-color: #ACDBCF;
}

.section.list_input .table.is-striped tbody tr:not(.is-selected):nth-child(2n) th:first-child {
    background-color: #fafafa;
}
.section.list_input .table.is-striped tbody tr:not(.is-selected):nth-child(2n-1) th:first-child {
    background-color: #ffffff;
}
.section.list_input .table .icon {
    font-family: "Font Awesome 5 Free";
    font-size: 1.4em;
    position: relative;
}
.section.list_input .table .icon i {
    font-style: normal !important;
}

#kikan-haiki-table tbody th {
    white-space: nowrap;
}
.is-scrollable {
    overflow-x: auto;
}
.section.list_input .table.is-narrow th {
    padding : .2rem;
}

.w_fix {
    width: 90px!important;
    min-width: 90px!important;
}

/* タイトルヘッダー */
.header-title {
    position: relative;
    background: url(../images/aizen_pict/IMG_4122.jpg) no-repeat;
    background-size: cover;
    background-position: center 58%;
    height: 80px;
}
.header-title::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 黒幕 */
    background-color: rgba(0, 0, 0, 50%);
    /* 白幕(背景透過してるように見せる) */
    /* background-color: rgba(255, 255, 255, 50%); */
    /* 黒と白幕(黒幕重ねつつ背景透過してるように見せる) */
    /* background-color: rgba(180, 180, 180, 75%); */
}
.header-title .columns {
    margin: 0;
}
.header-title .column {
    padding: 0;
}

/* タイトルヘッダー | 縦長でもタイトルとボタンが横並びになるように */
.header-title .columns:not(.is-desktop) {
    display: flex;
}
.header-title .column.is-10, .column.is-10-tablet {
    flex: none;
    width: 83.33333%;
}
.header-title .column.is-2, .column.is-2-tablet {
    flex: none;
    width: 16.66667%;
}
.is-yoko {
    display: flex;
}
.is-yoko .column.is-5, .column.is-5-tablet {
    flex: none;
    width: 41.66667%;
}


/* タイトルヘッダー | ログアウト */
.header-title .logout_link_box {
    text-align: right;
}
.header-title .logout_link_box a {
    color : #fff;
}

/* ボタンやタブの右上に〇通知をつけるためのcss */
.tag-wrapper {
    position: relative;
}
.tag-wrapper .tag {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}
.tag-wrapper .tag.is-circle,
.section.list_input .table .icon .tag.is-circle {
    border-radius: 50%;
}
.tabs {
    overflow: inherit;
}
.tabs .tag-wrapper .tag {
    top: -16px;
    right: -20px;
}
.section.list_input .table .icon .tag {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 16px;
    height: 16px;
    padding: 0;
    font-size: .7rem;
    text-align: center;
}

/* エラーメッセージ等 */
.warning {
    color:red;
}