/* --- 基本設定 --- */
:root {
    --primary-color: #003366; /* 敬愛ブルー */
    --secondary-color: #D4AF37; /* アクセントのゴールド */
    --text-color: #333;
    --light-bg-color: #f7f9fc;
    --white-color: #fff;
    --font-family: 'Noto Sans JP', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    line-height: 1.8;
    background-color: var(--white-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-section {
    padding: 80px 0;
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.site-section.in-view {
    opacity: 1;
    transform: translateY(0);
}


/* --- ヘッダー --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.site-logo a {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}

.main-nav a {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    position: relative;
    padding: 5px 0;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}


/* --- ヒーローセクション --- */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    animation: zoomIn 20s infinite alternate;
}
@keyframes zoomIn {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 51, 102, 0.2); /* 敬愛ブルーの半透明 */
}

.hero-text {
    position: relative;
    z-index: 2;
}

.hero-text h2 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero-text p {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero__video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}


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

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 50px;
}

.section-link {
    text-align: center;
    margin-top: 40px;
}

.bg-light {
    background-color: var(--light-bg-color);
}


/* --- ニュース --- */
.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    border-top: none;
}

.news-card {
    background-color: var(--white-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.news-card-link {
    display: block;
    color: var(--text-color);
}
.news-card-link:hover {
    opacity: 1;
}

.news-card-image {
    width: 100%;
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    background-color: #e0e0e0;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-content {
    padding: 20px;
}

.news-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
    color: #666;
}

.news-category {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.news-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 3.2em;
}
/* --- コンセプト --- */
.concept-container {
    display: flex;
    align-items: center;
    gap: 50px;
}
.concept-image {
    flex: 1;
}
.concept-image img {
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.concept-text {
    flex: 1.2;
}
.concept-text .section-title {
    text-align: left;
}
.concept-lead {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* --- コース紹介 --- */
.course-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.card {
    background-color: var(--white-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}
.card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}
.card-content {
    padding: 25px;
}
.card-content h4 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.card-link {
    display: inline-block;
    margin-top: 20px;
    font-weight: 700;
}


/* --- スクールライフ --- */
#school-life .container {
    margin-bottom: 50px;
}
.scrolling-gallery-container {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.scrolling-gallery-wrapper {
    display: flex;
    width: fit-content;
    animation: scroll 40s linear infinite;
}
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.scrolling-gallery-container:hover .scrolling-gallery-wrapper {
    animation-play-state: paused;
}
.gallery-item {
    flex-shrink: 0;
    width: 40vh;
    max-width: 350px;
    height: 30vh;
    max-height: 260px;
    margin: 0 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.gallery-item:hover img {
    transform: scale(1.05);
}

/* --- 入試情報 --- */
.admissions-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* --- ボタン --- */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}
.btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 1.1rem;
    padding: 15px 40px;
}
.btn-primary:hover {
    background-color: #002244;
    border-color: #002244;
}
.btn-secondary {
    border-color: #aaa;
    color: #555;
}
.btn-secondary:hover {
    background-color: #555;
    border-color: #555;
    color: var(--white-color);
}


/* --- フッター --- */
.site-footer {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 50px 0 0;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer-info h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.footer-links ul {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.footer-links a {
    color: var(--white-color);
}
.copyright {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    opacity: 0.7;
}

/* --- アクセスセクション（重複コードを削除し、整理・統合） --- */
.access-section {
    background-color: #f5f5f5;
    padding: 80px 0;
    text-align: center;
}
.access-section .section-title h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    color: #222;
    letter-spacing: 0.1em;
    margin: 0;
}
.access-section .section-title p {
    font-size: 1rem;
    color: #555;
    margin-top: 5px;
    margin-bottom: 50px;
}
.access-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    text-align: left;
}
.access-map {
    flex: 1;
    min-width: 0;
}
.access-map iframe {
    width: 100%;
    height: 380px;
    border: 0;
    vertical-align: middle;
}
.access-info {
    flex: 1;
    min-width: 0;
    padding-left: 20px;
}
.access-info h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}
.access-info .address,
.access-info .contact {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}
.access-info .contact {
    margin-top: 15px;
}
.btn.map-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 40px;
    background-color: #333;
    color: var(--white-color);
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    border: none;
}
.btn.map-btn:hover {
    background-color: #003366;
}
.transport-info {
    margin-top: 30px;
    border-top: 1px solid #ddd;
    padding-top: 25px;
}
.transport-info h4 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}
.transport-info ul {
    list-style: none;
    padding-left: 0;
}
.transport-info li {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    padding-left: 1.4em;
    text-indent: -1.4em;
    margin-bottom: 8px;
}
.transport-info li::before {
    content: '▶';
    display: inline-block;
    color: var(--primary-color);
    margin-right: 0.7em;
    font-size: 0.8em;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        height: auto;
        padding: 15px 0;
    }
    .main-nav ul {
        margin-top: 15px;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .main-nav a {
        font-size: 14px;
    }
    .hero-text h2 {
        font-size: 2.5rem;
    }
    .hero-text p {
        font-size: 1.2rem;
    }
    .site-section {
        padding: 60px 0;
    }
    .section-title {
        font-size: 2rem;
    }
    .concept-container {
        flex-direction: column;
    }
    .gallery-item {
        width: 35vh;
        height: 25vh;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-links {
        margin-top: 30px;
    }
    .footer-links ul {
        justify-content: center;
    }
    .access-section {
        padding: 60px 0;
    }
    .access-container {
        flex-direction: column;
        gap: 30px;
    }
    .access-info {
        padding-left: 0;
        text-align: center;
        width: 100%;
    }
    .access-info .address,
    .access-info .contact,
    .transport-info {
        text-align: left;
        display: inline-block;
        width: 100%;
        max-width: 350px;
    }
}

/* --- ヘッダー資料請求ボタン ＆ スマホ表示調整 --- */

/* PC表示用のスタイル (769px以上) */
@media (min-width: 769px) {
  .main-nav ul {
    align-items: center;
  }
  .btn-request {
    background-color: #008000;
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    margin-left: 15px;
    white-space: nowrap;
  }
  .btn-request:hover {
    background-color: #006400;
    opacity: 1;
  }
  .request-button-item a::after {
    display: none;
  }
}

/* ▼▼▼ スマートフォン表示用のスタイル全体をこちらに差し替えてください ▼▼▼ */
@media (max-width: 768px) {
  
  /* ボタンを一番下に配置 */
  .request-button-item {
    order: 10; 
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
  }

  .btn-request {
    display: block;
    width: 100%;
    background-color: #008000;
    color: var(--white-color);
    padding: 12px;
    text-align: center;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
  }

  /* ▼▼▼【ヒーローテキストのフォントサイズを再調整】▼▼▼ */
  .hero-text h2 {
    font-size: 1.65rem; /* 1.8remから再調整し、確実に2行に収まるサイズにしました */
    line-height: 1.6;
    letter-spacing: 0.05em; /* 文字間を微調整して、窮屈な印象を和らげます */
  }
  .hero-text p {
    font-size: 0.9rem; /* サブタイトルもバランスを合わせて調整 */
  }
}

/* ============================================= */
/* ▼▼▼ ヘッダーの右寄せとレスポンシブの最終修正 ▼▼▼ */
/* ============================================= */

/* 【PC表示の修正】ハンバーガーメニューを非表示にする */
/* これにより、ロゴが左、ナビゲーションが右に配置されます */
.hamburger-menu {
    display: none;
}

/* 【スマホ表示の修正】画面幅が768px以下の時の設定 */
@media (max-width: 768px) {
    
    /* ヘッダーのレイアウトを上書き修正 */
    .header-container {
        flex-direction: row; /* 縦積み(column)を解除し、常に横並び(row)にする */
        justify-content: space-between; /* ロゴとハンバーガーを両端に配置 */
    }

    /* PC用のメニューは非表示にする */
    .main-nav {
        display: none;

        /* ↓ JSで .is-active が付与された時のスタイル（メニュー展開時）*/
        position: absolute;
        top: 70px; /* ヘッダーの高さ分、下から表示 */
        left: 0;
        width: 100%;
        background: var(--white-color);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    
    /* JSで .is-active が付与されたら表示する */
    .main-nav.is-active {
        display: block;
    }

    /* メニュー項目を縦に並べる */
    .main-nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .main-nav a {
        display: block;
        padding: 15px 20px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    
    /* スマホではホバーの下線を消す */
    .main-nav a:hover::after {
        width: 0;
    }

    /* ハンバーガーメニューを表示する */
    .hamburger-menu {
        display: block;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
    }
}
/* ================================== */
/* ▼▼▼ 資料請求ボタンのスタイルを追加 ▼▼▼ */
/* ================================== */

/* 【PC表示のボタンスタイル】 */
.request-button a {
    background-color: var(--primary-color); /* 敬愛ブルー */
    color: var(--white-color) !important; /* !importantで白色を確実に適用 */
    padding: 8px 20px !important; /* ボタンの余白 */
    border-radius: 5px; /* 角を丸める */
    font-weight: 700;
    transition: opacity 0.3s ease;
}

/* PC表示で、ホバー時の下線アニメーションを無効化 */
.request-button a:hover::after {
    display: none;
}

/* PC表示で、ホバー時に少し透明にする */
.request-button a:hover {
    opacity: 0.8;
}


/* 【スマホ表示のボタンスタイル】 */
@media (max-width: 768px) {
    .request-button {
        order: -1; /* ハンバーガーメニューの一番上に表示 */
        padding: 15px;
        background-color: var(--primary-color);
    }

    .request-button a {
        color: var(--white-color) !important;
        border-bottom: none; /* 下線を消す */
        padding: 0 !important; /* 親要素で余白を管理するためリセット */
        font-size: 16px;
    }

    /* 通常メニュー項目のスタイルを上書き */
    .main-nav a {
        border-bottom: 1px solid #eee;
    }
}
/* ======================================================= */
/* ▼▼▼ 学校概要ページ (gaiyou.html) のスタイル（改訂版） ▼▼▼ */
/* ======================================================= */

/* --- 新しいページヘッダー（ビジュアル付き） --- */
.page-header-visual {
    position: relative;
    padding-top: 70px; /* 固定ヘッダーの高さ分 */
    height: 400px; /* ヘッダーの高さ */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    text-align: center;
}

.page-header-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 51, 102, 0.5); /* 敬愛ブルーの半透明オーバーレイ */
}

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-header-content .page-title-ja {
    font-size: 2.8rem;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.page-header-content .page-title-en {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white-color); /* 文字色を白に */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* --- 1. 学校長挨拶 --- */
.message-container {
    display: flex;
    align-items: center;
    gap: 50px;
}
.message-text { flex: 1.5; }
.message-text h4 { font-size: 1.5rem; font-weight: 700; margin-bottom: 25px; line-height: 1.6; }
.principal-name { margin-top: 30px; text-align: right; font-size: 1.1rem; }
.principal-name .name { font-size: 1.5rem; font-weight: 700; margin-left: 1em; }
.message-image { flex: 1; max-width: 380px; }
.message-image img { border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* --- 2. 校訓 --- */
.motto-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}
.motto-item { background: var(--white-color); padding: 30px 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.motto-item h4 { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); }
.motto-item p { font-size: 1rem; color: #888; }

/* --- 3. 教育目標 (デザイン改訂版) --- */
.goals-wrapper {
    max-width: 900px;
    margin: 40px auto 0;
}

/* 学校目標 */
.school-goal {
    background-color: var(--light-bg-color);
    border-left: 5px solid var(--primary-color);
    padding: 25px 30px;
    margin-bottom: 50px;
    border-radius: 0 8px 8px 0;
}

.school-goal h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.school-goal p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* 教育目標リスト */
.education-goals-list {
    list-style: none;
}

.education-goals-list li {
    background-color: var(--white-color);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.education-goals-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.education-goals-list .goal-text {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.8;
}

.education-goals-list .goal-keywords {
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: #888;
    margin-top: 15px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .school-goal {
        padding: 20px;
    }
    .school-goal p,
    .education-goals-list .goal-text {
        font-size: 1rem;
    }
    .education-goals-list li {
        padding: 25px 20px;
    }
}

/* --- ここにあった古い.goals-listのスタイルは削除してください --- */
/*
.goals-list { ... }
.goals-list li { ... }
.goals-list li span { ... }
*/

/* --- 4. 学園の歴史 (タイムライン) --- */
.history-timeline { list-style: none; max-width: 800px; margin: 0 auto; position: relative; padding: 20px 0; }
.history-timeline::before { content: ''; position: absolute; top: 0; left: 100px; width: 3px; height: 100%; background: #e0e0e0; }
.history-timeline li { position: relative; display: flex; align-items: baseline; padding-left: 140px; margin-bottom: 30px; }
.history-timeline li::before { content: ''; position: absolute; top: 8px; left: 92px; width: 18px; height: 18px; border-radius: 50%; background: var(--white-color); border: 4px solid var(--primary-color); }
.history-year { position: absolute; left: 0; top: 5px; font-weight: 700; color: #888; width: 80px; text-align: right; }
.history-event { font-size: 1.1rem; font-weight: 700; }

/* --- 学校概要ページ レスポンシブ対応 --- */
@media (max-width: 768px) {
    .page-header-visual {
        height: 300px; /* スマホでは高さを少し抑える */
    }
    .page-header-content .page-title-ja {
        font-size: 2rem;
    }

    .message-container { flex-direction: column-reverse; }
    .message-text { text-align: left; }
    .principal-name { text-align: right; }

    .motto-container { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .motto-item h4 { font-size: 1.8rem; }

    .history-timeline::before { left: 10px; }
    .history-timeline li { padding-left: 40px; flex-direction: column; align-items: flex-start; }
    .history-timeline li::before { left: 3px; }
    .history-year { position: static; width: auto; text-align: left; font-size: 0.9rem; margin-bottom: 5px; }
    .history-event { font-size: 1rem; }
}


/* ============================================= */
/* ▼▼▼ 建学の理念（校訓セクション内）のスタイル ▼▼▼ */
/* ============================================= */

.philosophy-container {
    margin-top: 60px; /* 校訓のカードとの間に余白を設ける */
    padding-top: 40px; /* 上に区切りの余白 */
    border-top: 1px solid #e0e0e0; /* 薄い区切り線 */
    text-align: center;
    max-width: 800px; /* 横幅が広がりすぎないように制限 */
    margin-left: auto;
    margin-right: auto;
}

.philosophy-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.philosophy-text {
    font-size: 1rem;
    line-height: 2.2; /* 行間を広めに取って、ゆったりと読めるようにする */
    color: var(--text-color);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .philosophy-container {
        margin-top: 50px;
        padding-top: 30px;
    }
    .philosophy-text {
        text-align: left; /* スマートフォンでは左揃えの方が見やすい */
    }
}

/* ============================================= */
/* ▼▼▼ フッターの文字色修正（スマホ対応）   ▼▼▼ */
/* ============================================= */

.footer-info p {
    color: var(--white-color);
}

/* ============================================= */
/* ▼▼▼ フッターの電話番号が表示されない問題の修正 ▼▼▼ */
/* ============================================= */

/* フッター内のすべてのリンクの色を白に指定します。
   これにより、自動でリンクになる電話番号も白で表示されます。 */
.site-footer a {
    color: var(--white-color);
}

/* 念のため、pタグの文字色も明示的に白にしておきます */
.footer-info p {
    color: var(--white-color);
}

/* ================================================= */
/* ▼▼▼ ハンバーガーメニューが消える問題の最終修正 ▼▼▼ */
/* ================================================= */

/* 【PC表示の修正】再度、ハンバーガーメニューを非表示に設定 */
/* これまでの修正で影響を受けている可能性があるため、念のため再指定します */
@media (min-width: 769px) {
    .hamburger-menu {
        display: none !important;
    }
}


/* 【スマホ表示の修正】ハンバーガーメニューを表示させる */
/* このブロックが不足していました */
@media (max-width: 768px) {
    .hamburger-menu {
        display: block; /* ハンバーガーメニューを表示する */
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        z-index: 1001; /* 他の要素より手前に表示 */
    }

    .hamburger-menu span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--primary-color); /* 敬愛ブルー */
        margin: 5px 0;
        transition: all 0.3s ease-in-out;
    }
}

/* ================================================= */
/* ▼▼▼ ハンバーガーメニュー展開時のアニメーション ▼▼▼ */
/* ================================================= */

/* is-activeクラスが付いた時の線の変化 */
.hamburger-menu.is-active span:nth-of-type(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.is-active span:nth-of-type(2) {
    opacity: 0;
}

.hamburger-menu.is-active span:nth-of-type(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* is-activeクラスが付いた時のメニュー表示 */
/* 念のため、スマホ表示のメディアクエリ内にも記載しますが、こちらにも定義しておきます */
.main-nav.is-active {
    display: block !important;
}


/* ============================================= */
/* ▼▼▼ 教育の特色ページ (kyouiku.html) のスタイル ▼▼▼ */
/* ============================================= */

.feature-section {
    padding: 100px 0;
}

.feature-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* 画像とテキストの配置を反転させるためのクラス */
.feature-container-reverse {
    flex-direction: row-reverse;
}

.feature-image {
    flex: 1;
    min-width: 0;
}

.feature-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.feature-text {
    flex: 1.2; /* テキストエリアを少し広めに */
    min-width: 0;
}

.feature-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-color); /* アクセントのゴールド */
    margin-bottom: 10px;
}

.feature-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1.5;
    margin-bottom: 25px;
}

.feature-text p:last-of-type { /* 説明文のスタイル */
    font-size: 1rem;
    line-height: 2;
}

/* --- 教育の特色 レスポンシブ対応 --- */
@media (max-width: 768px) {
    .feature-section {
        padding: 60px 0;
    }
    .feature-container,
    .feature-container-reverse {
        flex-direction: column; /* スマホでは縦積みに */
        gap: 30px;
    }
    .feature-title {
        font-size: 1.5rem;
    }
}

/* ============================================= */
/* ▼▼▼ ページ内ローカルナビゲーションのスタイル   ▼▼▼ */
/* ============================================= */

.page-local-nav {
    background-color: var(--white-color);
    border-bottom: 1px solid #e0e0e0;
    /* スクロール時に画面上部に固定する設定 */
    position: sticky;
    top: 70px; /* 固定ヘッダーの高さ分 */
    z-index: 900; /* ヘッダーよりは下、コンテンツよりは上 */
}

.page-local-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* スマホで折り返すように */
}

.page-local-nav a {
    display: block;
    padding: 15px 25px;
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-color);
    position: relative;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.page-local-nav a:hover {
    background-color: var(--light-bg-color);
    opacity: 1; /* 親のホバー効果を無効化 */
}

/* 矢印アイコン */
.page-local-nav a::after {
    content: '▼';
    font-size: 10px;
    display: block;
    text-align: center;
    color: var(--secondary-color);
    margin-top: 2px;
}

/* --- ローカルナビ レスポンシブ対応 --- */
@media (max-width: 768px) {
    .page-local-nav {
        top: 0; /* スマホではヘッダーが固定されない場合を想定（もし固定なら70pxのまま） */
    }
    .page-local-nav ul {
        justify-content: space-around; /* 項目を均等配置 */
    }
    .page-local-nav a {
        padding: 12px 10px;
        font-size: 13px;
    }
}

/* ============================================= */
/* ▼▼▼ 学校生活ページ (seikatsu.html) のスタイル ▼▼▼ */
/* ============================================= */
/* =================================== */
/* 制服セクションのレイアウト修正
/* =================================== */

.uniform-showcase {
  display: flex;
  flex-direction: column;
  gap: 4rem; /* 各アイテム（冬服・夏服）の間の余白 */
  margin-top: 3rem;
}

.uniform-item-showcase {
  display: flex;
  align-items: center; /* 画像とテキストを上下中央揃え */
  gap: 2.5rem; /* 画像とテキストの間の余白 */
}

/* ★★★ 夏服のレイアウトが崩れないように、交互に配置を反転させる ★★★ */
.uniform-item-showcase:nth-child(even) {
  flex-direction: row-reverse; /* 偶数番目のアイテム（夏服）の配置を反転 */
}

.uniform-image-showcase {
  flex: 0 0 45%; /* 画像の幅を固定（45%） */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.uniform-image-showcase img {
  width: 100%;
  height: auto;
  display: block;
}

.uniform-text-showcase {
  flex: 1; /* 残りのスペースをテキストエリアが使用 */
}

.uniform-text-showcase h4 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #005a9e; /* 仮のテーマカラー */
}

.uniform-text-showcase p {
  font-size: 1rem;
  line-height: 1.8;
}


/* =================================== */
/* スマートフォン表示の調整
/* =================================== */
@media (max-width: 768px) {
  .uniform-item-showcase,
  .uniform-item-showcase:nth-child(even) {
    /* スマートフォンでは縦積みにする */
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .uniform-image-showcase {
    width: 100%; /* 画像幅を100%に */
  }

  .uniform-text-showcase h4 {
    font-size: 1.5rem;
  }
}
/* --- 2. 部活動紹介 (カードデザイン版) --- */
.club-category-cards {
    margin-bottom: 50px;
}
.club-category-cards:last-child {
    margin-bottom: 0;
}
.club-category-cards h4 {
    font-size: 1.5rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 30px;
}

.club-cards-container {
    display: grid;
    /* 1列の最小幅を200px、最大を1frとして、画面幅に応じて自動で列数を調整 */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
}

.club-card {
    display: block;
    background-color: var(--white-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color);
}
.club-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
    opacity: 1;
}

.club-card-image {
    width: 100%;
    /* 画像のアスペクト比を 3:2 に固定 */
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.club-card:hover .club-card-image {
    transform: scale(1.05); /* ホバー時に画像を少し拡大 */
}

.club-card-name {
    font-weight: 700;
    padding: 15px;
    text-align: center;
}

/* --- ここにあった古い.club-category, .club-list, .club-itemのスタイルは削除してください --- */
/*
.club-category { ... }
.club-list { ... }
.club-item { ... }
*/

/* --- 3. 年間行事 --- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.event-month {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
}
.event-month h4 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.event-month ul { list-style: none; }
.event-month li { font-size: 0.95rem; line-height: 1.8; }

/* --- 4. 校舎・施設 --- */
.facilities-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.facility-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.facility-item img { transition: transform 0.4s ease; }
.facility-item:hover img { transform: scale(1.08); }
.facility-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: var(--white-color);
    padding: 30px 20px 15px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: opacity 0.3s ease;
}

/* --- 5. Q&A (カテゴリー分けデザイン版) --- */
.qa-categories-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.qa-category {
    margin-bottom: 50px;
}
.qa-category:last-child {
    margin-bottom: 0;
}

.qa-category h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.qa-category h4 span {
    margin-right: 0.5em;
    font-size: 1.2rem;
}

.qa-list {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.qa-item {
    border-bottom: 1px solid #e0e0e0;
}
.qa-item:last-child {
    border-bottom: none;
}

.qa-item summary {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* markerを消す */
    position: relative; /* 矢印アイコンの位置基準 */
}
.qa-item summary::-webkit-details-marker { display: none; }

/* 矢印アイコン */
.qa-item summary::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

/* 開いたときの矢印アイコン */
.qa-item[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.qa-item summary span {
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 1.2rem;
}

.qa-answer {
    display: flex;
    align-items: flex-start;
    padding: 0 25px 30px 25px;
    background: var(--white-color); /* 背景色を白に変更 */
    line-height: 1.9;
}

/* 回答文のスタイル */
.qa-answer p {
    flex: 1; /* A. とテキストの間のスペースを確保 */
}

.qa-answer span {
    color: var(--secondary-color);
    margin-right: 15px;
    font-weight: 700;
    font-size: 1.2rem;
}

/* --- Q&A レスポンシブ対応 --- */
@media (max-width: 768px) {
    .qa-category h4 { font-size: 1.2rem; }
    .qa-item summary { font-size: 1rem; padding-right: 50px; }
}

/* --- ここにあった古い.qa-container, .qa-itemのスタイルは削除してください --- */
/*
.qa-container { ... }
.qa-item { ... }
.qa-item summary { ... }
.qa-answer { ... }
*/

/* --- 学校生活ページ レスポンシブ対応 --- */
@media (max-width: 768px) {
    .uniform-container { grid-template-columns: 1fr; }
    .club-list { gap: 10px; }
    .club-item { font-size: 14px; padding: 10px 20px; }
    .qa-item summary { font-size: 1rem; }
}


/* ============================================= */
/* ▼▼▼ オープンスクールページ (openschool.html) のスタイル ▼▼▼ */
/* ============================================= */

/* --- 導入メッセージエリア --- */
.text-center-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.section-lead {
    font-size: 1.1rem;
    line-height: 2;
    margin-top: 25px;
}

/* --- イベント概要 --- */
.event-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: var(--white-color);
}
.detail-item {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.event-details-grid > .detail-item:nth-last-child(-n+2) {
    border-bottom: none; /* 下2つのボーダーを消す */
}
.detail-label {
    background: var(--light-bg-color);
    font-weight: 700;
    padding: 20px;
    width: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.detail-content {
    padding: 20px;
    flex-grow: 1;
}
.detail-content p {
    line-height: 1.8;
}
.detail-content p:not(:last-child) {
    margin-bottom: 0.5em;
}
.detail-item-full { /* 内容など、1列全体を使うアイテム */
    grid-column: 1 / -1;
}
.program-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.program-list li {
    position: relative;
    padding-left: 1.2em;
}
.program-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: 700;
}


/* --- 申し込みボタン --- */
.btn-large {
    font-size: 1.2rem;
    padding: 18px 50px;
}
.application-note {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #777;
}
/* --- イベントレポート（ブログリンク） imgタグ使用版 --- */
.report-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
}

.report-card {
    display: block;
    background-color: var(--white-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color);
}
.report-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
    opacity: 1;
}

/* ▼▼▼ 画像エリアのスタイルを修正 ▼▼▼ */
.report-card-image {
    width: 100%;
    overflow: hidden; /* はみ出した画像を隠す */
    /* 画像のアスペクト比を 4:3 に固定 */
    aspect-ratio: 4 / 3;
}

.report-card-image img {
    width: 100%;
    height: 100%;
    /* 画像が歪まないようにコンテナを埋める */
    object-fit: cover;
    transition: transform 0.4s ease;
}
.report-card:hover .report-card-image img {
    transform: scale(1.05); /* ホバー時に画像を少し拡大 */
}
/* ▲▲▲ ここまでが修正箇所 ▲▲▲ */

.report-card-content {
    padding: 20px;
}
.report-card-date {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--secondary-color);
}
.report-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 5px;
    line-height: 1.5;
}
/* ======================================================= */
/* ▼▼▼ 入試情報ページ (nyuusi.html) スタイル改訂版 ▼▼▼ */
/* ======================================================= */

/* --- 募集要項テーブルのスタイル --- */
.data-table-admissions {
    text-align: center; /* 基本を中央揃えに */
}
.data-table-admissions th,
.data-table-admissions td {
    text-align: center;
    vertical-align: middle;
}
.data-table-admissions thead th {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 1.1rem;
}
/* 1列目の見出し(項目名) */
.data-table-admissions tbody th {
    background-color: var(--light-bg-color);
    text-align: left;
    width: 180px;
}
.data-table-admissions td {
    text-align: left;
    padding: 20px;
}
.data-table-admissions td p {
    line-height: 1.8;
}
/* ======================================================== */
/* ▼▼▼ 学費関連テーブルのデザイン修正（画像再現版） ▼▼▼ */
/* ======================================================== */

.admissions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    font-size: 1rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* テーブルヘッダー (項目、金額など) */
.admissions-table thead th {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 15px;
    font-weight: 700;
    text-align: center;
}

/* テーブルボディのセル */
.admissions-table tbody th, 
.admissions-table tbody td {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

/* 1列目の見出しセル (入学金など) */
.admissions-table tbody th {
    font-weight: 700;
    text-align: left;
    background-color: var(--white-color);
    width: 35%;
}

/* 2列目以降のデータセル */
.admissions-table tbody td {
    text-align: right; /* 金額は右揃え */
    font-weight: 700;
}

/* 備考セルの調整 */
.admissions-table .notes-cell {
    text-align: center;
    font-weight: 400;
}

/* 特待生制度の内容セルの調整 */
.admissions-table .details-cell {
    text-align: left;
    font-weight: 400;
    line-height: 1.8;
}

/* 合計行のスタイル */
.admissions-table tr.total-row {
    background-color: #eaf2ff; /* 画像に近い薄い青 */
}
.admissions-table tr.total-row th,
.admissions-table tr.total-row td {
    font-weight: 900;
    color: var(--primary-color);
}

/* --- ここにあった古い.definition-listのスタイルは削除してください --- */
/*
.definition-list { ... }
...
*/




/* --- レスポンシブ対応 (dlリスト) --- */
@media (max-width: 768px) {
    /* スマホでは項目名と内容を縦積みにする */
    .definition-list dt,
    .definition-list dd {
        display: block;
        width: 100%;
        border-left: none;
    }
    .definition-list dt {
        border-bottom: none;
        padding-bottom: 10px;
    }
    .definition-list dd {
        padding-top: 0;
        border-bottom: 1px solid #ddd;
    }
}
/* ======================================================== */
/* ▼▼▼ 募集要項テーブル「一般入試」列の背景色を追加 ▼▼▼ */
/* ======================================================== */

/* 「一般入試」のヘッダーセル（3番目のth） */
.data-table-admissions thead th:nth-child(3) {
    background-color: #002244; /* 他のヘッダーより少し濃い青に */
}

/* 「一般入試」のデータセル（3番目のtd） */
.data-table-admissions tbody td:nth-child(3) {
    background-color: var(--light-bg-color); /* 薄いグレーの背景色を適用 */
}

/* ============================================= */
/* ▼▼▼ 詳細はこちらボタン（矢印付き）のスタイル ▼▼▼ */
/* ============================================= */

.btn-arrow {
    border: 2px solid var(--secondary-color); /* 枠線の色をアクセントのゴールドに */
    color: var(--secondary-color);
    background: transparent;
    font-size: 1rem;
    padding: 10px 25px;
    padding-right: 50px; /* 矢印のスペースを確保 */
    position: relative;
    transition: all 0.3s ease;
}

/* 矢印アイコン */
.btn-arrow::after {
    content: '→';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* ホバー時のエフェクト */
.btn-arrow:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
    opacity: 1;
}

/* ホバー時に矢印が少し右に動く */
.btn-arrow:hover::after {
    transform: translateY(-50%) translateX(5px);
}
/* ============================================= */
/* ▼▼▼ コース ▼▼▼ */
/* ============================================= */

/* 基本設定 */
body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.8;
}

.page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.4;
}

