/* 基本リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Tailwind CSS CDN */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif; /* フォントをInterに設定 */
    color: #333;
}

header {
/* ... [headerのスタイルは省略] ... */
    display: flex;
    align-items: center;
    background-color: #d0a7ff;
    color: #fff;
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 70px;
    z-index: 1000;
}

@media (max-width: 768px) {
    header {
        min-height: 50px;
        padding: 0.5rem;
    }
}

header .logo {
    display: flex;
    align-items: center;
}

header .logo img {
    max-width: 200px;
    height: auto;
}

@media (max-width: 768px) {
    header .logo img {
        max-width: 150px;
    }
}

/* メインコンテンツ */
main {
    padding: 2rem 0; /* 上下は2remのパディング、左右は0にして背景を幅いっぱいに */
    margin-top: 100px; /* ヘッダーと重ならないように調整 */

}

main.container {
    padding-top: 85px; /* ヘッダーの高さ+余裕分 */
}

/* メインコンテンツ内のラッパー（コンテンツを中央に寄せるためのもの） */
.container { /* .main-content-wrapper の代わりに .container を使用 */
    max-width: 1200px; /* コンテンツの最大幅を設定（PCでの見え方を調整してください） */
    margin: 0 auto; /* 左右のマージンを自動にして、コンテンツを中央に配置 */
    padding: 0 2rem; /* コンテンツ自体の左右の余白（画面端からコンテンツまでの距離） */
}

@media (max-width: 768px) {
    main {
        padding-top: 70px; /* スマホでのヘッダーとの余白 */
        padding: 1rem 0; /* スマホでも左右のパディングは0に */
    }
    .container { /* .main-content-wrapper の代わりに .container を使用 */
        padding: 0 1rem; /* スマホでのコンテンツの左右パディングを調整 */
    }
}

/* index.htmlから削除されたクラスですが、main p のスタイルがあります */
main p {
    padding-top: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem; /* ← 2remの左パディング */
    padding-right: 2rem;
}

h1 {
    font-size: 2rem;
    padding-bottom: 1rem;
    padding-left: 1rem; /* ← 2remの左パディング */
    padding-right: 2rem;
    padding-top: 2rem;
}


/* imgタグ全体に適用される user-select はそのままでOK */
img {
    user-select: none;
}

/* Slider Styles */

/* 緑色の変数定義 */
/* Slider Styles の前にある :root に追記 */
:root {
    /* ... 既存の緑色の変数 ... */
    --primary-green: #4CAF50; 
    --light-green: #A5D6A7;   
    /* ... 既存の幅の変数 ... */

    /* --- 新規追加: 4つのセクションの背景色変数 --- */
    --intro-bg-color: #830000;       /* 自己紹介セクションの背景色 */
    --reversed-intro-bg-color: #e0e0e0; /* 活動内容セクションの背景色 */
    --no-image-intro-bg-color: #f7f7f7; /* 画像なし自己紹介セクションの背景色 */
    --no-image-reversed-bg-color: #e0e0e0; /* 画像なし活動内容セクションの背景色 */
}

.slider-container {
    /* PC表示時の幅: 左右の画像 + 中央の画像 + 隙間 */
    width: calc(var(--side-img-width) * 2 + var(--current-img-width) + var(--img-gap) * 4);
    height: calc(var(--current-img-width) * 0.75); /* 中央の画像の高さに合わせる (例: 4:3のアスペクト比) */
    position: relative;
    margin: 40px auto 20px; /* 上の間隔を40pxに、下の間隔を20pxに増やしました */
    overflow: hidden; /* この中で画像がスライド */
    border-radius: 10px;
}

.slider-track {
    display: flex;
    width: fit-content; /* 内容に合わせて幅を調整 */
    height: 100%;
    /* トラック全体の移動アニメーション */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* より滑らかなイージング */
    position: absolute;
    left: 0;
    top: 0;
    align-items: center; /* 縦方向の中央揃え */
}

.slide-item {
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    /* marginはJSで制御するため、ここから削除 */
    /* 各画像のアニメーション設定 (scale, opacity, translateXなど) */
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* translateXにも適用 */
    /* 画像に個別の影を適用 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 影を画像に適用 */
    border: 1px solid #eee; /* 画像に薄い境界線を追加して影を際立たせる */
}

