@charset "UTF-8";

:root {
    --bg-yellow: #FDD000;
    --text-black: #111111;
    --title-blue: #1b4b9b;
    --title-orange: #ea580c;
    --text-red: #da291c;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-yellow);
    color: var(--text-black);
    font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

li {
    list-style: none;
}

/* ─── ページ全体のラッパー ─── */
.page-wrapper {
    position: relative;
    z-index: 1;
    overflow-x: hidden;

}

/* ─── 背景装飾 ─── */
.bg-left,
.bg-right {
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.bg-left {
    left: 0;
    width: clamp(100px, 30vw, 200px);
    margin-top: 100px;
}

.bg-right {
    right: 0;
    width: clamp(150px, 30vw, 400px);
    margin-top: 100px;
}

.bg-left img,
.bg-right img {
    width: 100%;
    height: 100%;
    /* 追加 */
    object-fit: cover;
    /* 追加：縦長画像を上から順に表示 */
    object-position: top;
}


/* ─── ヘッダー ─── */
header {
    padding: 22px clamp(20px, 5vw, 80px);
}

.logo-link {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.logo-link:hover {
    opacity: 0.75;
}

.logo-icon {
    width: clamp(140px, 18vw, 210px);
    z-index: 999;
}

@media (min-width: 769px) {

    .logo-icon {
        position: fixed;
        z-index: 2;
        background-color: rgb(253, 208, 0, 0.5);
    }
}






/* ==================================================
全画面ハンバーガーメニュー（ドロワー）
================================================== */

/* 1. 右上のハンバーガーボタン（常に最前面に固定） */
.hamburger-btn {
    position: fixed;
    top: 25px;
    right: 25px;
    width: clamp(70px, 8vw, 100px);
    height: clamp(70px, 8vw, 100px);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10005;
    /* メニュー画面よりさらに手前に出す */
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.hamburger-btn.is-active img {
    transform: rotate(360deg);
}

.hamburger-btn img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 💡 カンプ画像再現：メニューが開いた時（is-active）は背景が「白い丸」になる */
.hamburger-btn.is-active {
    background-color: #ffffff;
}

.hamburger-btn:hover {
    transform: scale(1.05);
}

/* 2. 全画面のオレンジメニュー背景 */
.drawer-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ED6B18;
    /* カンプ画像に合わせた鮮やかなオレンジ */
    z-index: 10000;
    overflow-y: auto;
    /* 項目が多いので縦スクロールを可能にする */
    padding: 40px 30px 60px;
    box-sizing: border-box;
    /* 初期状態は透明にして隠しておく */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    /* 左右方向の中央に配置 */

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* JSで開いた状態（is-show） */
.drawer-menu.is-show {
    opacity: 1;
    visibility: visible;
}

/* 3. メニュー内のヘッダー（ロゴ部分） */
.drawer-header {
    width: 100%;
    margin-bottom: 40px;
    /* 💡 下のメニューリストとの隙間だけを確保 */
    text-align: left;
    padding-left: 10px;
}

.drawer-logo img {
    height: 26px;
    width: auto;
    /* 💡 裏技：黒い大学ロゴ画像を、CSSで「真っ白」に反転させて表示します */
    filter: brightness(0) invert(1);
}

/* 4. メニューのリンク一覧（白文字＋下線） */
.drawer-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}

.drawer-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    /* カンプ通りの白い細い下線 */
}

.drawer-list li a {
    display: block;
    padding: 18px 10px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    /* クッキリ太文字 */
    text-align: left;
    transition: padding-left 0.2s ease, background-color 0.2s ease;
}

/* ホバーした時に少し右にピョコッと動く可愛い演出 */
.drawer-list li a:hover {
    color: #FDD000;
    /* ご指定の黄色 */
    padding-left: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
    /* 文字をアイコンより手前に出す */
}

.menu-cursor-icon {
    position: fixed;
    /* 画面に対して絶対配置 */
    top: 0;
    left: 0;
    width: 40px;
    /* 💡 お好みに合わせてサイズを調整してください */
    height: auto;
    pointer-events: none;
    /* マウスイベントを無視してリンクをクリック可能にする */
    z-index: 1;
    /* リンクの文字（z-index: 2）より下に配置 */
    opacity: 0;
    /* 初期状態は非表示 */
    transform: translate(-50%, -50%);
    /* マウスの先端が画像の中心にくるように調整 */
    transition: opacity 0.2s ease;
    will-change: transform;
}

/* マウスがリスト上に乗った時だけJSでこのクラスをつけて表示させる */
.menu-cursor-icon.is-active {
    opacity: 1;
}

/* 📱 スマホ表示（画面幅767px以下）の微調整 */
@media (max-width: 767px) {
    .hamburger-btn {
        top: 20px;
        right: 20px;
        padding: 6px;
    }

    .drawer-menu {
        padding: 30px 20px 50px;
    }

    .drawer-header {
        margin-bottom: 30px;
    }

    .drawer-list li a {
        padding: 14px 10px;
        font-size: 1.05rem;
    }
}



/* --- メイン・タイトルエリア --- */
.major-main-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ─── 専攻タイトルエリア ─── */
.major-title-section {
    text-align: center;
    margin-top: 140px;
    /* 上部固定ロゴとの被り防止の余白 */
    margin-bottom: 60px;
    /* 下のコンテンツとの間の余白 */
}

.major-title-visual {
    display: inline-flex;
    flex-direction: column;
    /* 画像と文字を縦一列に並べる */
    align-items: center;
    /* 中央揃え */
    gap: 30px;
    /* ★アイコンと文字の間の距離（ここでお好みの間隔に調整できます） */
}

/* メインアイコンのサイズ */
.main-icon {
    width: clamp(200px, 30vw, 300px);
    height: auto;
}

/* 専攻名のテキスト（シンプルに赤く大きくするだけ） */
.major-name-title {
    font-size: clamp(2.0rem, 4vw, 3.0rem);
    font-weight: 900;
    margin: 0;
}

.others-headtitle {
    margin-bottom: -20px;
}

.slant-text {
    /* 中央配置の補正（-50%）にプラスして、右上がりに約-7度回転させる */
    transform: rotate(-5deg);
    display: inline-block;
}

/* グラフィックデザインの文字色（赤） */
.text-red {
    color: var(--text-red);
}

.text-ph {
    color: #027136;
    transform: rotate(2.4deg);
    display: inline-block;
}

.text-fm {
    color: #2C1F14;
    transform: rotate(5.2deg);
    display: inline-block;
}

.text-an {
    color: #0EA939;
    transform: rotate(-3deg);
    display: inline-block;
}

.text-md {
    color: #0695CB;
    transform: rotate(0deg);
    display: inline-block;
}

.text-id {
    color: #094C9F;
    transform: rotate(3.3deg);
    display: inline-block;
}

.text-ia {
    color: #6D2074;
    transform: rotate(-7.8deg);
    display: inline-block;
}

.text-td {
    color: #EA6094;
    transform: rotate(-0.5deg);
    display: inline-block;
}

.text-pt {
    color: #231815;
    transform: rotate(-5.3deg);
    display: inline-block;
}

.text-sc {
    color: #EC6914;
    transform: rotate(5.17deg);
    display: inline-block;
}

.text-oh {
    color: #000000;
    transform: rotate(0deg);
    display: inline-block;
}

/* --- プログラムカードのレイアウト（スマホ標準：1カラム） --- */
.programs-section .section-header {
    justify-content: flex-start;
    margin-bottom: 40px;
}

.programs-container {
    grid-template-columns: 1fr;
    gap: 0px;
}

/* ==================================================
プログラム一覧セクション（指定HTML専用カンプ再現スタイル）
================================================== */

/* セクション全体のコンテナ */
.programs-section {
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 20px 100px 20px;
}

/* ─── プログラムカード全体 ─── */
.program-card {
    /* 内部要素を絶対配置するための基準 */
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(40px);
    /* 40px下から浮き上がらせる */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.program-card.visible {
    opacity: 1;
    transform: translateY(0);

}

.program-card>div:first-child {
    margin-left: auto;
    margin-right: 0;
    width: 200px;
    text-align: end;
    margin-bottom: -50px;
    position: relative;
}

/* 「講演」のテキストスタイル */
.program-genre {
    font-size: 1.2rem;
    color: #111111;
    margin: 0 0 4px 0;
    position: relative;
    z-index: 10;
    width: 200px;
    margin-left: auto;
}

/* 緑波線画像（program-genre.png）のサイズと配置 */
.program-card>div:first-child img {
    width: 100px;
    height: auto;
    transform: translate(10px, -40px);
    position: relative;
    z-index: 1;
}

/* ─── ボディコンテナ ─── */
.program-body {
    display: flex;
    align-items: flex-start;
    /* 上揃えで横並びにする */
    justify-content: space-between;
    /* タイトルを左、場所を右に引き離す */
    position: relative;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

/* ナンバリングバッジ */
.program-number {
    background-image: url("../images/titlehaedicon.png");
    background-size: cover;
    background-position: center;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    border-radius: 50%;
    padding-bottom: 5px;
}


/* プログラムタイトル */
.program-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    max-width: 70%;
    transform: translate(0, 4px);
    margin-left: -40px;
}

/* ─── 右側の実施場所・部屋番号セット ─── */
/* 赤いマップ画像（.program-place） */
.program-place {
    margin: 0;
    display: flex;
    align-items: center;
}

.program-place img {
    width: 145px;
    height: auto;
    position: absolute;
    z-index: 10;
    transform: translate(-60px, 0px);
}

/* 「8-203」とピン画像が入ったulリスト */
.program-body ul {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

/* 「8-203」のテキストボックス */
.program-body ul li:nth-child(1) p {
    background-color: #FFF2B0;
    padding: 5px 30px 5px 15px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #111111;
    border-radius: 4px;
    margin: 0;
    white-space: nowrap;
    /* 途中で改行させない */
}

/* 赤いピン画像（ボックスの左側に絶対配置で重ねる） */
.program-body ul li:nth-child(2) {
    position: absolute;
    right: -1px;
    /* ★50%から「-12px」などの固定値に変えることで、上に少し浮かせます */
    top: -1px;
    transform: translateY(-50%);
    /* 縦方向の中央揃え */
}

.program-body ul li:nth-child(2) img {
    width: 22px;
    /* カンプに合わせたピンのサイズ */
    height: auto;
    display: block;
}

/* ─── 中央のキャッチコピー（薄黄色の大きな帯） ─── */
.program-catch {
    background-color: #FFF2B0;
    /* パキッとした薄黄色の帯背景 */
    color: #111111 !important;
    /* カンプ通りの黒文字 */
    font-size: 1.3rem;
    font-weight: 700;
    padding: 16px 24px;
    margin: 0 0 25px 0 !important;
    border-radius: 4px;
    line-height: 1.5;
    clear: both;
}

/* ─── 本文テキスト ─── */
.program-description {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111111;
    line-height: 2.0;
    margin: 0 0 35px 0;
    padding: 0 5px;
}

/* ─── 下部の日時情報エリア ─── */
.program-meta-info {
    border-top: none;
    /* 余計な線は消去 */
    padding-top: 0;
    padding-left: 5px;
    display: flex;
}

/* 元のHTMLにある不要な「トークショー」「10号館...」のテキストを非表示にしてカンプに合わせる */
.program-meta-info .meta-item:nth-child(1),
.program-meta-info .meta-item:nth-child(2) {
    display: none;
}

/* 日時テキストのみを表示し、2列に近い見栄えに調整 */
.program-meta-info .meta-item:nth-child(3) {
    display: block;
}

.program-meta-info .meta-item:nth-child(3) span {
    font-size: 1rem;
    font-weight: 600;
    color: #111111;
    line-height: 1.8;
    display: inline-block;
    margin-right: 40px;
}

/* ==================================================
💡 マイスケジュールボタンの装飾
================================================== */

/* 1. ボタンを内包するエリア全体の配置調整 */
.my-schedule-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 文字とボタンの隙間 */
    margin-left: auto;
    /* 横並びの時に自動で一番右端に寄せる */
    padding-left: 20px;
    position: relative;
}

/* 「My schedule」というテキストのフォント装飾 */
.my-schedule-item p {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-black);
    background-color: #FFF2B0;
    padding: 10px 15px;
    white-space: nowrap;
}

/* 2. プラスボタン自体のデザイン */
.btn-add-to-schedule {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 50px;
    /* 💡 カンプ画像に合わせたサイズ（お好みで調整してください） */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -15px;
    top: 15%;
    transform: translateY(-50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ボタンの中のプラス画像 */
.btn-add-to-schedule img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 3. ボタンにマウスが乗ったとき（ホバー）の可愛い演出（プラス・マイナス共通） */
.btn-add-to-schedule:hover,
.btn-add-to-schedule.is-added:hover {
    /* 💡 どちらの状態でも縦中央をキープしたまま1.1倍に拡大します */
    transform: translateY(-50%) scale(1.1);
    opacity: 0.9;
}

/* ボタンが押されたとき（クリック時）の沈み込み（プラス・マイナス共通） */
.btn-add-to-schedule:active,
.btn-add-to-schedule.is-added:active {
    transform: translateY(-50%) scale(0.95);
}

/* 4. すでに追加されている状態（通常時）の見た目 */
.btn-add-to-schedule.is-added {
    /* 💡 位置がズレるのを防ぐため、回転や色の変化を削除し、縦中央の維持だけにします */
    transform: translateY(-50%);
}

/* ─── レレスポンシブ対応（スマホ画面などでの位置調整） ─── */
@media screen and (max-width: 768px) {

    /* 1. エリア全体を横並びにして右寄せにする */
    .my-schedule-item {
        margin-left: auto;
        justify-content: flex-end;
        /* 🌟 コンテンツ内を右寄せにする */
        align-items: center;
        /* 上下の中央を揃える */
        gap: 6px;
        /* 文字とボタンの間隔を少し狭く(8px→6px) */
        padding-top: 10px;
        /* 上の余白も少し狭く(15px→10px) */
    }

    /* 2. 「My schedule」の文字を少し小さくする */
    .my-schedule-item p {
        font-size: 0.9rem;
        /* 🌟 元の 0.85rem から小さく変更 */
    }

    /* 3. プラスボタンを少し小さくする */
    .btn-add-to-schedule {
        width: 36px;
        /* 🌟 元の 50px から小さく変更 */
        height: 36px;
        /* 🌟 元の 50px から小さく変更 */
        top: 35%;

    }
}







/* ─── レスポンシブ（スマートフォン表示）の最適化 ─── */
@media (max-width: 767px) {

    .bg-left,
    .bg-right {
        opacity: 0.6;
    }

    .program-body {
        margin-top: -10px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .program-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        align-self: center;
        /* 縦方向を中央に */
        flex-shrink: 0;
        /* 縮まないように */
    }

    .program-title {
        font-size: 1.1rem;
        max-width: calc(100% - 20px);
        /* 数字バッジと場所表示の幅を引く */
        margin-left: -30px;
        padding-left: 5px;
        z-index: 999;
        transform: none;
        position: relative;
        transform: translateY(7px);

    }

    .program-title {
        padding-left: 20px;
        margin-bottom: 5px;
    }

    /* 右寄せ：親ごと右に寄せる */
    .program-body .program-place,
    .program-body ul {
        margin-left: auto;
    }

    .program-body>img:nth-of-type(1) {
        width: 65px;
        right: 105px;
        top: 20px;
    }

    .program-body>p:nth-of-type(1) {
        font-size: 1.0rem;
        right: 10px;
        top: 32px;
        padding: 3px 10px 3px 22px;
    }

    .program-body>img:nth-of-type(2) {
        width: 16px;
        right: 78px;
        top: 27px;
    }

    .program-catch {
        font-size: 1rem;
        padding: 12px 16px;

    }

    .program-description {
        font-size: 0.85rem;
        margin-bottom: 2px;
    }

    .program-meta-info {
        display: flex;
        flex-wrap: wrap;
        /* 要素を折り返せるようにする */
        justify-content: space-between;
        /* 左右に配置 */
        align-items: flex-end;
        /* 下揃え */
    }

    .program-meta-info .meta-item:nth-child(3) {
        display: flex;
        /* 横並び */
        gap: 20px;
    }

    .program-meta-info .meta-item:nth-child(3) span {
        font-size: 0.85rem;
        margin-right: 0;
    }

    .program-place img {
        position: static;
        /* absoluteを解除 */
        transform: none;
        /* translateをリセット */
        width: 70px;
        margin-right: -8px;
        /* placeboxにくっつける */

    }

    .program-place,
    .program-placebox {
        width: 100%;
        /* 全幅を取る */
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        /* 追加：縦中央揃え */
        margin-top: -20px;
        margin-bottom: -10px;

    }

    .program-placebox {
        transform: scale(0.7);
        /* 全体を小さく */
        transform-origin: right center;
        /* 右上を基準に縮小（右寄せのまま） */
        margin-left: auto;
    }

    .meta-item span {
        margin-top: 10px;
        margin-right: -20px;
        font-size: 0.4rem;
    }

    .others-headtitle {
        padding-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .programs-container {
        gap: 0px;
    }

    .major-name-title {
        font-size: 2.8rem;
    }

    .program-card {
        margin-bottom: 80px;
        /* 60px → 80px */
    }

    .program-meta-info .meta-item:nth-child(3) {
        display: flex;
        align-items: flex-start;
    }

}

/* ==================================================
ページトップに戻るボタン（Scroll to Top）
================================================== */
.page-top-btn {
    position: fixed;
    right: 25px;
    bottom: 40px;
    width: 50px;
    height: 50px;
    background-color: #1a1a1a;
    /* ボタンの背景色 */
    color: #ffffff;
    /* 矢印の色 */
    border: none;
    border-radius: 50%;
    /* 丸いボタンにする */
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    /* 一番手前に表示 */

    /* 初期状態は非表示（透明＆少し下に下げておく） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

/* ある程度スクロールしてクラス「is-show」がついたら表示する */
.page-top-btn.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ホバーしたときの動き */
.page-top-btn:hover {
    background-color: #ff3b30;
    /* ホバー時にアクセントカラー（例: 赤・オレンジ系）に変化 */
    transform: scale(1.05);
}

/* スマホ表示での調整 */
@media (max-width: 767px) {
    .page-top-btn {
        right: 15px;
        bottom: 40px;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

.catch-en {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
}


/* ==================================================
💡 トースト通知（マイスケジュール保存メッセージ）
================================================== */
.schedule-toast {
    position: fixed;
    bottom: -100px;
    /* 初期位置は画面外の下に隠す */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(26, 26, 26, 0.9);
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: bold;
    z-index: 999999;
    /* 画面の一番手前 */
    pointer-events: none;
    /* クリックの邪魔にならないようにする */
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    /* フワッと下から出てくるアニメーション */
    transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    opacity: 0;
}

/* Javascriptによって「is-show」クラスが付与された時の状態 */
.schedule-toast.is-show {
    bottom: 40px;
    /* 画面下部から40pxの位置に浮き上がる */
    opacity: 1;
}