/* ==========================================
   0. RESET (ブラウザ固有の不要な余白を消す)
   ※必ずファイルの最上部に記述します
========================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff; 
}

section {
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    display: block;
}


/* ==========================================
   1. HERO AREA (ヒーローエリア)
========================================== */
.jamit-hero {
    width: 100%;
    /* ★追加：動画が絶対配置(absolute)なので、親要素を基準線(relative)にします */
    position: relative; 
    
    /* ★追加：1920x714 の比率を維持して、親要素の高さを自動で確保します */
    aspect-ratio: 1920 / 714; 

    background-color: #002b34; 
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-bottom: -3px !important; 
    border: none !important;
    outline: none !important;
}

.jamit-hero__container {
    width: 100%;
    max-width: 100% !important; 
    position: relative;
    aspect-ratio: 1920 / 715; 
    /* インライン要素が持つ下側の数ピクセルの隙間（線）を消し去る決定打 */
    line-height: 0; 
    font-size: 0; 
    margin-bottom: -1px !important;
}

.jamit-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; 
    object-position: center center;
    display: block;
    /* 動画自体に潜む境界線の影や枠を完全に消去 */
    border: none !important;
    outline: none !important;
}

/* ヒーローエリア：スマホ用のレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .jamit-hero__container {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1920 / 715;
    }
    .jamit-hero__video {
        object-fit: contain;
    }
}


/* ==========================================
   2. ANNOUNCEMENT AREA (学会出展のお知らせ)
========================================== */
.jamit-announce {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    box-sizing: border-box;
    position: relative; /* ↓ お城の画像を綺麗に配置するための基準線 */
    
    /* ↓【重要】バグの原因だった巨大なpaddingとmin-heightの計算式を廃止し、
         通常の読みやすい上下余白に戻します。これで下のエリアが引きずり込まれません */
    padding: 120px 0 140px 0; 
    min-height: auto;
    
    margin-top: -1px !important; 
    z-index: 2;
}

/* ↓【ここが最大のポイント】お城の画像を、文章の高さに一切干渉しない「背景パーツ」として完全に独立させます */
.jamit-announce::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 1920x739の比率を維持した高さ */
    height: calc(100vw * (739 / 1920)); 
    max-height: 739px; /* 画像の本来の高さ以上には広げないストッパー */
    background-image: url('images-new/nagoya-castle-tower-10_medium.jpg');
    background-size: 100% auto;
    background-position: left bottom;
    background-repeat: no-repeat;
    z-index: -1; /* 文字の裏側に敷く */
    pointer-events: none;
}

.jamit-announce__container {
    width: 100%;
    max-width: 1400px; 
    padding: 0 40px;
    box-sizing: border-box;
    color: #2f2f2f; 
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
    margin-top: 0; 
    position: relative;
    z-index: 3; /* 文字をお城より手前に出す */
}

/* セクションの大見出し */
.jamit-announce__title {
    font-size: 2rem; 
    font-weight: bold;
    margin-bottom: 40px;
    color: #2f2f2f;
    text-align: left;
}

