/* ========================================================
   Home Page Layout (index.html)
   ======================================================== */
.hero {
    background: linear-gradient(160deg, #EAF6FD 0%, #F8FBFF 100%);
    padding: 60px 24px 100px;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--border-color);
}
.hero::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 200px;
    height: 200px;
    background: #FFE58F;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    z-index: 1;
    opacity: 0.6;
}
.hero::after {
    content: '+';
    position: absolute;
    bottom: 30px;
    right: 60px;
    font-size: 120px;
    color: #FFBEEF;
    font-weight: 900;
    line-height: 1;
    z-index: 1;
    transform: rotate(15deg);
    opacity: 0.5;
}
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.hero-text { flex: 1; }

/* バッジ */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--charcoal);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}
.hero-badge i { color: var(--gold-certified); }

.hero h1 {
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 900;
    margin-bottom: 20px;
    color: var(--charcoal);
    line-height: 1.35;
}
.hero h1 span { color: var(--ims-primary); }

.hero-desc {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.9;
    margin-bottom: 32px;
}

/* CTAボタングループ */
.hero-cta-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

/* 注記テキスト */
.hero-note {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
}

/* アイキャッチ */
.hero-eyecatch {
    flex: 1.1;
    height: 360px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    border: 3px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ims-accent) 0%, var(--red-active) 100%);
    text-align: center;
}

.smart-matcher {
    background: #fff;
    max-width: 960px;
    margin: -40px auto 60px;
    padding: 24px 40px;
    border-radius: 100px;
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 3px solid var(--border-color);
    position: relative;
    z-index: 10;
    gap: 20px;
}
.smart-matcher::before {
    content: "スケジュール照合";
    position: absolute;
    top: -14px;
    left: 48px;
    background: var(--ims-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--border-color);
    letter-spacing: 0.05em;
}
.matcher-text { font-weight: 700; }
.matcher-text i { color: var(--ims-accent); margin-right: 10px; font-size: 20px; }

.main-section { padding: 0 0 80px; }
.container.grid-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 50px; }

.tab-menu { display: flex; border-bottom: 3px solid var(--border-color); margin-bottom: 30px; gap: 5px; }
.tab-button { background: none; border: none; padding: 15px 30px; font-size: 18px; font-weight: 900; color: var(--text-light); cursor: pointer; position: relative; font-family: inherit; transition: color 0.2s; }
.tab-button:hover, .tab-button.active { color: var(--charcoal); }
.tab-button::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 4px; background-color: transparent; transition: background-color 0.2s; }
.tab-button.active::after { background-color: var(--charcoal); }

.class-list { display: flex; flex-direction: column; gap: 20px; }
.class-card .card-img { width: 240px; border-right: 2px solid var(--border-color); }
.class-card .card-content { padding: 25px 30px; flex: 1; }
.card-title { font-size: 22px; font-weight: 900; margin: 0 0 10px 0; color: var(--charcoal); line-height: 1.4; }
.card-desc { font-size: 14px; color: var(--text-light); margin: 0; line-height: 1.6; font-weight: 500; }

.sidebar-wrap { display: flex; flex-direction: column; gap: 30px; }
.sidebar-widget { background: #fff; border: 2px solid var(--border-color); border-radius: 16px; overflow: hidden; box-shadow: 4px 4px 0 var(--border-color); }
.widget-header { background-color: var(--bg-section); color: var(--charcoal); padding: 18px 20px; font-size: 18px; border-bottom: 2px solid var(--border-color); display: flex; align-items: center; gap: 10px; }
.widget-list { padding: 20px; }
.widget-item { display: flex; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px dashed var(--border-color); }
.widget-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.col-img { width: 80px; height: 60px; background: #E2E8F0; border-radius: 8px; border: 1px solid var(--border-color); }
.col-text { flex: 1; }
.col-title { font-size: 14px; font-weight: 900; line-height: 1.4; margin-bottom: 6px; color: var(--charcoal); }
.col-meta { font-size: 12px; color: var(--text-light); display: flex; justify-content: space-between; font-weight: 700;}

.load-more-wrap { text-align: center; margin-top: 40px; }
.btn-load-more { background: #fff; color: var(--charcoal); border: 2px solid var(--border-color); padding: 14px 50px; font-family: inherit; font-size: 16px; font-weight: 900; border-radius: 50px; cursor: pointer; transition: 0.2s; box-shadow: 3px 3px 0 var(--border-color); }
.btn-load-more:hover { background: var(--bg-section); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--border-color); }