/* ==============================================
   3tive.design | LP 用サイドメニュー
   ----------------------------------------------
   1take / 1page / 1pack の各LPは自前で .header .footer .btn .page .side
   といったクラスを使っているため、common.css は読み込めない。
   衝突を避けるため、ここでは lpnav- 接頭辞のクラスのみを定義する。

   PC（981px以上）のみ表示。スマホではLP自身のヘッダーメニューがあるので
   二重のナビゲーションにならないよう非表示にしている。
   ============================================== */

.lpnav{ display:none; }
.lpnav a{ text-decoration:none; }

@media(min-width:981px){
  body{ margin-left:229px; }

  .lpnav{
    position:fixed; left:0; top:0; bottom:0; width:229px; z-index:9000;
    background:rgba(5,5,5,.96);
    border-right:1px solid rgba(255,255,255,.07);
    box-shadow:4px 0 24px rgba(0,0,0,.32);
    display:flex; flex-direction:column;
    font-family:'Noto Sans JP',-apple-system,'Yu Gothic Medium',Meiryo,sans-serif;
    letter-spacing:.03em; line-height:1.75;
  }

  .lpnav-logo{
    height:120px; display:flex; align-items:center; justify-content:center;
    padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.09); flex-shrink:0;
  }
  .lpnav-logo img{ width:190px; height:auto; max-height:80px; object-fit:contain; mix-blend-mode:screen; display:block; }

  /* 既定の明るく太いスクロールバーは配色から浮くため、細く目立たない見た目にする */
  .lpnav-list{ flex:1; overflow-y:auto; padding:4px 0;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
  .lpnav-list::-webkit-scrollbar{ width:5px; }
  .lpnav-list::-webkit-scrollbar-track{ background:transparent; }
  .lpnav-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
  .lpnav-list::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.32); }
  .lpnav-list::-webkit-scrollbar-button{ display:none; width:0; height:0; }

  .lpnav-item{
    display:flex; align-items:center; min-height:53px; padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.055);
    font-size:16.5px; font-weight:900; letter-spacing:.06em;
    color:rgba(255,255,255,.78); position:relative;
    transition:.3s cubic-bezier(.4,0,.2,1);
  }
  .lpnav-item::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:#dfc41f; transform:scaleY(0); transition:transform .2s ease;
  }
  .lpnav-item:hover,.lpnav-item.is-current{ background:rgba(255,255,255,.06); color:#fff; }
  .lpnav-item:hover::before,.lpnav-item.is-current::before{ transform:scaleY(1); }

  .lpnav-parent{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; min-height:53px; padding:0 20px;
    border:none; border-bottom:1px solid rgba(255,255,255,.055); background:none;
    font-family:inherit; font-size:16.5px; font-weight:900; letter-spacing:.06em;
    color:rgba(255,255,255,.78); text-align:left; cursor:pointer; position:relative;
    transition:.3s cubic-bezier(.4,0,.2,1);
  }
  .lpnav-parent::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:#dfc41f; transform:scaleY(0); transition:transform .2s ease;
  }
  .lpnav-parent:hover,.lpnav-parent.is-current{ background:rgba(255,255,255,.06); color:#fff; }
  .lpnav-parent:hover::before,.lpnav-parent.is-current::before{ transform:scaleY(1); }

  .lpnav-caret{ font-size:11px; color:rgba(255,255,255,.4); transition:transform .25s ease; flex-shrink:0; }
  .lpnav-group.is-open .lpnav-caret{ transform:rotate(180deg); }

  .lpnav-sub{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .lpnav-group.is-open .lpnav-sub{ max-height:260px; }
  .lpnav-sub .lpnav-item{
    font-size:12.5px; padding-left:20px; padding-right:10px;
    letter-spacing:.01em; color:rgba(255,255,255,.48); min-height:43px;
  }

  .lpnav-bottom{ padding:12px; border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; }
  .lpnav-mail{
    display:flex; align-items:center; justify-content:center; gap:5px; width:100%;
    padding:10px; border-radius:7px; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.58);
    font-size:12px; font-weight:700; margin-bottom:9px;
    transition:.3s cubic-bezier(.4,0,.2,1);
  }
  .lpnav-mail:hover{ background:rgba(255,255,255,.11); color:#fff; }
  .lpnav-cta{
    display:flex; align-items:center; justify-content:center; width:100%;
    padding:11px; border-radius:999px; background:#dfc41f; color:#111;
    font-weight:900; font-size:14px; box-shadow:0 5px 14px rgba(223,196,31,.3);
    transition:.3s cubic-bezier(.4,0,.2,1);
  }
  .lpnav-cta:hover{ background:#c9ae0e; transform:translateY(-1px); }
}