/* ========================================
   Zephyr 共通CSS
   全ページ共通のスタイル定義
   ======================================== */

/* ========================================
   基本設定・変数
   ======================================== */

/* WebFont読み込み制御 */
.wf-loading .logo,
.wf-loading nav {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.wf-active .logo,
.wf-active nav {
    opacity: 1;
}

:root {
    --main-color: #8BC34A; /* 淡い緑色 */
    --main-color-dark: #7CB342; /* 少し濃い淡い緑色 */
    --accent-color: #FFC107; /* アクセントカラー（黄色） */
    --accent-color-dark: #e6ac00;
    --text-color: #333;
    --text-color-light: #555;
    --bg-color: #F1FAF5; /* ごく淡い緑色 */
    --cream-color: #FFFDD0; /* 淡いクリーム色 */
    --white: #fff;
    --font-main: 'Noto Sans JP', sans-serif;
    --font-title: 'Kosugi Maru', sans-serif;

}

/* ========================================
   基本スタイル
   ======================================== */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--text-color);
}

/* モーダル表示中は背面スクロールを抑止（body固定方式） */
body.no-scroll {
    position: fixed !important;
    overflow: hidden !important;
    width: 100% !important;
}

body {
    line-height: 1.8;
    color: var(--text-color-light);
}

/* メインコンテンツ */
/* ヘッダー固定分の余白（PC 基本） */
main {
    padding-top: 100px; /* 120px → 100px: 固定ヘッダー高さにほぼ合わせ最大限上方シフト */
    background-image: url('../images/bg-pattern-fef7f7.svg');
    background-repeat: repeat;
    background-size: auto;
}

/* ========================================
   レイアウト・コンテナ
   ======================================== */

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ========================================
   エラーページ用スタイル
   ======================================== */

.error-page {
    text-align: center;
    padding: 100px 20px;
}

.error-code {
    font-size: 3rem;
    color: var(--main-color);
    margin-bottom: 20px;
}

