/* ==========================================================================
   下層ページ（About）
   ========================================================================== */
/* 「私たちの想い」セクションの背景装飾 */
.section-thought {
    position: relative;
    overflow: hidden; /* ロゴがはみ出さないように */
    
    /* 既存のドット背景と組み合わせる場合 */
    background-size: 30px 30px;
}

.section-thought .container {
    z-index: 2; /* テキストをロゴより上にする */
}

/* 背景ロゴの配置 */
.section-thought::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; /* ロゴのサイズ：お好みで調整 */
    height: 600px;
    background-image: url('../img/common/logo.svg'); /* ロゴのパス */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.05; /* 透明度：0.05〜0.1くらいが「薄く」て綺麗です */
    z-index: 1;
    pointer-events: none; /* ロゴがクリックを邪魔しないように */
}

/* よりポップにするなら：右下や左上にも小さく配置 */
.section-thought::after {
    content: 'T-PROJECT';
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 10rem;
    font-weight: 900;
    color: #000;
    opacity: 0.03;
    z-index: 1;
    white-space: nowrap;
    transform: rotate(-10deg);
}


.message-block p {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 2.2;
    font-weight: 500;
}

/* プロジェクト紹介（3つの柱）：カード形式をポップに */
.project-item {
    background: #fff;
    padding: 20px;
    margin-bottom: 60px;
    border-radius: 16px; /* 角丸を大きく */
    border: 4px solid #333; /* 太い枠線 */
    box-shadow: 15px 15px 0 var(--primary-color); /* 黄色の強い影（ベタ塗り） */
    transition: transform 0.3s ease;
}
.project-item:last-child{
    margin-bottom: 40px
}

/* プロジェクトヘッダーのバランス調整 */
.project-header {
    display: flex;
    align-items: center; /* 「T」の底辺とタイトルを合わせる */
    gap: 9px;
    margin-bottom: 20px;
    border-bottom: 4px dashed #eee;
    padding-bottom: 20px;
}