/* 導入の1文 */
.jamit-announce__lead {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* 公式URLの部分 */
.jamit-announce__url-box {
    font-size: 1.15rem;
    margin-bottom: 40px;
}

.jamit-announce__url-box a {
    color: #2f2f2f;
    text-decoration: underline;
}

.jamit-announce__url-box a:hover {
    text-decoration: none;
}

/* 詳細の文章ブロック */
.jamit-announce__body-text {
    font-size: 1.3rem;
    line-height: 2;
}

.jamit-announce__body-text p {
    margin-bottom: 15px;
}

.jamit-announce__body-text p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   スマホ専用：お城新画像（1000×1200px）反映＆タイトル重ね調整
========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. スマホの時だけお城エリアの縦幅を新画像の比率（1200 / 1000 = 120%）に強制拡張 */
   .jamit-announce {
        background-image: none !important; 
        
        /* ↓【修正】お城の下側の計算の余白を少しだけタイト（120%➔105%）にし、余分な空白を縮めます */
        padding: 60px 0 calc(100vw * (1050 / 1000)) 0 !important; 
        min-height: auto !important;
        position: relative !important;
        z-index: 1;
    }

    /* 2. スマホの時だけPC用のお城画像を消し、新画像を100%のサイズで全面に敷き詰める */
    .jamit-announce::before {
        height: 100% !important; /* セクションの上から下まで全面に引き伸ばす */
        max-height: none !important; /* PC用のストッパーをスマホ時のみ解除 */
        
        /* ↓【最重要】ここに新しいスマホ用お城画像の正確なファイル名（例: nagoya_sp.jpg など）を記述してください */
        background-image: url('images-new/nagoya-castle-tower-10_medium_sp.jpg') !important;
        
        background-size: 100% auto !important;
        background-position: center top !important; /* 上基準でぴったり敷く */
        background-repeat: no-repeat !important;
    }

    /* 3. 文字を包む透明なコンテナ（背景の白が透けて画像が隠れるのを防ぐ決定打） */
    .jamit-announce__container {
        padding: 0 24px !important;
        background-color: transparent !important; /* 完全透明化してお城のグラデーションを見せる */
    }

    /* 4. 大会概要セクション全体を、お城の画像の上に綺麗に引っ張り上げます */
     .jamit-overview {
        /* ↓【修正】引き上げるマイナスマージンを「-150px」から「-420px」へ一気に限界突破させます */
        margin-top: -420px !important; 
        
        background-color: transparent !important; 
        position: relative;
        z-index: 99 !important; 
        padding-top: 0 !important; 
        padding-bottom: 40px !important;
    }

    /* 大会概要のコンテナ */
    .jamit-overview__container {
        padding: 0 24px !important;
    }

    /* ▪大会概要のタイトル（お城の空の上に乗る文字） */
    .jamit-overview__title {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
        color: #2f2f2f !important; 
    }

    /* 開催案内リスト部分（お城の画像が終わった下の白背景エリアに戻します） */
    .jamit-overview__list {
        background-color: #ffffff !important; /* リスト本体は真っ白な背景にして読みやすさを確保 */
        padding: 20px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; 
        margin-top: 15px !important;
    }

    /* 前回の修正：お知らせ文章全体のスマホ用スリム化（変更なし） */
    .jamit-announce__title {
        font-size: 1.3rem !important; 
        line-height: 1.4 !important; 
        margin-bottom: 20px !important; 
    }
    .jamit-announce__lead {
        font-size: 0.95rem !important;
        line-height: 1.5 !important; 
        margin-bottom: 15px !important; 
    }
    .jamit-announce__url-box {
        font-size: 0.95rem !important;
        margin-bottom: 25px !important; 
    }
    .jamit-announce__body-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important; 
    }
    .jamit-announce__body-text p {
        margin-bottom: 12px !important; 
    }
    .jamit-announce__body-text p:last-child {
        margin-bottom: 0 !important;
    }
}

/* ==========================================
   3. OVERVIEW AREA (大会概要)
========================================== */
/* ↓ ここが抜けていたため背景がグリーンになっていました。白に強制固定します */
.jamit-overview {
    width: 100% !important;
    background-color: #ffffff !important; 
    display: flex;
    justify-content: center;
    padding: 80px 0;
    box-sizing: border-box;
}

.jamit-overview__container {
    width: 100%;
    max-width: 1300px; 
    padding: 0 40px;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* セクションタイトル */
.jamit-overview__title {
    font-size: 2rem;
    font-weight: bold;
    color: #2f2f2f;
    margin-bottom: 50px;
    position: relative;
    padding-left: 20px;
}
.jamit-overview__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #2f2f2f;
}