.error-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.error-message {
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-buttons .btn {
    font-size: 1.1rem;
    padding: 15px 30px;
}

@media (max-width: 768px) {
    .error-page {
        padding: 60px 20px;
    }
    
    .error-code {
        font-size: 2.5rem;
    }
    
    .error-title {
        font-size: 1.3rem;
    }
    
    .error-message {
        font-size: 1rem;
    }
    
    .error-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .error-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ========================================
   合格実績カード（共通化）
   ======================================== */
.achievements-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px; /* 以前の広めの余白感を復元 */
    text-align: center;
    margin: 35px 0 30px; /* 上に余白を付与して前要素と分離 */
    align-items: stretch; /* カードの高さを統一（伸長） */
    justify-items: stretch; /* 横方向も揃える */
    align-content: start;  /* 行の集合を先頭に寄せる */
}

/* グリッド直下のカードに外側マージンが入らないよう明示 */
.achievements-list > .results-year-block { 
    margin: 0 !important; 
    place-self: stretch; 
}

@media (min-width: 960px) {
    /* PC幅では3カラムに固定し、横位置のズレを防止 */
    .achievements-list { grid-template-columns: 1fr 1fr 1fr; }
}

.achievements-list p,
.achievements-list .achievement-card {
    background-color: var(--cream-color);
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   合格実績 年度ブロック（共通化）
   ======================================== */
.results-year-block {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.results-year-block + .results-year-block { margin-top: 20px; }

.results-year-title {
    font-size: 1.4rem;
    color: var(--main-color);
    margin: 0 0 12px 0;
    text-align: left;
}

.results-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; box-sizing: border-box; }
.results-table thead th {
    background-color: #ecf0f1;
    color: #333;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #ddd;
}
.results-table tbody td { padding: 10px 12px; border: 1px solid #eee; vertical-align: middle; }
.results-table tbody tr:nth-child(even) { background-color: #f9f9f9; }

.achievements-list p:hover,
.achievements-list .achievement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media (max-width: 879px) {
    .achievements-list {
        grid-template-columns: 1fr;
        gap: 22px; /* シングルカラム時の縦方向間隔を拡大 */
        margin-top: 0px; /* セクション見出しのmargin-bottomと重複しないよう調整 */
    }
    .achievements-list p,
    .achievements-list .achievement-card {
        padding: 18px 24px; /* 余白わずかに増やし可読性向上 */
        font-size: 1.05rem;
        line-height: 1.5;
    }
    
    /* container クラスの配置差異による問題を解決 */
    #achievements.container .achievements-list,
    #achievements .container .achievements-list {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 0px;
    }
}

/* ========================================
   ヘッダー・ナビゲーション
   ======================================== */

/* 共通ヘッダースタイル */
header {
    background-color: #fef7f7 !important;
    background: #fef7f7 !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1002 !important;
    padding: 15px 0;
    min-height: 100px;
    display: flex !important;
    align-items: center !important;
}

/* レスポンシブ対応のヘッダー設定 */
@media (max-width: 879px) {
    header {
        min-height: 80px !important;
        padding: 10px 0 !important;
    }
}

@media (max-width: 430px) {
    header {
        min-height: 70px !important;
        padding: 8px 0 !important;
    }
}

@media (max-width: 410px) {
    header {
        min-height: 60px !important;
        padding: 5px 0 !important;
    }
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* レスポンシブ対応のヘッダーレイアウト */
@media (max-width: 879px) {
    header .container {
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 10px !important;
    }
    
    header .logo {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    header .logo-main {
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 430px) {
    header .container {
        padding: 0 8px !important;
    }
    
    header .logo {
        flex: 1 !important;
        max-width: calc(100% - 50px) !important;
    }
}

@media (max-width: 410px) {
    header .container {
        padding: 0 5px !important;
    }
    
    header .logo {
        flex: 1 !important;
        max-width: calc(100% - 40px) !important;
    }
}

/* ロゴ */
header .logo {
    display: flex;
    align-items: center;
    margin-top: 2px !important;
}

header .logo a {
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

header .logo a, header .logo a:hover {
    color: var(--text-color);
}

header .logo-main {
    font-family: var(--font-title);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.2;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 4px !important;
}

header .logo-main img {
    width: 160px;
    height: 120px;
    object-fit: contain;
    margin-left: 12px; /* 3mm右へ寄せ */
    margin-top: 8px !important; /* ハンバーガーメニューと中心位置を揃える */
}

/* レスポンシブ対応のロゴ画像サイズ */
@media (max-width: 879px) {
    header .logo-main img {
        width: 110px !important;
        height: 83px !important;
        margin-left: 8px !important;
        margin-top: 8px !important; /* ハンバーガーメニューと中心位置を揃える */
    }
}

@media (max-width: 430px) {
    header .logo-main img {
        width: 80px !important;
        height: 60px !important;
        margin-left: 6px !important;
        margin-top: 5px !important; /* ハンバーガーメニューと中心位置を揃える */
    }
}

@media (max-width: 410px) {
    header .logo-main img {
        width: 60px !important;
        height: 45px !important;
        margin-left: 4px !important;
        margin-top: 4px !important; /* ハンバーガーメニューと中心位置を揃える */
    }
}

header .logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

header .logo-title {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}

header .logo-subtitle {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.2;
    margin: 0;
    align-self: flex-end;
    margin-top: -2px;
}

/* ロゴの装飾 */
.logo-main img::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, var(--main-color), var(--accent-color));
    border-radius: 50%;
    z-index: -1;
    opacity: 0.1;
}

.logo-main img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(139, 195, 74, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* ナビゲーション */
header nav {
    flex-grow: 1;
    background-color: #fef7f7;
    padding: 10px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

header nav ul {
    margin: 0;
    padding: 0 20px 0 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 600px;
    gap: 10px 20px;
    align-items: center;
    margin-left: auto;
}

header nav li {
    margin: 0;
    flex-shrink: 0;
}

header nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    position: relative;
    padding-bottom: 5px;
    white-space: nowrap;
}

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

header nav a:hover::after {
    width: 100%;
}

/* ハンバーガーメニュー */
.menu-btn {
    display: none;
    background: rgba(254, 247, 247, 0.9);
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1004;
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 5px;
}

/* モバイル表示でハンバーガーメニューを表示 */
@media (max-width: 879px) {
    .menu-btn {
        display: block !important;
    }
}

.menu-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px auto;
    transition: all 0.2s ease-in-out;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.menu-btn span:nth-child(1) { top: 10px; }
.menu-btn span:nth-child(2) { top: 19px; }
.menu-btn span:nth-child(3) { top: 28px; }

.menu-btn.open span:nth-child(1) { 
    top: 19px; 
    transform: translateX(-50%) rotate(45deg); 
}
.menu-btn.open span:nth-child(2) { 
    opacity: 0; 
}
.menu-btn.open span:nth-child(3) { 
    top: 19px; 
    transform: translateX(-50%) rotate(-45deg); 
}

/* ========================================
   ヒーローセクション（共通レイアウト）
   ======================================== */

/* Hero 共通化 (2025-08-09): 上位置を flex-start + 基準160px で統一 */
/* PCヒーロー: main にヘッダー分余白を持たせたので過剰な上余白を適正化 */
.hero {
    position: relative;
    min-height: 350px;
    padding: 10px 0 0 0; /* 40px → 10px: 追加で約30px(≒0.8cm) 上方向シフト */
    background-image: url('../images/bg-pattern-fef7f7.svg');
    background-repeat: repeat;
    background-size: auto;
    z-index: 1001;
}



/* 中央揃え→上揃えに変更（高さ差による上下ブレ防止） */
.hero .container {
    position: relative;
    height: 100%;
    min-height: 350px;
    display: flex;
    align-items: flex-start; /* モバイル基準: 上揃え（PCは後段メディアクエリで中央揃えに上書き） */
    gap: 40px;
}

/* ページ固有再調整は main padding-top 化により一旦不要。必要になればここへ再追加 */

.hero-background {
    position: relative;
    flex: 1;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5px;
}

.hero-background img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border: 8px solid #F5E6D3;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(245, 230, 211, 0.4);
    background-color: #F5E6D3;
    padding: 4px;
}

.hero-text {
    position: relative;
    flex: 1;
    z-index: 1002;
    text-align: left;
    max-width: none;
    padding: 5px 5px 0px 5px;
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.3;
    padding: 5px 0;
}

.hero-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* ========================================
   セクション共通
   ======================================== */

section {
    padding: 50px 0;
}

h2 {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--text-color);
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 80px;
    position: relative;
    padding: 10px 20px;
    z-index: 10;
    overflow: visible; /* イラストがはみ出しても表示 */
}



.section-title .title-wave {
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
}

/* セクションタイトルの装飾（左右のイラスト） */
.section-title::before,
.section-title::after {
    content: '';
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: -1; /* 側面イラストを見出しテキストの後ろに配置 */
    top: 50%;
    transform: translateY(-50%);
}

/* イラストのデフォルトスタイル */
.section-title::before {
    width: 80px;
    height: 80px;
    left: 0; /* 波状イラストの左端に配置 */
    top: 50%; /* 見出しと同じ高さに配置 */
    transform: translateY(-50%); /* 垂直方向の中央揃え */
    z-index: -1; /* 側面イラストを見出しテキストの後ろに配置 */
}

.section-title::after {
    width: 80px;
    height: 80px;
    right: 0; /* 波状イラストの右端に配置 */
    top: 50%; /* 見出しと同じ高さに配置 */
    transform: translateY(-50%); /* 垂直方向の中央揃え */
    z-index: -1; /* 側面イラストを見出しテキストの後ろに配置 */
}

/* 各セクションのイラスト指定（PC表示用サイズ） */
#about .section-title::before { background-image: url('../images/star-moon.svg'); transform: translateY(-50%) rotate(-15deg); }
#about .section-title::after  { background-image: url('../images/blocks.svg'); transform: translateY(-50%) rotate(15deg); width: 90px; height: 90px; }

#courses .section-title::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(-15 50 50)"%3E%3Crect x="20" y="15" width="15" height="70" rx="3" fill="%23F47C7C"/%3E%3Cpolygon points="20,15 35,15 27.5,5" fill="%23F47C7C"/%3E%3Crect x="42.5" y="15" width="15" height="70" rx="3" fill="%2370A1D7"/%3E%3Cpolygon points="42.5,15 57.5,15 50,5" fill="%2370A1D7"/%3E%3Crect x="65" y="15" width="15" height="70" rx="3" fill="%23A1DE93"/%3E%3Cpolygon points="65,15 80,15 72.5,5" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); transform: translateY(-50%) rotate(-15deg); }
#courses .section-title::after  { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(15 50 50)"%3E%3Cpath d="M85,30 C95,45 90,65 80,75 C65,90 45,95 30,85 C15,75 10,55 20,40 C30,25 45,15 60,20 C70,23 80,25 85,30 Z" fill="%23f0f0f0" stroke="%23cccccc" stroke-width="2"/%3E%3Ccircle cx="45" cy="40" r="7" fill="%23F47C7C"/%3E%3Ccircle cx="65" cy="35" r="6" fill="%23A1DE93"/%3E%3Ccircle cx="70" cy="55" r="8" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); transform: translateY(-50%) rotate(15deg); }

#news-and-results .section-title::before { background-image: url('../images/balloons.svg'); width: 120px; height: 120px; transform: translateY(-50%) rotate(-10deg); }
#news-and-results .section-title::after  { background-image: url('../images/shojo.svg'); width: 90px; height: 90px; transform: translateY(-50%) rotate(10deg); }

#testimonials .section-title::before { background-image: url('../images/book.svg'); transform: translateY(-50%) rotate(15deg); }
#testimonials .section-title::after  { background-image: url('../images/parent-child.svg'); width: 90px; height: 90px; transform: translateY(-50%) rotate(-5deg); }

#access .section-title::before { 
    background-image: url('../images/paper-plane.svg'); 
    width: 100px; 
    height: 100px; 
    transform: translateY(-50%) rotate(20deg); 
    opacity: 1; /* 完全に不透明にして見やすく */
    filter: brightness(1.3) contrast(1.5) drop-shadow(0 0 3px rgba(0,0,0,0.2)); /* 明度、コントラスト、影を強化 */
    z-index: -1; /* 見出し文字の背面に配置 */
}
#access .section-title::after  { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238BC34A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>'); transform: translateY(-50%) rotate(-15deg); }

#achievements .section-title::before { background-image: url('../images/balloons.svg'); width: 120px; height: 120px; transform: translateY(-50%) rotate(-10deg); }
#achievements .section-title::after  { background-image: url('../images/shojo.svg'); width: 90px; height: 90px; transform: translateY(-50%) rotate(10deg); }

.exam-course-overview.section-title::before { background-image: url('../images/star.svg'); transform: translateY(-50%) rotate(-15deg); }
.exam-course-overview.section-title::after  { background-image: url('../images/sun.svg'); transform: translateY(-50%) rotate(15deg); }

#gallery .section-title::before { 
    background-image: url('../images/blocks.svg'); 
    transform: translateY(-50%) rotate(-15deg); 
    width: 80px; 
    height: 80px; 
    left: 0; 
    top: 50%; 
}
#gallery .section-title::after { 
    background-image: url('../images/sun.svg'); 
    transform: translateY(-50%) rotate(15deg); 
    width: 80px; 
    height: 80px; 
    right: 0; 
    top: 50%; 
}

#tuition-info .section-title::before { background-image: url('../images/star.svg'); transform: translateY(-50%) rotate(-15deg); }
#tuition-info .section-title::after { background-image: url('../images/sun.svg'); transform: translateY(-50%) rotate(15deg); }

/* 授業料案内セクションのイラスト */
#tuition .section-title::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(-15 50 50)"%3E%3Crect x="20" y="15" width="15" height="70" rx="3" fill="%23F47C7C"/%3E%3Cpolygon points="20,15 35,15 27.5,5" fill="%23F47C7C"/%3E%3Crect x="42.5" y="15" width="15" height="70" rx="3" fill="%2370A1D7"/%3E%3Cpolygon points="42.5,15 57.5,15 50,5" fill="%2370A1D7"/%3E%3Crect x="65" y="15" width="15" height="70" rx="3" fill="%23A1DE93"/%3E%3Cpolygon points="65,15 80,15 72.5,5" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); transform: translateY(-50%) rotate(-15deg); }
#tuition .section-title::after  { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(15 50 50)"%3E%3Cpath d="M85,30 C95,45 90,65 80,75 C65,90 45,95 30,85 C15,75 10,55 20,40 C30,25 45,15 60,20 C70,23 80,25 85,30 Z" fill="%23f0f0f0" stroke="%23cccccc" stroke-width="2"/%3E%3Ccircle cx="45" cy="40" r="7" fill="%23F47C7C"/%3E%3Ccircle cx="65" cy="35" r="6" fill="%23A1DE93"/%3E%3Ccircle cx="70" cy="55" r="8" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); transform: translateY(-50%) rotate(15deg); }

/* お問い合わせページの見出しイラスト */
#contact-form .section-title::before { background-image: url('../images/star.svg'); transform: translateY(-50%) rotate(-15deg); }
#contact-form .section-title::after { background-image: url('../images/sun.svg'); transform: translateY(-50%) rotate(15deg); }

/* 国語専門クラスページの見出しイラスト */
#philosophy .section-title::before { background-image: url('../images/book.svg'); transform: translateY(-50%) rotate(-15deg); }
#philosophy .section-title::after { background-image: url('../images/star.svg'); transform: translateY(-50%) rotate(15deg); }



/* index.html専用のヒーローセクション設定 */
.page-index .hero-background img {
    content: url('../images/hero-main.jpg');
}

#courses .section-title::before { 
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(-15 50 50)"%3E%3Crect x="20" y="15" width="15" height="70" rx="3" fill="%23F47C7C"/%3E%3Cpolygon points="20,15 35,15 27.5,5" fill="%23F47C7C"/%3E%3Crect x="42.5" y="15" width="15" height="70" rx="3" fill="%2370A1D7"/%3E%3Cpolygon points="42.5,15 57.5,15 50,5" fill="%2370A1D7"/%3E%3Crect x="65" y="15" width="15" height="70" rx="3" fill="%23A1DE93"/%3E%3Cpolygon points="65,15 80,15 72.5,5" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); 
    transform: translateY(-50%) rotate(-15deg); 
    width: 80px; 
    height: 80px; 
    left: 0; 
    top: 50%; 
}
#courses .section-title::after  { 
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(15 50 50)"%3E%3Cpath d="M85,30 C95,45 90,65 80,75 C65,90 45,95 30,85 C15,75 10,55 20,40 C30,25 45,15 60,20 C70,23 80,25 85,30 Z" fill="%23f0f0f0" stroke="%23cccccc" stroke-width="2"/%3E%3Ccircle cx="45" cy="40" r="7" fill="%23F47C7C"/%3E%3Ccircle cx="65" cy="35" r="6" fill="%23A1DE93"/%3E%3Ccircle cx="70" cy="55" r="8" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); 
    transform: translateY(-50%) rotate(15deg); 
    width: 80px; 
    height: 80px; 
    right: 0; 
    top: 50%; 
}

