@charset "utf-8";
/*color*/
.maru_i{width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%;}

/*btn*/
.btn{font-weight: bold;}
.btn-1{color: #fff;}
.btn-style_1{border-radius: 0; padding: 15px; display: flex; justify-content: space-between; align-items: center;}

/*fa*/
.ul-h_nav > li > a::before,
.foot-nav > li > a::before,
.btn-coll::after
{-moz-osx-font-smoothing:grayscale; font-family: "Font Awesome 5 Free"; -webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1; font-weight: 900;}
.spn-fa_maru{color: #fff; width: 40px; height: 40px; border-radius: 50%; background-color: #000; display: flex; align-items: center; justify-content: center;}

/**/
.fal_bf::before,.fal_af::after{content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0;}


/*------HEADER------*/
#header{width: 100%; z-index: 19; background-color: #fff;}
.head-inner{padding:15px 0;}
.logo-a{display: block;}
.logo{width: 90px;}
.head-h1{line-height:0;}

/*user info*/
.header-user-info{display: flex; align-items: center; gap: 8px;}
.header-user-avatar img{width: 32px; height: 32px; border-radius: 50%; display: block;}
.header-user-name{font-size: 14px; font-weight: bold; white-space: nowrap;}

/* Header Right Section */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

/*nav*/
.ul-h_nav{display: flex;}
.ul-h_nav > li > a{font-size: 16px; font-weight:bold; text-align: center; padding: 15px 30px; display: block; position: relative;}

/*bread*/
.breadcrumbs{padding: 5px 0; font-size: 11px; background-color: #f4f4f4;}
.breadcrumbs,.breadcrumbs a{color: #333;}
.breadcrumbs > .container > span{margin:0 5px;}
.breadcrumbs > .container > span:first-child{margin-left: 0;}

/*dropdown-menu*/
.dropdown-menu{padding: 0; width: 100%;}
.dropdown-menu.shown{display: block;}
.dropdown-item{padding: 15px; border-bottom:1px solid #dedede;}
.dropdown-item:last-child{border-bottom: none;}

/*------MAIN------*/
.container{max-width: 1230px; position: relative; z-index: 3;}
.item-title{font-weight: bold;}
.a-thumb{position: relative; display: inline-block;}
.zoomup{right: 10px; bottom: 10px; color: #fff; font-size: 20px;}

/*collapse*/
.coll-triger:hover{text-decoration: none;}
.fa_coll::before{content: "\f068";}
.collapsed .fa_coll::before{content: "\f067";}

/*----Slider----*/
.slider-style{display: none; overflow: hidden;}
.slider-style.slick-initialized{display: block; /*slick-initializedが付与されたら表示*/ }
.slider-style.slick-dotted.slick-slider{margin-bottom: 0;}
.slider-style .slick-slide{position: relative;}
.slider-style .slick-slide img{width: 100%;}
.slider-style .slick-dots{bottom: 0;}
.slider-style .slick-dots li{width: auto; height: auto; margin: 0 2px;}
.slider-style .slick-dots li button::before{font-size: 12px;}
.slider-style .slider-arrow{position: absolute; color: #fff; font-size: 40px; top: 44%; z-index: 9; cursor: pointer;}
.slider-style .slider-prev{left: 20px;}
.slider-style .slider-next{right: 20px;}



/*------FOOTER------*/
#footer{background-color: #000; color: #fff; position: relative;}
#footer a{color: #fff;}
.footmove{background-color: #222; color: #fff; width: 50px; height: 50px; right: 0; top: -50px; z-index: 3;}
.copy{font-size: 12px;}

.foot-nav > li{margin-right: 2em;}
.foot-nav > li:last-child{margin: 0;}
.foot-nav > li > a{display: block; position: relative; font-size: 13px;}
.foot-nav > li > a::before{content: "\f105"; margin-right: 5px;}


/*---PC small---*/
@media only screen and (max-width: 1280px) {
}

/*---PAD pro---*/
@media only screen and (max-width: 1085px) {
}

/*---PAD---*/
@media only screen and (max-width: 880px) {
}

/*------Sm------*/
@media only screen and (max-width: 767px) {
  body{font-size: 14px;}

  /*------HEADER------*/

  /*nav*/
  .ul-h_nav{display: block;}
  .ul-h_nav > li > a{color: #333; padding: 15px; border-bottom: 1px solid #aaa; text-align: left;}
  .ul-h_nav > li > a::before{content: "\f054"; color: #333; position: absolute; right: 15px; top: 20px;}
  .ul-h_nav > li > a.v-contact{background: none; color: #333;}

  /*offcanvas*/
  body.offcanvas-stop-scrolling::before{content: ""; z-index: 9; position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85);}
  body.offcanvas-stop-scrolling #header{padding: 0;}
  body.offcanvas-stop-scrolling .head-h1{display: none;}

  .m-toggle{padding: 10px; background: none; border: none; display: block; position: static; z-index: 9999; outline: none !important; transition:all .5s 0s ease;}
  .m-toggle.is-open{position: absolute; left: 15px; top: 5px; background: #fff;}
  .offcanvas-toggle .icon-bar{background: #fff;}
  .icon-bar{display:block;width:25px;height:4px;border-radius:1px; margin: auto;}
  .icon-bar + .icon-bar{margin-top:5px}
  .offcanvas-toggle.is-open .icon-bar:nth-child(3){margin-top: 14px;}
  .offcanvas-toggle.is-open .icon-bar:nth-child(4){transform: rotate(-135deg) translate(8px, 8px); margin-top: 2px;}
  .off-base.navbar-offcanvas{top: 0; overflow: auto; z-index: 999; padding: 0;}

  /*offcanvas-size*/
  .navbar-offcanvas{max-width: 300px; position: fixed; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1);}
  .navbar-offcanvas.navbar-offcanvas-right {right: -300px;}
  .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {-webkit-transform: translateX(-300px); transform: translateX(-300px);}    

  /*------MAIN------*/

  /*------INDEX------*/

  /*------PAGE------*/
  /*phead*/
  .phead-title{font-size: 24px; letter-spacing: 4px;}
  .table td, .table th{padding: 5px;}

  /*------FOOTER------*/

}

/*------Sm small------*/
@media only screen and (max-width: 350px) {
    

}

/*------Employee Navigation (Offcanvas Menu)------*/

/* Menu Toggle Button */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    position: relative;
    z-index: 1000;
    flex-shrink: 0;
}

.menu-toggle:focus {
    box-shadow: none;
}

.menu-toggle .menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}

.menu-toggle .menu-icon::before,
.menu-toggle .menu-icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.menu-toggle .menu-icon span {
    display: none;
}

.menu-toggle.is-active .menu-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-active .menu-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* Offcanvas Navigation */
.offcanvas-nav {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background-color: #f8f9fa;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    z-index: 999;
    transition: right 0.3s ease;
    padding-top: 60px;
    border: none;
}

.offcanvas-nav.show {
    right: 0;
}

/* Close Button */
.menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.menu-close:focus {
    outline: none;
}

.menu-close span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #333;
    border-radius: 1px;
    transition: all 0.3s ease;
    position: absolute;
}

.menu-close span:first-child {
    transform: translateY(-6px) rotate(45deg);
}

.menu-close span:last-child {
    transform: translateY(6px) rotate(-45deg);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 998;
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.menu-overlay.show {
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

/* Hide overlay when modal is shown */
.modal.show + .menu-overlay,
body.modal-open .menu-overlay {
    display: none !important;
}

/* Navigation Content */
.employee-nav-content {
    padding: 20px 0;
}

.emp-nav-header {
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #dee2e6;
}

.emp-nav-title {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.emp-nav-title b {
    color: #007bff;
}

/* Navigation Links */
.offcanvas-nav .navbar-nav {
    padding: 10px 0;
}

.offcanvas-nav .nav-link {
    padding: 12px 15px !important;
    color: #333 !important;
    font-size: 15px;
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.offcanvas-nav .nav-link:hover {
    background-color: #e9ecef;
    border-left-color: #007bff;
}

.offcanvas-nav .nav-link i {
    width: 20px;
    text-align: center;
    color: #007bff;
}

/* Divider */
.emp-nav-divider {
    height: 1px;
    background-color: #dee2e6;
    margin: 10px 0;
}

/* Actions Section */
.emp-nav-actions {
    padding: 15px 15px;
}

.emp-nav-help-text {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* LINE Section */
.emp-nav-line {
    padding: 15px;
    text-align: center;
    background-color: #fff;
}

.emp-nav-line img {
    display: block;
    margin: 0 auto 10px auto;
}

.emp-nav-line-text {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Responsive */
@media only screen and (max-width: 767px) {
    .offcanvas-nav {
        width: 280px;
        right: -280px;
    }

    .employee-nav-content {
        max-height: 80vh;
        overflow-y: auto;
    }

    .offcanvas-nav .nav-link {
        font-size: 14px;
        padding: 10px 15px !important;
    }
}