/* 1. 基本設定 */
 body {
    margin: 0 !important; padding: 0 !important;
    background-color: #505c4e !important;
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 500 !important;
    color: #333;
}

/* PC/スマホ 表示切り替え */
@media (max-width: 767px) { .pc-only { display: none !important; } }
@media (min-width: 768px) { .sp-only { display: none !important; } }

/* 2. ヘッダーの外枠 */
#custom-lab-header {
    background-color: #e6e2d8;
    width: 100%; height: 45px;
    position: -webkit-sticky; position: sticky;
    top: 0; z-index: 99999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex; justify-content: center;
}

/* 3. 管理バー対策（高さは WordPress の html margin と揃える） */
body.admin-bar #custom-lab-header { top: 32px !important; }
@media (max-width: 782px) {
    body.admin-bar #custom-lab-header { top: 46px !important; }
}

/* 4. ヘッダーの中身レイアウト */
.header-inner-container {
    width: 100%; max-width: 1200px; height: 100%; padding: 0;
    display: flex; align-items: center;
}
/* PCは「ロゴ」「メニュー」「言語ボタン」を配置 */
.pc-header-layout { 
    justify-content: flex-end; /* 右寄せベース */
    position: relative;
}
/* ロゴは絶対配置で左端に固定 */
.custom-header-logo {
    margin-right: auto;
}

.sp-header-layout { justify-content: space-between; padding: 0 10px 0 20px; }

/* 5. ロゴ・メニュー・画像 */
.custom-header-logo img { display: block; width: auto; height: 25px; object-fit: contain; }
.custom-header-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 30px; align-items: center; }
.custom-header-nav li { margin: 0; padding: 0; }
.custom-header-nav li::before, .custom-header-nav li::after { content: none !important; display: none !important; }

/* PC版メニュー */
.custom-header-nav a {
    text-decoration: underline !important; text-underline-offset: 6px;
    color: #333; font-family: 'Noto Serif JP', serif;
    font-weight: 500; font-size: 14px; display: inline-block;
}
img { vertical-align: bottom; }

/* -----------------------------------------------------------
   ★ 言語切り替えボタン（EN/JA）のデザイン修正版
   ----------------------------------------------------------- */
.lang-switch-btn {
    display: flex; align-items: center; justify-content: center;
    height: 100%;      /* ★修正：ヘッダーの高さ(45px)一杯に広げる */
    padding: 0 20px;   /* 横幅の余白を少し広めに */
    margin-left: 25px; /* メニューとの隙間 */
    
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;   /* 文字サイズ */
    font-weight: 700;  /* ★修正：太文字にする */
    letter-spacing: 0.05em;
    text-decoration: none !important;
    border-radius: 0;  /* ★修正：高さ一杯なので角丸をなくす */
    transition: all 0.3s ease;
}

/* 日本語表示中（JAモード）：ヘッダーより濃いベージュ */
.lang-switch-btn.mode-ja {
    background-color: #b8b2a5; /* ★修正：濃いめのベージュに変更 */
    color: #333333;
}
.lang-switch-btn.mode-ja:hover { background-color: #aba598; }

/* 英語表示中（ENモード）：落ち着いた緑 */
.lang-switch-btn.mode-en {
    background-color: #6c8c74; 
    color: #ffffff;
}
.lang-switch-btn.mode-en:hover { background-color: #5a7561; }

/* スマホ用調整 */
.sp-lang-btn {
    margin-left: auto;
    margin-right: 20px; /* ハンバーガーとの隙間 */
    padding: 0 15px;    /* スマホは少し横幅を狭く */
    font-size: 12px;
}

/* ----------------------------------------------------------- */

/* 6. レスポンシブロゴ調整 */
@media (max-width: 1240px) {
    .header-inner-container { padding-left: 20px; padding-right: 20px; max-width: 100%; }
}
@media (max-width: 768px) {
    .custom-header-logo img { height: 20px; }
}

/* 7. 徹底的な隙間除去 */
#custom-lab-header { margin-bottom: 0 !important; }
#page, #content, .site-content, .site-main, .entry-content { margin-top: 0 !important; padding-top: 0 !important; }
.entry-header, .page-header, header.entry-header { display: none !important; }
#content > *:first-child, .site-content > *:first-child,
.wp-block-cover:first-child, .wp-block-image:first-child, .alignfull:first-child {
    margin-top: 0 !important; padding-top: 0 !important;
}

/* 8. ハンバーガーメニュー */
.hamburger-btn {
    display: block; width: 24px; height: 20px; 
    position: relative; cursor: pointer; z-index: 100001;
    margin-left: 0;
}
.hamburger-btn span {
    display: block; position: absolute; width: 100%; height: 2px; 
    background-color: #333; transition: all 0.3s ease;
}
.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 9px; } 
.hamburger-btn span:nth-child(3) { bottom: 0; }
.hamburger-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

#sp-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #e6e2d8;
    z-index: 100000;
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease;
    display: flex; align-items: center; justify-content: center;
}
#sp-menu-overlay.active { opacity: 1; visibility: visible; }
.sp-nav-list { list-style: none; padding: 0; margin: 0; text-align: center; }
.sp-nav-list li { margin-bottom: 30px; }
.sp-nav-list a {
    font-family: 'Noto Serif JP', serif; font-size: 20px; font-weight: 500;
    letter-spacing: 0.05em; color: #333; display: block;
    text-decoration: underline !important; text-underline-offset: 6px;
}

/* -----------------------------------------------------------
   ★ モバイル用動画を小さくする設定
   ----------------------------------------------------------- */
.sp-video-small {
    width: 60% !important; margin-left: auto !important; margin-right: auto !important;
    display: block !important;
}
.sp-video-small video {
    width: 100% !important; height: auto !important;
}

/* -----------------------------------------------------------
   ★ Googleマップのレスポンシブ設定
   ----------------------------------------------------------- */
.lab-map-wrapper {
    position: relative; width: 100%; padding-top: 56.25%; height: 0; overflow: hidden;
}
@media (max-width: 767px) {
    .lab-map-wrapper { width: 92% !important; margin: 0 auto !important; }
}
.lab-map-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0;
}

/* -----------------------------------------------------------
   ★ ロゴの設定
   ----------------------------------------------------------- */
.custom-header-logo img.logo {
    display: inline;
}
.custom-header-logo a, .custom-header-logo a:hover, .custom-header-logo a:active {
    text-decoration: none;
    color: #333;
}