#news-and-results .section-title::before { 
    background-image: url('../images/balloons.svg'); 
    transform: translateY(-50%) rotate(-10deg); 
    width: 80px; 
    height: 80px; 
    left: 0; 
    top: 50%; 
}
#news-and-results .section-title::after  { 
    background-image: url('../images/shojo.svg'); 
    transform: translateY(-50%) rotate(10deg); 
    width: 80px; 
    height: 80px; 
    right: 0; 
    top: 50%; 
}

#testimonials .section-title::before { 
    background-image: url('../images/book.svg'); 
    transform: translateY(-50%) rotate(15deg); 
    width: 80px; 
    height: 80px; 
    left: 0; 
    top: 50%; 
}
#testimonials .section-title::after  { 
    background-image: url('../images/parent-child.svg'); 
    transform: translateY(-50%) rotate(-5deg); 
    width: 80px; 
    height: 80px; 
    right: 0; 
    top: 50%; 
}

#access .section-title::before { 
    background-image: url('../images/paper-plane.svg'); 
    transform: translateY(-50%) rotate(20deg); 
    width: 80px; 
    height: 80px; 
    left: 0; 
    top: 50%; 
    opacity: 1; /* 完全に不透明にして見やすく */
    filter: brightness(1.3) contrast(1.5) drop-shadow(0 0 3px rgba(0,0,0,0.2)); /* 明度、コントラスト、影を強化 */
}
#access .section-title::after  { 
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238BC34A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>'); 
    transform: translateY(-50%) rotate(-15deg); 
    width: 80px; 
    height: 80px; 
    right: 0; 
    top: 50%; 
}

