/*
Theme Name: KCIT Style Template
Description: リファクタリング済みCSS
Version: 6.0
*/

:root {
    --primary-color: #1a2a40;
    --text-main: #2d3436;
    --white: #ffffff;
    --bg-light: #f8f9fa;
    --accent: #0073aa;
}

body { font-family: "Inter", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; background-color: var(--bg-light); color: var(--text-main); margin: 0; }
.container { width: 95%; max-width: 1200px; margin: 0 auto; }

/* --- ヘッダー --- */
header { background: var(--white); padding: 10px 0; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; flex-direction: column; }
.header-main { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.custom-logo-link { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.site-name { font-weight: bold; color: var(--primary-color); white-space: nowrap; }

/* --- PCナビゲーション --- */
@media (min-width: 1025px) {
    .main-navigation { width: 100%; display: flex; justify-content: flex-start; margin-top: 10px; }
    .nav-toggle { display: none; }
    .nav-menu { display: flex; gap: 25px; list-style: none; margin: 0; padding: 0; }
    .nav-menu > li { position: relative; padding: 5px 0; }
    .nav-menu a { color: var(--text-main); font-weight: 600; text-decoration: none; padding: 8px 0; font-size: 0.95rem; }
}

/* --- モバイルナビゲーション --- */
@media (max-width: 1024px) {
    /* 1. メニューアイコン（三本線）のスタイル復活 */
    .nav-toggle {
        display: block; /* アイコンを表示 */
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1100;
        width: 44px;
        height: 44px;
        position: relative;
    }

    /* 三本線の共通設定 */
    .nav-toggle span,
    .nav-toggle span::before,
    .nav-toggle span::after {
        content: "";
        display: block;
        height: 2px;
        width: 25px;
        background: var(--primary-color);
        position: absolute;
        transition: all 0.3s ease;
    }

    .nav-toggle span {
        top: 21px;
        left: 9px;
    }

    .nav-toggle span::before {
        top: -8px;
        left: 0;
    }

    .nav-toggle span::after {
        top: 8px;
        left: 0;
    }

    /* メニューが開いている時（×印に変える場合） */
    .nav-toggle.active span {
        background: transparent;
    }

    .nav-toggle.active span::before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-toggle.active span::after {
        transform: rotate(-45deg);
        top: 0;
    }

    /* 2. メニュー本体のスタイル（スクロール修正 ＆ 横幅はみ出し防止） */
    .main-navigation {
        position: fixed;
        top: 60px; /* ヘッダーの高さ */
        left: 0;
        width: 100%;
        max-width: 100vw; /* 画面幅を絶対超えない */
        height: calc(100vh - 60px); 
        background: var(--white);
        overflow-y: auto; 
        overflow-x: hidden; /* 横スクロールを禁止 */
        -webkit-overflow-scrolling: touch;
        display: none; 
        z-index: 999;
        padding-bottom: 40px;
        box-sizing: border-box; /* パディングを幅に含める */
    }

    .main-navigation.active {
        display: block;
    }

    .nav-menu {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 100%;
        padding: 20px 0;
        margin: 0;
        list-style: none;
        box-sizing: border-box;
    }

    .nav-menu li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word; /* 長い英単語などの改行を許可 */
    }

    .nav-menu a {
        display: block;
        padding: 15px 20px;
        width: 100%;
        box-sizing: border-box;
        text-decoration: none;
        color: var(--text-main);
    }
}

/* --- レイアウト --- */
.main-wrapper { display: flex; flex-wrap: wrap; gap: 30px; padding: 30px 0; }
.site-main { flex: 1; min-width: 300px; }
.sidebar { width: 300px; background: var(--white); border-radius: 12px; padding: 25px; border: 1px solid #eee; }
.entry-card { background: var(--white); border-radius: 8px; padding: 25px; margin-bottom: 20px; border: 1px solid #eee; }

/* --- コンポーネント --- */
.new-icon { display: inline-block; background: var(--accent); color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; margin-right: 8px; font-weight: bold; }
.recent-posts { list-style: none; padding: 0; margin: 0; }
.recent-posts li { border-bottom: 1px dashed #ddd; padding: 10px 0; }
.recent-posts li:last-child { border-bottom: none; }

/* SNSアイコン */
.kcit-sns-container { display: inline-flex; vertical-align: middle; gap: 10px; flex-wrap: wrap; margin-left: 8px; }
.sns-link-item { transition: 0.2s ease; display: inline-block; line-height: 0; }
.sns-link-item:hover { opacity: 0.7; transform: scale(1.1); }
.sns-link-item svg, .sns-link-item img { object-fit: contain; display: block; fill: currentColor; }

/* --- フッター --- */
footer { background: var(--primary-color); color: #fff; padding: 40px 0; }
.footer-layout { display: flex; flex-wrap: wrap; gap: 40px; }
.footer-info { flex: 1; min-width: 250px; }
.footer-school-name { font-size: 1.2rem; font-weight: bold; margin-bottom: 15px; }
.footer-address { font-size: 0.9rem; line-height: 1.6; margin-bottom: 5px; }
.footer-sns-wrapper { margin-top: 5px; }
.footer-sns .sns-link-item { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.footer-map { flex: 1; min-width: 250px; }
.footer-label { font-weight: bold; margin-bottom: 10px; }
.footer-bottom { margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; font-size: 0.8rem; }
.map-container { width: 100%; height: 200px; border-radius: 8px; overflow: hidden; }
.map-container iframe { width: 100%; height: 100%; }

/* カスタマイザー ツールチップ（管理画面用だがここにも予備で記述） */
.kcit-custom-tooltip { position: absolute; z-index: 999999; background: #1a2a40; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 11px; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); max-width: 220px; line-height: 1.4; display: none; opacity: 0; transition: opacity 0.1s ease; }
.kcit-custom-tooltip.is-visible { display: block; opacity: 1; }


.announcement-bar {
    background-color: #fff3cd; /* 薄い黄色。目立たせたい場合は #ff4757 などに変更 */
    border-bottom: 1px solid #ffeeba;
    padding: 15px 0;
    text-align: center;
}

.announcement-bar .widget {
    margin-bottom: 0;
}

/* ウィジェット内のリンクを目立たせる設定 */
.announcement-bar a {
    color: #856404;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.announcement-bar a:hover {
    text-decoration: underline;
}

/* 募集中のバッジ風装飾（ウィジェットにHTMLを書く場合用） */
.oc-badge {
    background: #d63031;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    vertical-align: middle;
}