@charset "UTF-8";

/* =========================================
   2. フォント・デザイン維持、色味変更、ロゴ適用
========================================= */
:root {
    /* コーポレートカラーを基調とした優しいパステル＆くすみカラー */
    --color-coral: #E87A5D;      /* 優しいコーラルオレンジ */
    --color-orange-dark: #D66445; /* ロゴのオレンジに近い濃い色（ホバー用） */
    --color-purple-deep: #6D2D68; /* ロゴの深い紫（見出し用） */
    --color-lavender: #8F77B5;   /* 優しいラベンダーパープル */
    
    /* カラフルなパステルアクセント */
    --color-yellow-pastel: #FFCC5C; /* マカロンイエロー */
    --color-mint-pastel: #88D8B0;   /* ミントグリーン */
    --color-blue-pastel: #A2D2FF;   /* パウダーブルー */
    
    /* 背景と文字色（ロゴの色に合わせて調整） */
    --color-bg-pink: #FFF9FA;     /* ほんのりピンクがかった白 */
    --color-bg-light: #FFFFFF;
    --color-text-dark: #4A3C3C;   /* ロゴの"labo"の色に合わせたこげ茶色 */
    --color-text-light: #A08C8C;
    --color-border-coral: #FFD6E0; /* 薄いピンクの枠線 */
    
    /* フォント（前回の Zen Maru Gothic を継続） */
    --font-base: 'Noto Sans JP', sans-serif;
    --font-heading: 'Zen Maru Gothic', sans-serif; 
}

/* =========================================
   リセット＆ベース設定
========================================= */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-base);
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    letter-spacing: 0.05em;
}

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

a {
    color: var(--color-coral);
    text-decoration: none;
    transition: all 0.3s ease;
}
a:hover { opacity: 0.7; }
img { max-width: 100%; height: auto; }

/* 共通レイアウトクラス */
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.box-container { max-width: 800px; margin: 0 auto; }
.section-wrapper { padding: 80px 0; }
.bg-light { background-color: var(--color-bg-pink); }
.text-center { text-align: center; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

/* =========================================
   見出しデザイン（かわいらしく）
========================================= */
.section-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: var(--color-purple-deep); /* 見出しを深い紫に */
    position: relative;
}
.section-title span {
    display: block;
    font-family: var(--font-base);
    font-size: 0.9rem;
    color: var(--color-coral); /* spanテキストをコーラルオレンジに */
    letter-spacing: 0.1em;
    margin-top: 5px;
    font-weight: bold;
}