/* ヘッダー */
.page-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 40px;
    border-bottom: 2px solid #ddd;
}

.page-header h1 {
    font-size: 2.5rem;
    color: #003366;
    margin: 0 0 10px 0;
}

.page-header .subtitle {
    font-size: 1.2rem;
    color: #555;
    margin: 0;
}

/* 6カ年の流れ */
.flow-section {
    margin-bottom: 80px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.flow-section h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 40px;
    color: #1a1a1a;
}

.flow-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.flow-step {
    flex: 1;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    background: #fdfdfd;
}

.flow-step .step-header {
    font-size: 1.2rem;
    font-weight: 700;
    color: #005a9e;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid #005a9e;
}

.flow-step .step-body p {
    font-size: 0.95rem;
    text-align: left;
    margin: 5px 0;
}
.flow-step .step-body p strong {
    color: #333;
}


.flow-arrow {
    font-size: 2.5rem;
    color: #b0b0b0;
    align-self: center;
    font-weight: 700;
}

.flow-notes {
    margin-top: 30px;
    padding-left: 20px;
    font-size: 0.85rem;
    color: #666;
    list-style-type: '※ ';
}

/* コースセクション共通 */
.course-section {
    padding: 60px 0;
}
.course-section:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

.course-container {
    max-width: 1000px;
    margin: 0 auto;
}