/* リスト全体の枠組み */
.jamit-overview__list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 各行（アイテム）の並び */
.jamit-overview__item {
    display: flex;
    align-items: center; 
    padding: 35px 0;
    /* 区切り線を白背景で見えやすいグレー（#e0e0e0）にします */
    border-bottom: 1px solid #e0e0e0 !important; 
}
.jamit-overview__item:last-child {
    border-bottom: none !important;
}
.jamit-overview__item.align-start {
    position: relative; /* ラベルの位置を浮かせるための基準線 */
}

/* 左側：見出しラベル（#efc396） */
.jamit-overview__label {
    width: 180px;
    min-width: 180px;
    background-color: #f5993c;
    color: #2f2f2f;
    text-align: center;
    padding: 12px 0;
    font-size: 1.05rem;
    font-weight: bold;
    border-radius: 6px; 
    margin-right: 50px;
}

/* 右側：テキスト・コンテンツエリア */
.jamit-overview__content {
    flex: 1;
}

.jamit-overview__text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #2f2f2f !important; /* 文字色を読みやすいチャコールグレーに固定 */
    margin: 0;
}

.jamit-overview__link {
    color: #0066cc !important; /* リンクを綺麗な青色に固定 */
    text-decoration: underline;
    font-size: 1.1rem;
}
.jamit-overview__link:hover {
    text-decoration: none;
}

/* 交通案内・中央寄せスタイル */
.jamit-overview__item.align-start .jamit-overview__content {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;  
}

.jamit-overview__map-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.jamit-overview__map-img {
    width: 100%;
    max-width: 320px; 
    height: auto;
    display: block;
    border: 1px solid #e0e0e0;
    transition: opacity 0.2s ease;
}

.jamit-overview__map-trigger:hover .jamit-overview__map-img {
    opacity: 0.8; 
}

.jamit-overview__caption {
    display: block;
    font-size: 0.9rem;
    color: #666666 !important;
    margin-top: 12px;
    text-decoration: underline;
}

.jamit-overview__source {
    font-size: 0.85rem;
    color: #888888 !important;
    margin: 6px 0 0 0;
}
/* ==========================================
   4. MAP MODAL (クリック拡大の仕組み)
========================================== */
.jamit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* 背景を暗くする */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
/* リンクがクリックされてURLの末尾に #jamit-map-modal が付いた瞬間に表示する */
.jamit-modal:target {
    opacity: 1;
    pointer-events: auto;
}

/* 背景の暗い部分をクリックしても閉じられるようにする仕組み */
.jamit-modal__close-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
}

.jamit-modal__content {
    position: relative;
    max-width: 90%;
    max-height: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10000;
}

/* 拡大時の画像サイズ制御（ご指定の579x765pxを上限に画面に収める） */
.jamit-modal__img {
    max-width: 579px;
    max-height: 70vh;
    width: 100%;
    height: auto;
    object-fit: contain;
    background-color: #ffffff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    border-radius: 4px;
}

/* 閉じるボタン */
.jamit-modal__close-btn {
    margin-top: 15px;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    background-color: rgba(255,255,255,0.2);
    padding: 8px 20px;
    border-radius: 20px;
    transition: background-color 0.2s;
}
.jamit-modal__close-btn:hover {
    background-color: rgba(255,255,255,0.4);
}

/* ==========================================
   タブレット・スマホ用の調整（レスポンシブ）
========================================== */
@media screen and (max-width: 768px) {
    .jamit-overview {
        padding: 50px 0;
    }
    .jamit-overview__container {
        padding: 0 24px;
    }
    .jamit-overview__title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    .jamit-overview__item {
        flex-direction: column; /* スマホではラベルと中身を縦並びにする */
        align-items: flex-start;
        padding: 25px 0;
    }
    .jamit-overview__label {
        margin-right: 0;
        margin-bottom: 15px;
        width: 140px;
        min-width: 140px;
        padding: 8px 0;
        font-size: 0.95rem;
    }
    .jamit-overview__text {
        font-size: 1rem;
    }
    .jamit-overview__link {
        font-size: 0.95rem;
        word-break: break-all; /* URLが画面外にはみ出るのを防ぐ */
    }
}


