@charset "utf-8";
/* ==================================================
   UIKit3拡張CSS
   UIKitコンポーネントのカスタマイズと拡張
================================================== */

/* ==================================================
   ナビゲーション拡張
================================================== */
.uk-navbar-container {
    background-color: white !important;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
}

.uk-navbar-nav > li > a {
    padding-top: 6px;
    font-size: 1rem;
    font-family: var(--fn-jp-sans), sans-serif !important;
    color: var(--text-color);
    font-weight: 500;
    position: relative;
    z-index: 1;
    display: inline-block;
    min-height: 40px;
}

.uk-navbar-dropdown-nav > li > a {
    color: var(--text-color);
    position: relative;
    display: inline-block !important;
}

/* ナビゲーションホバー効果 */
.uk-navbar-nav > li > a::after, 
.uk-navbar-dropdown-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--main-color);
    transition: var(--transition-base);
    transform: translateX(-50%);
}

.uk-navbar-dropdown-nav > li > a::after {
    left: 0;
    transform: translateX(0);
}

.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a.uk-open {
    color: var(--dark-color) !important;
    transition: var(--transition-base);
}

.uk-navbar-nav > li:hover > a::after,
.uk-navbar-dropdown-nav > li:hover > a::after {
    width: 80%;
}

/* ドロップダウン */
.uk-drop {
    background-color: white;
    border-radius: var(--border-radius);
    border-bottom: 5px solid var(--main-color);
}

/* ==================================================
   オフキャンバス拡張
================================================== */
.uk-offcanvas-bar {
    box-shadow: 0 0 5px 3px rgba(0,0,0,0.4);
    padding: 0;
    color: white;
}

.uk-offcanvas-container-animation {
    right: 100vw !important;
}

.fnav-head {
    width: 40px;
    writing-mode: vertical-lr;
    border-left: 1px white solid;
}

.fnav-body {
    width: calc(100vw - 40px);
}

.fnav-body .uk-nav-default {
    width: 200px;
}

.fnav-body .uk-nav-default > li a {
    color: var(--ui-light);
}

.fnav-body .uk-nav-default > li > a {
    display: inline !important;
}

.fnav-body .uk-nav-default > li:hover > a,
.fnav-body .uk-nav-default > li > a.uk-open {
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background: var(--main-color);
    transition: var(--transition-fast);
}

/* ==================================================
   テーブル拡張
================================================== */
.uk-table-striped tbody tr:nth-of-type(odd), 
.uk-table-striped > tr:nth-of-type(odd) {
    background: #FCF1E490;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

/* ==================================================
   ブレッドクラム拡張
================================================== */
.uk-breadcrumb * {
    color: var(--text-color) !important;
}

.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
    content: ">";
    color: var(--text-color) !important;
    margin: 0 10px;
}

.uk-breadcrumb > *.uk-disabled > a {
    font-size: .875rem;
    color: var(--dark-color) !important;
    font-weight: bold;
}

/* ==================================================
   ライトボックス拡張
================================================== */
.uk-lightbox {
    background: rgba(0, 0, 0, .5);
}

.uk-lightbox-iframe {
    background: white;
}

/* ==================================================
   見出し拡張
================================================== */
.uk-heading-bullet::before {
    border-left: calc(5px + .1em) solid var(--accent-01);
}

.uk-heading-bullet.bullet-white::before {
    border-left: calc(5px + .1em) solid white;
}

.uk-heading-bullet.bullet-black::before {
    border-left: calc(5px + .1em) solid black;
}

.uk-heading-divider {
    border-bottom: calc(.2px + .05em) solid var(--main-color);
}

.uk-heading-divider.divider-white {
    border-bottom: calc(.2px + .05em) solid white;
}

.uk-heading-divider.divider-black {
    border-bottom: calc(.2px + .05em) solid black;
}

/* ==================================================
   その他のUIKit拡張
================================================== */
.hr-bold-white {
    border-top: 5px solid white !important;
}

.uk-sticky-placeholder {
    height: 0 !important;
}

.uk-subnav-pill > * > :first-child {
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.04);
}

.uk-logo img {
    height: 38px;
}

/* ==================================================
   カスタムデートピッカー（topics用）
================================================== */
.uk-datepicker {
    width: auto;
}

.uk-datepicker-nav {
    margin-bottom: 15px;
    text-align: center;
    line-height: 20px;
}

.uk-datepicker-nav:after,
.uk-datepicker-nav:before {
    content: "";
    display: table;
}

.uk-datepicker-nav:after {
    clear: both;
}

.uk-datepicker-nav a {
    color: var(--ui-darker);
    text-decoration: none;
}

.uk-datepicker-nav a:hover {
    color: var(--main-color);
}

.uk-datepicker-previous {
    float: left;
    margin-left: 12px;
}

.uk-datepicker-next {
    float: right;
    margin-right: 12px;
}

.uk-datepicker-table {
    width: 100%;
}

.uk-datepicker-table td,
.uk-datepicker-table th {
    padding: 2px;
}

.uk-datepicker-table th {
    font-size: 12px;
}

.uk-datepicker-table span {
    display: block;
    width: 26px;
    line-height: 24px;
    text-align: center;
    color: var(--ui-darker);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    background-origin: border-box;
}

.uk-datepicker-table span a {
    color: var(--main-color);
    text-decoration: none;
}

.uk-datepicker-table span:focus,
.uk-datepicker-table span:hover,
.uk-datepicker-table span:active {
    background-color: var(--light-color);
    outline: 0;
    border-color: rgba(0,0,0,.1);
    border-bottom-color: rgba(0,0,0,.2);
    cursor: pointer;
}

.uk-datepicker-table span.uk-active {
    background: var(--main-color);
    border: 1px solid rgba(0,0,0,.1);
    border-bottom-color: rgba(0,0,0,.2);
}

.uk-datepicker-table span.uk-active a,
.uk-datepicker-table span.uk-active strong,
.uk-datepicker-table span.uk-active {
    background: var(--main-color);
    color: white;
}