#tuition .section-title::before { 
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(-15 50 50)"%3E%3Crect x="20" y="15" width="15" height="70" rx="3" fill="%23F47C7C"/%3E%3Cpolygon points="20,15 35,15 27.5,5" fill="%23F47C7C"/%3E%3Crect x="42.5" y="15" width="15" height="70" rx="3" fill="%2370A1D7"/%3E%3Cpolygon points="42.5,15 57.5,15 50,5" fill="%2370A1D7"/%3E%3Crect x="65" y="15" width="15" height="70" rx="3" fill="%23A1DE93"/%3E%3Cpolygon points="65,15 80,15 72.5,5" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); 
    transform: translateY(-50%) rotate(-15deg); 
    width: 80px; 
    height: 80px; 
    left: 0; 
    top: 50%; 
}
#tuition .section-title::after  { 
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cg transform="rotate(15 50 50)"%3E%3Cpath d="M85,30 C95,45 90,65 80,75 C65,90 45,95 30,85 C15,75 10,55 20,40 C30,25 45,15 60,20 C70,23 80,25 85,30 Z" fill="%23f0f0f0" stroke="%23cccccc" stroke-width="2"/%3E%3Ccircle cx="45" cy="40" r="7" fill="%23F47C7C"/%3E%3Ccircle cx="65" cy="35" r="6" fill="%23A1DE93"/%3E%3Ccircle cx="70" cy="55" r="8" fill="%23A1DE93"/%3E%3C/g%3E%3C/svg%3E'); 
    transform: translateY(-50%) rotate(15deg); 
    width: 80px; 
    height: 80px; 
    right: 0; 
    top: 50%; 
}