/* PC/タブレット表示時の各画像のサイズとアニメーション */
.slide-item.previous,
.slide-item.next {
    width: var(--side-img-width);
    height: calc(var(--side-img-width) * 0.75); /* 例: 4:3のアスペクト比 */
    opacity: 0.7; /* 左右の画像を少し暗く */
    transform: scale(0.95); /* 左右の画像をわずかに縮小 */
    /* translateXはJSで設定 */
}

.slide-item.current {
    width: var(--current-img-width);
    height: calc(var(--current-img-width) * 0.75); /* 例: 4:3のアスペクト比 */
    opacity: 1; /* 中央の画像を鮮明に */
    transform: scale(1); /* 中央の画像は通常サイズ（拡大アニメーションの終点） */
    /* translateXはJSで設定 */
}

/* スライダーナビゲーションのスタイル */
/* ドットインジケーターとナビゲーションボタンのコンテナ */
.slider-controls {
    display: flex;
    justify-content: space-between; /* ドットを左、ボタンを右に配置 */
    align-items: center;
    max-width: calc(var(--side-img-width) * 2 + var(--current-img-width) + var(--img-gap) * 4); /* スライダーコンテナと同じ幅に合わせる */
    margin: 10px auto 0; /* 上の余白と中央揃え */
    padding: 0 10px; /* 左右の余白 */
}

/* ドットのコンテナ */
.dots-container {
    text-align: left; /* ドットを左寄せ */
}

/* ドットインジケーター */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 4px;
    background-color: var(--light-green); /* 非アクティブなドットの色 */
    border-radius: 50%; /* 円形にする */
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: var(--primary-green); /* アクティブなドットとホバー時の色 */
}

/* ナビゲーションボタンのコンテナ */
.navigation-buttons {
    display: flex; /* ボタンを横並びにする */
    gap: 8px; /* ボタン間のスペースを少し狭める */
    align-items: center;
}

/* スライダーボタン (矢印、一時停止/再生) */
.slider-btn {
    background-color: transparent; /* 背景は透明 */
    color: var(--primary-green); /* アイコンの色は濃い緑 */
    border: 1.5px solid var(--primary-green); /* 枠線を少し細く */
    border-radius: 50%; /* 円形にする */
    width: 32px; /* ボタンの幅を小さく */
    height: 32px; /* ボタンの高さを小さく */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px; /* アイコンのサイズを小さく */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
    outline: none; /* フォーカス時のアウトラインを削除 */
    box-shadow: none; /* デフォルトのボタンの影を削除 */
}

.slider-btn:hover {
    background-color: var(--primary-green); /* ホバー時の背景色 */
    color: white; /* ホバー時のアイコン色 */
}

/* お知らせの見出しを中央寄せにする */
.notice-content h2 {
    text-align: center; /* 見出しを中央寄せに */
}

/* お知らせセクションの背景色と文字調整 */
.notice-content {
    background-color: #f0f0f0; /* 薄い灰色に変更 */
    padding: 20px; /* パディングを増やして文字との余白を広げました */
    border-radius: 50px; /* 角を丸くする */
    text-align: left; /* 文字を左寄せに変更 */
    line-height: 1.6; /* 行の高さを調整して見やすくしました */
    margin-top: 30px; /* 上に少し余白を追加しました */
    margin-bottom: 30px; /* 下に少し余白を追加しました */
}

/* お知らせの読み込み中エリアの背景とサイズ調整 */
#noticeArea {
    background-color: #f8f8f8; /* 非常に薄い灰色に変更。notice-contentよりも明るくして区別しやすくしました */
    padding: 30px; /* パディングを増やして、エリア全体を一回り大きく見せる */
    margin: 10px; /* 親要素（.notice-content）との間に少しマージンを追加 */
    border-radius: 40px; /* 親要素より少し小さめに角を丸める */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影を追加して、独立したブロックに見せる */
    text-align: center; /* 「読み込み中...」のテキストを中央寄せにする */
    min-height: 100px; /* 最小高さを設定して、内容がなくてもある程度の大きさを保つ */
    display: flex; /* Flexboxを使って内容を中央に配置 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    font-size: 1.1em; /* 文字サイズを少し大きくする */
    color: #666; /* 文字色を少し濃い灰色にして見やすくする */
}

