@charset "UTF-8";

/* =========================================
   基本設定 (Variables & Base)
========================================= */
:root {
    /* デジタル未来塾：温かみのあるオレンジ×知的なネイビー */
    --primary-color: #E67E22;       /* 親しみ、活力 */
    --primary-light: #FFF5EB;       /* 背景用・薄いオレンジ */
    --secondary-color: #FDFBF7;     /* 全体背景・クリーム色 */
    --accent-color: #2C3E50;        /* 信頼感のあるネイビー（見出し等） */
    --text-color: #4a4a4a;          /* 本文 */
    --white: #ffffff;
    --border-color: #eee;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    background-color: var(--secondary-color);
    margin: 0;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
p { margin-top: 0; margin-bottom: 1.5rem; }

/* =========================================
   レイアウト (Layout & Grid)
========================================= */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2カラムレイアウト */
.layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px; /* メイン : サイドバー */
    gap: 50px;
    padding: 60px 0;
}

.main-content { min-width: 0; }

/* サイドバー（スクロール追従） */
.sidebar { 
    position: sticky; 
    /* ヘッダーの高さより少しだけ大きい値 */
    top: 80px; 
} 

/* モバイル対応レイアウト */
@media (max-width: 900px) {
    .layout-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .sidebar { position: static; }
}

/* =========================================
   コンポーネント (Components)
========================================= */
/* ボタン */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
    border: none;
}
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
}
.btn-full { width: 100%; box-sizing: border-box; }

/* セクション見出し */
.section-head { margin: 20px 0; }
.section-head h2 {
    font-size: 1.8rem;
    color: var(--accent-color);
    border-left: 6px solid var(--primary-color);
    padding-left: 15px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}
.sub-label { font-size: 1rem; color: #888; font-weight: 400; margin-left: 10px; }

/* ウィジェット（カード） */
.widget {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}
.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--accent-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
}

/* CTAウィジェット */
.cta-widget {
    background: var(--primary-light);
    border: 1px solid #FFD6B0;
    text-align: center;
}
.cta-widget h3 { color: #D35400; margin: 0 0 10px 0; font-size: 1.3rem; }

/* メニューリスト */
.menu-list li { border-bottom: 1px solid #eee; }
.menu-list a {
    display: block;
    padding: 12px 0;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}
.menu-list a:hover { color: var(--primary-color); padding-left: 5px; }

/* =========================================
   ヘッダー (Header)
========================================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: rgba(255,255,255,0.98);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-sub {
    font-size: 0.75em;
    font-weight: normal;
    margin-left: 5px;
}

/* ナビゲーション (PC) */
nav {
    display: flex;
    align-items: center;
    gap: 40px; 
}
nav ul {
    display: flex;
    gap: 40px;
    align-items: center;
}
nav a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-color);
}
nav a:hover {
    color: var(--primary-color);
}
.header-cta {
    background: var(--primary-color);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* ハンバーガーボタン (PC非表示) */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 1001;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    position: absolute;
    transition: all 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* ハンバーガー開閉アニメーション */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 9px;
}

/* =========================================
   プロジェクト情報バナー (Project Info Banner)
========================================= */
.project-info-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    padding: 15px 25px;
    background-color: var(--primary-light);
    border: 1px solid #FFD6B0;
    border-radius: 12px;
}

.project-info-banner .logo-area img {
    width: 100px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.project-info-banner p {
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-color);
}

.project-info-banner a {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
}
.project-info-banner a:hover {
    text-decoration: underline;
}

/* モバイル対応 (600px以下) */
@media (max-width: 600px) {
    .project-info-banner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* =========================================
   スマホ対応ナビ (768px以下)
========================================= */
@media (max-width: 768px) {
    header { padding: 15px 20px; }
    
    .logo-sub {
        display: block;
        font-size: 0.7em;
        margin-left: 0;
    }
    
    .hamburger { display: block; }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        justify-content: center;
        transition: right 0.4s ease;
        padding-bottom: 50px;
    }
    nav.active { right: 0; }
    nav ul {
        flex-direction: column;
        gap: 30px;
    }
    nav a { font-size: 1.2rem; }
}