/* 縁取り「T」のサイズと位置を固定 */
.t-letter {
    font-size: 3.5rem; /* サイズ固定 */
    font-weight: 900;
    color: var(--primary-color);
    line-height: 0.8; /* 下の余白を詰める */
    margin-right: 10px;
    -webkit-text-stroke: 2px #333;
    filter: drop-shadow(4px 4px 0px #333);
    flex-shrink: 0; /* Tが潰れないように */
}

/* タイトルとサブタイトルを縦に並べるコンテナ */
.project-title-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.project-header h3 {
    font-size: 1.8rem;
    flex-direction: column;
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
    display: flex;
    align-items: baseline; /* 英語タイトルと日本語を揃える */
    gap: 6px;
}

/* サブタイトル（地域と共生など）の調整 */
.project-header h3 span {
    font-size: 1rem;
    color: var(--accent-color);
    font-weight: 800;
    letter-spacing: 0.05em;
}



.project-content p {
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* 運営・補助金エリア */
.footer-info {
    background: #fdfdfd;
    padding: 80px 15px;
}

.info-box {
    text-align: left;
    padding: 18px;
    background: #fff;
    border-radius: 15px;
    border: 2px dashed #ccc;
}

.subsidy {
    margin-top: 25px;
    font-size: 0.85rem;
    line-height: 1.8;
    color: #666;
    background: #eee;
    padding: 20px;
    border-radius: 10px;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .page-header {/* padding: 60px 0; */}
    .page-header h1 {/* font-size: 2rem; */}
    .project-item {/* padding: 30px 20px; *//* border-radius: 30px; */}
    .t-letter {/* font-size: 3.5rem; */margin-right: 15px;}
    .sub-title {/* font-size: 1.6rem; */}
        .project-header {
        /* align-items: center; */ /* スマホでは中央寄せ */
    }
    .t-letter {
        /* font-size: 3.5rem; */
    }
    .project-header h3 {
        /* flex-direction: column; */
        /* gap: 5px; */
    }
}

@media (min-width: 767px){
    /* ==========================================================================
   下層ページ（About）
   ========================================================================== */
/* 「私たちの想い」セクションの背景装飾 */
.section-thought {
    
     /* ロゴがはみ出さないように */
    
    /* 既存のドット背景と組み合わせる場合 */
}

.section-thought .container {
    
     /* テキストをロゴより上にする */
}

/* 背景ロゴの配置 */
.section-thought::before {}

/* よりポップにするなら：右下や左上にも小さく配置 */
.section-thought::after {}


.message-block p {
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
}

/* プロジェクト紹介（3つの柱）：カード形式をポップに */
.project-item {
    padding: 50px;
    border-radius: 40px; /* 角丸を大きく */
}


/* プロジェクトヘッダーのバランス調整 */
.project-header {
    
     /* 「T」の底辺とタイトルを合わせる */
    gap: 20px;
    margin-bottom: 25px;
    align-items: flex-end;
}

/* 縁取り「T」のサイズと位置を固定 */
.t-letter {
    font-size: 4.5rem; /* サイズ固定 */
     /* 下の余白を詰める */
    
     /* Tが潰れないように */
}

/* タイトルとサブタイトルを縦に並べるコンテナ */
.project-title-group {
}

.project-header h3 {
    
    
    
    
    
     /* 英語タイトルと日本語を揃える */
    gap: 15px;
}

/* サブタイトル（地域と共生など）の調整 */
.project-header h3 span {
}



.project-content p {
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* 運営・補助金エリア */
.footer-info {
}

.info-box {
    padding: 40px;
    border-radius: 30px;
}

.subsidy {
}
}

@media (min-width: 991px){
    /* ==========================================================================
   下層ページ（About）
   ========================================================================== */
/* 「私たちの想い」セクションの背景装飾 */
.section-thought {
    
     /* ロゴがはみ出さないように */
    
    /* 既存のドット背景と組み合わせる場合 */
}

.section-thought .container {
    
     /* テキストをロゴより上にする */
}

/* 背景ロゴの配置 */
.section-thought::before {

}

/* よりポップにするなら：右下や左上にも小さく配置 */
.section-thought::after {}


.message-block p {
}

/* プロジェクト紹介（3つの柱）：カード形式をポップに */
.project-item {
    
    
    
     /* 角丸を大きく */
     /* 太い枠線 */
     /* 黄色の強い影（ベタ塗り） */
}


/* プロジェクトヘッダーのバランス調整 */
.project-header {
    
     /* 「T」の底辺とタイトルを合わせる */
}

/* 縁取り「T」のサイズと位置を固定 */
.t-letter {
     /* サイズ固定 */
    
    
     /* 下の余白を詰める */
    
    
    
     /* Tが潰れないように */
}

/* タイトルとサブタイトルを縦に並べるコンテナ */
.project-title-group {
}

.project-header h3 {
    
    
    
    
    
     /* 英語タイトルと日本語を揃える */
    flex-direction: initial;
}

/* サブタイトル（地域と共生など）の調整 */
.project-header h3 span {
}



.project-content p {
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* 運営・補助金エリア */
.footer-info {
}

.info-box {
}

.subsidy {
}
}
@media (min-width: 1200px){
    /* ==========================================================================
   下層ページ（About）
   ========================================================================== */
/* 「私たちの想い」セクションの背景装飾 */
.section-thought {
    
     /* ロゴがはみ出さないように */
    
    /* 既存のドット背景と組み合わせる場合 */
}

.section-thought .container {
    
     /* テキストをロゴより上にする */
}

/* 背景ロゴの配置 */
.section-thought::before {

}

/* よりポップにするなら：右下や左上にも小さく配置 */
.section-thought::after {

}


.message-block p {
}

/* プロジェクト紹介（3つの柱）：カード形式をポップに */
.project-item {
    
    
    
     /* 角丸を大きく */
     /* 太い枠線 */
     /* 黄色の強い影（ベタ塗り） */
}


/* プロジェクトヘッダーのバランス調整 */
.project-header {
     /* 「T」の底辺とタイトルを合わせる */
}

/* 縁取り「T」のサイズと位置を固定 */
.t-letter {

}


.project-title-group {}

.project-header h3 {}
.project-header h3 span {
}



.project-content p {
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* 運営・補助金エリア */
.footer-info {
}

.info-box {
}

.subsidy {
}
}