@charset "UTF-8";

/* =========================================
   Variables
   ========================================= */
:root {
    --primary-blue: #1f3269; 
    --bg-light: #F4F8FB; 
    --text-color: #333333;
    --c-dark: #001B36; 
    --c-accent-gold: #C5A059; 
    --gradient-gold: linear-gradient(135deg, #F8C63D 0%, #C5A059 100%); 
    --gradient-cta: linear-gradient(90deg, #8A2BE2 0%, #00FFFF 100%); 
    --font-ja: 'Noto Sans JP', sans-serif;
    --font-en: 'Jost', 'Montserrat', sans-serif;
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================================
   Base & Reset
   ========================================= */
html { 
    scroll-behavior: smooth; 
    scroll-padding-top: 80px; 
    font-size: 75%;
}
body { font-family: var(--font-ja); line-height: 1.8; color: var(--text-color); margin: 0; padding-top: 80px; padding-bottom: 140px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p { margin: 0; }
ul { list-style: none; padding: 0; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 80px 0; }
.l-section { padding: 60px 20px; }
.l-section__inner { max-width: 1100px; margin: 0 auto; }
.bg-light { background-color: var(--bg-light); }

.bg-dark { background-color: var(--primary-blue); color: #fff; }
.bg-primary-navy { background-color: var(--primary-blue); color: #fff; }

.black-bg { background: #000; color: #fff; }
.text-center { text-align: center; }

/* Buttons */
.c-btn-gradient { background: var(--gradient-cta); color: #fff !important; padding: 20px 50px; font-size: 1.25rem; font-weight: 900; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3); transition: 0.3s; position: relative; overflow: hidden; }
.c-btn-gradient::after { content: '>'; margin-left: 20px; font-family: var(--font-en); }
.c-btn-gradient:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 35px rgba(138, 43, 226, 0.4); }

.c-header-btn { background: var(--gradient-cta); color: #fff; border-radius: 30px; font-weight: 700; padding: 10px 25px; font-size: 1.5rem; display: inline-block; transition: 0.3s; box-shadow: 0 4px 10px rgba(138, 43, 226, 0.15); }
.c-header-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Header */
.l-header { background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; border-bottom: 1px solid #eaeaea; }
.l-header__inner { display: flex; justify-content: space-between; align-items: center; height: 80px; max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.l-header__logo img { height: 32px; }
.l-header__nav ul { display: flex; gap: 30px; }
.l-header__nav a { color: var(--c-dark); font-weight: 900; font-size: 1.5rem; }
.is-pc { display: block; }
.hide-sp { display: inline-block; }
.hide-pc { display: none; } 

/* 1. Hero Section */
.hero { 
    position: relative;
    padding: 0; 
    text-align: center; 
    width: 100%; 
    background-color: #ffffff; 
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 123px; 
    background-color: var(--primary-blue);
    z-index: 1;
}
.hero__inner { 
    position: relative;
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    z-index: 2; 
}
.hero__img { width: 100%; height: auto; display: block; margin: 0 auto; }

/* 2. SPECIAL PARTNERS -> 日経掲載ランキング1位企業 */
.p-logos { padding: 30px 20px; position: relative; }
.p-logos__title { display: block; font-size: 2rem; font-weight: 900; color: var(--c-accent-gold); text-align: center; margin-bottom: 40px; }
.two-column-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; max-width: 1000px; margin: 0 auto; }
.logo-award-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 40px 40px; border-radius: 12px; text-align: center; transition: 0.4s; }
.logo-award-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.06); border-color: var(--c-accent-gold); box-shadow: 0 15px 35px rgba(0,0,0,0.3); }

/* アワードテキスト関連 */
.ranking-title { font-size: 1.8rem; color: #fff; margin-bottom: 15px; font-weight: 700; text-align: center; }
.ranking-highlight { text-align: center; margin-bottom: 25px; }

/* テキスト部分（年連続、位！）のスタイル */
.ranking-highlight .highlight-text { 
    display: inline-block; 
    padding: 0.1em 0; 
    font-size: 2.2rem; 
    font-weight: 900; 
    line-height: 1; 
    background: var(--gradient-gold); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-family: "Times New Roman", Times, serif; 
}

/* 数字部分（17, 1）を大きくするスタイル */
.ranking-highlight .highlight-num {
    font-size: 4rem;
    line-height: 1; 
}

/* ロゴレイアウト（横並びとサイズ固定設定を完全復元） */
.award-main-wrap { display: flex; align-items: center; justify-content: center; gap: 25px; }

/* 左側：ランキングバッジの横幅を固定して巨大化を防止 */
.award-badge { width: 140px; flex-shrink: 0; }
.award-badge img { width: 100%; height: auto; object-fit: contain; margin: 0; }

/* 右側：企業ロゴ（余白を詰め、ロゴを枠いっぱいに拡大） */
.company-logo-box { 
    background-color: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 10px 15px; 
    width: 240px;       
    height: 110px;      
    border-radius: 4px; 
    box-sizing: border-box; 
    flex-shrink: 0;
}
.company-logo-box img { 
    max-width: 100%;    
    max-height: 100%;   
    object-fit: contain; 
    margin: 0; 
}

/* 見出しスタイル共通 */
.c-sec-title { text-align: center; margin-bottom: 10px; }
.c-sec-title .en { display: block; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.25em; color: var(--c-accent-gold); margin-bottom: 12px; }
.c-sec-title .ja { font-size: 2.2rem; font-weight: 900; color: var(--primary-blue); }
.c-sec-title--white .ja { color: #fff; }

/* 3. セミナータイトル */
.p-seminar-title { padding: 50px 20px 20px; text-align: center; }
.p-seminar-title h2 { font-size: 2.2rem; line-height: 1.5; color: var(--primary-blue); font-weight: 900; }
.p-seminar-title .highlight { color: var(--c-accent-gold); font-size: 2.6rem; display: inline-block; margin-top: 10px; }

/* 4. メッセージ */
.p-message { padding-bottom: 40px; }
.message-box { max-width: 800px; margin: 0 auto; text-align: center; }
.message-box p { font-size: 1.2rem; line-height: 2.2; color: #333; font-weight: 700; margin-bottom: 15px; }

/* 5. 開催概要 */
.p-info__container { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #eee; margin-top: 30px; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th { width: 20%; text-align: center; vertical-align: middle; background: var(--bg-light); padding: 10px; font-weight: 900; color: var(--primary-blue); border-bottom: 1px solid #eaeaea; }
.info-table td { padding: 20px 30px; font-weight: 700; border-bottom: 1px solid #eaeaea; line-height: 1.8; vertical-align: middle; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }

/* 6. タイムライン */
.p-timeline { max-width: 850px; margin: 0 auto; padding-top: 30px;}
.p-timeline__item { display: flex; gap: 40px; padding: 40px 0; border-bottom: 1px solid #eaeaea; }
.p-timeline__item .time { width: 120px; font-family: var(--font-en); font-size: 2.5rem; font-weight: 900; color: var(--c-accent-gold); }
.p-timeline__item .time span { font-size: 1rem; display: block; color: var(--text-color); }
.p-timeline__item .content { flex-grow: 1; }
.p-timeline__item .title { font-size: 1.5rem; font-weight: 900; margin-bottom: 12px; line-height: 1.5; color: var(--primary-blue); }
.p-timeline__item .desc { color: #333; font-size: 0.95rem; line-height: 1.6; }
.p-timeline__item .content .label { display: block; background: var(--c-accent-gold); color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 1.3rem; font-weight: 900; width: fit-content; margin-bottom: 10px; }

.p-timeline__item--rich {
    padding: 40px;
    margin: 20px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    border-radius: 12px;
    border: 3px solid transparent; 
    background: 
        linear-gradient(#fff, #fff) padding-box, 
        var(--gradient-cta) border-box; 
}

.program-note { text-align: right; font-size: 0.85rem; color: #666; margin-top: 20px; }

/* 7. 登壇者紹介 */
#speakers { background-color: var(--primary-blue); padding-top: 80px; }
#speakers .c-sec-title .ja { color: #fff; }
.speaker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: stretch; margin-top: 30px; }
.speaker-card { height: 100%; display: flex; flex-direction: column; }
.speaker-card .card-inner { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 30px 40px; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 5px 25px rgba(0,0,0,0.02); transition: 0.3s var(--ease); }
.speaker-card:hover .card-inner { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); border-color: var(--c-accent-gold); }
.speaker-img-wrapper { width: 180px; height: 180px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg-light); box-shadow: 0 0 0 3px var(--c-accent-gold); margin: 0 auto 20px; }
.speaker-img { width: 100%; height: 100%; object-fit: cover; }
.speaker-corp { display: block; background: var(--primary-blue); color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 900; margin: 0 auto 12px; width: fit-content; }
.speaker-role { display: block; font-size: 0.9rem; color: #555; font-weight: 700; line-height: 1.5; margin: 0 auto 12px; padding: 0 10px; word-break: break-all; }
.speaker-name { display: block; font-size: 1.6rem; font-weight: 900; color: var(--primary-blue); margin: 0 auto 25px; }
.speaker-bio { width: 100%; flex-grow: 1; font-size: 0.9rem; color: #444; line-height: 1.7; padding-top: 25px; border-top: 1px dashed #ddd; text-align: left; word-break: break-all; }

/* 8. 申し込みフォーム */
.p-apply__form { max-width: 850px; margin: 30px auto 0; background: #fff; padding: 10px; border-radius: 12px; border: 4px solid var(--c-accent-gold); }

/* 9. お問い合わせ先 */
.contact-box { max-width: 600px; margin: 0 auto; background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 40px; text-align: center; }
.contact-name { font-size: 1.2rem; font-weight: 900; color: var(--primary-blue); margin-bottom: 10px; }
.contact-email { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; }
.contact-email a { color: #0066cc; text-decoration: underline; }
.contact-note { font-size: 0.85rem; color: #666; }

/* フッター */
.l-footer { text-align: center; padding: 40px 0; }
.l-footer p { color: rgba(255, 255, 255, 0.6); margin: 0; font-size: 0.9rem; }

/* 固定バナー */
.fixed-cta { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 -5px 25px rgba(0,0,0,0.08); padding: 12px 0; z-index: 999; text-align: center; border-top: 1px solid #eee; box-sizing: border-box; }
.cta-col { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
.cta-catch { font-size: 1.1rem; font-weight: 900; color: var(--primary-blue); line-height: 1.4; }
.fixed-cta .c-btn-gradient { padding: 10px 50px; font-size: 1.1rem; }

/* =========================================
   スマートフォン用レスポンシブスタイル (768px以下)
   ========================================= */
@media (max-width: 768px) {
    body { padding-top: 60px; padding-bottom: 120px; font-size: 0.95rem; }
    .l-section { padding: 40px 15px; }
    .section-padding { padding: 50px 15px; }
    .is-pc, .hide-sp { display: none !important; }
    .hide-pc { display: block; } 

    .hero { background: transparent; }
    .hero::before { display: none !important; }

    .l-header { border-top: 4px solid var(--c-accent-gold); border-bottom: 1px solid #eaeaea; }
    .l-header__inner { height: 60px; padding: 0 12px; }
    .l-header__logo img { height: 22px; }
    .l-header__btn { display: block !important; }
    .c-header-btn { background: var(--gradient-cta); padding: 8px 14px; font-size: 0.78rem; border-radius: 100px; font-weight: 900; box-shadow: 0 4px 10px rgba(138, 43, 226, 0.15); }

    .c-sec-title { margin-bottom: 5px; }
    .c-sec-title .ja { font-size: 1.6rem; }
    
    .p-logos { padding: 40px 15px; }
    .p-logos__title { font-size: 1.4rem; margin-bottom: 25px; }
    .two-column-grid { grid-template-columns: 1fr; gap: 20px; }
    .logo-award-card { padding: 15px 20px; }
    
    /* アワード周りのスマホ調整 */
    .ranking-title { font-size: 1.2rem; margin-bottom: 10px; }
    .ranking-highlight { margin-bottom: 15px; }

    /* スマホ用のテキスト部分サイズ調整 */
    .ranking-highlight .highlight-text { font-size: 1.6rem; }

    /* スマホ用の数字部分サイズ調整 */
    .ranking-highlight .highlight-num { font-size: 2.8rem; }
    
    .award-main-wrap { gap: 15px; }
    .award-badge { width: 80px; }
    
    .company-logo-box { width: 150px; height: 75px; padding: 5px 10px; }
    .company-logo-box img { max-height: 100%; }

    .p-seminar-title { padding: 40px 15px 20px; }
    .p-seminar-title h2 { font-size: 1.3rem; }
    .p-seminar-title .highlight { font-size: 1.6rem; margin-top: 5px; }

    .p-message { padding-bottom: 40px; }
    .message-box { padding: 0 20px; } 
    .message-box p { font-size: 1rem; line-height: 1.8; text-align: center; } 

    .p-info__container { padding: 20px 15px; }
    .info-table th, .info-table td { display: block; width: 100% !important; box-sizing: border-box; text-align: left; }
    .info-table th { padding: 10px 15px; background: var(--bg-light); border-radius: 4px; font-size: 0.9rem; border-bottom: none; }
    .info-table td { padding: 10px 15px 20px; font-size: 0.95rem; }

    .p-timeline__item { flex-direction: column; gap: 12px; padding: 25px 0; }
    .p-timeline__item--rich { padding: 25px 20px; margin: 15px 0; }
    .p-timeline__item .time { width: 100%; font-size: 1.4rem; }
    .p-timeline__item .time span { display: inline-block; margin-left: 5px; font-size: 1rem; }
    .p-timeline__item .title { font-size: 1.15rem; margin-bottom: 8px; }
    .p-timeline__item .desc { font-size: 0.9rem; }
    .program-note { text-align: left; font-size: 0.8rem; }

    .speaker-grid { grid-template-columns: 1fr; gap: 30px; }
    .speaker-card .card-inner { padding: 20px; }
    .speaker-img-wrapper { width: 140px; height: 140px; margin-bottom: 15px; }
    .speaker-name { font-size: 1.35rem; margin-bottom: 15px; }
    .speaker-bio { padding-top: 15px; font-size: 0.85rem; }

    .p-apply__form { padding: 5px; margin-top: 20px;}
    
    .contact-box { padding: 30px 20px; }
    .contact-name { font-size: 1.1rem; }
    .contact-email { font-size: 1rem; }
    
    .share-buttons { flex-direction: column; gap: 10px; }
    .share-btn { width: 100%; }

    .c-btn-gradient::after { margin-left: 10px; }
    
    /* 固定バナー (スマホ用) */
    .fixed-cta { padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); box-sizing: border-box; }
    .cta-col { gap: 6px; }
    .cta-catch { font-size: 0.95rem; }
    .fixed-cta .c-btn-gradient { width: 100%; font-size: 1.05rem; padding: 12px 20px; box-sizing: border-box; }
}