.course-header {
    text-align: center;
    margin-bottom: 40px;
}

.course-label {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.course-header h2 {
    font-size: 2.8rem;
    margin: 0;
}

.capacity {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    color: #555;
    margin: 5px 0 15px 0;
}

.catchphrase {
    font-size: 1.5rem;
    font-weight: 500;
}

.course-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.content-left {
    flex: 1 1 55%;
}

.content-right {
    flex: 1 1 45%;
}

.course-image {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.content-right h3 {
    font-size: 1.4rem;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid;
}

.testimonial {
    margin-top: 30px;
    padding: 25px;
    border-radius: 8px;
}

.testimonial h4 {
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.testimonial blockquote {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    position: relative;
    padding-left: 25px;
}

.testimonial blockquote::before {
    content: '“';
    position: absolute;
    left: -5px;
    top: -15px;
    font-size: 3rem;
    font-weight: 700;
    opacity: 0.15;
}


.achievement h3 {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 30px;
}

.university-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.university-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}
.university-list ul li {
    padding: 4px 0;
}

/* ハイグレードコース個別スタイル */
.high-grade .course-label {
    color: #005a9e;
}
.high-grade .course-header h2 {
    color: #003366;
}
.high-grade .catchphrase {
    color: #005a9e;
}
.high-grade .content-right h3 {
    border-color: #005a9e;
}
.high-grade .testimonial {
    background-color: #e7f5ff;
    border-left: 5px solid #005a9e;
}
.high-grade .testimonial blockquote::before {
    color: #005a9e;
}
.high-grade .achievement h3 {
     color: #003366;
}

/* アドバンスコース個別スタイル */
.advance .course-label {
    color: #2e7d32;
}
.advance .course-header h2 {
    color: #1b5e20;
}
.advance .catchphrase {
    color: #2e7d32;
}
.advance .content-right h3 {
    border-color: #4caf50;
}
.advance .testimonial {
    background-color: #e8f5e9;
    border-left: 5px solid #4caf50;
}
.advance .testimonial blockquote::before {
    color: #4caf50;
}
.advance .achievement h3 {
     color: #1b5e20;
}


/* レスポンシブ対応 (スマートフォンなど) */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.8rem;
    }
    .page-header .subtitle {
        font-size: 1rem;
    }

    .flow-section {
        padding: 20px;
    }

    .flow-chart {
        flex-direction: column;
        align-items: center;
    }
    
    .flow-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
    }

    .course-section {
        padding: 40px 0;
    }

    .course-header h2 {
        font-size: 2.2rem;
    }

    .catchphrase {
        font-size: 1.2rem;
    }

    .course-content {
        flex-direction: column;
        gap: 30px;
    }

    .university-list {
        flex-direction: column;
        gap: 0;
    }
    .university-list ul:first-child {
        margin-bottom: 20px;
    }
}