@media screen and (min-width: 769px) {
    /* 左側のラベルを絶対配置にして、右側エリアを押し出さないようにします */
    .jamit-overview__item.align-start .jamit-overview__label {
        position: absolute;
        top: 35px;
        left: 0;
        margin-right: 0;
    }
    
    /* コンテンツエリアの横幅を100%にし、ラベルの幅を考慮して中央寄せを計算します */
    .jamit-overview__item.align-start .jamit-overview__content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center;
        /* 左側にラベルがある分だけ、右側に同じだけの余白（180px）を足して、
           マップが「画面の本当のセンター」に来るように相殺します */
        padding-left: 180px; 
        box-sizing: border-box;
    }
}

/* マップ関連の基本パーツ（ここは変更なし） */
.jamit-overview__map-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.jamit-overview__map-img {
    width: 100%;
    max-width: 320px; 
    height: auto;
    display: block;
    border: 1px solid #e0e0e0;
    transition: opacity 0.2s ease;
}

.jamit-overview__map-trigger:hover .jamit-overview__map-img {
    opacity: 0.8; 
}

.jamit-overview__caption {
    display: block;
    font-size: 0.9rem;
    color: #666666 !important;
    margin-top: 12px;
    text-decoration: underline;
}

.jamit-overview__source {
    font-size: 0.85rem;
    color: #888888 !important;
    margin: 6px 0 0 0;
}


/* ==========================================
   4. PROGRAM & EVENT AREA (講演プログラム・イベント情報)
========================================== */
.jamit-program {
    width: 100% !important;
    /* ご指定の背景カラー */
    background-color: #f4f7fa !important; 
    display: flex;
    justify-content: center;
    padding: 80px 0;
    box-sizing: border-box;
}

.jamit-program__container {
    width: 100%;
    max-width: 1300px; /* 最大幅1400px */
    padding: 0 40px;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* セクションタイトル */
.jamit-program__title {
    font-size: 2rem;
    font-weight: bold;
    color: #2f2f2f;
    margin-bottom: 40px;
    position: relative;
    padding-left: 20px;
}
.jamit-program__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #2f2f2f;
}

/* リード文章 */
.jamit-program__lead-box {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #2f2f2f;
    margin-bottom: 50px;
}
.jamit-program__lead-box p {
    margin: 0;
}

