/* ========================================================
 * sidebar.html 専用スタイル
 * epln/templates/sidebar.html（および、そこからのみincludeされる
 * sidebar_retinue_help_link.html / tokutei_shotorihiki.html）
 * でのみ使用しているクラス/IDを集約したファイル。
 * ======================================================== */

/* Background gradient (sidebar専用) */
.bg-gradient-primary {
  background-color: #093914;
  background-image: linear-gradient(180deg, #2e9747 10%, #093914 100%);
  background-size: cover;
}

/* Sidebar styles */
a.sidebar-brand{
  text-align: center;
  width: 100%;
}

.sidebar {
  min-height: 100vh;
  text-align: center;
  z-index: 5;
}

.sidebar .nav-item {
  position: relative;
  font-size: 14px !important;
}

.sidebar .nav-item:last-child {

  margin-bottom: 1rem;
}

.sidebar .nav-item .nav-link {
  text-align: center;
  padding: 0.75rem 1rem;
  width: 6.5rem;
}

.sidebar .nav-item .nav-link span {
  font-size: 0.65rem;
  display: block;
}

.sidebar .nav-item.active .nav-link {
  font-weight: 700;
}

.sidebar .nav-item .collapse {
  position: absolute;
  left: calc(6.5rem + 1.5rem / 2);
  top: 2px;
}

.sidebar .nav-item .collapse .collapse-inner {
  border-radius: 0.35rem;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.sidebar .nav-item .collapsing {
  display: none;
  transition: none;
}

.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner {
  padding: .5rem 0;
  min-width: 10rem;
  font-size: 0.85rem;
  margin: 0 0 1rem 0;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-header,
.sidebar .nav-item .collapsing .collapse-inner .collapse-header {
  margin: 0;
  white-space: nowrap;
  padding: .5rem 1.5rem;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.65rem;
  color: #b7b9cc;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  display: block;
  color: #3a3b45;
  text-decoration: none;
  border-radius: 0.35rem;
  white-space: nowrap;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
  background-color: #eaecf4;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:active {
  background-color: #dddfeb;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  color: #4e73df;
  font-weight: 700;
}

.sidebar #sidebarToggle {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
  cursor: pointer;
}

.sidebar #sidebarToggle::after {
  font-weight: 900;
  font-family: "Material Icons";
  content: "\e5e0";
  margin-left: 6px;
}

.sidebar #sidebarToggle:hover {
  text-decoration: none;
}

.sidebar #sidebarToggle:focus {
  outline: none;
}

.sidebar.toggled {
  width: 0 !important;
  overflow: hidden;
}

.sidebar.toggled #sidebarToggle::after {
  content: '\e5e1';
  font-family: "Material Icons";
  margin-right: 0.25rem;
}

.sidebar.toggled .sidebar-card {
  display: none;
}