/* =================================== */
/* サイト共通ヘッダー
/* =================================== */
/* =================================== */
/* サイト共通ヘッダー (ロゴ修正版)
/* =================================== */
.site-header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 30px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.site-header__inner {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* ★修正点: h1タグによるロゴのスタイル */
.site-header__logo {
    width: 320px; /* 元サイトのサイズ */
    height: 40px; /* 元サイトのサイズ */
    margin: 0; /* h1のデフォルトマージンをリセット */
    flex-shrink: 0;
}
.site-header__logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url(https://www.keiai.net/test3/img/logo.png) no-repeat;
    background-size: contain;
}

.site-header__nav {
    margin: 0 auto;
}

.site-header__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 25px;
}

.site-header__nav a {
    color: #333;
    font-weight: 500;
    font-size: 1rem;
    padding: 10px 5px;
    position: relative;
    text-decoration: none;
    transition: color 0.3s;
}

.site-header__nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #005a9e;
    transition: width 0.3s ease;
}
.site-header__nav a:hover {
    color: #005a9e;
}
.site-header__nav a:hover::after {
    width: 100%;
}

.site-header__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.header-button {
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.header-button.-request {
    background-color: #F8931F;
}
.header-button.-request:hover {
    background-color: #d78b00;
}
.header-button.-contact {
    background-color: #0076C3;
}
.header-button.-contact:hover {
    background-color: #005a9e;
}

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    margin-left: auto;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s;
}

@media (max-width: 992px) {
    .site-header__logo {
        width: 240px; /* スマホ用に少し小さく調整 */
    }
    .site-header__nav, .site-header__actions {
        display: none;
    }
    .hamburger-menu {
        display: block;
    }
}

