/* =========================================
   5-1-15.css
   SP用ハンバーガーメニュー（#g-nav）
   ・画面全体を黒で覆うフルスクリーンドロワー
   ・メニューが長くなったら、黒一色のまま縦にスクロール
   ・ボタンは header.blade.php の .openbtn を使う
   ========================================= */

/* ------------------------------
   ドロワーメニュー本体
   ------------------------------ */

/* メニュー全体（オーバーレイ） */
#g-nav {
    position: fixed;          /* 画面に固定 */
    inset: 0;                 /* top,right,bottom,left を全部 0 にする */
    z-index: 9999;            /* ヘッダー・コンテンツより前面 */
    width: 100%;
    height: 100vh;            /* 画面の高さピッタリを確保 */
    background-color: #000;   /* 画面全体を真っ黒に */

    /* 初期状態は非表示（フェード用） */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;     /* 非表示時はクリック不可 */
    transition:
        opacity   0.3s ease,
        visibility 0.3s ease;
}

/* メニューが開いたときに JS から付与されるクラス */
#g-nav.panelactive {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* メニュー内ラッパー */
#g-nav .g-nav-inner {
    box-sizing: border-box;
    min-height: 100vh;        /* 一応、縦方向も画面高以上を確保 */
    padding: 80px 24px 40px;  /* 上部にヘッダー分の余白 */
    background-color: #000;   /* 念のため内側も黒で塗る */

    /* メニューが長くなった時は、黒い背景のまま全体スクロール */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* メニューリスト（上側・下側共通） */
#g-nav .g-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 上側メニューと下側メニューの間の余白 */
#g-nav .g-nav-top {
    margin-bottom: 24px;
}

/* 「製品一覧」などの見出し */
.g-nav-section-title {
    margin: 0 0 8px;
    padding: 4px 0;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* 各行 */
#g-nav .g-nav-list li {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* 最初の要素だけ上線を消す場合 */
#g-nav .g-nav-list li:first-child {
    border-top: none;
}

/* メニューのリンク */
#g-nav .g-nav-list li a {
    display: block;
    width: 100%;
    padding: 14px 4px;

    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.05em;

    background-color: #000000; /* ここも黒で塗る */
}

/* ホバー時（スマホではあまり関係ないが一応） */
#g-nav .g-nav-list li a:hover {
    background-color: #222222;
}

/* ------------------------------
   背景の丸いアニメーションを使う場合
   （使っていなければ .circle-bg 関連は削除してOK）
   ------------------------------ */

.circle-bg {
    position: fixed;
    z-index: 9990;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #000000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    pointer-events: none; /* クリックを邪魔しないように */
}

/* メニュー展開時に大きくなる */
.circle-bg.circleactive {
    width: 200vmax;   /* 画面全体を覆うくらいのサイズ */
    height: 200vmax;
}