/* セクション間隔の統一（PC: 2.5cm, モバイル: 1cm） */
section {
    padding: 50px 0;
    position: relative;
}

/* index.htmlのヒーローセクション直後の#aboutセクションの余白を削除 */
.page-index #about {
    padding: 0 !important;
}

/* 1-2歳児クラスページのヒーローセクション直後の#aboutセクションの余白を削除 */
/* 1-2歳 / 幼児部 / 小学校受験: ヒーロー直後の #about を上だけ詰め、下は標準を確保 */
/* 1-2歳 / 幼児部 / 受験: ヒーロー直後余白を小学部/中高部に近づける（さらに圧縮） */
.page-1-2sai #about,
.page-preschool #about,
.page-exam #about {
    padding-top: 20px !important; /* 40px → 20px */
    padding-bottom: 95px !important;
}

/* 幼児部ページの#achievementsセクションの見出し余白調整 */
.page-preschool #achievements .section-title {
    margin-bottom: 80px !important;
}

/* セクション間の余白をさらに詰める */
#about {
    padding-bottom: 95px !important; /* 2.5cm（約95px）に統一 */
    padding-top: 0px !important; /* 上部の余白を削除 */
}

/* PCで 1-2歳/幼児部/受験 の縦中央揃えを解除し他ページと同じ上揃えに統一（上余白縮小） */
/* （モバイル中央寄せは下部 @media (max-width:768px) で維持） */