/* =========================================
   フッター (Footer)
========================================= */
footer {
    background: var(--accent-color);
    color: #fff;
    padding: 60px 0 20px;
    margin-top: 60px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.copyright {
    text-align: center;
    border-top: 1px solid #555;
    padding-top: 20px;
    margin-top: 40px;
    font-size: 0.8rem;
    color: #ccc;
}

/* =========================================
   メインコンテンツ (Hero, News, Card)
========================================= */
/* ヒーローエリア */
.hero {
    height: 60vh; 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
}
.hero-content {
    position: relative;
    z-index: 10;
}
.hero h1 { 
    font-size: 2.8rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    line-height: 1.4;
}

/* ヒーロースライダー */
.hero-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.slide-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: transform 35s linear;
    background-color: var(--accent-color);
    background-blend-mode: overlay;
    animation: imageSlide 30s infinite linear; 
}
.slide-1 { background-image: url('../img/mainimage.jpg'); }
.slide-2 { background-image: url('../img/mainimage2.png'); animation-delay: 10s; }
.slide-3 { background-image: url('../img/mainimage3.png'); animation-delay: 20s; }

@keyframes imageSlide {
    0% { opacity: 0; transform: scale(1.0); }
    6.67% { opacity: 1; transform: scale(1.03); }
    26.67% { opacity: 1; transform: scale(1.10); }
    33.33% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.15); }
}

