.main-header-area {
    display: none; /* デフォルト（PC）では表示しない */
}
.drawer-menu {
    display: none; /* デフォルト（PC）では表示しない */
}

@media screen and (max-width: 768px) {
    html{
        scroll-padding-top: 90px; /* 固定ヘッダーと中間エリアの高さ分をスクロール位置から余白として確保 */
    } 
    /* --- 1. 固定ヘッダー（ヘッダーエリア：高さ30px） --- */
    .header-container {
        position: fixed ;
        top: 0 ;
        left: 0 ;
        height: 30px ;
        z-index: 10000 ;
        background-color: #ffffff ;
        display: flex ;
        justify-content: flex-end ;
        align-items: center ;
        padding: 0 0 0 0 ;
    }

    .header, .teijin-logo-link {
        display: flex ;
        justify-content: flex-end ;
        align-items: center ;
        width: 100% ;
        height: 100% ;
        margin: 0;
    }

    /* --- 1.5 中間エリアも固定（高さはコンテンツに依存） --- */
    .main-header-area {
        position: fixed ; /* 固定に変更 */
        top: 30px ;      /* 帝人ロゴヘッダーのすぐ下に配置 */
        left: 0 ;
        z-index: 9999 ;
        display: flex ;
        justify-content: space-between ;
        align-items: center ;
        padding: 10px 15px ;
        background-color: #F8F8F8 ;
        width: 100% ;
        box-sizing: border-box ;
        border-bottom: 1px solid #ddd;
    }

    #p1 .withlink-logo {
        display: none ;
    }

    .withlink-logo-mobile img {
        display: block ;
        height: 40px ;
        width: auto ;
    }

    .hamburger-menu {
        width: 30px ;
        height: 22px ;
        display: flex ;
        flex-direction: column ;
        justify-content: space-between ;
        cursor: pointer ;
    }

    .hamburger-menu span {
        display: block ;
        height: 3px ;
        width: 100% ;
        background-color: var(--main-green) ;
        border-radius: 3px ;
    }

    /* --- 2. ナビバー（緑の帯）の開始位置を調整 --- */
    .navbar-container {
        position: static ;
        width: 100% ;
        margin-top: 90px ; 
        margin-left: 0 ;
        margin-right: 0 ;
        padding: 0 ;
        border-radius: 0 ;
    }

    .navbar {
        border-radius: 0 ;
        width: 100% ;
    }

    .navbar-menus {
        display: flex ;
        justify-content: center ;
        align-items: center ;
        padding: 10px 0 ;
        margin: 0 ;
        gap: 0 ;
    }

    .navbar-menus a:first-child {
        display: none ;
    }

    .navbar-menus a {
        display: flex ;
        align-items: center ;
        color: #FCFFFC ;
        font-size: 13px;
        text-decoration: none;
        padding: 0; 
        margin: 0px 5px;
        width: auto ;
    }
    .navbar-menus div {
        display: flex ;
        font-weight: bold;
        align-items: center ;
        color: #FCFFFC ;
        font-size: 13px;
        padding: 0; 
        margin: 0px 5px;
        width: auto ;
    }

    
    /* --- 3.新設：ハンバーガー展開メニュー（ドロワー） --- */
    .drawer-menu {
        display: block ;
        position: fixed;
        top: 0 ;
        right: -100% ;
        width: 100% ;
        height: 100% ;
        background-color: #fff ;
        z-index: 10001 ;
        transition: right 0.3s ease ;
        padding-top: 100px ;
    }

    .drawer-menu.is-active {
        right: 0 ;
    }

    /* --- 閉じるボタン（×）のデザイン --- */
    .menu-close {
        position: absolute ;
        top: 20px ;
        right: 20px ;
        width: 30px ;
        height: 30px ;
        cursor: pointer ;
    }

    /* ×の線を2本のspanで作る */
    .menu-close span {
        display: block ;
        position: absolute ;
        width: 100% ;
        height: 2px ;
        background-color: var(--main-green) ;
        top: 14px ;
    }

    .menu-close span:nth-child(1) { transform: rotate(45deg); }
    .menu-close span:nth-child(2) { transform: rotate(-45deg); }

    /* ドロワー内のリストデザイン */
    .drawer-menu ul {
        list-style: none ;
        padding: 0 ;
        margin: 0 ;
        border-top: 1px solid #eee ;
    }

    .drawer-menu ul li {
        border-bottom: 1px solid #eee ;
    }

    .drawer-menu ul li a {
        display: block ;
        padding: 15px 20px ;
        font-weight: bold;
        color: var(--main-green);
        text-decoration: none ;
        font-size: 16px ;
    }

    /* メニュー展開時の背景暗転（オーバーレイ） */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 10000;
    }
    .menu-overlay.is-active {
        display: block;
    }
}