/* =================================== */
/* サイト共通フッター
/* =================================== */
.site-footer {
    background-color: #003366;
    color: #fff;
    padding: 50px 30px 0;
    margin-top: 80px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-info {
    flex: 1;
    max-width: 300px;
}
.footer-logo img {
    height: 40px;
    margin-bottom: 20px;
}
.footer-info p {
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 5px 0;
}
.footer-tel {
    font-size: 1.1rem !important;
    font-weight: 700;
    margin-top: 15px !important;
}
.footer-tel i {
    margin-right: 5px;
}

.footer-nav {
    flex: 2;
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.footer-nav-column h4 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
}
.footer-nav-column h4 a {
    color: #fff;
}
.footer-nav-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav-column li {
    margin-bottom: 8px;
}
.footer-nav-column a {
    color: #e0e0e0;
    font-size: 0.9rem;
    text-decoration: none;
}
.footer-nav-column a:hover {
    color: #fff;
    text-decoration: underline;
}

.copyright {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 0.8rem;
}
.copyright p {
    margin: 0;
}

/* =================================== */
/* 既存スタイルの調整とレスポンシブ
/* =================================== */

/* ページ内タイトルヘッダーの位置調整 */
.page-header {
    padding-top: 60px; /* 共通ヘッダーの高さ分、少し下げる */
    border-radius: 0 0 12px 12px;
    background: #fff; /* 背景色を追加 */
}

/* レスポンシブ対応 (992px以下) */
@media (max-width: 992px) {
    .site-header__nav, .site-header__actions {
        display: none; /* 中間サイズではナビとボタンを非表示 */
    }
    .hamburger-menu {
        display: block; /* 中間サイズでハンバーガーメニューを表示 */
    }

    .footer-container { 
        flex-direction: column; 
    }
    .footer-info { 
        max-width: 100%; 
        text-align: center; 
    }
    .footer-nav { 
        flex-direction: column; 
        text-align: center; 
        gap: 0;
    }
    .footer-nav-column h4 { 
        border: none; 
        padding: 0; 
        margin-top: 20px; 
        margin-bottom: 10px;
    }
}

/* =================================== */
/* 募集要項テーブルのレスポンシブ対応
/* =================================== */

/* PCでは案内を非表示に */
.table-scroll-guide {
  display: none;
}

/* 画面幅が768px以下のスマートフォン・タブレットに適用 */
@media screen and (max-width: 768px) {

  /* 既存のtable-wrapperを左右スクロール可能にする */
  .table-wrapper {
    overflow-x: auto;
    /* iOSでのスクロールを滑らかにする */
    -webkit-overflow-scrolling: touch;
    /* スクロールできる範囲を視覚的に示す（任意） */
    border: 1px solid #eee;
    padding: 1rem;
    border-radius: 6px;
    background: #fff;
  }
  
  /* テーブル自体の最小幅を設定して、縦長になるのを防ぐ */
  .data-table-admissions {
    min-width: 680px; /* PC版とほぼ同じ幅を維持 */
  }

  /* スマートフォンでのみ案内を表示 */
  .table-scroll-guide {
    display: block;
    text-align: right;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 1rem;
  }
}


/* =================================== */
/* スティッキーヘッダー（追従ナビゲーション）の設定
/* =================================== */

/* 1. メインヘッダーの固定 */
.site-header {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  top: 0; /* 画面の一番上に固定 */
  width: 100%;
  z-index: 1000; /* 他の要素より手前に表示 */
  background-color: #fff; /* スクロール時に背景が透けないように */
  box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* スクロール時に影をつけて浮いているように見せる */
}

/* 2. ページ内ナビゲーションの固定 */
.page-local-nav {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  /* ★★★ メインヘッダーの高さ分、下にずらして固定 ★★★ */
  top: 90px; /* メインヘッダーの高さに合わせて調整してください */
  width: 100%;
  z-index: 999; /* メインヘッダーよりは奥、他要素よりは手前 */
  background-color: #f8f9fa; /* 背景色を指定して透けないように */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* こちらにも影を追加 */
}

/* =================================== */
/* ページ内ナビゲーションの三角形を削除
/* =================================== */

/* リンクの下に表示される三角形（::after疑似要素）を非表示にする */
.page-local-nav ul li a::after {
    display: none !important;
}

/* =================================== */
/* ページ内ナビゲーションの基本スタイル
/* =================================== */
.page-local-nav {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.page-local-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-local-nav ul li a {
  display: block;
  padding: 1rem 1.5rem;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  transition: color 0.3s, background-color 0.3s;
}

.page-local-nav ul li a:hover {
  background-color: #e9ecef;
  color: #005a9e; /* 仮のテーマカラー */
}

/* スマートフォン表示の調整 */
@media (max-width: 768px) {
  .page-local-nav {
    overflow-x: auto; /* スマホでは項目を横スクロール可能に */
    -webkit-overflow-scrolling: touch;
  }
  .page-local-nav ul {
    justify-content: flex-start; /* 左寄せにする */
    white-space: nowrap; /* 項目を改行させない */
  }
  .page-local-nav ul li a {
    padding: 0.8rem 1rem;
  }
}


/* =================================== */
/* オープンスクールページ イベントセクション
/* =================================== */

.event-item {
  padding: 4rem 0;
  position: relative;
}

.event-content-wrapper {
  display: flex;
  align-items: center;
  gap: 3rem;
}

/* 偶数番目のアイテムのレイアウトを反転（画像が右） */
.event-item:nth-child(even) .event-content-wrapper {
  flex-direction: row-reverse;
}

.event-image {
  flex: 0 0 45%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.event-image img {
  width: 100%;
  height: auto;
  display: block;
}

.event-details {
  flex: 1;
}

/* 日付バッジのスタイル */
.event-date-badge {
  display: inline-block;
  background-color: #005a9e; /* テーマカラー */
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.event-date-badge span {
  font-size: 1.5em;
  font-weight: 900;
  margin-right: 0.5rem;
}

.event-details h3 {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.event-details .event-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 1.5rem;
}

.details-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.details-table th, .details-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
  font-size: 0.95rem;
  vertical-align: top;
}

.details-table th {
  font-weight: 700;
  width: 80px;
  background-color: #f8f9fa;
}

.event-description {
  line-height: 1.8;
  margin-bottom: 2rem;
}

.event-action {
  text-align: center;
}

.btn.disabled {
  background-color: #ccc;
  border-color: #ccc;
  color: #666;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.disabled:hover {
  background-color: #ccc;
  border-color: #ccc;
}


/* スマートフォン表示の調整 */
@media (max-width: 768px) {
  .event-content-wrapper,
  .event-item:nth-child(even) .event-content-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .event-image {
    width: 100%;
  }

  .event-details h3 {
    font-size: 1.5rem;
  }
}

/* =================================== */
/* イベントレポート（フォトギャラリー）
/* =================================== */

.report-cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCでは4列表示 */
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.report-card {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.report-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.report-card-image {
  width: 100%;
  height: 180px; /* 高さを固定 */
  overflow: hidden;
}

.report-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を維持しつつ領域を埋める */
}

.report-card-content {
  padding: 1rem;
}

.report-card-date {
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0 0 0.25rem 0;
}

.report-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

/* スマートフォン表示の調整 */
@media (max-width: 992px) {
  .report-cards-container {
    grid-template-columns: repeat(2, 1fr); /* タブレットでは2列 */
  }
}

@media (max-width: 576px) {
  .report-cards-container {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }
}

/* =================================== */
/* イベント申し込みボタンのスタイル調整
/* =================================== */

/* ボタンを横並びに配置するラッパー */
.event-action {
  text-align: center;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* ボタン間の余白 */
}

/* 共通ボタンの基本スタイル（既存スタイルがあれば調整） */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 50px; /* 角を丸くする */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* ★★★ プライマリボタン（申し込み）のアクティブなスタイル ★★★ */
.btn.btn-primary {
  background-color: #007bff; /* アクティブな青色 */
  border-color: #007bff;
  color: #fff;
}
.btn.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
  color: #fff;
}

/* ★★★ セカンダリボタン（詳細）のスタイル ★★★ */
.btn.btn-secondary {
  background-color: #6c757d; /* グレー */
  border-color: #6c757d;
  color: #fff;
}
.btn.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #5a6268;
  color: #fff;
}

/* ★★★ 非アクティブ（disabled）のスタイル（変更なし） ★★★ */
.btn.disabled {
  background-color: #ccc;
  border-color: #ccc;
  color: #666;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.disabled:hover {
  background-color: #ccc;
  border-color: #ccc;
}


/* ★★★ 状態表示用テキストのスタイル ★★★ */
.event-status-note {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-weight: 700;
  color: #555;
  background-color: #f0f0f0;
  border-radius: 50px;
}


/* スマートフォン表示の調整 */
@media (max-width: 576px) {
  .event-action {
    flex-direction: column; /* スマホではボタンを縦積みに */
  }
}
/* =================================== */
/* ページ内ナビゲーションのデザイン改修 (提案A)
/* =================================== */
/* バッジのスタイル */
.nav-badge {
  /* ★★★ ヘッダーのボタンに合わせてブルー系に変更 ★★★ */
  background-color: #003366; 
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background-color 0.3s ease; 
}

/* ★★★ ホバー時のスタイルもブルー系に統一 ★★★ */
.page-local-nav ul li a:hover .nav-badge {
    background-color: #0056b3; /* ホバー時の濃い青 */
}
.page-local-nav ul li a:hover .nav-date {
    color: #0056b3; /* 日付の色もホバー時に変更 */
}

/* 各回でバッジの色を変える
.page-local-nav li:nth-child(2) .nav-badge { background-color: #28a745; }
.page-local-nav li:nth-child(2) a:hover .nav-date { color: #1e7e34; }

.page-local-nav li:nth-child(3) .nav-badge { background-color: #dc3545; }
.page-local-nav li:nth-child(3) a:hover .nav-date { color: #b21f2d; }

.page-local-nav li:nth-child(4) .nav-badge { background-color: #ffc107; }
.page-local-nav li:nth-child(4) a:hover .nav-date { color: #d39e00; } */

/*
================================================
国際理解教育 特集ページ（international.html）のスタイル【最終修正版】
================================================
*/



/* メインコンテンツエリア */
.international-content-area {
    max-width: 960px;
    margin: 0 auto;
}

.international-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 30px;
    display: inline-block;
    border-bottom: 5px solid #e0e0e0;
}

.international-lead-text {
    line-height: 2;
    margin-bottom: 80px;
}

/* TOPICセクション共通 */
.topic-section {
    margin-bottom: 80px;
}

.topic-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 16px;
}

.topic-date, .topic-date-alt {
    background-color: #333;
    color: #fff;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    flex-shrink: 0;
}

.topic-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #4CAF50;
}

.topic-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 30px;
}

/* 本文と写真のブロック */
.topic-body-grid {
    margin-bottom: 40px;
}

/* 1枚写真の共通スタイル */
.topic-main-photo {
    max-width: 800px;
    width: 100%;
    margin: 0 auto 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.15);
}
.topic-main-photo img {
    width: 100%;
    display: block;
}

.topic-text {
    line-height: 2;
}
.topic-text p {
    margin-bottom: 20px;
}

.program-list {
    list-style: none;
    padding: 20px; /* パネルの内側の余白 */
    text-align: left;
    
    /* ★現在のデザイン（一枚岩のパネル）を維持 */
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    
    /* 3列のグリッドレイアウト */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* カード間の余白は不要 */
}

