/* ====================================
   ナビゲーション修正CSS
   - PCでli.kaidanをプルダウン表示
   - スマホでの#リンク動作を改善
==================================== */

/* PC用プルダウンメニュー */
@media (min-width: 769px) {
    /* 親メニュー項目（「ゆいを知る」）にホバー時のサブメニュー表示 */
    .nav-menu > li {
        position: relative;
    }
    
    /* サブメニューコンテナ */
    .nav-menu > li > ul,
    .nav-menu-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        min-width: 200px;
        list-style: none;
        padding: 10px 0;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-radius: 8px;
        z-index: 1001;
    }
    
    /* 親メニューにホバーしたときサブメニューを表示 */
    .nav-menu > li:hover > ul,
    .nav-menu > li:hover .nav-menu-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* サブメニューのli（kaidan） */
    .nav-menu ul li,
    .nav-menu-dropdown li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .nav-menu ul li:last-child,
    .nav-menu-dropdown li:last-child {
        border-bottom: none;
    }
    
    /* サブメニューのリンク */
    .nav-menu ul li a,
    .nav-menu-dropdown li a {
        display: block;
        padding: 12px 20px;
        color: #666;
        text-decoration: none;
        transition: all 0.3s ease;
        font-size: 14px;
    }
    
    .nav-menu ul li a:hover,
    .nav-menu-dropdown li a:hover {
        background: #fff0f1;
        color: #eb998f;
        padding-left: 25px;
    }
    
    /* kaidan の階段マーク（PCでは不要なので非表示） */
    .nav-menu li.kaidan::after {
        display: none;
    }
    
    /* 親メニュー項目にドロップダウンアイコンを追加 */
    .nav-menu > li.has-dropdown > a::before {
transition: transform 0.3s ease;
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-right-width: 0px;
    border-right-style: none;
    border-right-color: currentcolor;
    border-bottom-width: 0px;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    border-bottom: solid 2px #333;
    border-right: solid 2px #333;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto 0 auto -15px;
    }
    
    .nav-menu > li.has-dropdown:hover > a::before {
        transform: rotate(220deg);
    }
}

/* モバイルメニューの改善 */
@media (max-width: 768px) {
    /* モバイルメニュー内のサブメニューは通常表示 */
    .mobile-nav-menu li.kaidan {
        padding-left: 0;
    }
    
    /* モバイルメニューのリンクスタイルを維持 */
    .mobile-nav-menu .kaidan a {
        padding-left: 25px;
        font-size: 16px;
        border: none;
    }
    
    .mobile-nav-menu .kaidan::after {
        content: "";
        width: 11px;
        height: 12px;
        border-left: 1px solid #eb998f;
        border-bottom: 1px solid #eb998f;
        display: block;
        position: absolute;
        top: 2px;
        left: 7px;
    }
}

/* スムーススクロール動作の改善 */
html {
    scroll-behavior: smooth;
}

/* ヘッダーの高さを考慮したアンカーリンクのオフセット調整 */
section[id],
div[id] {
    scroll-margin-top: 80px; /* ヘッダーの高さ + 余白 */
}

@media (max-width: 768px) {
    section[id],
    div[id] {
        scroll-margin-top: 70px; /* モバイル用調整 */
    }
}