/* =============================================
   1. 共通設定（ロゴ・スライダー）
   ============================================= */
body { font-size: 16px; font-family: sans-serif; margin: 0; }

.header-top { padding: 20px 0; text-align: center; background-color: #fff; }
.company-name { font-size: 20px; font-weight: bold; color: #333; text-decoration: none; display: block; letter-spacing: 0.1em; }
.header-copy { font-size: 12px; color: #666; font-style: italic; display: block; margin-top: 5px; }

/* スライダー */
.slider-container { width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; position: relative; }
.slider { display: flex; width: 300%; animation: slide-animation 15s infinite; }
.slide { width: 100%; position: relative; }
.slide img { width: 100%; height: auto; display: block; object-fit: cover; }
.slide-text { position: absolute; bottom: 20%; left: 5%; background: rgba(0, 68, 51, 0.8); color: #fff; padding: 10px 20px; font-size: 1.2rem; font-weight: bold; }

@keyframes slide-animation {
    0%, 30% { transform: translateX(0); }
    33%, 63% { transform: translateX(-33.33%); }
    66%, 96% { transform: translateX(-66.66%); }
    100% { transform: translateX(0); }
}

/* =============================================
   2. メニュー設定（PC・基本）
   ============================================= */
.tatami-nav { background-color: #f9f7f2; border-top: 1px solid #eee; border-bottom: 3px solid #004433; }

/* PCメニュー：常に横並び表示 */
.menu-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0; padding: 0;
}
.menu-list li { position: relative; }
.menu-list a { display: block; padding: 15px 20px; text-decoration: none; color: #333; font-weight: bold; transition: 0.3s; }

/* ホバー：白抜きボールド */
.menu-list a:hover { background-color: #004433 !important; color: #ffffff !important; font-weight: bold !important; }

/* 子メニュー（プルダウン） */
.sub-menu {
    display: none; position: absolute; top: 100%; left: 0; width: 220px;
    background-color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 1000; padding: 0; list-style: none;
}
.menu-list li:hover > .sub-menu { display: block; }
.sub-menu a { padding: 12px 20px; font-size: 14px; border-bottom: 1px solid #eee; }

/* 特別枠 */
.nav-global a { color: #a18948 !important; }
.nav-contact a { color: #004433 !important; background-color: #fff !important; border: 1px solid #004433; margin-left: 10px; border-radius: 4px; }
.nav-contact a:hover { background-color: #004433 !important; color: #fff !important; }

/* =============================================
   3. スマホ用設定（768px以下）
   ============================================= */
.menu-toggle-btn { display: none; } /* PCでは隠す */

@media screen and (max-width: 768px) {
    .company-name { font-size: 18px; }
    .header-copy { font-size: 13px; }
    .slide-text { font-size: 1rem; bottom: 10%; }

    /* 開閉ボタン表示 */
    .menu-toggle-btn {
        display: block; width: 100%; padding: 15px;
        background: #004433; color: #fff; border: none;
        font-size: 18px; font-weight: bold; cursor: pointer;
    }

    /* スマホでは最初は隠す（JSで制御） */
    .menu-list {
        display: none;
        flex-direction: column;
    }
    .menu-list li { border-bottom: 1px solid #eee; }
    .nav-contact a { margin-left: 0; margin-top: 5px; border-radius: 0; }

    /* 子メニューを最初から展開 */
    .sub-menu { position: static; width: 100%; background: #fdfcf9; display: block; box-shadow: none; padding-left: 20px; }
}