.sidebar .sidebar-brand {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  padding: 1.5rem 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.sidebar .sidebar-brand .sidebar-brand-icon i {
  font-size: 2rem;
}

.sidebar .sidebar-brand .sidebar-brand-text {
  display: none;
}

.sidebar .sidebar-heading {
  text-align: center;
  padding: 0 1rem;
  font-weight: 800;
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  .sidebar .nav-item .collapse {
    position: relative;
    left: 0;
    top: 0;
  }
  .sidebar .nav-item .collapse .collapse-inner {
    border-radius: 0;
    box-shadow: none;
  }
  .sidebar .nav-item .collapsing {
    display: block;
    transition: height 0.15s ease;
  }
  .sidebar .nav-item .collapse,
  .sidebar .nav-item .collapsing {
    margin: 0 1rem;
  }
  .sidebar .nav-item .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem;
    width: 14rem;
  }
  .sidebar .nav-item .nav-link i {
    font-size: 0.85rem;
    margin-right: 0.25rem;
  }
  .sidebar .nav-item .nav-link span {
    font-size: 0.85rem;
    display: inline;
  }
  .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
    width: 1rem;
    text-align: center;
    float: right;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    font-family: "Material Icons";
    content: "\e5e1";
  }
  .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
    content: '\f105';
  }
  .sidebar .sidebar-brand .sidebar-brand-icon i {
    font-size: 2rem;
  }
  .sidebar .sidebar-brand .sidebar-brand-text {
    display: inline;
  }
  .sidebar .sidebar-heading {
    text-align: left;
  }
  .sidebar.toggled {
    overflow: visible;
    width: 104px !important;
  }
  .sidebar.toggled .nav-item .collapse {
    position: absolute;
    left: calc(6.5rem + 1.5rem / 2);
    top: 2px;
  }
  .sidebar.toggled .nav-item .collapse .collapse-inner {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border-radius: 0.35rem;
  }
  .sidebar.toggled .nav-item .collapsing {
    display: none;
    transition: none;
  }
  .sidebar.toggled .nav-item .collapse,
  .sidebar.toggled .nav-item .collapsing {
    margin: 0;
  }
  .sidebar.toggled .nav-item:last-child {
    margin-bottom: 1rem;
  }
  .sidebar.toggled .nav-item .nav-link {
    text-align: center;
    padding: 0.75rem 1rem;
    width: 6.5rem;
  }
  .sidebar.toggled .nav-item .nav-link span {
    font-size: 0.65rem;
    display: block;
  }
  .sidebar.toggled .nav-item .nav-link i {
    margin-right: 0;
  }
  .sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after {
    display: none;
  }
  .sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
    font-size: 2rem;
  }
  .sidebar.toggled .sidebar-brand .sidebar-brand-text {
    display: none;
  }
  .sidebar.toggled .sidebar-heading {
    text-align: center;
  }
}

.sidebar-light .sidebar-brand {
  color: #6e707e;
}

.sidebar-light hr.sidebar-divider {
  border-top: 1px solid #eaecf4;
}

.sidebar-light .sidebar-heading {
  color: #b7b9cc;
}

.sidebar-light .nav-item .nav-link {
  color: #858796;
}

.sidebar-light .nav-item .nav-link i {
  color: #d1d3e2;
}

.sidebar-light .nav-item .nav-link:active, .sidebar-light .nav-item .nav-link:focus, .sidebar-light .nav-item .nav-link:hover {
  color: #6e707e;
}

.sidebar-light .nav-item .nav-link:active i, .sidebar-light .nav-item .nav-link:focus i, .sidebar-light .nav-item .nav-link:hover i {
  color: #6e707e;
}

.sidebar-light .nav-item .nav-link[data-toggle="collapse"]::after {
  color: #b7b9cc;
}

.sidebar-light .nav-item.active .nav-link {
  color: #6e707e;
}

.sidebar-light .nav-item.active .nav-link i {
  color: #6e707e;
}

.sidebar-light #sidebarToggle {
  background-color: #eaecf4;
}

.sidebar-light #sidebarToggle::after {
  color: #b7b9cc;
}

.sidebar-light #sidebarToggle:hover {
  background-color: #dddfeb;
}

.sidebar-dark .sidebar-brand {
  color: #fff;
}

.sidebar-dark hr.sidebar-divider {
  border-top: 1px solid #003300;
  border-bottom: 1px solid #DDFFDD;
}

.sidebar-dark .sidebar-heading {
  color: rgba(255, 255, 255, 0.4);
}

.sidebar-dark .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-dark .nav-item .nav-link i {
  color: rgba(255, 255, 255, 0.3);
}

.sidebar-dark .nav-item .nav-link:active, .sidebar-dark .nav-item .nav-link:focus, .sidebar-dark .nav-item .nav-link:hover {
  color: #fff;
}

.sidebar-dark .nav-item .nav-link:active i, .sidebar-dark .nav-item .nav-link:focus i, .sidebar-dark .nav-item .nav-link:hover i {
  color: #fff;
}

.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after {
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-dark .nav-item.active .nav-link {
  color: #fff;
}

.sidebar-dark .nav-item.active .nav-link i {
  color: #fff;
}

.sidebar-dark #sidebarToggle {
  background-color: rgba(255, 255, 255, 0.2);
}