/* メニュー全体の背景画像つきボックス設定 */
.jamit-program__menu-wrapper {
    width: 100%;
    /* ご指定の手のひらの画像を背景にセット（少し透過して綺麗に重ねます） */
    background: linear-gradient(
        rgba(219, 216, 216, 0.45) 0%, 
        rgba(219, 216, 216, 0.45) 100%
    ), url('images-new/jamit2026_hero4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding: 60px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* リスト形式ボタンの枠組み */
.jamit-program__list {
    width: 100%;
    max-width: 1000px; /* 見やすいように幅をスマートに制限 */
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
}

.jamit-program__list li {
    width: 100%;
    border-bottom: 2px solid #ffffff; /* 白い綺麗な区切り線 */
}

/* 各メニューリンク（ボタンとしての反応エリアを広げる） */
.jamit-program__item-link {
    display: block;
    padding: 25px 15px;
    text-decoration: none;
    transition: background-color 0.2s;
}
/* マウスを乗せたときにほんのり背景を白く光らせる演出 */
.jamit-program__item-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.jamit-program__item-text {
    font-size: 1.25rem;
    font-weight: bold;
    color: #2f2f2f;
}

/* 下部のご案内ボタンエリア */
.jamit-program__btn-area {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* オレンジ色のご案内ボタン */
.jamit-program__main-btn {
    display: inline-block;
    background: linear-gradient(to right, #fca145, #f5993c); /* 温かみのあるオレンジグラデーション */
    color: #2f2f2f;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 50px;
    border-radius: 30px; /* 丸みのあるボタン */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}
/* ホバー時に優しく浮き上がる演出 */
.jamit-program__main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* タブレット・スマホ用の調整 */
@media screen and (max-width: 768px) {
    .jamit-program {
        padding: 50px 0;
    }
    .jamit-program__container {
        padding: 0 24px;
    }
    .jamit-program__title {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }
    .jamit-program__lead-box {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    .jamit-program__menu-wrapper {
        padding: 30px 20px;
    }
    .jamit-program__item-link {
        padding: 18px 5px;
    }
    .jamit-program__item-text {
        font-size: 1rem;
    }
    .jamit-program__main-btn {
        font-size: 1rem;
        padding: 14px 25px;
        width: 100%;
        box-sizing: border-box;
    }
}



/* ==========================================================================
   5. X（旧Twitter）連携セクション（最終完璧解決版）
   ========================================================================== */
.x_follow_section {
    width: 100% !important;
    padding: 100px 0 !important;
    background-color: #f4f7fa !important; 
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    
    clear: both !important;
    position: relative !important;
    z-index: 10 !important; /* ↓ 重ね順を少し上げて、はみ出てくるフッターの文字を後ろに隠します */
    
    /* ↓【最重要】フッターの文字が上に漏れてこないよう、押し下げる力を450pxに限界突破させます */
    margin-bottom: 500px !important; 
}

.x_white_box {
    background-color: #ffffff !important;
    padding: 50px 40px !important; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    position: relative !important;
    top: -50px !important; 
    z-index: 11 !important; 
}

.x_banner_wrap {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 40px !important; 
}

.x_lead {
    font-size: 1.15rem !important; 
    font-weight: bold;
    color: #333333 !important;
    margin-bottom: 30px !important;
    letter-spacing: 0.03em;
}

.x_banner_link {
    display: block !important;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.x_banner_link:hover {
    opacity: 0.9;
    transform: scale(1.01); 
}

.x_banner_img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 6px;
}

/* スマホ用のレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .x_follow_section {
        padding: 50px 0 !important;
        margin-bottom: 120px !important; 
    }
    .x_white_box {
        padding: 30px 20px !important;
        top: 0 !important; 
    }
    .x_lead {
        font-size: 1rem !important;
    }
    .x_banner_wrap {
        padding-bottom: 0 !important;
    }
}

/* ==========================================
   2. ANNOUNCEMENT AREA (学会出展のお知らせ)
========================================== */
.jamit-announce {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    box-sizing: border-box;
    
    /* ↓【修正】画像パスはPHP側で取得するため、ここからは削除しました */
    background-size: 100% auto;
    background-position: left bottom; 
    background-repeat: no-repeat;
    
    /* 新しい画像サイズ（1920x739）に合わせた余白調整 */
    padding: 120px 0 250px 0; 
    min-height: calc(100vw * (739 / 1920));
    
    /* ヒーローエリアとの不要な隙間線を防ぐためのリセット */
    margin-top: -1px !important; 
}

/* ==========================================
   4. MAP MODAL (クリック拡大の仕組み)
========================================== */
.jamit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); 
    z-index: 99999; /* 他の要素より最前面に出すために数値を少し上げました */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ↓【修正】URLの#連動から、JSのクラス連動に切り替えました */
.jamit-modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 公式URLの部分（太文字に修正） */
.jamit-announce__url-box {
    font-size: 1.15rem;
    margin-bottom: 40px;
    /* ↓ ボックス全体の文字（公式ウェブサイト：）を太文字にします */
    font-weight: bold !important; 
}

/* リンク文字自体も確実に太文字にする指定 */
.jamit-announce__url-box a {
    color: #2f2f2f;
    text-decoration: underline;
    /* ↓ リンクURLの文字も強力に太文字に固定します */
    font-weight: bold !important; 
}

.jamit-announce__url-box a:hover {
    text-decoration: none;
}