/* フェードインアニメーション */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ユーティリティクラス */
.mobile-only {
    display: none;
}

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

/* ========================================
   授業料カード
   ======================================== */

.tuition-card {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--cream-color);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid rgba(139, 195, 74, 0.1);
}

.tuition-content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
}

.tuition-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tuition-right {
    text-align: left;
}

.tuition-right .tuition-description {
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
}

/* ========================================
   ボタン（共通）
   ======================================== */

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--accent-color);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--accent-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

.btn.btn-primary {
    background-color: var(--main-color);
    color: var(--white);
}

.btn.btn-primary:hover {
    background-color: var(--main-color-dark);
}

.button-container {
    margin-top: 40px;
    text-align: center;
}

/* ========================================
   フッター
   ======================================== */

footer {
    background-color: var(--text-color);
    color: white;
    padding: 30px 0;
    text-align: center;
    margin-top: 0;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

/* rollback: use earlier header responsive rules defined above */

/* モバイル表示の復元設定 */
@media (max-width: 879px) {
    .mobile-only {
        display: inline;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    body {
        font-size: 18px;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    /* 全ページ共通のモバイル表示 */
    section {
        padding: 60px 0;
        padding-bottom: 38px !important; /* 1cm */
        padding-top: 0px !important;
    }
    
    /* ギャラリーセクションの下余白はstyle.cssの設定を使用 */
    
    /* モバイル版ヘッダーの背景色を確実に設定 */
    header {
        background-color: #fef7f7 !important;
        background: #fef7f7 !important;
        background-image: none !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: cover !important;
        position: fixed !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1002 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
        min-height: 100px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .menu-btn {
        display: block;
        margin-left: -8px; /* 2mm左へ移動 */
    }
    
    /* モバイル表示でのヒーローセクション位置調整 */
    main {
        padding-top: 80px !important;
    }
    
    /* 幼児部ページ専用のヒーローセクション上部余白調整 */
    body.page-preschool main {
        padding-top: 100px !important; /* 80pxから100pxに増加 */
    }
    
    /* （junior-high固有スタイルは junior-high.css へ移行済み） */
    
    /* モバイル表示でのサイト名位置調整 */
    header .logo-main {
        margin-left: -28px !important; /* 2mm追加で左へ移動 */
    }
    
    /* モバイル表示でのハンバーガーメニュー位置調整 */
    .menu-btn {
        margin-left: -8px !important; /* 2mm左へ移動 */
    }
    

    
    header nav {
        flex-grow: 1;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #F4F8FA;
        background-image: none !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 80px;
        padding-bottom: 20px;
        clip-path: circle(0% at 100% 0);
        transition: clip-path 0.3s ease-in-out;
        opacity: 0;
        pointer-events: none;
        z-index: 1003;
        overflow-y: auto;
        box-sizing: border-box;
    }
    
    header nav.open {
        clip-path: circle(150% at 100% 0);
        opacity: 1;
        pointer-events: auto;
    }
    
    header nav ul {
        flex-direction: column;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 300px;
        display: flex;
        align-items: center;
    }
    
    header nav li {
        margin: 10px 0;
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        width: 100%;
        text-align: center;
    }
    
    header nav.open li {
        opacity: 1;
        transform: translateY(0);
    }
    
    header nav.open li:nth-child(1) { transition-delay: 0.1s; }
    header nav.open li:nth-child(2) { transition-delay: 0.15s; }
    header nav.open li:nth-child(3) { transition-delay: 0.2s; }
    header nav.open li:nth-child(4) { transition-delay: 0.25s; }
    header nav.open li:nth-child(5) { transition-delay: 0.3s; }
    header nav.open li:nth-child(6) { transition-delay: 0.35s; }
    
    header nav a {
        font-size: 1.3rem;
        color: var(--text-color);
        padding: 8px 20px;
        display: block;
        width: 100%;
    }
    
    header nav a::after {
        display: none;
    }
    
    /* モバイルヒーロー (モバイル内でのみ上書き) */
    .hero {
        min-height: 400px;
        padding: 20px 15px 0 15px !important; /* main の top 余白をモバイルは別で小さく */
    }
    main { padding-top: 90px !important; } /* モバイル時は少し圧縮 */
    
    .hero .container {
        flex-direction: column;
        gap: 20px;
    align-items: center; /* 中央揃え：ページ固有列挙を削除したためここで統一 */
    }
    
    .hero-title {
        font-size: 1.8rem;
        order: 1;
        text-align: center;
        margin-bottom: 5px;
        margin-top: 25px !important;
        padding: 5px 0;
    }
    
    .hero-title br {
        display: block;
    }
    
    .hero-background {
        order: 2;
        align-items: flex-start;
        margin-top: -5px;
    }
    
    .hero-text {
        padding: 5px 0 0px 0;
        max-width: 100%;
        text-align: left;
        order: 3;
    }
    
    .hero-text p {
        font-size: 1.1rem !important;
    }

    /* モバイルは全ページ共通で縦積み中央配置されるため、ページ列挙の中央寄せ指定を削除し共通 .hero-* で統一 */
    
    /* モバイルボタン */
    .btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    
    .button-container {
        margin-top: 30px;
    }
    
    /* モバイルではセクションタイトルの装飾を小さく調整 */
    .section-title::before,
    .section-title::after {
        width: 60px; /* サイズをわずかに大きく */
        height: 60px;
        z-index: -1 !important; /* イラストを確実に表示 */
        opacity: 0.7 !important; /* 透明度を設定 */
    }

    .section-title::before {
        left: -15px; /* 位置を調整 */
    }

    .section-title::after {
        right: -15px; /* 位置を調整 */
    }
    
    /* 個別のサイズ調整 */
    #news-and-results .section-title::before, 
    #achievements .section-title::before {
        width: 60px;
        height: 60px;
        z-index: -1 !important; /* イラストを確実に表示 */
    }
    
    /* セクションタイトルの表示設定 */
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 50px; /* 波線の下の余白を調整 */
        overflow: visible !important; /* イラストが表示されるように修正 */
        z-index: 100 !important; /* 見出しの文字を最前面に表示（モバイル用） */
        position: relative !important; /* z-indexを有効にするため */
    }
    
    /* 幼児部ページ専用の見出し余白調整（モバイル版） */
    .page-preschool .section-title {
        margin-bottom: 50px !important; /* 70pxから50pxに戻す */
    }
        /* 受験コース: #about→#tuition-info 間隔過大(95px)をモバイル標準(≈38px)に揃える */
        .page-exam #about { padding-bottom: 38px !important; }
        /* 1-2歳児: #about→#gallery 間隔 モバイルも標準38pxへ */
        .page-1-2sai #about { padding-bottom: 38px !important; }
    

    
    .section-title .title-wave {
        bottom: -25px; /* モバイルでは波状イラストを上に配置 */
    }
    
    /* モバイルでの装飾イラストの位置調整 - 統一された位置 */
    #about .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    #about .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    #courses .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    #courses .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    #news-and-results .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-10deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    #news-and-results .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(10deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    #testimonials .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    #testimonials .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(-5deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    #achievements .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-10deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    #achievements .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(10deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    #gallery .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    #gallery .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    /* プレスクールページのモバイル版見出しイラスト */
    .page-preschool #about .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    .page-preschool #about .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    .page-preschool #gallery .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    .page-preschool #gallery .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(15deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    .page-preschool #achievements .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-10deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    .page-preschool #achievements .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(10deg) scale(0.8); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    /* 幼児部ページの#achievementsセクションの見出し余白調整（モバイル版） */
    .page-preschool #achievements .section-title {
        margin-bottom: 50px !important;
    }

    .exam-course-overview .section-title::before { 
        top: 50% !important; 
        left: 0 !important; 
        transform: translateY(-50%) rotate(-15deg) scale(0.7); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }
    .exam-course-overview .section-title::after { 
        top: 50% !important; 
        right: 0 !important; 
        transform: translateY(-50%) rotate(15deg) scale(0.7); 
        z-index: -1 !important; 
        width: 60px !important; 
        height: 60px !important; 
    }

    #access .section-title::before {
        top: 50% !important;
        left: 0 !important;
        transform: translateY(-50%) rotate(20deg) scale(0.8);
        z-index: -1 !important;
        width: 60px !important;
        height: 60px !important;
    }

    #access .section-title::after {
        display: block !important;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238BC34A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>');

        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) rotate(-15deg) scale(0.8);
        z-index: -1 !important;
        width: 60px !important;
        height: 60px !important;
    }

    #tuition .section-title::before {
        top: 50% !important;
        left: 0 !important;
        transform: translateY(-50%) rotate(-15deg) scale(0.8);
        z-index: -1 !important;
        width: 60px !important;
        height: 60px !important;
    }

    #tuition .section-title::after {
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) rotate(15deg) scale(0.8);
        z-index: -1 !important;
        width: 60px !important;
        height: 60px !important;
    }

    /* 授業料カードのモバイル調整 */
    .tuition-card {
        padding: 30px 20px;
        margin: 0 15px;
    }
    
    .tuition-content {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }
    
    .tuition-right {
        text-align: center;
        order: -1; /* テキストを上に */
    }
    
    .tuition-right .tuition-description {
        font-size: 1rem;
        margin-bottom: 0;
    }
    
    .tuition-left {
        order: 1; /* ボタンを下に */
    }
    
    .tuition-catchphrase {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .tuition-book-illustration img {
        max-width: 150px;
    }
    
    .tuition-right .tuition-description {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    /* モバイルのボタンサイズ・幅を統一（index含む全ページ共通） */
    .button-container .btn,
    #news-and-results .text-center .btn,
    #testimonials .text-center .btn,
    .tuition-card .btn {
        display: block !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto 18px !important;
        padding: 12px 24px !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
    }

    /* モバイルでのカードテキスト表示（ホバーできないため常に表示） */
    .image-container-with-popup .popup-text {
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        background-color: transparent !important;
        color: var(--text-color) !important;
        padding: 10px 0 !important;
        margin-top: 10px !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* PC表示 (hero padding は上部 main 余白で統一管理するため個別上書き削除) */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: inline !important; }
    /* 全ページ PC: 既存のflexレイアウトを維持（グリッド化は撤回） */
    .hero .container { display: flex; align-items: center; gap: 40px; min-height: 350px; }
    /* hero-title PCサイズ体裁: モバイルとの差分が小さいため重複指定削除 (font-size 2.2rem はベースに統一) */
    /* ページ固有余白(1-2歳 #gallery) は個別CSSへ移行しここから削除 */
}

/* 中サイズ画面 */
@media (min-width: 401px) {
    /* hero ベースの padding / タイトル余白は既に初期定義と同一のため再指定削除 */
}

/* ========================================
   アニメーション・エフェクト
   ======================================== */

/* スムーススクロール（無効化してダイレクト表示） */
html {
    scroll-behavior: auto;
}

/* index.html（page-index）向け：モバイル時は見出しイラストを強制表示 */
/* （page-index 個別の section-title 擬似要素調整は共通化済みのため削除） */

/* 全ページ共通（*.html）モバイル時の強制表示オーバーライド */
@media (max-width: 879px) {
    body .section-title::before,
    body .section-title::after {
        display: block !important; /* 他ファイルのdisplay:noneを無効化 */
    }
}

/* 769-878pxの水平方向（ランドスケープモード）でも768px以下のスタイルを適用 */
@media (min-width: 769px) and (max-width: 878px) {
    .hero {
        min-height: 400px;
        padding: 35px 15px 0 15px !important; /* 20px → 35px: ヘッダーに隠れないよう上部余白を増加 */
    }
    
    .hero .container {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .hero-title {
        font-size: 1.8rem;
        order: 1;
        text-align: center;
        margin-bottom: 5px;
        margin-top: 25px !important;
        padding: 5px 0;
    }
    
    .hero-background {
        order: 2;
        align-items: flex-start;
        margin-top: -5px;
    }
    
    .hero-text {
        padding: 5px 0 0px 0;
        max-width: 100%;
        text-align: left;
        order: 3;
    }
    
    .hero-text p {
        font-size: 1.1rem !important;
    }
}

/* マウス操作時のフォーカスアウトラインを非表示にする */
:focus:not(:focus-visible) {
    outline: none;
}

/* 該当年次生なしメッセージのスタイル */
.no-data-message {
    text-align: center !important;
    color: #888 !important;
    font-style: italic;
    font-size: 0.95rem;
    padding: 20px 12px !important;
}

/* ========================================
   印刷用スタイル（画面表示へ影響なし）
   - 見出し左右の波状イラスト（疑似要素）を非表示
   - タイトル文字が装飾の後ろに隠れないようにする
   ======================================== */
@media print {
    body .section-title::before,
    body .section-title::after {
        display: none !important;
        content: none !important;
    }

    body .section-title {
        position: static !important;
        z-index: auto !important;
        border-bottom: 2px solid var(--main-color);
        padding-bottom: 8px;
    }
}