/*
Theme Name: otarukaihatu
*/

/* Header Styles */
/* PC表示時（1025px以上）のみ左右配置を適用 */
@media (min-width: 1025px) {
    .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
    }
}

/* PC: Hide hamburger button */
@media (min-width: 1024px) {
    .hamburger-btn {
        display: none !important;
    }
    
    header .global-nav,
    header nav.global-nav,
    #global-nav {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .global-nav-inner {
        display: flex !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }
    
    .global-nav ul,
    .global-nav .menu,
    .global-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1.5rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .global-nav li {
        display: list-item !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .global-nav a {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-decoration: none !important;
        color: #374151 !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
    }
    
    .nav-overlay {
        display: none !important;
    }
    
    /* PC表示時はメニューを閉じるボタンを非表示 */
    .menu-close-btn {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Tablet/SP: Hide default menu, show hamburger */
@media (max-width: 1023px) {
    /* ハンバーガーボタンを前面に表示 */
    .hamburger-btn {
        position: relative !important;
        z-index: 10000 !important;
        display: flex !important;
    }
    
    /* PC用メニューを確実に非表示 - 非アクティブ時のみ */
    header .global-nav:not(.is-active),
    header nav.global-nav:not(.is-active),
    header nav#global-nav:not(.is-active),
    #global-nav:not(.is-active),
    body header .global-nav:not(.is-active),
    body header nav.global-nav:not(.is-active) {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    /* メニュー内のすべての要素も非表示 - 非アクティブ時のみ（バツボタンは除外） */
    header .global-nav:not(.is-active) *:not(.menu-close-btn),
    header nav.global-nav:not(.is-active) *:not(.menu-close-btn),
    header nav#global-nav:not(.is-active) *:not(.menu-close-btn),
    #global-nav:not(.is-active) *:not(.menu-close-btn),
    body header .global-nav:not(.is-active) *:not(.menu-close-btn),
    body header nav.global-nav:not(.is-active) *:not(.menu-close-btn),
    .global-nav:not(.is-active) ul,
    .global-nav:not(.is-active) .menu,
    .global-nav:not(.is-active) .global-menu,
    .global-nav:not(.is-active) .global-nav-inner,
    .global-nav:not(.is-active) div,
    .global-nav:not(.is-active) a,
    .global-nav:not(.is-active) li {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* メニューがアクティブな時のみ表示 */
    header .global-nav.is-active,
    header nav.global-nav.is-active,
    header nav#global-nav.is-active,
    #global-nav.is-active,
    body header .global-nav.is-active,
    body header nav.global-nav.is-active {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 10000 !important;
        opacity: 1 !important;
        visibility: visible !important;
        background-color: #ffffff !important;
        overflow: visible !important;
        clip: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }
    
    /* アクティブ時の内部コンテナ - より具体的なセレクタで確実に表示 */
    header .global-nav.is-active .global-nav-inner,
    header nav.global-nav.is-active .global-nav-inner,
    #global-nav.is-active .global-nav-inner,
    body header .global-nav.is-active .global-nav-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        clip: auto !important;
        position: relative !important;
        pointer-events: auto !important;
    }
    
    /* アクティブ時のみul要素を表示 - より具体的なセレクタ */
    header .global-nav.is-active ul,
    header nav.global-nav.is-active ul,
    #global-nav.is-active ul,
    body header .global-nav.is-active ul,
    .global-nav.is-active .menu,
    .global-nav.is-active .global-menu,
    header .global-nav.is-active .global-menu,
    #global-nav.is-active .global-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        position: relative !important;
        pointer-events: auto !important;
    }
    
    /* アクティブ時のli要素 */
    header .global-nav.is-active li,
    header nav.global-nav.is-active li,
    #global-nav.is-active li,
    body header .global-nav.is-active li,
    .global-nav.is-active .global-menu li {
        display: list-item !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        margin: 0 !important;
        position: relative !important;
        pointer-events: auto !important;
    }
    
    /* アクティブ時のa要素 */
    header .global-nav.is-active a,
    header nav.global-nav.is-active a,
    #global-nav.is-active a,
    body header .global-nav.is-active a,
    .global-nav.is-active .global-menu a {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        text-decoration: none !important;
        color: #111827 !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        padding: 0.5rem 0 !important;
        position: relative !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10001 !important;
    }
    
    .nav-overlay {
        z-index: 9998 !important;
        pointer-events: none !important;
    }
    
    .nav-overlay.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important; /* オーバーレイをクリックしてもメニューを閉じない */
    }
    
    /* メニューがアクティブな時は、メニュー全体とその子要素を確実にクリック可能にする */
    .global-nav.is-active,
    .global-nav.is-active *:not(.menu-close-btn) {
        pointer-events: auto !important;
        z-index: 10001 !important;
        position: relative !important;
    }
    
    /* 閉じるボタンは固定位置を維持 */
    .global-nav.is-active .menu-close-btn {
        position: fixed !important;
    }
    
    /* メニューコンテナ自体のz-indexを確実に設定 */
    #global-nav.is-active {
        z-index: 10000 !important;
        pointer-events: auto !important;
    }
    
    /* バツボタンのスタイル */
    .menu-close-btn {
        display: none !important;
        position: fixed !important;
        top: 1.5rem !important;
        right: 1.5rem !important;
        width: 4rem !important;
        height: 4rem !important;
        background-color: #ffffff !important;
        border: 2px solid #1f2937 !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        z-index: 10003 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        transition: background-color 0.2s ease, transform 0.2s ease !important;
    }
    
    .global-nav.is-active .menu-close-btn {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: fixed !important;
        left: auto !important;
        right: 1.5rem !important;
        top: 1.5rem !important;
        bottom: auto !important;
        z-index: 10003 !important;
    }
    
    .menu-close-btn:hover {
        background-color: #f3f4f6 !important;
        transform: scale(1.05) !important;
    }
    
    .menu-close-btn:active {
        transform: scale(0.95) !important;
    }
    
    .menu-close-btn .close-icon {
        font-size: 3rem !important;
        line-height: 1 !important;
        color: #1f2937 !important;
        font-weight: 400 !important;
        pointer-events: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    .menu-close-btn:hover .close-icon,
    .menu-close-btn:focus .close-icon {
        color: #111827 !important;
    }
    
    .menu-close-btn:focus {
        outline: 3px solid #3b82f6 !important;
        outline-offset: 2px !important;
    }
    
    /* Hamburger animation to X */
    body.menu-open .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    body.menu-open .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    
    body.menu-open .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }
}