/* noticeArea内のaタグのスタイルを明示的に設定 */
.notice-content #noticeArea a {
    display: block; /* ブロック要素にして領域全体をクリック可能にする */
    /* text-decoration: none; を削除して下線を表示 */
    color: inherit; /* 親要素の色を継承 */
    cursor: pointer; /* カーソルをポインターにする */
    white-space: pre-wrap; /* 改行を保持 */
    width: 100%; /* 親要素の幅いっぱいに広げる */
    height: 100%; /* 親要素の高さいっぱいに広げる */
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
}

#noticeArea p {
    font-size: 1.1em;
    padding: 0; /* 必要ならパディングもリセット */
    margin: 0;
}

/* フッター */
footer {
    background-color: #4d4d4d;
    color: #fff;
    padding: 1rem;
    font-size: 0.9em;
    margin-top: 20px; /* スライダーとの間に余白 */
}

footer .footer-content p {
    margin: 10px 0;
    line-height: 2.1;
}

footer .footer-content a {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    text-decoration: none;
}

/* ==================================== */
/* スマートフォン向けメディアクエリ */
/* ==================================== */
@media (max-width: 768px) { /* 例として768px以下をスマホとします */

    /* スライダーコンテナ */
    .slider-container {
        width: 90%; /* 画面幅の90%など、1枚の画像が収まるように調整 */
        max-width: 320px; /* スマホでの中央画像の最大幅を調整 */
        height: calc(var(--current-img-width) * 0.75 * (320/350)); /* スマホの高さもスマホの幅に合わせて調整 */
        border: none; /* スマホではコンテナの境界線を削除 */
        box-shadow: none; /* スマホではコンテナの影を削除 */
        margin: 20px auto; /* スマホでのスライダーの上下間隔を調整 */
    }

    /* スライダートラック */
    .slider-track {
        width: 100%;
        justify-content: center; /* 画像を中央揃え */
        position: relative; /* absoluteをrelativeに変更 */
        transform: translateX(0) !important; /* JavaScriptのtransformを上書き */
        transition: none; /* スマホではトラックの移動アニメーションを無効化 */
    }

    /* スライドアイテム */
    .slide-item {
        width: 100%; /* コンテナの幅いっぱいに */
        height: 100%; /* コンテナの高さに */
        margin: 0; /* マージンをなくす */
        opacity: 0; /* 非表示 */
        position: absolute; /* 絶対配置にして重ねる */
        top: 0;
        left: 0;
        transition: opacity 0.5s ease-in-out; /* フェードアニメーション */
        box-shadow: none; /* スマホでは画像の影を削除 */
        border: none; /* スマホでは画像の境界線を削除 */
        transform: none; /* スマホでは画像の拡大縮小アニメーションを無効化 */
    }

    /* スマホ表示時に現在のスライドだけを表示 */
    .slide-item.current {
        opacity: 1; /* 表示 */
        z-index: 1; /* 最前面に */
    }

    /* スマホでは左右の画像は非表示 */
    .slide-item.previous,
    .slide-item.next {
        display: none; /* 要素自体を非表示にする */
    }

    /* スライダーコントロール (ドットとボタン) */
    .slider-controls {
        max-width: 90%; /* スライダーコンテナと同じ幅に合わせる */
    }

    /* お知らせセクションのスマホでの見やすさ調整 */
    .notice-content {
        padding: 15px; /* スマホでのパディングを調整 */
        margin-top: 20px; /* スマホでの上余白 */
        margin-bottom: 20px; /* スマホでの下余白 */
    }
}



/* ========================================================================= */
/* 自己紹介セクション - PC版（図形と文字のレイアウトを復元） */
.self-intro-section {
    background-color: #f7f7f7; 
    padding: 2.5rem 2.5rem; 
    border-radius: 0 40px 40px 0; /* 図形の角丸を維持 */
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 1200px; 
    width: 100%;     
    margin-left: 0; 
    margin-right: auto; 
    
    /* 文字と画像の位置決めの基準 */
    position: relative; 
    /* 修正: overflow: hidden; を削除し、はみ出しを許可 */
    box-shadow: none; 
    
    /* 元のレイアウトを復元: display: block に戻す */
    display: block; 
    min-height: 400px; /* 図形の高さを確保 */
}

/* テキストコンテンツの配置 (position: absolute + transform で中央付近に) */
.self-intro-title,
.self-intro-content {
    position: absolute; 
    
    /* --- 変更点：活動内容セクションと同じ配置 (右側) に設定 --- */
    left: 55%; /* 図形の右側 55% 付近にテキストを配置 (活動内容と統一) */
    max-width: 500px; /* 活動内容セクションと同じ最大幅に設定 (活動内容と統一) */
    
    text-align: center; /* ← 中央揃えに統一 */
    width: 100%;
}

