/*
Theme Name: en-scheduler-final-fixed
*/
:root { --navy: #3b5998; --gold: #d4af37; --cream: #f9f7f0; --border: #eff3f4; }
body { font-family: -apple-system, sans-serif; margin: 0; background: #fff; color: #333; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* ヘッダー */
.site-header { height: 64px; border-bottom: 2px solid var(--gold); background: #fff; display: flex; align-items: center; position: sticky; top: 0; z-index: 1000; }
.header-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }
.logo { font-weight: 800; font-size: 19px; color: #000; text-decoration: none; }
.logo span { color: #666; font-size: 14px; margin-left: 10px; }
.btn-contact { border: 1px solid var(--navy); color: var(--navy); padding: 7px 18px; border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: bold; }

/* 検索エリア */
.hero-area { background: var(--cream) !important; padding: 80px 0; text-align: center; border-bottom: 1px solid var(--border); }
.hero-area h2 { margin-bottom: 40px; font-size: 32px; font-weight: 800; }
.search-unit { position: relative; max-width: 720px; margin: 0 auto; display: flex; background: #fff; border-radius: 40px; border: 1px solid #cfd9de; padding: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.search-unit i { padding-left: 20px; line-height: 50px; color: #536471; font-size: 22px !important; }
.search-unit input { flex: 1; border: none; outline: none; font-size: 18px; padding: 0 15px; background: transparent; }
.search-unit button { background: var(--navy); color: #fff; border: none; padding: 12px 35px; border-radius: 35px; font-weight: bold; cursor: pointer; }

/* 下層：2カラムレイアウト固定 */
.sub-layout { display: flex !important; flex-direction: row !important; gap: 40px; padding: 40px 20px; align-items: flex-start; }
.sidebar { flex: 0 0 260px; }
.main-content { flex: 1; min-width: 0; }
.entry-title { border-bottom: 2px solid var(--gold); padding-bottom: 15px; margin-bottom: 40px; font-size: 28px; }

/* サイドバー装飾 */
.side-menu { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: #fff; }
.side-menu h3 { border-bottom: 2px solid var(--gold); padding-bottom: 10px; font-size: 16px; margin: 0 0 15px; }
.side-menu ul { list-style: none; padding: 0; margin: 0; }
.side-menu a { text-decoration: none; color: #555; display: block; padding: 10px 0; font-size: 16px; } /* 14pxから拡大 */
.is-active > a { color: var(--navy); font-weight: bold; }

/* 子リストの装飾：金色の「•」 */
.sub-list { padding-left: 10px !important; margin: 5px 0 10px 5px !important; border-left: none !important; }
.sub-list li { position: relative; padding-left: 18px; }
.sub-list li::before { content: "•"; position: absolute; left: 0; color: var(--gold); font-size: 20px; line-height: 38px; }
.sub-list a { padding: 5px 0 !important; font-size: 15px !important; line-height: 1.5; } /* 13pxから拡大 */
.sub-list a.current { color: var(--navy) !important; font-weight: bold; }

/* トップページとタイル */
.home-content { margin-top: 50px; }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 60px; }
.tile { padding: 40px 25px; border: 1px solid var(--border); border-radius: 16px; text-decoration: none; background: #fff; text-align: center; transition: 0.2s; }
.tile h3 { margin: 0 0 10px; color: var(--navy); font-size: 18px; }
.tile p { margin: 0; color: #666; font-size: 13px; }

/* バナー */
.manual-banner a { display: flex; align-items: center; background: #fffdf0; border: 2px solid var(--gold); border-radius: 12px; padding: 30px; text-decoration: none; margin-bottom: 40px; color: var(--navy); }
.manual-banner .icon { font-size: 40px !important; margin-right: 25px; }
.manual-banner h3 { margin: 0 0 5px; font-size: 20px; font-weight: 800; }

/* 記事リストアイテム（メインエリア） */
.list-item { 
    display: flex; 
    justify-content: space-between; 
    padding: 20px; 
    border-bottom: 1px solid var(--border); 
    text-decoration: none; 
    color: #333; 
    font-size: 16px; /* 文字サイズを大きく調整 */
    transition: 0.2s;
}
.list-item:hover { background: #f9f9f9; color: var(--navy); }
.list-item i { color: var(--gold); }

.site-footer { text-align: center; padding: 60px; color: #999; border-top: 1px solid var(--border); margin-top: 60px; }

@media (max-width: 850px) { .sub-layout { flex-direction: column !important; } .tile-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- マニュアル記事内の装飾 --- */

/* コールアウト（補足枠） */
.manual-callout {
    display: flex;
    gap: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0 40px;
    align-items: flex-start;
}
.manual-callout.info { background: #f0f4f8; border-left: 4px solid var(--navy); }
.manual-callout .icon { font-size: 20px; line-height: 1.5; }
.manual-callout .text { font-size: 15px; color: #333; }

/* 手順ステップ */
.step-item {
    margin-bottom: 60px;
}
.step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.step-num {
    background: var(--navy);
    color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
}
.step-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #000;
}

/* 記事内の画像 */
.manual-image {
    margin: 20px 0;
    text-align: left;
}
.manual-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}
.manual-image.thin-border img {
    box-shadow: none;
    border: 1px solid #ddd;
}

/* 注意書き（箇条書き） */
.manual-note {
    background: #fffcf0;
    border: 1px solid #f0e6cc;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0;
}
.manual-note ul {
    margin: 0;
    padding-left: 20px;
}
.manual-note li {
    font-size: 14px;
    color: #536471;
    margin-bottom: 5px;
}