/* Post Content Typography - 記事本文のタイポグラフィ最適化 */
.post-content .post-body,
.post-excerpt {
    line-height: 1.9;
}

/* 段落の余白 */
.post-content .post-body p,
.post-excerpt p {
    margin-bottom: 1.5em;
}

/* リストのスタイル */
.post-content .post-body ul,
.post-content .post-body ol,
.post-excerpt ul,
.post-excerpt ol {
    margin: 2em 0;
    padding-left: 2em;
}

.post-content .post-body ul {
    list-style-type: disc;
}

.post-content .post-body ol {
    list-style-type: decimal;
}

/* リスト項目の間隔 */
.post-content .post-body li,
.post-excerpt li {
    margin-bottom: 0.5em;
    line-height: 1.9;
}

/* ネストされたリスト */
.post-content .post-body ul ul,
.post-content .post-body ol ol,
.post-content .post-body ul ol,
.post-content .post-body ol ul,
.post-excerpt ul ul,
.post-excerpt ol ol,
.post-excerpt ul ol,
.post-excerpt ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* 見出しの余白 */
.post-content .post-body h1,
.post-content .post-body h2,
.post-content .post-body h3,
.post-content .post-body h4,
.post-content .post-body h5,
.post-content .post-body h6,
.post-excerpt h1,
.post-excerpt h2,
.post-excerpt h3,
.post-excerpt h4,
.post-excerpt h5,
.post-excerpt h6 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: bold;
    line-height: 1.5;
}

.post-content .post-body h1:first-child,
.post-content .post-body h2:first-child,
.post-content .post-body h3:first-child,
.post-excerpt h1:first-child,
.post-excerpt h2:first-child,
.post-excerpt h3:first-child {
    margin-top: 0;
}

/* 引用のスタイル */
.post-content .post-body blockquote,
.post-excerpt blockquote {
    margin: 2em 0;
    padding-left: 1.5em;
    border-left: 4px solid #e5e7eb;
    font-style: italic;
    color: #6b7280;
}

/* 強調テキスト */
.post-content .post-body strong,
.post-excerpt strong {
    font-weight: 700;
}

.post-content .post-body em,
.post-excerpt em {
    font-style: italic;
}

/* リンク */
.post-content .post-body a,
.post-excerpt a {
    color: #2563eb;
    text-decoration: underline;
}

.post-content .post-body a:hover,
.post-excerpt a:hover {
    color: #1d4ed8;
}

/* 画像の余白 */
.post-content .post-body img,
.post-excerpt img {
    margin: 2em 0;
    max-width: 100%;
    height: auto;
}

/* テーブルのスタイル */
.post-content .post-body table,
.post-excerpt table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
}

.post-content .post-body th,
.post-content .post-body td,
.post-excerpt th,
.post-excerpt td {
    padding: 0.75em;
    border: 1px solid #e5e7eb;
}

.post-content .post-body th,
.post-excerpt th {
    background-color: #f9fafb;
    font-weight: 600;
}

/* Google Maps iframe レスポンシブ対応 */
footer .map-iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: 0 !important;
}

/* 下層ページコンテンツの読みやすさ改善 */
/* proseクラス内の段落 */
.prose p,
main .prose p,
.prose-gray p {
    line-height: 1.8 !important;
    margin-bottom: 1.5em !important;
    margin-top: 0 !important;
}

/* proseクラス内の見出し */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
main .prose h1,
main .prose h2,
main .prose h3,
main .prose h4,
main .prose h5,
main .prose h6,
.prose-gray h1,
.prose-gray h2,
.prose-gray h3,
.prose-gray h4,
.prose-gray h5,
.prose-gray h6 {
    line-height: 1.6 !important;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
}

.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child,
main .prose h1:first-child,
main .prose h2:first-child,
main .prose h3:first-child,
.prose-gray h1:first-child,
.prose-gray h2:first-child,
.prose-gray h3:first-child {
    margin-top: 0 !important;
}

/* proseクラス内のリスト */
.prose ul,
.prose ol,
main .prose ul,
main .prose ol,
.prose-gray ul,
.prose-gray ol {
    line-height: 1.8 !important;
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
}

.prose li,
main .prose li,
.prose-gray li {
    line-height: 1.8 !important;
    margin-bottom: 0.75em !important;
}

/* 一般的なコンテンツエリア（main内の直接の要素） */
main p {
    line-height: 1.8 !important;
    margin-bottom: 1.5em !important;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    line-height: 1.6 !important;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
}

main h1:first-child,
main h2:first-child,
main h3:first-child {
    margin-top: 0 !important;
}

/* 改行時の行間 */
main br,
.prose br,
.prose-gray br {
    line-height: 1.8 !important;
}