/* self-intro-title の個別設定 */
.self-intro-title {
    font-weight: 600; /* ← 活動内容セクションとフォントウェイトを統一 */
    text-align: center;
    border-bottom: none; 
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;    
    font-size: 2rem;
    
    /* 縦方向の配置を調整: 上半分に配置 */
    top: 50%;
    transform: translate(-50%, -100%); 
}

/* self-intro-content の個別設定 */
.self-intro-content {
    margin-top: 0;
    line-height: 1.7; /* ← 活動内容セクションと行の高さを統一 */
    font-size: 1.05rem; /* ← 活動内容セクションとフォントサイズを統一 */
    text-align: center; /* ← 中央揃えに統一 */
    
    /* 縦方向の配置を調整: 下半分に配置 */
    top: 50%;
    transform: translate(-50%, 0); 
}


/* ========================================================================= */
/* 画像コンテナのスタイル (PC版: 図形からはみ出して右側に表示) */
.self-intro-image-wrapper {
    position: absolute; /* 親要素 self-intro-section を基準に配置 */
    top: 45%; /* 垂直方向を45%に調整し、少し上に表示 */
    right: -100px; /* 図形（セクションの右端）から100pxはみ出させる */
    transform: translateY(-50%);
    
    flex-shrink: 0; 
    width: 40%; 
    max-width: 350px; 
    border-radius: 20px;
    overflow: hidden; 
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); 
    z-index: 1; /* 画像が図形（背景）より上に表示される設定 */
}

.self-intro-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
    border-radius: 20px;
}

/* ==================================== */
/* スマートフォン向けメディアクエリ (共通設定) */
/* ==================================== */
@media (max-width: 768px) {
    /* ------------------------------------ */
    /* 共通設定: スマホでは縦並び (文字の下に画像を配置) */
    /* ------------------------------------ */
    .self-intro-section,
    .reversed-intro-section {
        /* position: absolute のテキスト配置を解除し、Flexboxで縦並びに */
        display: flex; 
        flex-direction: column; 
        align-items: center; /* 中央に揃える */
        gap: 20px; 
        position: static; /* absolute解除 */
        
        min-height: auto;
        padding: 1.5rem 1rem; 
        
        /* 中央寄せに戻す */
        margin-left: auto;
        margin-right: auto;
    }
    
    /* スマホ版では、すべてのabsolute/transformを解除して、通常のフローに配置 */
    .self-intro-section .self-intro-title,
    .self-intro-section .self-intro-content,
    .reversed-intro-section .self-intro-title,
    .reversed-intro-section .self-intro-content {
        position: static;
        transform: none;
        max-width: 100%; 
        width: 90%; /* ← 横幅を広く使う */
        left: auto;
        top: auto;
        order: 1; /* テキストを画像の上に配置 */
    }
    
    /* 画像を通常のフローに戻す */
    .self-intro-section > .self-intro-image-wrapper,
    .reversed-intro-section > .self-intro-image-wrapper {
        position: static;
        transform: none;
        right: auto;
        left: auto;
        top: auto;
        
        /* スマホでのサイズ調整と中央寄せ */
        width: 80%; 
        max-width: 250px; 
        margin: 0 auto; 
        order: 2; /* テキストの下に配置 */
    }
    
    /* ------------------------------------ */
    /* 図形(角丸)の個別設定 */
    /* ------------------------------------ */
    /* 通常セクション: 右寄せ図形 (通常セクション) */
    .self-intro-section {
        border-radius: 0 30px 30px 0; 
    }
    
    /* 反転セクション: 左寄せ図形 (反転) */
    .reversed-intro-section {
        border-radius: 30px 0 0 30px; 
    }
}










/* ========================================================================= */
/* 反転セクション 2 (反転レイアウト: 右寄せ、画像左側) */
/* ========================================================================= */
.reversed-intro-section {
    background-color: #e0e0e0; 
    padding: 2.5rem 2.5rem; 
    border-radius: 40px 0 0 40px; /* 図形の角丸を反転 (左上・左下) */
    margin-top: 50px; 
    margin-bottom: 30px;
    max-width: 1200px; 
    width: 100%;     
    margin-left: auto; /* 右寄せ */
    margin-right: 0;
    
    position: relative; 
    box-shadow: none; 
    display: block; 
    min-height: 400px; 
}