.sidebar-dark #sidebarToggle::after {
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-dark #sidebarToggle:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.sidebar-dark.toggled #sidebarToggle::after {
  color: rgba(255, 255, 255, 0.5);
}

/* Common application styles (sidebar専用) */
.sidebar a{
  text-decoration:solid !important;
  color:white !important;
  font-size: 1rem;
  border-radius: 20px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 5px 0;
}

.toggled a{
  font-size: 14px !important;
}

@media (min-width: 768px) {
  .sidebar a{
    font-size: 14px !important;
  }
  .sidebar:not(.toggled) p.text-sidebar.align-items-center.justify-content-center{
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  .sidebar.toggled p.text-sidebar.align-items-center.justify-content-center{
    margin-left: 7px !important;
    margin-right: 7px !important;
  }
}

.collapse-item.text-sidebar.help,
.collapse-item.text-sidebar.inquiry{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-decoration: underline !important;
}

@media (max-width: 768px) {
  .sidebar:not(.toggled) p.text-sidebar.align-items-center.justify-content-center{
    margin-left: 7px !important;
    margin-right: 7px !important;
  }
}

.sidebar a:hover{
  text-decoration:solid !important;
  color:white !important;
}

.sidebar p.text-sidebar {
  color: white !important;
}

.sidebar .text-sidebar {
  color: white !important;
}

.sidebar .sidebar-brand {
  height: 35px;
}

#accordionSidebar > a.sidebar-brand.d-flex.align-items-center.justify-content-center{
  margin-top:17px;
  margin-bottom:17px;
}

#accordionSidebar > a:nth-child(7){
  margin-top:30px;
  margin-bottom:25px;
}

#accordionSidebar > a:nth-child(8){
  margin-bottom: 56px;
}

.my-outline-btn{
  text-decoration: none !important;
}
.my-outline-btn:hover{
  background: rgba(135,204,118,.3);
  color:white;
}
.my-outline-btn:visited,.my-outline-btn:active{
  background: rgba(135,204,118,1);
}

.sidebar .sidebar-brand img{
  width: 84px;
}

a.sidebar-brand.d-flex.align-items-center.justify-content-center{
  height: 36px;
  padding: 0;
}

@media (min-width: 768px) {
  .sidebar .sidebar-brand img{
    object-fit: contain;
    width: 125px;
    height: 36px;
  }
  #accordionSidebar:not(.toggled){
    width: 224px;
    min-width: 224px;
  }
}


@media (min-width: 768px) {
  .sidebar:not(.toggled){
    text-align: center;
  }

  .sidebar-divider{
    max-width:204px;
  }

  .toggled{
    width:104px;
  }
}

.logout-wrap{
  width:100%;
  margin:18px auto;
  word-break: break-all;
}

.login-wrap{
  width:100%;
  margin:20px auto;
  word-break: break-all;
}

#accordionSidebar > a.collapse-item.text-sidebar.help{
  margin-top: 30px;
}

#accordionSidebar > a.collapse-item.text-sidebar.inquiry{
  margin-top: 25px;
}

.mt-toggle{
  margin-top: 56px;
}

#accordionSidebar.toggled > li > div > a.auth{
  padding: 4px;
}

@media (max-width: 767px) {
  #accordionSidebar > li:nth-child(3) > div > a.auth{
    padding:4px;
  }
  .toggled .btn{
    width:90px;
  }
}

@media (min-width: 768px) {
  .toggled img{
    width:84px !important;
  }

  .large-mb{
    margin-bottom:10px;
  }

  .large-mt{
    margin-top:10px;
  }

  ul#accordionSidebar:not(.toggled) {
    font-size:18pt !important;
  }

  #sidebarToggle{
    font-size:initial !important;
  }

  ul#accordionSidebar:not(.toggled) .auth{
    min-width:120px !important;
  }
}

.btn-wrapper{
  padding: 0 4px;
}

.auth{
  font-size: 14px !important;
}

