:root {
    /* ----------------
       カラー設定
       ---------------- */
    /* メインカラー */
    --color-primary: #005bac;
    /* メインブルー */
    --color-primary-dark: #0b3a60;
    /* メインブルー（暗） */
    --color-primary-light: #00a0e9;
    /* メインブルー（明） */
    --color-sub: #00d4ff;
    /* サブカラー（シアン） */

    /* アクセントカラー */
    --color-accent-yellow: #e1ff00;
    /* アクセントイエロー */
    --color-accent-green: #00c9a7;
    /* アクセントグリーン */

    /* テキストカラー */
    --color-text-dark: #333333;
    /* テキスト（濃） */
    --color-text-gray: #666666;
    /* テキスト（グレー） */
    --color-text-light: #999999;
    /* テキスト（薄） */

    /* 背景カラー */
    --color-bg-white: #ffffff;
    /* 背景（白） */
    --color-bg-light: #f5f5f5;
    /* 背景（薄いグレー） */
    --color-bg-blue-light: #c5dff4;
    /* 背景（薄いブルー） */
    --color-bg-footer: #333333;
    /* フッター背景 */

    /* ボーダーカラー */
    --color-border: #e0e0e0;
    /* ボーダー */

    /* ----------------
       フォント設定
       ---------------- */
    --font-primary: "Montserrat", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-secondary: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;

    /* ----------------
       サイズ設定
       ---------------- */
    --container-max-width: 1150px;
    /* コンテナ最大幅 */
    --container-width: 90%;
    /* コンテナ幅 */
    --section-padding: 50px;
    /* セクション上下余白 */
    --border-radius: 10px;
    /* 標準角丸 */
    --border-radius-large: 15px;
    /* 大きい角丸 */

    /* ----------------
       トランジション設定
       ---------------- */
    --transition-fast: 0.3s ease;
    /* 高速トランジション */
    --transition-normal: 0.4s ease;
    /* 標準トランジション */

    /* ----------------
       シャドウ設定
       ---------------- */
    --shadow-small: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   2. リセット・ベーススタイル
   ============================================================================ */

/* ボックスモデルのリセット */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* HTML・Body基本設定 */
html {
    scroll-behavior: smooth;
    /* スムーススクロール */
}

body {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    line-height: 1.7;
    background-color: var(--color-bg-white);
    overflow-x: hidden;
    /* 横スクロール防止 */
}

/* リンク基本設定 */
a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

/* リスト基本設定 */
ul {
    list-style: none;
}

/* 画像基本設定 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ボタン基本設定 */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================================================
   3. 共通コンポーネント
   ============================================================================ */

/* ----------------
   コンテナ
   ---------------- */
.container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.container-full {
    width: 100%;
}

/* ----------------
   セクション
   ---------------- */
.section {
    padding: var(--section-padding) 0;
}

/* ----------------
   セクションタイトル（共通）
   ---------------- */
.section-title {
    font-size: 2.0rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-primary);
}

/* 文字を白くしたい時用の追加ルール */
.section-title.white {
    color: var(--color-bg-white);
}

/* 左寄せにしたい時用の追加ルール */
.section-title.left {
    text-align: left;
}

/* セクションタイトルの日本語サブテキスト */
.section-title span {
    display: block;
    font-size: 0.9rem;
    color: var(--color-primary);
    letter-spacing: 0.3em;
    margin-top: 8px;
    font-weight: bold;
}

/* ----------------
   サブタイトル（中見出し・共通）
   ---------------- */
.sub-title {
    font-size: 1.25rem;
    /* スマホ */
    font-weight: bold;
    color: var(--color-text-dark);
    margin-bottom: 15px;
    line-height: 1.4;
}

.sub-title.blue {
    color: var(--color-primary);
    /* デザインを維持するための青色 */
}

.sub-title.is-lined {
    border-left: 4px solid var(--color-primary);
    padding-left: 15px;
    text-align: left;
    /* スケジュール用は左寄せ */
}

/* ----------------
   グラデーションテキスト
   ---------------- */
.gradation-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-sub));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    display: inline-block;
}

/* ----------------
   ボタン共通スタイル
   ---------------- */
.btn {
    display: inline-block;
    padding: 14px 40px;
    border-radius: 50px;
    /* 角丸 */
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    /* 滑らかなアニメーション */
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    /* ガタつき防止 */
}