/* =========================================
   ボタンデザイン（コロンとした形）
========================================= */
.btn {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 50px; /* 完全に丸く */
    font-weight: 700;
    text-align: center;
    box-shadow: 0 6px 15px rgba(255, 139, 167, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px rgba(255, 139, 167, 0.3);
}
.btn-orange {
    background-color: var(--color-coral);
    color: #fff;
}
.btn-orange:hover { background-color: var(--color-orange-dark); color: #fff; }

.btn-purple {
    background-color: var(--color-lavender);
    color: #fff;
}
.btn-purple:hover { background-color: #7a61a1; color: #fff; }
.btn-mint {
    background-color: var(--color-mint-pastel);
    color: var(--color-text-dark); /* パステル背景なので文字はこげ茶色で読みやすく */
}
.btn-mint:hover { background-color: #72C49A; color: #fff; }

.btn-blue {
    background-color: var(--color-blue-pastel);
    color: var(--color-text-dark);
}
.btn-blue:hover { background-color: #8EBEF0; color: #fff; }
/* =========================================
   ヘッダー (ロゴ画像の適用)
========================================= */
.site-header {
    position: fixed;
    top: 0; width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 3px solid var(--color-border-coral); /* ピンクのライン */
    z-index: 1000;
    padding: 10px 0; /* ロゴ画像の高さを考慮してパディング調整 */
}
.header-container {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.logo a {
    display: flex; /* 画像とテキストを横並びに */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 15px; /* 画像とテキストの間隔 */
    line-height: 1;
}
.logo img {
    height: 45px; /* ロゴ画像が見やすくなるよう高さを微調整しました（以前は40px） */
    width: auto;
}

/* ▼ 団体名テキスト（丸ゴシック・ロゴの深い紫）のスタイリングを追加 ▼ */
.logo-text {
    font-family: var(--font-heading); /*丸ゴシック/Zen Maru Gothicを採用. */
    font-size: 1.2rem; /* サイズ調整 */
    font-weight: 700;
    color: var(--color-purple-deep); /* コーポレートカラーの深い紫を適用. */
    letter-spacing: 0.02em; /* 文字間隔を微調整 */
}
.global-nav ul {
    list-style: none; margin: 0; padding: 0; display: flex; gap: 30px;
}
.global-nav a {
    color: var(--color-text-dark); font-size: 0.95rem; font-weight: 700;
}
.global-nav a:hover { color: var(--color-coral); }

/* =========================================
   メインビジュアル（画像とテキストを縦並びに）
========================================= */
.hero-section {
    margin-top: 60px; /* ヘッダーの高さ分下げる */
    padding: 60px 0 80px; /* 上下の余白 */
    /* コーポレートカラー系の優しいグラデーション背景 */
    background: linear-gradient(135deg, rgba(232,122,93,0.05) 0%, rgba(162,210,255,0.05) 50%, rgba(205,180,219,0.05) 100%);
    text-align: center; /* 全体を中央寄せ */
}

/* 上側：画像ブロック */
.hero-image-box {
    margin-bottom: 40px; /* 画像と下のテキストの間に余白を作る */
}

.hero-img {
    width: 100%;
    max-width: 950px; /* 横長画像を大きく見せるが、はみ出さないように制限 */
    height: auto;
    border-radius: 20px; /* 角を優しく丸める */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* ふんわりとした影 */
}

/* 下側：テキストブロック */
.hero-text-box {
    max-width: 900px;
    margin: 0 auto; /* 中央に配置 */
}

.hero-copy {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1.5;
    color: var(--color-purple-deep);
    margin: 0 0 30px 0;
}

.hero-lead-box {
    background: rgba(255,255,255,0.85);
    padding: 30px 40px;
    border-radius: 20px;
    border: 2px dashed var(--color-mint-pastel);
    display: inline-block;
    text-align: left; /* ボックス自体は中央配置だが、中の文字は読みやすく左寄せ */
}

.hero-lead {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--color-text-dark);
    margin: 0;
}

.hero-lead .highlight {
    color: var(--color-purple-deep);
    font-weight: bold;
    font-size: 1.15rem;
    background: linear-gradient(transparent 70%, var(--color-yellow-pastel) 70%);
}

/* レスポンシブ（スマホ対応）の追加調整 */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 0 60px;
    }
    .hero-copy {
        font-size: 1.8rem;
    }
    .hero-lead-box {
        padding: 20px;
    }
}

/* =========================================
   活動リスト（カラフルに）
========================================= */
.activity-list { max-width: 600px; margin: 0 auto; list-style: none; padding: 0; }
.activity-list li {
    background: #fff; margin-bottom: 15px; padding: 15px 25px;
    border-radius: 50px; /* 丸くする */
    border: 2px solid var(--color-border-coral);
    position: relative;
    font-weight: bold;
}
/* リストの点に色をつける（オレンジ、紫系へ変更） */
.activity-list li:nth-child(1) { border-left: 10px solid var(--color-orange-dark); }
.activity-list li:nth-child(2) { border-left: 10px solid var(--color-coral); }
.activity-list li:nth-child(3) { border-left: 10px solid var(--color-purple-deep); }
.activity-list li:nth-child(4) { border-left: 10px solid var(--color-lavender); }

/* =========================================
   プロジェクトカード
========================================= */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.project-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    border: 1px solid var(--color-border-coral);
}
.card-body { padding: 30px; text-align: center; }
.card-body h3 { font-family: var(--font-heading); font-size: 1.4rem; margin-top: 0; color: var(--color-text-dark); }
.card-body p { text-align: left; margin-bottom: 25px; font-size: 0.95rem; }
/* =========================================
   プロジェクトの画像（サイズを強制的に揃える）
========================================= */
.project-img {
    width: 100%;
    height: 220px;     /* 高さは揃えたままキープします */
    object-fit: scale-down; /* ★魔法のコード変更：小さい画像は拡大せず、大きい画像だけ枠に収まるよう縮小します */
    background-color: #fff9fa; /* ★画像が小さい場合にできる「余白」を、サイトに馴染むほんのりピンク色で埋めます */
    display: block;
}
/* =========================================
   お知らせ・支援・フッター（丸みと色味追加）
========================================= */
.news-flex { display: flex; gap: 40px; }
.news-manual, .news-sns { flex: 1; background: #fff; padding: 30px; border-radius: 20px; border: 2px solid var(--color-bg-pink); box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.news-column-title { font-size: 1.2rem; border-bottom: 2px dotted var(--color-purple-deep); padding-bottom: 10px; margin-top: 0; color: var(--color-text-dark); font-family: var(--font-heading); }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { padding: 15px 0; border-bottom: 1px dashed var(--color-border-coral); }
.news-list .date { font-size: 0.9rem; color: var(--color-text-light); margin-right: 10px; }
/* =========================================
   お知らせラベル（カテゴリ別の色分け）
========================================= */
/* ▼ 基本の形（ここで背景色は指定せず、形だけ作ります） ▼ */
.news-list .label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 10px;
    text-align: center;
    min-width: 80px; /* 全てのラベルの幅を揃えると綺麗に並びます */
}

/* ▼ 種類ごとの色設定（HTMLでクラスを使い分けます） ▼ */

/* 1. お知らせ（イエロー） */
.label-news {
    background: var(--color-yellow-pastel);
    color: var(--color-text-dark);
}

/* 2. リリース（パウダーブルー） */
.label-release {
    background: var(--color-blue-pastel);
    color: var(--color-text-dark);
}

/* 3. イベント・セミナー（ミントグリーン） */
.label-event {
    background: var(--color-mint-pastel);
    color: var(--color-text-dark);
}

/* 4. 活動報告（コーラルオレンジ） */
.label-report {
    background: var(--color-coral);
    color: #fff; /* 背景が濃いので文字は白に */
}

/* 5. 重要（深い紫） */
.label-important {
    background: var(--color-purple-deep);
    color: #fff;
}
.support-box { background: #fff; padding: 40px 30px; border-radius: 20px; text-align: center; border: 3px solid var(--color-bg-pink); box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.color-orange { color: var(--color-coral); font-family: var(--font-heading); }
.color-purple { color: var(--color-lavender); font-family: var(--font-heading); }

.profile-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 15px; overflow: hidden; border: 1px solid var(--color-border-coral); }
.profile-table th, .profile-table td { padding: 20px; border-bottom: 1px solid var(--color-border-coral); }
.profile-table tr:last-child th, .profile-table tr:last-child td { border-bottom: none; }
.profile-table th { background-color: var(--color-bg-pink); width: 30%; text-align: left; font-weight: bold; color: var(--color-purple-deep); }

.site-footer { background-color: var(--color-coral); color: #fff; padding: 30px 0; font-family: var(--font-heading); }

/* レスポンシブ */
@media (max-width: 768px) {
    .global-nav { display: none; }
    .hero-copy { font-size: 2rem; }
    .hero-lead-box { padding: 20px; }
    .card-grid { grid-template-columns: 1fr; }
    .news-flex { flex-direction: column; }
    .profile-table th, .profile-table td { display: block; width: 100%; }
}
/* =========================================
   代表挨拶
========================================= */
.greeting-box {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 2px dashed var(--color-mint-pastel); /* 優しいミントの点線 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.greeting-text p {
    margin-bottom: 1.5em;
    font-size: 1.05rem;
}

.greeting-sign {
    text-align: right;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-purple-deep);
    font-weight: bold;
    margin-top: 30px;
}

/* =========================================
   団体概要・沿革（横並びレイアウト）
========================================= */
.profile-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.profile-info {
    flex: 3;
}

.profile-history {
    flex: 2;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--color-border-coral); /* 薄いピンクの枠線 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.history-title {
    font-family: var(--font-heading);
    color: var(--color-coral);
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px dotted var(--color-border-coral);
    padding-bottom: 10px;
}

.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-list li {
    display: flex;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.history-year {
    font-weight: bold;
    color: var(--color-purple-deep);
    width: 75px;
    flex-shrink: 0; /* 年号の幅が縮まないように固定 */
}

.history-text {
    flex: 1;
}

/* レスポンシブ追加（スマホでは縦に積む） */
@media (max-width: 768px) {
    .profile-flex {
        flex-direction: column;
    }
    .profile-info, .profile-history {
        width: 100%;
    }
    .greeting-box {
        padding: 25px;
    }
}
/* =========================================
   コンセプト（3つのポイント）
========================================= */
.concept-catch {
    color: var(--color-purple-deep);
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.concept-lead {
    font-weight: bold;
    color: var(--color-text-dark);
}
.concept-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.concept-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    position: relative;
    margin-top: 20px;
}
.border-mint { border-top: 6px solid var(--color-mint-pastel); }
.border-coral { border-top: 6px solid var(--color-coral); }
.border-yellow { border-top: 6px solid var(--color-yellow-pastel); }

.point-badge {
    position: absolute;
    top: -20px;
    left: 20px;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-family: var(--font-heading);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.bg-mint { background: var(--color-mint-pastel); color: var(--color-text-dark); }
.bg-coral { background: var(--color-coral); color: #fff; }
.bg-yellow { background: var(--color-yellow-pastel); color: var(--color-text-dark); }

.concept-card h4 {
    color: var(--color-purple-deep);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin: 15px 0;
    line-height: 1.4;
}
.concept-card p {
    font-size: 0.95rem;
    color: var(--color-text-dark);
    line-height: 1.8;
}

/* =========================================
   一緒に創造しませんか（ビジョン）
========================================= */
.target-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.target-badge {
    background: var(--color-bg-pink);
    border: 2px solid var(--color-coral);
    color: var(--color-coral);
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-family: var(--font-heading);
}
.vision-list {
    display: inline-block;
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    background: #fff;
    padding: 30px 40px;
    border-radius: 20px;
    border: 2px dashed var(--color-mint-pastel);
}
.vision-list li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 15px;
    font-weight: bold;
}
.vision-list li::before {
    content: "★";
    position: absolute;
    left: 0;
    color: var(--color-yellow-pastel);
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .concept-grid { grid-template-columns: 1fr; }
    .vision-list { padding: 20px; }
}
/* =========================================
   フッター
========================================= */
.site-footer { 
    background-color: var(--color-coral); 
    color: #fff; 
    padding: 40px 0 20px; /* 余白を少し広げました */
    font-family: var(--font-heading); 
}

/* フッターリンクのメニュー */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0; /* 下のコピーライトとの間に余白を作る */
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 30px; /* リンク同士の隙間 */
    flex-wrap: wrap; /* スマホなど画面が狭い時は自動で折り返す */
}

.footer-links a {
    color: #fff; /* 白文字にする */
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.3s ease;
}

.footer-links a:hover {
    opacity: 0.7; /* マウスを乗せると少し透ける */
    text-decoration: underline; /* リンクだと分かりやすく線を出す */
}

/* コピーライト */
.copyright {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}
/* =========================================
   子ページ（下層ページ）用スタイル
========================================= */
/* ページ上部のタイトルエリア */
.page-header {
    margin-top: 65px; /* ヘッダーの高さ分下げる */
    padding: 60px 0;
    /* トップページと同じ優しいグラデーション */
    background: linear-gradient(135deg, rgba(232,122,93,0.05) 0%, rgba(162,210,255,0.05) 50%, rgba(205,180,219,0.05) 100%);
    text-align: center;
}

.page-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--color-purple-deep);
    margin: 0;
}

/* パンくずリスト */
.breadcrumbs {
    padding: 15px 0;
    background-color: #fff;
    border-bottom: 1px solid var(--color-border-coral);
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.breadcrumbs a {
    color: var(--color-coral);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* 文章を入れる白いボックス */
.page-content {
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    border: 2px solid var(--color-bg-pink);
}

/* 子ページ内の見出し（h3）デザイン */
.page-content h3 {
    color: var(--color-purple-deep);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    border-bottom: 2px dotted var(--color-mint-pastel); /* 優しいミントの点線 */
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.page-content h3:first-child {
    margin-top: 0; /* 最初に見出しが来た場合は上の隙間を消す */
}

/* 子ページ内の本文（p）デザイン */
.page-content p {
    line-height: 1.8;
    margin-bottom: 1.5em;
    color: var(--color-text-dark);
}

/* 子ページ内のリストデザイン */
.content-list {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.content-list li {
    margin-bottom: 0.5em;
    color: var(--color-text-dark);
}

/* レスポンシブ（スマホ表示） */
@media (max-width: 768px) {
    .page-header {
        padding: 40px 0;
    }
    .page-content {
        padding: 30px 20px; /* スマホではボックス内の余白を少し狭くする */
    }
}
/* =========================================
   お知らせ記事用パーツ（日付とカテゴリ）
========================================= */
.post-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px; /* タイトルとの隙間 */
}

.post-date {
    color: var(--color-text-light); /* 優しいグレー茶色 */
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.post-category {
    background-color: var(--color-yellow-pastel); /* マカロンイエロー */
    color: var(--color-text-dark);
    font-size: 0.8rem;
    padding: 4px 15px;
    border-radius: 20px; /* コロンと丸く */
    font-weight: bold;
}

/* 記事タイトルの微調整 */
.page-content .post-title {
    margin-top: 0; /* 日付のすぐ下に来るように上の隙間を消す */
    font-size: 1.6rem; /* 通常の見出しより少し大きめにして目立たせる */
}