/* ニュース */
.news-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.news-item {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0; display: block;
}
.news-item:last-child { border-bottom: none; }
.news-meta { font-size: 0.85rem; color: #888; margin-bottom: 5px; }
.news-tag {
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 0.75rem;
}
.news-title { font-weight: 500; color: var(--accent-color); }
.news-title:hover { color: var(--primary-color); }

/* 事業内容カード */
.card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease;
}
.card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
} 
.card-body { padding: 25px; }
.card-title {
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    font-weight: 700;
    color: var(--accent-color);
}
.card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
} 
.card:hover img { transform: scale(1.05); opacity: 0.9; }
/* =========================================
   プロジェクトを知る
========================================= */

        /* このページ固有の追加スタイル */
        .step-list {
            counter-reset: step;
            margin: 30px 0;
        }
        .step-item {
            position: relative;
            padding-left: 50px;
            margin-bottom: 30px;
        }
        .step-item::before {
            counter-increment: step;
            content: "0" counter(step);
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-weight: 700;
        }
        .step-item::after {
            content: "";
            position: absolute;
            left: 19px;
            top: 40px;
            bottom: -30px;
            width: 2px;
            background: #ddd;
        }
        .step-item:last-child::after { display: none; }
        
        .step-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--accent-color);
            margin-bottom: 10px;
            display: block;
        }
        .step-content {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .skill-tag {
            background: #fff;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .impact-box {
            background: var(--primary-light);
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid #FFD6B0;
        }
        .impact-title {
            color: #D35400;
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 15px;
        }
/* =========================================
   Note記事リスト (Note Card List)
========================================= */
.note-card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* カード本体 */
.note-card.card {
    margin-bottom: 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.note-card .card-img-wrapper {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.note-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.note-card:hover img { transform: scale(1.05); }

.note-card .card-body {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.note-date {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 5px;
}

.note-card .card-title {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 10px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-excerpt {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card .btn {
    margin-top: auto;
    padding: 8px 0;
    font-size: 0.85rem;
    width: 100%;
}

/* Noteリスト レスポンシブ */
@media (max-width: 1024px) {
    .note-card-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .note-card-list { grid-template-columns: 1fr; }
    .note-card .card-img-wrapper { height: 160px; }
}

/* =========================================
   ▼▼▼ 追加：「すべての記事を見る」リンク ▼▼▼
========================================= */
/* コンテナ：右寄せにしてさりげなく配置 */
.view-all-container {
    text-align: right; /* 右寄せ */
    margin-top: 15px;  /* 上との余白 */
    padding-right: 10px; /* 端すぎないように少し余白 */
}

/* リンク本体：ボタンではなく文字にする */
.view-all-link {
    display: inline-block;
    font-size: 0.9rem;       /* 文字は少し小さめ */
    color: var(--primary-color); /* サイトのメインカラー */
    text-decoration: none;   /* 下線を消す */
    font-weight: 500;
    transition: opacity 0.3s;
}

/* 矢印部分 */
.view-all-link span {
    display: inline-block;
    transition: transform 0.3s;
}

/* ホバー時の動き */
.view-all-link:hover {
    opacity: 0.7; /* 少し薄くする */
    text-decoration: underline; /* 控えめに下線を表示 */
}

/* ホバー時に矢印だけ少し右に動くアニメーション */
.view-all-link:hover span {
    transform: translateX(3px);
}
/* ▲▲▲ 追加ここまで ▲▲▲ */


/* =========================================
   パートナー ロゴグリッド
========================================= */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-top: 40px;
    padding: 0 50px;
}

.partner-item {
    text-align: center;
    padding: 20px 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fafafa;
}

.partner-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px;
/*    filter: grayscale(100%);*/
/*    opacity: 0.8;*/
    transition: opacity 0.3s, filter 0.3s;
}

.partner-logo:hover {
    filter: none;
    opacity: 1;
}

.company-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }
}
@media (max-width: 500px) {
    .partner-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .partner-item {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================
   その他 (Aboutページなど)
========================================= */
.page-header {
    background: linear-gradient(rgba(44, 62, 80, 0.7), rgba(44, 62, 80, 0.7)), url('../img/header.png');
    background-size: cover; background-position: center;
    padding: 80px 0; text-align: center; color: white;
}
.page-header h1 { font-size: 2.2rem; margin: 0 0 10px 0; }

.info-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.info-table th, .info-table td { padding: 15px 20px; border-bottom: 1px solid #eee; text-align: left; }
.info-table th { background: #f9f9f9; width: 30%; font-weight: 700; color: var(--accent-color); }

.vision-box { background: var(--white); padding: 40px; border-radius: 15px; border-left: 8px solid var(--primary-color); box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.vm-text { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--accent-color); }

.profile-wrap { display: flex; gap: 30px; align-items: flex-start; background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.profile-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (max-width: 600px) { .profile-wrap { flex-direction: column; text-align: center; } .profile-img { margin: 0 auto; } }
/* =========================================
   講座内容ページ (kouza.html) 用スタイル
========================================= */

/* 汎用的な余白クラス */
.margin-top-40 { margin-top: 40px; }
.margin-top-60 { margin-top: 60px; }
.lead-text { font-size: 1.05rem; font-weight: 500; }

/* --- 提供する3つの価値 --- */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.value-card {
    background: var(--white);
    padding: 25px 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: inline-block;
}

.value-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.value-card p {
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* --- 研修コース（横長カード） --- */
.course-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.course-card {
    display: flex;
    /* 既存の.cardスタイルを継承しつつ調整 */
    flex-direction: row; 
    align-items: stretch;
}

.course-img {
    flex: 0 0 250px; /* 幅を固定 */
    position: relative;
    overflow: hidden;
}

.course-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
}

.course-body {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.course-title {
    font-size: 1.25rem;
    color: var(--accent-color);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* タグを下に押し下げる */
}

.course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.course-tags li {
    font-size: 0.8rem;
    color: var(--primary-color);
    background-color: var(--primary-light);
    border: 1px solid #FFD6B0;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}

/* --- 受講の流れ（ステップ図） --- */
/* ※「プロジェクトを知る」ページと同じスタイルを適用 */
.step-list {
    counter-reset: step;
    margin-top: 30px;
}
.step-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 30px;
    min-height: 60px; /* コンテンツが少なくても高さを確保 */
}
.step-item::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    font-size: 1.2rem;
    z-index: 1;
}
/* 最後の線は消す */
.step-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 19px; /* 円の中心に合わせる */
    top: 40px;
    bottom: -30px; /* 次の要素まで伸ばす */
    width: 2px;
    background: #ddd;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 10px;
    display: block;
}
.step-content {
    background: var(--white);
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.95rem;
}
.step-content p { margin-bottom: 0; }


/* --- よくあるご質問（アコーディオン） --- */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item[open] {
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.faq-question {
    padding: 15px 20px 15px 50px; /* 左にQアイコン用の余白 */
    font-weight: 700;
    color: var(--accent-color);
    cursor: pointer;
    position: relative;
    list-style: none; /* デフォルトの三角マーカーを消す */
    transition: color 0.3s;
}
/* Chrome, Safari用マーカー削除 */
.faq-question::-webkit-details-marker { display: none; }

.faq-question:hover {
    color: var(--primary-color);
}

/* Qアイコン */
.faq-question::before {
    content: "Q";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* 開閉マーカー（右側の＋/－） */
.faq-question::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #ccc;
    transition: transform 0.3s;
}
.faq-item[open] .faq-question::after {
    content: "－"; /* 開いているときはマイナスに */
    color: var(--primary-color);
}

.faq-answer {
    padding: 0 20px 20px 50px; /* 質問と同じインデント */
    border-top: 1px solid #f0f0f0;
    font-size: 0.95rem;
    line-height: 1.7;
    animation: slideDown 0.2s ease-out;
}
.faq-answer p { margin-top: 15px; margin-bottom: 0; }

/* アニメーション用キーフレーム */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* =========================================
   レスポンシブ対応 (講座内容ページ)
========================================= */
@media (max-width: 768px) {
    /* 3つの価値：1列に */
    .value-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* 研修コース：縦並びに */
    .course-card {
        flex-direction: column;
    }
    .course-img {
        flex: auto; /* 高さを自動調整 */
        height: 180px; /* スマホでの画像の高さ */
    }
    .course-body {
        padding: 20px;
    }
}
/* =========================================
   アンケート結果ページ用スタイル (画像グリッド)
========================================= */
.survey-image-grid {
    display: grid;
    /* PC画面では2列で表示、幅は均等割(1fr) */
    grid-template-columns: repeat(2, 1fr);
    /* 画像間の余白（上下左右） */
    gap: 25px;
    margin-top: 30px;
}

/* 各画像のスタイル調整 */
.survey-image-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* 既存のCSS変数が定義されていればそれを使用、なければ#eee */
    border: 1px solid var(--border-color, #eee);
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

/* 画像にホバーした時に少し浮き上がるエフェクト */
.survey-image-grid img:hover {
    transform: translateY(-3px);
}

/* スマホ・タブレット向けの調整 (画面幅768px以下) */
@media (max-width: 768px) {
    .survey-image-grid {
        /* スマホでは1列表示に変更 */
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
/* =========================================
   ページ内リンク強調表示 (ターゲットフラッシュ)
========================================= */

/* ページ内リンクでジャンプしたターゲット要素に適用されるスタイル */
:target {
    animation: highlight-target 2s ease-out;
}

/* フラッシュアニメーションの定義 */
@keyframes highlight-target {
    0% {
        /* 開始時：背景色をアクセントカラー（黄色）に変更し、少し拡大 */
        background-color: var(--highlight-color, #fff3cd); /* 変数がない場合は薄い黄色 */
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
        transform: scale(1.02);
    }
    50% {
        /* 中間：少し落ち着かせる */
        background-color: var(--highlight-color, #fff3cd);
        transform: scale(1.01);
    }
    100% {
        /* 終了時：元の状態に戻る */
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

/* 特定のブロック（content-block）がターゲットになった場合の調整 */
.content-block:target {
    /* アニメーションが見えやすいように少しパディングを追加 */
    padding: 20px;
    border-radius: 12px;
    /* スクロール位置の微調整（ヘッダーに隠れないように） */
    scroll-margin-top: 100px; 
}
/* =========================================
   Note埋め込み用スタイル
========================================= */
/* noteから取得したiframeを強制的に中央揃えにする */
/* Note埋め込み用スタイル */
iframe.note-embed {
    margin: 10px auto !important;
    display: block !important;
    /* ▼▼▼ 以下の2行を追加してください ▼▼▼ */
    width: 100% !important;     /* 幅を親要素いっぱいに広げる */
    max-width: 800px !important; /* PC画面で広がりすぎないように最大幅を設定（お好みで調整可） */
    /* ▲▲▲ 追加ここまで ▲▲▲ */
}
/* =========================================
   SNSリンクウィジェット
========================================= */
.sns-widget .widget-title {
    margin-bottom: 15px;
}

.sns-links {
    display: flex;
    gap: 15px;
}

.sns-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 丸いアイコン */
    font-size: 0;       /* テキストは非表示 */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background-color: #eee; /* デフォルトのグレー */
}

/* インスタグラム：グラデーション */
.sns-link.instagram {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
}

/* Facebook：青 */
.sns-link.facebook {
    background-color: #1877f2;
}

/* アイコン（CSSで描画） */
.sns-icon {
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
}

/* Instagramのカメラアイコン */
.instagram .sns-icon::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 24px; height: 24px;
    border: 2px solid white;
    border-radius: 6px;
    box-sizing: border-box;
}
.instagram .sns-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border: 2px solid white;
    border-radius: 50%;
    box-sizing: border-box;
}
.instagram .sns-icon .dot { /* 右上の点 */
    position: absolute;
    top: 4px; right: 4px;
    width: 3px; height: 3px;
    background: white;
    border-radius: 50%;
}

/* Facebookの「f」アイコン */
.facebook .sns-icon::before {
    content: 'f';
    color: white;
    font-size: 28px; /* 少しサイズを調整 */
    font-weight: 900;
    font-family: Arial, sans-serif; /* より一般的なフォントを指定 */
    position: absolute;
    /* 以下3行で上下左右の中央に配置し、微調整 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%); /* 視覚的に中央に見えるよう少し位置を調整 */
    line-height: 1;
}

/* ホバー時のエフェクト */
.sns-link:hover {
    transform: translateY(-3px); /* 少し浮き上がる */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* =========================================
   お問い合わせページ (contact.html) 用スタイル
========================================= */

/* ページタイトルエリア */
.page-header {
    background-color: #f4f4f4;
    padding: 40px 0;
    text-align: center;
    margin-bottom: 40px; /* 下のコンテンツとの間隔 */
}

/* Forms埋め込みコンテナ */
.contact-form-container {
    width: 100%;
    overflow: hidden;
    margin-top: 20px; /* 上のテキストとの間隔 */
}

/* Formsのiframeをレスポンシブに対応させる設定 */
.contact-form-container iframe {
    width: 100% !important; /* 横幅を親要素に合わせて強制的に100%にする */
    border: none;          /* iframeの枠線を消す */
    min-height: 600px;     /* フォームが見切れないように最小の高さを確保（必要に応じて調整してください） */
    display: block;        /* 微妙な隙間をなくすおまじない */
}
/* css/style.css の一番下に追加 */

/* --- お問い合わせハイブリッド表示用のスタイル --- */

.contact-wrapper {
    /* フォームと代替ボタンをまとめるラッパー */
    margin-top: 30px;
}

/* 代替ボタンエリア */
.contact-fallback {
    margin-top: 30px;            /* 上のフォームとの間隔 */
    padding: 25px;               /* 内側の余白 */
    background-color: #f9f9f9;   /* 少し目立たせるための薄い背景色 */
    border-radius: 8px;          /* 角丸 */
    text-align: center;          /* 中央揃え */
    border: 1px solid #eee;      /* 薄い枠線 */
}

/* 案内メッセージ */
.fallback-message {
    margin-bottom: 20px;
    color: #666;               /* 少し控えめな文字色 */
    line-height: 1.6;
}

/* 注釈の文字サイズ */
.fallback-message small {
    font-size: 0.9rem;
}

/* (既存のスタイル定義があれば不要ですが、念のためボタンのスタイル例) */
.btn-primary {
    background-color: #ff5100; /* 寄付サイトと同じオレンジ色を想定 */
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    transition: background-color 0.3s;
}
.btn-primary:hover {
    background-color: #e04800;
}
/* =========================================
   パートナーシップページ用スタイル
========================================= */

/* ページ内リンクで飛んだときに、ヘッダーに隠れないように少し下にずらす設定 */
#contact-form:target {
    scroll-margin-top: 120px; /* ヘッダーの高さ＋余白 */
}

/* お問い合わせセクション専用の見出しスタイル */
.contact-section-head {
    text-align: center;
    margin-bottom: 40px;
}

.contact-section-head h2 {
    font-size: 1.8rem;
    color: var(--text-color);
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

/* 見出しの下線装飾 */
.contact-section-head h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 3px;
}
/* =========================================
   サイドバー：支援訴求ウィジェット（写真バージョン）
========================================= */
.donation-widget {
    position: relative;
    padding: 40px 25px; /* 余白を少し広めに */
    text-align: center;
    color: #fff; /* 文字は全て白 */
    border-radius: 15px; /* 角丸 */
    overflow: hidden; /* はみ出た画像を隠す */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: none; /* 枠線なし */
    
    /* ▼▼▼ 背景画像の設定 ▼▼▼ */
    background-image: 
        linear-gradient(to bottom, rgba(44, 62, 80, 0.4), rgba(255, 81, 0, 0.6)), /* 上は暗めの青系、下はオレンジ系のグラデーション */
        url('../img/sideimage.png'); 
    
    background-size: cover;      /* 枠に合わせてトリミング */
    background-position: center; /* 中央寄せ */
}

/* 画像がズームするエフェクト（お好みで） */
.donation-widget:hover {
    /* ホバー時に背景画像を少し拡大させることでリッチな印象に */
    background-size: 110%; /* 100%から110%へ拡大 */
    transition: background-size 0.5s ease; /* なめらかにアニメーション */
}
/* ただし、グラデーションと同時指定だとカクつくことがあるので、
   スムーズにいかない場合は上記のhover設定を削除してください。 */


/* コンテンツの視認性を高める設定 */
.widget-body {
    position: relative;
    z-index: 1;
    /* 文字の周りに少し影をつけて読みやすくする */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.donation-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.donation-text {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 30px;
    opacity: 0.95;
    font-weight: 500;
}

/* 寄付専用ボタン（前回と同じ） */
.btn-donation {
    background-color: #fff;
    color: var(--primary-color);
    font-weight: 700;
    padding: 15px 20px;
    font-size: 1.1rem;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none; /* ボタンの文字には影をつけない */
}

.btn-donation:hover {
    background-color: #fff;
    color: var(--primary-color);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.btn-icon {
    font-size: 1.2em;
    margin-right: 10px;
}

.donation-note {
    font-size: 0.8rem;
    margin-top: 15px;
    opacity: 0.8;
}