/* 海外研修プログラムの各リスト項目 */
.program-list li {
    /* 個別の背景や枠線、影は削除 */
    padding: 20px 15px;
    text-align: center;
    position: relative;
    
    /* ★項目間の区切り線（右側） */
    border-right: 1px dashed #ddd;

    /* テキスト配置 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 最後の項目の右側の区切り線を消す */
.program-list li:last-child {
    border-right: none;
}

/* アイコンの位置やスタイルは変更なし */
.program-list li::before {
    content: '▶';
    position: static; /* 配置をリセット */
    color: #4CAF50;
    font-size: 1.2em;
    margin-bottom: 15px;
}

/* テキスト（期間など）のスタイル */
.program-list li span {
    font-size: 0.85em;
    color: #555;
    margin-top: 8px;
    display: block;
    line-height: 1.5;
}

/* 各種リストのスタイル */
.sister-school-list {
    list-style: none;
    padding: 0;
    text-align: left;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px 30px;
}
.sister-school-list li {
    padding: 14px 0 14px 30px;
    position: relative;
    border-bottom: 1px dashed #ddd;
}
.sister-school-list li:last-child {
    border: none;
}


.sister-school-list li::before {
    content: '●';
    font-size: 0.8em;
    position: absolute;
    left: 0;
    top: 15px;
    color: #4CAF50;
}
.sister-school-list li span {
    display: inline-block;
    background-color: #4CAF50;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-right: 15px;
}


/* 生徒の声 */
.international-testimonial {
    margin-top: 80px;
    background-color: #f4f0e9;
    border-radius: 20px;
    padding: 40px;
}
.international-testimonial__body {
    display: flex;
    align-items: center;
    gap: 30px;
}
.international-testimonial__photo {
    flex-shrink: 0;
}
.international-testimonial__photo img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 5px solid #fff;
}
.international-testimonial__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 3px solid #bcaaa4;
    padding-bottom: 8px;
    display: inline-block;
}
.international-testimonial__text {
    line-height: 1.8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .international-main-title { font-size: 2rem; }
    .topic-header { flex-direction: column; align-items: flex-start; }
    .topic-title { font-size: 1.5rem; }
    .international-testimonial__body { flex-direction: column; text-align: center; }
}/*
================================================
戻るボタンのスタイル
================================================
*/
.back-button-container {
    text-align: center;
    margin-top: 80px; /* 上の「生徒の声」ボックスとの余白 */
    padding-top: 60px; /* ボタン上部の余白 */
    border-top: 1px solid #e0e0e0; /* 上のコンテンツとの間に区切り線を追加 */
}

.btn--back {
    display: inline-flex; /* アイコンとテキストを綺麗に中央揃え */
    align-items: center;
    padding: 14px 32px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.1);
}

.btn--back:hover {
    background-color: #f8f8f8;
    border-color: #aaa;
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.15);
}

/* 矢印アイコンを疑似要素で作成 */
.btn--back::before {
    content: '←';
    margin-right: 10px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.btn--back:hover::before {
    transform: translateX(-3px); /* ホバー時に矢印が左に少し動く */
}

/*
================================================
心の教育 特集ページ（kokoro.html）のスタイル【修復用】
================================================
*/
/* コンテンツ全体をまとめるラッパー */
.kokoro-feature {
    max-width: 960px;
    margin: 0 auto;
}

/* メインコンテンツエリア */
.kokoro-content {
    text-align: center; /* 見出しなどを中央揃えに */
}

/* サブタイトル的なタグライン */
.kokoro-tagline {
    display: inline-block;
    border: 1px solid #c0c0c0; /* 枠線を細く、色を上品なグレーに */
    color: #555; /* 文字色を濃いグレーに */
    padding: 8px 24px;
    font-weight: 700;
    margin-bottom: 24px;
    border-radius: 30px; /* 角を丸くして柔らかい印象に */
}

/* メインタイトル */
.kokoro-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #333;
    letter-spacing: .08em;
    margin-bottom: 16px;
}

/* サブタイトル */
.kokoro-subtitle {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 48px;
}

/* メイン画像 */
.kokoro-main-photo {
    max-width: 800px; /* 最大幅を指定して大きすぎないように */
    width: 100%;
    margin: 0 auto 48px; /* 左右中央、下に余白 */
    border-radius: 16px; /* 角丸で優しい印象に */
    overflow: hidden;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.15); /* より洗練された影 */
}
.kokoro-main-photo img {
    width: 100%;
    display: block;
}

/* 本文テキスト */
.kokoro-text {
    line-height: 2.2; /* 行間を広くとって読みやすく */
    font-size: 1rem;
    text-align: left; /* 本文は読みやすいように左揃え */
    max-width: 720px;
    margin: 0 auto;
}

/* 生徒の声ボックス */
.kokoro-testimonial {
    margin: 100px auto 0; /* 上に十分な余白を取り、中央揃え */
    background-color: #f7f5f0; /* 背景色を少し暖かみのあるオフホワイトに */
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #e9e5dc;
}

.kokoro-testimonial__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 40px;
    display: block;
}

/* 横並びを実現するコンテナ */
.kokoro-testimonial__body {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    gap: 40px; /* 写真とテキストの間の余白 */
}