/* ホバー（マウスを乗せた時）の共通挙動：少し浮いて光る */
.btn:hover {
    opacity: 0.9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn.is-outline {
    background-color: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 枠線ボタンだけ、ホバー時に色を反転させたい場合（初期デザイン） */
.btn.is-outline:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* 審査員カード内のボタンエリア */
.prof-btn-area {
    display: flex;
    flex-direction: column;
    /* ★スマホでは縦に並べる */
    gap: 15px;
    /* ボタン同士の隙間 */
    margin-top: 20px;
    width: 100%;
}

/* その中のボタン */
.prof-btn-area .btn {
    width: 100%;
    /* スマホでは横幅いっぱい */
    padding: 12px 0;
    /* 高さを少しスリムに調整 */
    box-sizing: border-box;
}


.btn-wrapper {
    text-align: center;
}

/* ----------------
   レイアウトユーティリティ
   ---------------- */
.flex-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* ============================================================================
   4. ヘッダー
   ============================================================================ */

/* ----------------
   サイトヘッダー（トップページ用・透過）
   ---------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-small);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ロゴ */
.logo {
    max-width: 200px;
    width: 100%;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.logo a {
    display: block;
}

/* ナビゲーションリスト（モバイル：デフォルトでスマホ用スタイル） */
.nav-list {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
}

/* JSでクラスがついた時だけ表示 */
.nav-list.is-open {
    display: block;
}

/* スマホメニューの項目全体（親も子も横幅いっぱいに揃える） */
.nav-list li {
    width: 100%;
    border-bottom: 1px solid #eee;
    /* 項目ごとの区切り線 */
}

.nav-list li a {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: #fff;
    /* 基本背景 */
}

/* --- スマホメニュー内の子メニュー（階層）設定 --- */
.nav-list .sub-menu {
    display: block;
    background: #fcfcfc;
    /* 子メニューはごく薄いグレーで区別 */
    padding: 0;
    margin: 0;
    width: 100%;
}

.nav-list .sub-menu li {
    border-bottom: none;
    /* 子メニュー同士の境界線は消してスッキリさせる */
}

.nav-list .sub-menu li a {
    padding-left: 45px;
    /* 右に深くずらして階層を強調 */
    font-size: 0.9rem;
    color: var(--color-text-gray);
}




/* ハンバーガーボタン（スマホ用） */
.menu-toggle {
    display: block;
    position: fixed;
    top: 25px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 1001;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.menu-toggle span:nth-child(1) {
    top: 0;
}

.menu-toggle span:nth-child(2) {
    top: 11px;
}

.menu-toggle span:nth-child(3) {
    bottom: 0;
}

/* 開いた時のアニメーション（×印になる） */
.menu-toggle.is-open span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    bottom: 11px;
    transform: rotate(-45deg);
}

/* ============================================================================
   5. フッター
   ============================================================================ */

/* ----------------
   サイトフッター（共通）
   ---------------- */
/* --------------------------------------------------
   Footer Layout
   -------------------------------------------------- */
.custom-footer {
    background-color: var(--color-bg-footer, #333);
    color: #fff;
    padding: 60px 0 30px;
}

/* モバイル：中央寄せ・縦並び */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.f-logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 15px;
}

.footer-sns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-sns a {
    color: #fff;
    font-size: 24px;
    text-decoration: none;
}

/* リンク列も縦に並べる */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.link-col h4 {
    color: var(--color-sub);
    margin-bottom: 10px;
}

.link-col ul {
    list-style: none;
    padding: 0;
}

.link-col ul li {
    margin-bottom: 8px;
}

.link-col ul li a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 40px 0 20px;
}

.footer-bottom {
    text-align: center;
    font-size: 0.8rem;
    color: #888;
}


/* .site-footer {
    background: #111;
    color: var(--color-bg-white);
    padding: 60px 0 20px;
}


.footer-bottom {
    max-width: 1000px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid #555;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    text-align: center;
} */

/* ============================================================================
   6. トップページ専用スタイル
   ============================================================================ */

/* ----------------
   ヒーローセクション
   ---------------- */
.hero {

    position: relative;
    width: 100%;
    /* スマホ時は画面いっぱいに表示 */
    height: calc(100vh - 75px);
    margin-top: 75px;
    background-color: #ddd;
    /* 画像が出るまでの背景色 */
    overflow: hidden;
}

/* スマホ用画像エリア */
.hero-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.hero-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* スマホ時はPC用スライダーを非表示 */
.hero-swiper {
    display: block;
    width: 100%;
    height: 100%;
}

/* スライドの基本設定 */
.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    /* 重要：スマホの縦長画面でも、画像の中心を基準にいい感じにトリミングして埋める */
    object-fit: cover;
    object-position: center;
}

/* 丸いポチポチ（ページネーション）の設定 */
.swiper-pagination-bullet {
    width: 10px;
    /* スマホは少し小さめに */
    height: 10px;
    background: #fff;
    opacity: 0.5;
    margin: 0 5px !important;
}

.swiper-pagination-bullet-active {
    background: var(--color-primary);
    /* アクティブな色は青 */
    opacity: 1;
}

/* ----------------
   スケジュールバー
   ---------------- */
.schedule-bar {
    background-color: var(--color-primary);
    overflow: hidden;
    padding: 0;
}

.schedule-list {
    display: flex;
    flex-direction: column;
}

.schedule-item {
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-bg-white);
    padding: 20px 10px;
    text-align: center;
}