/* ========== Fixed layout for epp_menu (sidebar固定表示に伴うオフセット) ========== */
/* Sidebar: fix to left (z-indexは既存設定を使用) */
#accordionSidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

/* Main content: offset for fixed sidebar/topbar + footer考慮 */
#S {
  margin-left: 224px;
  padding-top: 4.375rem;   /* topbar height */
  padding-bottom: 72px;    /* footer height allowance */
  transition: margin-left 0.3s ease;
}

/* Topbar: fix to top and align with sidebar (z-indexは既存設定を使用) */
#S .topbar {
  position: fixed;
  top: 0;
  left: 224px;
  right: 0;
  height: 4.375rem;
}

/* When sidebar is toggled (compact) */
#accordionSidebar.toggled ~ #S {
  margin-left: 104px;
}
#accordionSidebar.toggled ~ #S .topbar {
  left: 104px;
}

/* Responsive fallback (mobile <480px) */
@media (max-width: 479.98px) {
  /* モバイルはサイドバー非表示（デフォルト） */
  #accordionSidebar {
    display: none;
  }

  /* 左寄せ（サイドバー幅のオフセットを無効化） */
  #S {
    margin-left: 0 !important;
    padding-top: 4.375rem; /* トップバー高さは維持 */
  }
  #S .topbar {
    left: 0 !important;    /* 左寄せ */
  }

  /* ハンバーガー押下時はサイドバーを表示（オーバーレイ） */
  body.sidebar-toggled #accordionSidebar {
    display: block;
    width: 104px !important;   /* オーバーレイ時の幅（ナロー） */
    /* 高さは古い環境→svh→dvhの順でフォールバック */
    height: 100vh;
    height: 100svh;
    height: 100dvh;            /* 動的UI変化に追従 */
    max-height: 100dvh;
    min-height: 100%;
    overflow-y: auto;          /* 縦スクロール */
    background-color: #093914; /* サイドバー背景（既存トーンに合わせる） */
    box-shadow: 2px 0 12px rgba(0,0,0,0.25); /* 右側に陰影 */
    top: 0;                    /* 念のため明示 */
    bottom: 0;                 /* 念のため明示 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* モバイル表示中のリンクはナロー幅に最適化（中央寄せ・省略） */
  body.sidebar-toggled #accordionSidebar .nav-item .nav-link {
    width: 6.5rem;
    text-align: center;
    padding: 0.75rem 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.sidebar-toggled #accordionSidebar .nav-item .nav-link span {
    font-size: 0.65rem;
    display: block;
  }
  /* サイドバーの右側にトップバーを配置（メニュー表示中・ナロー） */
  body.sidebar-toggled #S .topbar {
    left: 104px !important;
  }

  /* ヘルプ/特定商取引/問い合わせを縦並び・ナロー幅に統一 */
  body.sidebar-toggled #accordionSidebar a.collapse-item.text-sidebar,
  body.sidebar-toggled #accordionSidebar a.collapse-item.text-sidebar.help,
  body.sidebar-toggled #accordionSidebar a.collapse-item.text-sidebar.inquiry {
    display: block;
    width: 6.5rem;
    margin: 6px auto;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 480px〜767.98px: サイドバーは狭幅(104px)固定。#S/topbarのオフセットを一致させズレを解消 */
@media (min-width: 480px) and (max-width: 767.98px) {
  #accordionSidebar:not(.toggled) {
    width: 104px;
  }
  #accordionSidebar.toggled {
    width: 0 !important;
  }
  #S {
    margin-left: 104px;
  }
  #S .topbar {
    left: 104px;
  }
  #accordionSidebar.toggled ~ #S {
    margin-left: 0;
  }
  #accordionSidebar.toggled ~ #S .topbar {
    left: 0;
  }
}

/* 検索キーワード入力欄とサイドバーの間の余白を15pxに（サイドバーが常設される480px以上で常時適用） */
@media (min-width: 480px) {
  .topbar .navbar-search {
    margin-left: 15px;
  }
}
/* ========== /Fixed layout for epp_menu ========== */