/* 生徒の写真 */
.kokoro-testimonial__photo {
    flex-shrink: 0;
}
.kokoro-testimonial__photo img {
    width: 160px;
    height: 160px;
    border-radius: 50%; /* 完全な円形に */
    object-fit: cover;
    border: 6px solid #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 生徒の声テキスト */
.kokoro-testimonial__content {
    flex: 1;
    text-align: left; /* テキストは左揃え */
}
.kokoro-testimonial__text {
    font-size: 1rem;
    line-height: 1.9;
    color: #444;
}

/* kokoroページ レスポンシブ対応 */
@media (max-width: 768px) {
    .kokoro-title {
        font-size: 2rem;
    }
    .kokoro-subtitle {
        font-size: 1.1rem;
    }
    .kokoro-testimonial__body {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .kokoro-testimonial__content {
        text-align: center;
    }
    .kokoro-testimonial {
        padding: 40px 25px;
        margin-top: 80px;
    }
}


/*
================================================
英語教育 特集ページ（englishedu.html）のスタイル
================================================
*/
/* 4つのプログラム セクション */
.program-circles-section {
    margin: 80px auto;
    max-width: 960px;
}

.section-title-alt {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    background-color: #f7f9fc;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 40px;
}

.program-circles-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.program-circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 20px -5px rgba(0,0,0,0.2);
}

.program-circle--blue { background-color: #3b82f6; }
.program-circle--green { background-color: #22c55e; }
.program-circle--light-green { background-color: #84cc16; }

.circle-label {
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1.4;
}
.circle-title {
    font-size: 1.5em;
    font-weight: 900;
    line-height: 1.3;
    margin-top: 8px;
}

/* グラフ下のサポートテキスト */
.eiken-support-text {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #c026d3; /* 紫系のアクセントカラー */
}


/* 生徒の声（英語教育ページ用） */
.testimonial-english {
    background-color: #fefce8; /* 黄色系の背景 */
    border-left: 5px solid #facc15;
}
.testimonial-english .international-testimonial__title {
    border-bottom-color: #facc15;
}


/* englisheduページ レスポンシブ対応 */
@media (max-width: 992px) {
    .program-circles-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .program-circles-container {
        grid-template-columns: 1fr;
    }
    .circle-title { font-size: 1.8em; }
    .eiken-support-text { font-size: 1.1rem; }
}

/* css/style.css 内の該当するスタイルを下記に差し替えてください */

/* ▼▼▼ このスタイルを差し替え ▼▼▼ */
.international-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 40px; /* 30pxから40pxに変更し、画像との余白を確保 */
    display: inline-block;
    border-bottom: 5px solid #e0e0e0;
}
/* ▲▲▲ ここまで ▲▲▲ */



/*
================================================
英語教育ページ グラフ画像のサイズ調整
================================================
*/
.graph-container {
    max-width: 700px; /* 最大幅を800pxから700pxに縮小 */
    box-shadow: none; /* グラフ画像には影を付けない */
    border-radius: 0; /* 角丸もリセット */
}

//*
================================================
トップページ INFORMATIONセクションのスタイル【以前のデザインへの修復版】
================================================
*/
/* お知らせリスト全体のコンテナ */
.info-list {
    max-width: 600px; /* 900pxから3分の2のサイズに変更 */
    margin: 0 auto; /* 中央揃えを維持 */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* お知らせ一つ一つのアイテム（リンク） */
.info-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.3s ease;
}

/* マウスを乗せた時の背景色 */
.info-item:hover {
    background-color: #f7f9fc;
    opacity: 1;
}

/* 最後のアイテムの下線を消す */
.info-item:last-child {
    border-bottom: none;
}

/* 日付 */
.info-date {
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
    margin-right: 25px; /* テキストとの間に余白 */
    flex-shrink: 0; /* 日付が縮まないように */
}

/* お知らせのテキスト */
.info-text {
    flex-grow: 1; /* 残りのスペースを埋める */
    font-weight: 500;
    line-height: 1.6;
}

/* 右端の矢印 */
.info-arrow {
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    transform: rotate(45deg);
    transition: border-color 0.3s ease;
    margin-left: 20px;
    flex-shrink: 0;
}

/* マウスを乗せた時に矢印の色を変える */
.info-item:hover .info-arrow {
    border-color: var(--primary-color);
}

/* もっと見るボタンのエリア */
.btn-area {
    text-align: center;
    margin-top: 40px;
}

/* INFORMATIONセクション レスポンシブ対応 */
@media (max-width: 768px) {
    .info-item {
        padding: 15px;
        flex-wrap: wrap; /* スマホでは折り返す */
    }
    .info-date {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px; /* 日付とテキストの間に余白 */
    }
    .info-text {
        font-size: 0.9rem;
        width: 100%;
    }
    .info-arrow {
        /* スマホではテキストの右横に配置されるように調整 */
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .info-item {
        position: relative;
        padding-right: 40px; /* 矢印のスペースを確保 */
    }
}

/* INFORMATIONセクションの日付の前にリストマークを追加 */
.info-date::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid var(--primary-color); /* 敬愛ブルーの三角形 */
    margin-right: 15px; /* 三角形と日付の間の余白 */
    vertical-align: middle; /* テキストとの高さを中央に揃える */
}

#information .info-list {
    max-width: 700px;   /* 幅を600pxに */
    margin-left: auto;  /* 左の余白を自動調整 */
    margin-right: auto; /* 右の余白を自動調整 */
}

/* ================================
   ICT教育ページ スタイル
================================ */

/* 導入コンテンツエリア */
.intro-content {
    max-width: 800px; /* テキストエリアの最大幅 */
    margin: 0 auto;   /* 中央揃え */
    text-align: center;
}

.intro-title {
    font-family: var(--font-title);
    font-size: 3rem; /* "ICT教育" の文字サイズ */
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: 0.1em; /* 少し文字間隔を広げる */
}

.intro-lead {
    font-size: 1.75rem; /* "情報を使いこなす力が..." の文字サイズ */
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 40px;
}

.intro-text {
    text-align: left; /* 本文は左揃え */
    line-height: 2;   /* 行間を広めに */
    margin-bottom: 60px;
}

.intro-image-wrapper img {
    width: 100%;
    border-radius: 8px; /* 少し角を丸める */
}

/* 生徒の声セクション */
.student-voice-section {
    background-color: #f0f4e4; /* 画像の背景色を参考に設定 */
}

/* program-itemのレイアウトを微調整 */
.student-voice-section .program-item {
    align-items: center; /* 上下中央揃え */
    gap: 80px; /* 画像とテキストの間隔 */
}

.student-voice-section .program-item__title {
    font-size: 2.2rem; /* "iPadがあるからこそ..." の文字サイズ */
    line-height: 1.5;
    /* タイトルの下線は不要なためリセット */
    padding-bottom: 0; 
}
.student-voice-section .program-item__title::after {
    display: none;
}

.student-voice-section .program-item__text {
    font-size: 1rem;
    line-height: 2;
}


/* レスポンシブ対応 (SP) */
@media (max-width: 768px) {
    .intro-title {
        font-size: 2.2rem;
    }
    .intro-lead {
        font-size: 1.3rem;
    }
    .intro-text {
        margin-bottom: 40px;
    }

    .student-voice-section .program-item {
        gap: 40px;
    }

    /* SPでは画像を上、テキストを下に配置 */
    .student-voice-section .program-item {
        flex-direction: column-reverse;
    }

    .student-voice-section .program-item__title {
        font-size: 1.8rem;
    }
}

/* =================================== */
/* 募集要項テーブルのレスポンシブ対応
/* =================================== */

/* デフォルト（PC）ではスマートフォン用を非表示 */
.sp-only {
    display: none;
}

/* PCではスクロール案内を非表示に */
@media screen and (min-width: 769px) {
    .table-scroll-guide {
        display: none;
    }
}


/* 画面幅が768px以下のスマートフォン・タブレットに適用 */
@media screen and (max-width: 768px) {

    /* PC用のテーブルとスクロール案内を非表示に */
    .pc-only,
    .table-scroll-guide {
        display: none;
    }
    
    /* スマートフォン用を表示 */
    .sp-only {
        display: block;
    }

    .guideline-block {
        margin-bottom: 30px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden; /* h4の角丸を有効にするため */
    }
    .guideline-block:last-child {
        margin-bottom: 0;
    }

    .guideline-block-title {
        background-color: var(--primary-color);
        color: var(--white-color);
        padding: 15px;
        font-size: 1.2rem;
        margin: 0;
    }
    
    /* 一般入試のタイトル背景色を少し変える */
    .guideline-block:nth-child(2) .guideline-block-title {
         background-color: #002244;
    }

    .guideline-block dl {
        margin: 0;
    }

    .guideline-block dt {
        font-weight: 700;
        background-color: var(--light-bg-color);
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .guideline-block dd {
        padding: 15px;
        margin-left: 0;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .guideline-block dd:last-of-type {
        border-bottom: none;
    }
    
    .guideline-block dd p {
        margin: 0;
        line-height: 1.8;
    }
    .guideline-block dd p:not(:last-child) {
        margin-bottom: 0.5em;
    }
}
/* =================================== */
/* 入試情報ページのデザイン調整
/* =================================== */

/* 募集要項の募集人数 */
.recruitment-info {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin: -10px auto 40px;
    padding: 15px;
    background-color: var(--light-bg-color);
    border-radius: 8px;
    max-width: 800px;
}

/* 納入金テーブル下の注釈 */
.table-note {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    margin-top: 20px;
}

/* 納入金テーブルが横に広がりすぎないように調整 */
#enrollment-fee .table-wrapper {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#enrollment-fee .admissions-table th:first-child {
    width: 40%;
}
/* =================================== */
/* テーブルの視認性向上（背景色調整）
/* =================================== */

/* --- PC版：募集要項テーブルの背景を交互に変更 --- */
/* 偶数行の背景色を薄いブルーに設定します */
.data-table-admissions tbody tr:nth-child(even) {
    background-color: #eaf2ff;
}

/* 偶数行の「一般入試」列も、他のセルと同じ薄いブルーで統一します */
.data-table-admissions tbody tr:nth-child(even) td:nth-child(3) {
    background-color: #eaf2ff;
}


/* --- スマートフォン版：募集要項の項目に背景色を設定 --- */
@media screen and (max-width: 768px) {
    /* dt（項目名）の背景色を薄いブルーに変更します */
    .guideline-block dt {
        background-color: #eaf2ff;
    }
}
/* =================================== */
/* PDFダウンロードボタンのスタイル変更
/* =================================== */

/* デフォルト状態を紺色（敬愛ブルー）に設定 */
.section-link .btn-secondary {
    background-color: var(--primary-color); /* 背景色を紺色に */
    border-color: var(--primary-color);     /* 枠線の色も紺色に */
    color: var(--white-color);              /* 文字色を白に */
}

/* カーソルを合わせた時のスタイルを、少し明るい青に変更 */
.section-link .btn-secondary:hover {
    background-color: #0055a4; /* デフォルトより少し明るい青 */
    border-color: #0055a4;     /* 枠線の色も合わせる */
    color: var(--white-color); /* 文字色は白のまま */
}
/* =================================== */
/* トップページ：入試情報ボタンのスタイル変更
/* =================================== */

/* 「生徒募集要項」「WEB出願」ボタンのデフォルトスタイル */
#admissions .btn-primary {
    background-color: var(--primary-color); /* 背景色を紺色に */
    border-color: var(--primary-color);     /* 枠線の色も紺色に */
    color: var(--white-color);              /* 文字色を白に */
}

/* 「生徒募集要項」「WEB出願」ボタンのホバー（マウスオン）時のスタイル */
#admissions .btn-primary:hover {
    background-color: #0055a4; /* 少し明るい青に変更 */
    border-color: #0055a4;     /* 枠線の色も合わせる */
    color: var(--white-color); /* 文字色は白のまま */
}

/* 「オープンスクール」「よくある質問」ボタンのデフォルトスタイル */
/* こちらは既存のスタイルを維持しつつ、ホバー時の挙動を調整します */
#admissions .btn-secondary {
    border-color: #aaa;
    color: #555;
    background-color: transparent; /* 背景は透明 */
}

/* 「オープンスクール」「よくある質問」ボタンのホバー（マウスオン）時のスタイル */
/* こちらは逆に、ホバー時に紺色になるようにします */
#admissions .btn-secondary:hover {
    background-color: var(--primary-color); /* ホバーで紺色に */
    border-color: var(--primary-color);
    color: var(--white-color);
}
/* ========================================================= */
/* トップページ主要ボタン および ヘッダーボタンのスタイル変更
/* ========================================================= */

/* --- 「ニュース一覧を見る」「もっと詳しく」ボタンのスタイル --- */

/* .section-link 内の .btn クラスを持つボタンに適用 */
.section-link .btn {
    background-color: var(--primary-color); /* 通常時を敬愛ブルーに */
    border-color: var(--primary-color);
    color: var(--white-color);
}

/* ホバー（マウスオン）時に少し明るい青に変更 */
.section-link .btn:hover {
    background-color: #0055a4;
    border-color: #0055a4;
    color: var(--white-color);
}


/* --- ヘッダー「資料請求」ボタンのスタイル --- */

/* 既存のスタイルを上書きして、目立つオレンジ色に変更します */
.request-button a {
    background-color: #f08300 !important; /* 視認性の高いオレンジ色 */
    border-radius: 5px !important;
    padding: 8px 20px !important;
    transition: background-color 0.3s ease, opacity 0.3s ease !important;
}

/* ホバー（マウスオン）時に少し濃いオレンジ色に変更 */
.request-button a:hover {
    background-color: #d97500 !important; /* 少し濃いオレンジに */
    opacity: 1 !important; /* 既存の透明度変更をリセット */
}

/* ホバー時の下線アニメーションは不要なため、確実に無効化します */
.request-button a:hover::after {
    display: none !important;
}
/* ========================================================= */
/* ヘッダー「資料請求」ボタンのスタイル最終調整
/* ========================================================= */

/* 視認性の高い、明るい黄色をベースにします */
.request-button a {
    background-color: #FFC107 !important; /* 明るい黄色 */
    color: #FFFFFF !important;              /* 文字色を白に */
    font-weight: 700 !important;
    border-radius: 5px !important;
    padding: 8px 20px !important;
    border: none !important; /* 枠線をなくし、よりクリーンな印象に */
    transition: background-color 0.3s ease, opacity 0.3s ease !important;
}

/* ホバー（マウスオン）時は、少し濃い黄色に変化させます */
.request-button a:hover {
    background-color: #e0a800 !important; /* 少し濃い黄色 */
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* ホバー時の下線アニメーションは不要なため、確実に無効化します */
.request-button a:hover::after {
    display: none !important;
}


/* --- 「Instagramを見る」ボタンのスタイル --- */
.btn-instagram {
	border: none;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    color: #fff;
}

.btn-instagram:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* --- 2つのボタンを横並びにした際のレイアウト調整 --- */
#news .section-link {
    display: flex;
    justify-content: center;
    gap: 15px; /* ボタンとボタンの間に余白を追加 */
    flex-wrap: wrap; /* スマホで画面幅が足りない場合に折り返す */
}