/* 反転セクション: テキストを左側 55% 付近に配置 */
.reversed-intro-section .self-intro-title,
.reversed-intro-section .self-intro-content {
    position: absolute; 
    
    /* セクションの右側 55% 付近にテキストを配置 */
    left: 55%; 
    
    text-align: center;
    max-width: 500px; 
    width: 100%;
}

/* 反転セクション: テキストタイトル */
.reversed-intro-section .self-intro-title {
    top: 50%;
    transform: translate(-50%, -100%); 
}

/* 反転セクション: テキストコンテンツ */
.reversed-intro-section .self-intro-content {
    top: 50%;
    transform: translate(-50%, 0); 
}

/* 反転セクション (PC版: 左側にはみ出して表示) */
.reversed-intro-section > .self-intro-image-wrapper {
    position: absolute; 
    top: 45%; 
    right: auto; 
    left: -100px; /* 左側にはみ出させる */
    transform: translateY(-50%);
    
    flex-shrink: 0; 
    width: 40%; 
    max-width: 350px; 
    border-radius: 20px;
    overflow: hidden; 
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); 
    z-index: 1; 
}


/* ==================================== */
/* スマートフォン向けメディアクエリ */
/* ==================================== */
@media (max-width: 768px) {
    /* ------------------------------------ */
    /* 共通設定: スマホでは縦並び (文字の下に画像を配置) */
    /* ------------------------------------ */
    .self-intro-section,
    .reversed-intro-section {
        /* position: absolute のテキスト配置を解除し、Flexboxで縦並びに */
        display: flex; 
        flex-direction: column; 
        align-items: center; /* 中央に揃える */
        gap: 20px; 
        position: static; /* absolute解除 */
        
        min-height: auto;
        padding: 1.5rem 1rem; 
        
        /* 中央寄せに戻す */
        margin-left: auto;
        margin-right: auto;
    }
    
    /* スマホ版では、すべてのabsolute/transformを解除して、通常のフローに配置 */
    .self-intro-section .self-intro-title,
    .self-intro-section .self-intro-content,
    .reversed-intro-section .self-intro-title,
    .reversed-intro-section .self-intro-content {
        position: static;
        transform: none;
        max-width: 100%; 
        width: 90%; /* ← 横幅を広く使う */
        left: auto;
        top: auto;
        order: 1; /* テキストを画像の上に配置 */
    }
    
    /* 画像を通常のフローに戻す */
    .self-intro-section > .self-intro-image-wrapper,
    .reversed-intro-section > .self-intro-image-wrapper {
        position: static;
        transform: none;
        right: auto;
        left: auto;
        top: auto;
        
        /* スマホでのサイズ調整と中央寄せ */
        width: 80%; 
        max-width: 250px; 
        margin: 0 auto; 
        order: 2; /* テキストの下に配置 */
    }
    
    /* ------------------------------------ */
    /* 図形(角丸)の個別設定 */
    /* ------------------------------------ */
    /* 通常セクション: 右寄せ図形 (通常セクション) */
    .self-intro-section {
        border-radius: 0 30px 30px 0; 
    }
    
    /* 反転セクション: 左寄せ図形 (反転) */
    .reversed-intro-section {
        border-radius: 30px 0 0 30px; 
    }
}




:root {
    --primary-green: #4CAF50; /* 濃い緑色（アクティブなドット、ボタンの枠線とアイコン） */
    --light-green: #A5D6A7;   /* 薄い緑色（非アクティブなドット） */
    --current-img-width: 350px; /* 中央の画像の基準幅を大きく */
    --side-img-width: 180px;    /* 左右の画像の基準幅を大きく */
    --img-gap: 15px;            /* 画像間の隙間を少し広げる */

    /* 🎨 自己紹介セクションの新しい背景色変数 🎨 */
    --intro-bg-color-1: #aa0000; /* 自己紹介 (画像あり, 右寄せ図形) の色 */
    --intro-bg-color-2: #e0e0e0; /* 活動内容 (画像あり, 左寄せ図形) の色 */
    --intro-bg-color-3: #fff9e6; /* 自己紹介 (画像なし, 右寄せ図形) の色 */
    --intro-bg-color-4: #e6f9ff; /* 活動内容 (画像なし, 左寄せ図形) の色 */
}