.schedule-item:nth-child(odd) {
    background-color: #0066c0;
}

.schedule-item .label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 5px;
    opacity: 0.9;
}

.schedule-item .date {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
}

/* ----------------
   ニュースセクション
   ---------------- */
.news-section {
    position: relative;
    overflow: hidden;
}

.news-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.news-title-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-list {
    flex: 1;
}

.news-list li {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-list .date {
    color: var(--color-text-gray);
    font-size: 0.9rem;
}

/* ----------------
   イントロダクションセクション
   ---------------- */
.intro-section {
    background-color: var(--color-bg-blue-light);
    text-align: left;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
}

.intro-content {
    text-align: left;
    width: 100%;
}

.intro-content p {
    margin-bottom: 30px;
    line-height: 2.0;
}

.intro-content p:last-child {
    margin-bottom: 0;
}

.video-decoration-wrapper {
    position: relative;
    width: 100%;
    margin: 40px auto;
}

.bg-box {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 80%;
    height: 80%;
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    z-index: 1;
}

.video-container {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: var(--shadow-medium);
    border-radius: 8px;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-box {
    height: 100%;
    color: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* ----------------
   特徴セクション
   ---------------- */
.features-section {
    background-color: var(--color-bg-light);
}

.feature-card {
    background: var(--color-bg-white);
    padding: 40px;
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.feature-card .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.feature-card p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text-gray);
}

/* ----------------
   About MECセクション
   ---------------- */
.about-mec {
    background-image: url("../images/about-sec-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-bg-white);
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.about-mec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/* ----------------
   教授紹介セクション
   ---------------- */
.prof-section {
    position: relative;
    z-index: 1;
    padding: 100px 0 0;
    overflow: hidden;
    background: var(--color-bg-white);
}

.prof-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("images/pfof1-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.15;
    z-index: -1;
}

.prof-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prof-text-box {
    width: 100%;
    margin-bottom: 40px;
    text-align: left;
    /* スマホ版の並び順制御用 */
    display: contents;
}

.prof-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    /* スマホ版の並び順制御用 */
    order: 2;
}

.prof-img-box {
    width: 100%;
    /* スマホ版の並び順制御用 */
    order: 3;
    margin-bottom: 30px;
}

.prof-img-box img {
    max-width: 100%;
    height: auto;
}

/* ----------------
   ランキングセクション（入賞者）
   ---------------- */
.ranking-section {
    background-color: var(--color-bg-white);
}

.winner-item {
    position: relative;
    margin-bottom: 60px;
}

/* ランクバッジ */
.rank-badge {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.8rem;
    position: absolute;
    top: -25px;
    left: -15px;
    z-index: 5;
    box-shadow: var(--shadow-medium);
}

.gold {
    background: var(--color-accent-yellow);
    color: var(--color-primary);
}

.silver {
    background: #e0e0e0;
    color: #666;
}

.bronze {
    background: #f3e5ab;
    color: #8a6d3b;
}

/* 勝者カード */
.winner-card {
    background: var(--color-bg-white);
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid #edf2f7;
    transition: var(--transition-normal);
}

.winner-card:hover {
    transform: scale(1.02);
}

.winner-img-box img {
    width: 100%;
    height: auto;
}

.winner-info {
    padding: 20px;
}

.team-name {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    color: var(--color-text-dark);
}

.info-row {
    margin-top: 10px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tag {
    background: var(--color-bg-light);
    color: var(--color-primary);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid #dce7f5;
    white-space: nowrap;
}

/* 2位以降のサブグリッド */
.winners-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 15px;
}

.winner-info.mini {
    padding: 15px 10px;
}

.winner-info.mini h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

/* ----------------
   参加校セクション
   ---------------- */
.logo-item {
    min-width: 170px;
    background: var(--color-bg-white);
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-small);
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ============================================================================
   7. 下層ページ共通スタイル
   ============================================================================ */

.lower-page {
    background-color: #fcfcfc;
    padding-top: 80px;
}

.page-visual {
    padding: 40px 0;
}

.page-visual h1 {
    font-size: 2rem;
}

/* パンくずリスト */
.breadcrumbs {
    font-size: 0.85rem;
    /* 文字を少し小さく */
    color: #888;
    /* グレーに */
    margin: 20px 0;
    /* 上下に余白 */
    overflow-x: auto;
    /* スマホで長くなっても崩れないように */
    white-space: nowrap;
}

.breadcrumbs a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumbs a:hover {
    color: #005bac;
    /* ホバー時にテーマカラーに */
    text-decoration: underline;
}

/* ============================================================================
   8. スケジュールページ専用スタイル
   ============================================================================ */

/* ----------------
   ステップラッパー
   ---------------- */
.steps-wrapper {
    width: 100%;
    padding: 0 10px;
}

.step-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 5px;
}

.step-date {
    background: var(--color-primary);
    color: var(--color-bg-white);
    padding: 15px;
    width: 100%;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.step-content {
    background: #eff3f6;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
}

.step-content h3 {
    font-size: 1rem;
    margin-bottom: 5px;
    color: var(--color-text-dark);
}

.step-content p {
    font-size: 0.9rem;
    color: var(--color-text-gray);
}

.step-arrow {
    text-align: center;
    padding: 10px 0;
    color: var(--color-primary);
}

.step-arrow::after {
    content: "▼";
}

/* ----------------
   ロケーションセクション (Schedule Page)
   ---------------- */
.p-location__map {
    margin-bottom: 60px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.p-location__map iframe {
    width: 100%;
    height: 300px;
    border: none;
}

.p-location__list {
    margin-top: 40px;
}

.p-location__row {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p-location__label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: lowercase;
}

.p-location__value {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-dark);
}

/* 装飾要素 */
.p-location__deco {
    position: absolute;
    z-index: 0;
    opacity: 0.15;
}

.p-location__deco--tri-top {
    top: 5%;
    right: 5%;
    width: 100px;
    height: 100px;
    background: url("images/triangle.svg") no-repeat center / contain;
}

.p-location__deco--dots-bottom {
    bottom: 5%;
    left: 5%;
    width: 80px;
    height: 80px;
    background: url("images/dots.svg") no-repeat center / contain;
}

/* ----------------
   タイムラインスタイル
   ---------------- */
.schedule-section {
    padding: 40px 0;
    margin-bottom: 50px;
}

.schedule-section .section-title {
    margin-bottom: 40px;
    padding-left: 20px;
}

.schedule-section .section-title span {
    font-size: 1.1rem;
    color: var(--color-text-dark);
    display: block;
    margin-top: 5px;
    font-weight: bold;
}

.timeline {
    position: relative;
    margin-left: 20px;
    border-left: 4px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.timeline-item {
    position: relative;
    margin-left: 30px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.timeline-item::before {
    content: "";
    position: absolute;
    top: 25px;
    left: -110px;
    /* 線の真上に来る位置 */
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--color-primary);
    z-index: 1;
}

.timeline-item::after {
    content: "";
    position: absolute;
    top: 28px;
    left: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ffffff;
}

.timeline-time {
    display: inline-block;
    background: var(--color-bg-light);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-secondary);
    margin-bottom: 10px;
}

.timeline-location {
    font-size: 0.9rem;
    color: var(--color-text-gray);
    display: flex;
    align-items: center;
    gap: 5px;
}

.timeline-location::before {
    content: "📍";
}

.schedule-note {
    margin-top: 20px;
    margin-left: 20px;
    background: #fff4e5;
    color: #d35400;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    border-left: 4px solid #ff9800;
}

/* ============================================================================
   9. エントリーページ専用スタイル
   ============================================================================ */

.entry-section {
    position: relative;
    margin-bottom: 80px;
}

/* 料金表 */
.fee-table {
    border: 2px solid #ccc;
    /* 外枠 */
    width: 100%;
}

.fee-row {
    display: flex;
    flex-direction: column;
    /* スマホは縦積み */
    border-bottom: 1px solid #ccc;
}

.fee-row:last-child {
    border-bottom: none;
}

.fee-label {
    background-color: #aebcc5;
    /* 画像のグレーっぽい色 */
    color: #333;
    font-weight: bold;
    padding: 15px;
    font-size: 1rem;
}

.fee-value {
    background-color: #fff;
    padding: 15px;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.price-usd {
    font-size: 1.4rem;
    color: #333;
}

.price-yen {
    font-size: 1rem;
    color: #666;
}

.benefit-list {
    list-style: disc;
    margin-left: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 地図・アクセス */
.location-section {
    position: relative;
    margin-bottom: 80px;
}

.locations-section {
    margin-top: 60px;
    padding-top: 40px;
}

.map-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* 16:9 の比率 */
    position: relative;
    margin-bottom: 40px;
}

.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.access-row {
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    /* スマホは縦 */
    gap: 10px;
}

.access-label {
    font-weight: bold;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.access-value {
    font-size: 0.95rem;
    line-height: 1.6;
}

.map-container {
    width: 100%;
    height: 250px;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-small);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.location-info {
    width: 100%;
    border-collapse: collapse;
}

.location-info tr {
    border-bottom: 1px solid var(--color-border);
}

.location-info th,
.location-info td {
    display: block;
    width: 100%;
    padding: 10px 15px;
}

.location-info th {
    padding-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text-dark);
}

.location-info td {
    padding-top: 0;
    font-size: 13px;
    color: var(--color-text-dark);
    line-height: 1.8;
}

/* ============================================================================
   10. 審査員ページ専用スタイル
   ============================================================================ */

.judges-section {
    position: relative;
    z-index: 2;
}

.role {
    display: block;
    font-size: 11px;
    color: #005bac;
    margin-bottom: 3px;
}

.desc {
    margin: 10px 0;
}

/* メンバー一覧のグリッドレイアウト */
.member-grid {
    display: grid;
    gap: 40px;
    /* カード同士の隙間 */
    grid-template-columns: 1fr;
    /* 1カラム（縦積み） */
    width: 100%;
    margin-top: 40px;
}

.member-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* うっすら影をつける */
    text-align: center;
}

.info-area {
    padding-top: 5rem;
}

/* 画像エリア */
.image-area {
    position: relative;
    width: 100%;
    height: 230px;
    /* 画像のサイズに合わせて高さを調整してください */
    display: flex;
    justify-content: center;
    /* 横方向の中央揃え */
    align-items: center;
    /* 縦方向の中央揃え */
}

.shape {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 完全な中央配置 */
    width: 90%;
    /* 親要素に対するサイズ（適宜調整） */
    max-width: 280px;
    /* シェイプの最大幅 */
    z-index: 1;
    /* 重なり順：下 */
}

.person-img {
    position: absolute;
    /* 人物を中央下部に配置する場合の設定 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* シェイプより少し小さく（適宜調整） */
    max-width: 220px;
    /* 人物の最大幅 */
    z-index: 2;
    /* 重なり順：上（shapeより大きい数字にする） */
}

.fade-bottom {
    /* linear-gradientで下の方を透明にするマスクをかける */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* ============================================================================
   11. 学校リストページ専用スタイル
   ============================================================================ */

.filter-buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    /* スマホでボタンが多くても折り返す */
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 15px;
    /* スマホでも押しやすいサイズ */
    border: 1px solid #333;
    /* サイトのメインカラーに合わせて調整してください */
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 4px;
    /* 角丸（お好みで） */
}

/* アクティブ（選択中）のボタン */
.filter-btn.active,
.filter-btn:hover {
    background: #333;
    color: #fff;
}

/* ロゴ一覧グリッド（スマホ：2列） */
.logo-grid {
    display: none;
    /* 初期状態は非表示 */
    grid-template-columns: repeat(2, 1fr);
    /* 横2列 */
    gap: 15px;
    /* 間隔 */
    opacity: 0;
    transition: opacity 0.5s ease;
    /* ふわっと表示させる */
}

/* アクティブになったら表示 */
.logo-grid.active {
    display: grid;
    opacity: 1;
}

/* ロゴアイテム単体（リストページ用） */
.logo-item {
    /* Topページ用のスタイルと競合しないよう注意、または上書き */
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.logo-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
    box-shadow: none;
}

/* ============================================================================
   12. 記事詳細ページ (single.php)
   ============================================================================ */

.single-article {
    background: #fff;
    padding: 30px 20px;
    /* スマホは少し狭めに */
    margin-bottom: 60px;
    border-radius: var(--border-radius, 10px);
    /* 共通変数がなければ 10px */
}

.article-header {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.article-title {
    font-size: 1.5rem;
    /* スマホは見出しを少し小さく */
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #333;
}

.article-date {
    text-align: right;
    color: #888;
    font-size: 0.9rem;
    font-family: var(--font-secondary, sans-serif);
    /* 英数字用フォント */
}

.article-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    word-wrap: break-word;
    /* 長いURLなどで崩れないように */
}

/* 本文内の要素間の余白 */
.article-content>* {
    margin-bottom: 20px;
}

/* 本文内の見出し (h2) */
.article-content h2 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 25px;
    border-left: 5px solid #005bac;
    /* テーマカラーの青 */
    padding-left: 15px;
}

/* 本文内の見出し (h3) */
.article-content h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #005bac;
}

/* 本文内のリスト */
.article-content ul,
.article-content ol {
    margin-left: 20px;
    margin-bottom: 30px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
}

/* 本文内の画像 */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 30px 0;
}