/* css/style.css */

/* ...既存のCSSコード... */

/* =================================
▼▼▼ LINEフローティングバナー ▼▼▼
================================= */
.line-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 998;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    overflow: hidden;

    /* 表示/非表示のアニメーション設定 */
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}

/* JSでこのクラスが付与されると表示されます */
.line-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.line-banner__link {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}
.line-banner__link:hover {
    opacity: 1; /* 親のa:hover効果をリセット */
    background-color: #f7f9fc;
}

.line-banner__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-right: 12px;
}
.line-banner__icon svg {
    width: 100%;
    height: 100%;
}

.line-banner__text {
    font-family: 'Noto Sans JP', sans-serif;
}
.line-banner__text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #06C755; /* LINEグリーン */
    line-height: 1.3;
}
.line-banner__text span {
    display: block;
    font-size: 13px;
    color: #555;
    line-height: 1.3;
}

.line-banner__close {
    font-size: 28px;
    font-weight: 300;
    color: #aaa;
    padding: 0 15px;
    cursor: pointer;
    align-self: stretch;
    display: flex;
    align-items: center;
    border-left: 1px solid #eee;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.line-banner__close:hover {
    background-color: #f1f1f1;
    color: #333;
}

/* スマートフォン表示の調整 */
@media (max-width: 768px) {
    .line-banner {
        bottom: 15px;
        right: 15px;
        left: 15px; /* スマホでは画面幅に合わせて表示 */
        justify-content: center;
    }
    .line-banner__link {
        flex-grow: 1;
        padding: 10px 15px;
    }
    .line-banner__text strong {
        font-size: 15px;
    }
}
/* css/style.css の末尾に追加 */

/* =================================
▼▼▼ LINEアイコン画像表示の最終調整 ▼▼▼
================================= */
.line-banner__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* アイコンが歪まないように比率を保ちます */
}
/* =================================
▼▼▼ 追加バナーリンクのスタイル ▼▼▼
================================= */
.banner-links-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* バナー間の余白 */
    flex-wrap: wrap; /* 画面が狭い場合に折り返す */
}

.banner-link {
    display: block;
    flex: 1; /* スペースを均等に分け合う */
    min-width: 300px; /* 最小幅を指定して、潰れるのを防ぐ */
    max-width: 500px; /* 最大幅を指定して、広がりすぎるのを防ぐ */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 51, 102, 0.1); /* サイトのテーマカラーに合わせた影 */
    overflow: hidden; /* 角丸を画像に適用 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-link img {
    width: 100%;
    display: block; /* 画像下の余分な隙間を削除 */
}

/* --- ホバーエフェクト --- */
.banner-link:hover {
    opacity: 1; /* 既存のa:hover効果を打ち消し */
    transform: translateY(-6px); /* 少し浮き上がる動き */
    box-shadow: 0 12px 28px rgba(0, 51, 102, 0.15); /* 影を濃くする */
}


/* --- レスポンス対応 (スマートフォンなど) --- */
@media (max-width: 768px) {
    .banner-links-container {
        flex-direction: column; /* 縦積みに変更 */
        gap: 20px;
    }
}
/* css/style.css の末尾に追加 */

/* =================================
▼▼▼ 100周年・ふるさと納税カード ▼▼▼
================================= */
.info-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PCでは2列表示 */
    gap: 30px; /* カード間の余白 */
}

.info-card {
    background-color: var(--white-color);
    border-radius: 12px;
    padding: 35px 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    border: 1px solid #eee;
    
    /* カードの高さを揃えるための設定 */
    display: flex;
    flex-direction: column;
}

.info-card__title-large {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color); /* 中学校サイトのテーマカラーを使用 */
    margin-bottom: 20px;
}

.info-card__title-large i {
    margin-right: 12px;
    color: var(--secondary-color); /* 中学校サイトのアクセントカラーを使用 */
    font-size: 1.2em; /* アイコンを少し大きく */
    vertical-align: middle;
}

.info-card__text {
    line-height: 1.9;
    color: var(--text-color);
    text-align: left; /* 本文は読みやすいように左揃えに */
    
    /* カードの高さを揃えるための設定 */
    flex-grow: 1; 
}

.action-buttons {
    margin-top: 25px;
}

/* --- レスポンス対応 (スマートフォンなど) --- */
@media (max-width: 768px) {
    .info-card-grid {
        grid-template-columns: 1fr; /* スマホでは1列表示 */
        gap: 25px;
    }
}
/* =======================================================
▼▼▼ INFORMATIONセクションとカードセクションの間の余白調整 ▼▼▼
======================================================= */
#information.site-section {
    padding-bottom: 40px; /* 下側の余白を80pxから40pxに半減 */
	 }
}
/* =================================
   WEB出願・募集要項 CTAセクション
   ================================= */
.top-cta-section {
    padding: 50px 0;
    background-color: #fff;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.cta-lead {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--primary-color);
}

.cta-buttons-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* ボタン共通スタイル */
.cta-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 320px;
    padding: 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    line-height: 1.4;
}

.cta-btn i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    opacity: 1;
}

/* 募集要項ボタン（枠線のみ） */
.cta-btn--outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background-color: #fff;
}

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

/* WEB出願ボタン（赤色塗りつぶし） */
.cta-btn--primary {
    background-color: #d9534f; /* 高校サイトに合わせた赤色 */
    color: #fff;
    border: 2px solid #d9534f;
}

.cta-btn--primary:hover {
    background-color: #fff;
    color: #d9534f;
}

.cta-sub {
    font-size: 0.85rem;
    font-weight: normal;
    margin-top:
		5px; /* margin-topの続き */
}

/* レスポンシブ対応 (スマートフォン) */
@media (max-width: 768px) {
    .top-cta-section {
        padding: 40px 0; /* 上下の余白を少し詰める */
    }

    .cta-lead {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .cta-buttons-grid {
        flex-direction: column; /* ボタンを縦並びにする */
        gap: 15px;
        align-items: center;
    }

    .cta-btn {
        width: 100%; /* 横幅いっぱいに広げる */
        max-width: 100%;
        font-size: 1.1rem;
        padding: 18px; /* タップしやすいよう少し高さを確保 */
    }
}
/* =================================
   WEB出願 CTAセクション (高校exam.htmlのデザイン踏襲)
   ================================= */

/* セクションタイトルの英語表記 */
.section-title-en {
    display: block;
    font-size: 1rem;
    color: var(--secondary-color); /* ゴールド */
    margin-top: 5px;
    letter-spacing: 0.1em;
    font-family: 'Oswald', sans-serif;
}

/* 枠囲いボックス */
.web-entry-box {
    background-color: #fff;
    border: 3px solid var(--primary-color); /* 敬愛ブルーの枠線 */
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    max-width: 800px;
    margin: 0 auto;
}

.web-entry-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.8;
}

/* 出願期間表示エリア */
.web-entry-period {
    background-color: var(--light-bg-color);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: inline-block; /* コンテンツ幅に合わせる場合はinline-block, 全幅ならblock */
    width: 100%;
    box-sizing: border-box;
}

.period-label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.period-date {
    font-size: 1.4rem;
    color: var(--primary-color);
    font-weight: 900; /* 太字強調 */
    font-family: 'Oswald', sans-serif; /* 数字フォント */
}

/* WEB出願ボタン (赤色) */
.btn-web-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #d9534f; /* 目立つ赤色 */
    color: #fff !important;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 18px 50px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
    box-shadow: 0 5px 15px rgba(217, 83, 79, 0.4);
    border: none; /* 枠線なし */
}

.btn-web-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(217, 83, 79, 0.5);
    opacity: 0.9;
    background-color: #c9302c; /* ホバー時は少し濃く */
}

.btn-web-entry i {
    margin-right: 10px;
    font-size: 1.4rem;
}

/* レスポンシブ対応 (スマートフォン) */
@media (max-width: 768px) {
    .web-entry-box {
        padding: 25px 15px;
    }
    .web-entry-text {
        font-size: 1rem;
        text-align: left;
    }
    .period-date {
        font-size: 1.1rem;
    }
    .btn-web-entry {
        width: 100%; /* スマホでは幅いっぱい */
        font-size: 1.1rem;
        padding: 15px 20px;
    }
}
/* =================================
   トップページ WEB出願・100周年カード追加スタイル
   ================================= */

/* 強調カード（WEB出願用） */
.info-card--highlight {
    border: 3px solid var(--primary-color); /* 枠線を太く、テーマカラーに */
    background-color: #f0f8ff; /* 薄い青色の背景で目立たせる */
    position: relative;
    overflow: hidden;
}

/* 強調カードのタイトル */
.info-card--highlight .info-card__title-large {
    color: var(--primary-color);
    font-size: 1.8rem; /* 通常より少し大きく */
}

/* 強調カード内のボタン */
.info-card--highlight .btn-primary {
    background-color: #d9534f; /* 高校と同じ赤色で強調 */
    border-color: #d9534f;
    color: #fff;
    font-size: 1.1rem;
    padding: 15px 40px;
    box-shadow: 0 4px 10px rgba(217, 83, 79, 0.3);
}

.info-card--highlight .btn-primary:hover {
    background-color: #c9302c;
    border-color: #c9302c;
    transform: translateY(-3px);
}

/* 通常カード（100周年）の微調整 */
.info-card .btn-secondary {
    background-color: transparent;
    color: #555;
    border: 2px solid #aaa;
}

.info-card .btn-secondary:hover {
    background-color: #555;
    color: #fff;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .info-card--highlight .info-card__title-large {
        font-size: 1.5rem;
    }
    .info-card--highlight .btn-primary {
        width: 100%;
        padding: 12px;
    }
}