@charset "UTF-8";
/**
 * タブ css
 * @version 23.05.26
 */

:root {
  --tab-br: 1px solid #e5e5e5;
}
.tab-outer { opacity: 0; }
.tab-outer.tab-loaded { opacity: 1;  -webkit-animation: appear0 0.25s ease; animation: appear0 0.25s ease; }

.tab-nav > li {
 display: inline-block;
 border: var(--tab-br);
 border-radius: 4px 4px 0 0;
 border-bottom: none;
 padding: 7px 16px 3px;
 font-weight: bold;
 min-width: 100px; /* 2023-01-17:Safari(PC・スマホ)はmaxを指定しないと崩れる */
 text-align: center;
 text-align-last: justify;
 background-color: #f5f5f5;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 position: relative;
}
.tab-nav > li ~ li { margin-left: 20px; }
.tab-nav > li.active { background-color: unset; }
.tab-nav > li:not(.active) { cursor: pointer; }
.tab-nav > li.mask { cursor: var(--cur-ban); }
.tab-nav > li.mask::after { content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgb(255 255 255 / 50%); }
.tab-nav > li div:last-child {
 display: none;
 background-color: #fff;
 width: 100%;
 position: absolute;
 left: 0;
 height: 3px;
 bottom: -2px;
}
.tab-nav:not([class*="tab-c-"]) > li.active:not([class*="tab-c-"]) div:last-child { display: block; }
.tab-nav > li.active div:last-child::before { content: ' '; }
.tab-content { padding: 20px 10px; border: var(--tab-br); border-radius: 0 4px 4px 4px; max-height: calc(100vh - 200px); }
.tab-content > div { display: none; }
.tab-content > div.active { display: block; }

/* 色 */
.tab-nav[class*="tab-c-"] > li:not([class*="tab-c-"]).active, .tab-nav > li[class*="tab-c-"].active { color: #fff; }

.tab-nav.tab-c-gre > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-gre { color: var(--gre-tn); } .tab-nav.tab-c-gre > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-gre.active { background-color: var(--gre); border-color: var(--gre); } .tab-outer[data-tab-c="gre"] > .tab-content { border-color: var(--gre); background-color: rgb(26  188 156 / 10%); }
.tab-nav.tab-c-red > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-red { color: var(--red-tn); } .tab-nav.tab-c-red > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-red.active { background-color: var(--red); border-color: var(--red); } .tab-outer[data-tab-c="red"] > .tab-content { border-color: var(--red); background-color: rgb(245 103 120 / 10%); }
.tab-nav.tab-c-blu > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-blu { color: var(--blu-tn); } .tab-nav.tab-c-blu > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-blu.active { background-color: var(--blu); border-color: var(--blu); } .tab-outer[data-tab-c="blu"] > .tab-content { border-color: var(--blu); background-color: rgb(65  159 255 / 10%); }
.tab-nav.tab-c-nav > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-nav { color: var(--nav-tn); } .tab-nav.tab-c-nav > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-nav.active { background-color: var(--nav); border-color: var(--nav); } .tab-outer[data-tab-c="nav"] > .tab-content { border-color: var(--nav); background-color: rgb(79   96 167 / 10%); }
.tab-nav.tab-c-ora > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-ora { color: var(--ora-tn); } .tab-nav.tab-c-ora > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-ora.active { background-color: var(--ora); border-color: var(--ora); } .tab-outer[data-tab-c="ora"] > .tab-content { border-color: var(--ora); background-color: rgb(255 203 102 / 10%); }
.tab-nav.tab-c-tea > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-tea { color: var(--tea-tn); } .tab-nav.tab-c-tea > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-tea.active { background-color: var(--tea); border-color: var(--tea); } .tab-outer[data-tab-c="tea"] > .tab-content { border-color: var(--tea); background-color: rgb(20  158 158 / 10%); }
.tab-nav.tab-c-gra > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-gra { color: var(--gra-tn); } .tab-nav.tab-c-gra > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-gra.active { background-color: var(--gra); border-color: var(--gra); } .tab-outer[data-tab-c="gra"] > .tab-content { border-color: var(--gra); background-color: rgb(94  106 132 / 10%); }
.tab-nav.tab-c-dpk > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-dpk { color: var(--dpk-tn); } .tab-nav.tab-c-dpk > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-dpk.active { background-color: var(--dpk); border-color: var(--dpk); } .tab-outer[data-tab-c="dpk"] > .tab-content { border-color: var(--dpk); background-color: rgb(255  20 147 / 10%); }
.tab-nav.tab-c-c4c > li:not([class*="tab-c-"]), .tab-nav > li.tab-c-c4c { color: var(--c4c-tn); } .tab-nav.tab-c-c4c > li:not([class*="tab-c-"]).active, .tab-nav > li.tab-c-c4c.active { background-color: var(--c4c); border-color: var(--c4c); } .tab-outer[data-tab-c="c4c"] > .tab-content { border-color: var(--c4c); background-color: rgb(255  20 147 / 10%); }