/* ============================================================================
   13. Aboutページ専用スタイル
   ============================================================================ */

.about-section {
    margin-bottom: 80px;
}

/* Numbers Area */
.numbers-area {
    background-color: #f9f9f9;
    /* 薄いグレー */
    padding: 60px 20px;
    border-radius: 20px;
    margin: 40px 0;
}

.numbers-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* スマホは1列 */
    gap: 20px;
    margin-top: 30px;
}

.number-card {
    background-color: #ffffff;
    /* 白背景 */
    border: 1px solid #eeeeee;
    /* 薄い枠線 */
    border-radius: 15px;
    /* 角丸 */
    padding: 30px 20px;
    /* 内側の余白 */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* 影 */
    transition: transform 0.3s ease;
}

.number-card:hover {
    transform: translateY(-5px);
    border-color: #005bac;
    /* ホバー時に青枠に */
}

.num-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
}

.num-val {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: #005bac;
    /* メインカラー（青） */
    line-height: 1.2;
    font-family: sans-serif;
}

.num-val .unit {
    font-size: 1.2rem;
    margin-left: 2px;
}

.num-label {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.num-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* University List */
.university-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.university-list li {
    background-color: #ffffff;
    border: 1px solid #ddd;
    color: #333;
    padding: 10px 20px;
    border-radius: 50px;
    /* 丸いタグ */
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.university-list li:hover {
    background-color: #f0f8ff;
    /* 薄い青 */
    border-color: #005bac;
    color: #005bac;
}

/* Prizes Area */
.prize-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.prize-card {
    background-color: #ffffff;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.card-head {
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.card-head h3 {
    font-size: 1.3rem;
    color: #333;
    margin: 0 0 5px 0;
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    margin-bottom: 10px;
}

.rank-list {
    list-style: none;
    padding: 0;
}

.rank-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f9f9f9;
}

.rank-list li:last-child {
    border-bottom: none;
}

.rank {
    font-weight: bold;
    color: #aaa;
    width: 40px;
}

.rank.gold {
    color: #d4af37;
}

.rank.silver {
    color: #a5a9b4;
}

.rank.bronze {
    color: #cd7f32;
}

.amount {
    font-weight: 900;
    font-size: 1.2rem;
    color: #005bac;
}

/* ============================================================================
   14. 印刷用スタイル
   ============================================================================ */
@media print {

    /* .site-header,
    .site-footer,
    .hamburger {
        display: none;
    } */

    body {
        color: #000;
        background: #fff;
    }
}

/* ============================================================================
   15. PC・タブレット用メディアクエリ (まとめて配置)
   ============================================================================ */

/* タブレット (600px以上) */
@media (min-width: 600px) {
    .member-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 横2列 */
        gap: 30px;
    }

    .info-area {
        padding-top: 5rem;
    }
}

/* PC (768px以上) */
@media (min-width: 768px) {
    :root {
        --section-padding: 80px;
        /* ★ここで上書き！!importantは不要です */
    }

    .section-title {
        font-size: 2.8rem;
        /* PC */
        margin-bottom: 50px;
    }

    .sub-title {
        font-size: 1.5rem;
        /* PC */
    }

    .prof-btn-area {
        flex-direction: row;
        /* ★PCでは横に並べる */
        justify-content: center;
        /* 中央に寄せる */
    }

    .prof-btn-area .btn {
        width: 160px;
        /* PCでは適切な幅に固定 */
    }

    /* --- PCのナビゲーション設定（768px以上） --- */
    .menu-toggle {
        display: none;
    }

    .nav-list {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
        position: static;
        width: auto;
        background: transparent;
    }

    .nav-list li {
        position: relative;
        border-bottom: none;
        /* スマホ用の下線を消す */
    }

    /* 親メニューのリンク設定リセット */
    .nav-list li a {
        padding: 10px 15px;
        background: transparent;
    }

    /* PCのサブメニュー（初期状態は非表示） */
    .nav-list .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        min-width: 200px;
        padding: 10px 0;
        background: #fff;
        box-shadow: var(--shadow-small);
    }

    /* サブメニュー内の項目設定 */
    .nav-list .sub-menu li {
        padding-left: 0;
        /* スマホ用のインデントを解除 */
        border-bottom: none;
        /* スマホ用の下線を解除 */
    }

    .nav-list .sub-menu li a {
        padding: 10px 20px;
        font-size: 0.95rem;
        color: var(--color-text-dark);
        background: transparent;
        /* スマホ用の背景色を解除 */
    }

    /* スマホで付けた記号（∟）をPCでは消す */
    .nav-list .sub-menu li a::before {
        content: none;
    }

    /* ホバー演出 */
    .nav-list .sub-menu li a:hover {
        background: var(--color-bg-light);
        color: var(--color-primary);
    }

    .nav-list li:hover>.sub-menu {
        display: block;
    }


    /* フレックスレイアウト */
    .flex-layout {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* 左右に配置 */
        gap: 50px;
        /* 文章と動画の間の隙間 */
    }

    /* Introセクション調整 */
    .intro-content {
        width: 45%;
        /* 全体の45%くらいの幅にする */
    }

    .video-decoration-wrapper {
        width: 45%;
        /* ★ここが重要！これで巨大化が止まります */
    }

    /* グリッド3列 */
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* スケジュールバー */
    .schedule-list {
        flex-direction: row;
    }

    .schedule-item {
        flex: 1;
        padding: 30px 0;
        margin-left: -2%;
        clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
    }

    .schedule-item:first-child {
        margin-left: 0;
        clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 0% 0%);
    }

    .schedule-item:last-child {
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
    }

    /* ニュースセクション */
    .news-inner {
        flex-direction: row;
    }

    .news-list li {
        flex-direction: row;
        gap: 20px;
    }

    /* 教授セクション（PC修正） */
    .prof-section .prof-flex {
        /* row-reverse で左右の配置を入れ替え（左：テキスト、右：画像） */
        flex-direction: row-reverse;
        align-items: flex-end;
        /* 下揃え（元のデザイン維持） */
        gap: 60px;
    }

    .prof-section .prof-text-box {
        /* スマホ版で指定した contents を解除してブロック要素に戻す */
        display: block;
        flex: 1.2;
        padding-bottom: 100px;
        margin-bottom: 0;
        /* スマホ用の余白をリセット */
    }

    .prof-section .prof-img-box {
        flex: 1;
        max-width: 550px;
        margin-bottom: 0;
        /* スマホ用の余白をリセット */
    }

    /* スマホ版で設定したorderを無効化 */
    .prof-section .prof-desc {
        order: initial;
    }

    .logo-item {
        min-width: auto;
    }

    /* ステップラッパー */
    .steps-wrapper {
        max-width: 900px;
        margin: 0 auto;
    }

    .step-item {
        flex-direction: row;
        align-items: stretch;
    }

    .step-date {
        width: 300px;
        font-size: 1rem;
    }

    .step-content {
        margin-left: 20px;
        text-align: left;
        flex: 1;
    }

    .step-arrow {
        margin-left: 150px;
        text-align: left;
    }

    /* ロケーションセクション */
    .p-location__row {
        flex-direction: row;
        align-items: flex-start;
        padding: 30px 0;
    }

    .p-location__label {
        width: 250px;
        flex-shrink: 0;
    }

    .p-location__value {
        flex: 1;
    }

    .p-location__map iframe {
        height: 450px;
    }

    .map-container {
        height: 350px;
    }

    .location-info th,
    .location-info td {
        display: table-cell;
        padding: 15px;
    }

    .location-info th {
        width: 120px;
        font-weight: normal;
        color: var(--color-text-gray);
        vertical-align: top;
    }

    .location-info td {
        font-size: 14px;
    }

    /* ヒーローセクション */
    .hero {
        /* PCなどの大画面では高さをたっぷり取る */
        height: 80vh;
    }

    /* PCではスマホ画像を非表示 */
    .hero-mobile {
        display: none;
    }

    /* PCではスライドショーを表示 */
    .hero-swiper {
        display: block;
    }

    .swiper-pagination-bullet {
        width: 12px;
        /* PCではクリックしやすいように少し大きく */
        height: 12px;
    }

    /* タイムライン */
    .timeline {
        margin-left: 0;
    }

    .timeline-item {
        margin-left: 40px;
    }

    .timeline-item::before {
        left: -53px;
    }

    .timeline-item::after {
        left: -12px;
        border-width: 12px;
    }

    /* 学校リスト */
    .filter-buttons-wrapper {
        gap: 15px;
        margin-bottom: 60px;
    }

    .filter-btn {
        padding: 12px 24px;
        font-size: 16px;
    }

    /* PCでは横6列 */
    .logo-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }

    /* 記事詳細 */
    .single-article {
        max-width: 800px;
        /* 横長になりすぎないように */
        margin-left: auto;
        margin-right: auto;
        padding: 50px;
        /* PCは余白たっぷり */
    }

    .article-title {
        font-size: 2rem;
        /* PCは大きく */
    }

    .article-content h2 {
        font-size: 1.6rem;
    }

    /* エントリーページ */
    .fee-row {
        flex-direction: row;
        /* 横並び */
    }

    .fee-label {
        width: 30%;
        /* 左側 30% */
        border-right: 1px solid #ccc;
        display: flex;
        align-items: center;
        /* 縦中央 */
    }

    .fee-value {
        width: 70%;
        /* 右側 70% */
    }

    .access-row {
        flex-direction: row;
        align-items: flex-start;
    }

    .access-label {
        width: 20%;
        padding-top: 5px;
    }

    .access-value {
        width: 80%;
    }

    /* Aboutページ */
    .intro-grid {
        display: flex;
        gap: 50px;
    }

    .intro-head {
        flex: 1;
    }

    .intro-body {
        flex: 1.5;
    }

    .numbers-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .univ-content {
        display: flex;
        gap: 50px;
    }

    .univ-text {
        flex: 1;
    }

    .univ-list-wrapper {
        flex: 1.5;
    }

    .prize-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .prize-card {
        height: 100%;
    }



    /* footer */
    .footer-content {
        flex-direction: row;
        /* 横並び */
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
    }

    .footer-links {
        flex-direction: row;
        /* リンク列も横並び */
        gap: 60px;
    }

    .footer-sns {
        justify-content: flex-start;
    }

    .footer-bottom {
        text-align: left;
    }

}

/* PC・大きな画面 (1024px以上) */
@media (min-width: 1024px) {
    .member-grid {
        grid-template-columns: repeat(4, 1fr);
        /* 横4列 */
        gap: 20px;
    }
}