span.indexline {
    display: inline-block;
    border-right: 1px solid #b8a58b;
    padding-right: 15px;
}



span.hidd {
    margin-top: 3rem;
    color: #fff;
    letter-spacing: 15px;
}

.soci {
    background-color: #bbaea1;
    border-radius: 50%;
}

/* 底部紋理背景模擬 */
.bg01 {
    background-position: right bottom;
    background-image: url(../images/bg.png) !important;
    background-repeat: no-repeat;

}
.footerindex{
    color: #37553c;
}
.footerindex a{
    color: #37553c;
    text-decoration: none;
}
.footerindex a:hover{
    color: #557f5b;    
}





/* 中文標題 */
.news-title-tw {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 12px;
    /* 寬字距 */
    margin-right: -12px;
    /* 抵銷最後一個字的字距，確保視覺完美置中與對齊 */
    white-space: nowrap;
}

/* 中間的裝飾線 */
.news-divider {
    height: 1px;
    background-color: #b3a58b;
    /* 視覺稿中的卡其/金色 */
    margin: 0 40px;
    /* 線條與左右文字的呼吸空間 */
}

/* 英文標題 */
.news-title-en {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 10px;

    white-space: nowrap;
}
.footer01 a{
    color: #b8a58b;
    text-decoration: none;
    padding: 0 5px;
}





/* --- 共通的圓形按鈕樣式 --- */
.social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    /* 圓形寬度 */
    height: 45px;
    /* 圓形高度 */
    background-color: #b3a58b;
    /* 卡其/奶茶色背景 */
    border-radius: 50%;
    /* 變成正圓形 */
    text-decoration: none;
    /* 移除連結底線 */
    position: relative;
    /* 為了內部圖示的絕對定位做準備 */
    overflow: hidden;
    /* 確保超出的部分被隱藏 (特別是 Facebook 底部) */
    transition: transform 0.3s ease, background-color 0.3s ease;
    /* 加入滑鼠懸停的轉場動畫 */
}

/* 滑鼠懸停時的微互動 (可依需求調整或移除) */
.social-btn:hover {
    transform: translateY(-3px);
    background-color: #a3957a;
}

/* --- 圖示共通顏色 --- */
.social-btn i {
    color: #37503d;
    /* 深綠色圖示 */
}

/* --- Facebook 專屬微調 --- */
.social-btn .fa-facebook-f {
    font-size: 40px;
    /* 調整 f 的大小 */
    position: absolute;
    bottom: -4px;
    /* 將 f 往下推，使其貼齊或略微超出圓形底部，配合 overflow: hidden 切齊 */
    right: 10px;
    /* 調整水平位置使其視覺置中 */
}

/* --- Instagram 專屬微調 --- */
.social-btn .fa-instagram {
    font-size: 32px;
}

.socialbox {
    position: fixed !important;
    bottom: 40px;
    right: 20px;
}


/* 引入適合的 Serif (明體/宋體) 字體以符合原圖優雅風格 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&family=Noto+Serif+TC:wght@300;400&display=swap');

.theme-section {
    background-color: #3e5343;
    /* 原圖深綠色背景 */
    color: #f4f4f4;
    /* 柔和的白色文字 */
    font-family: 'Noto Serif TC', 'Noto Serif JP', serif;
    min-height: 70vh;
}

/* 上方橫排標題字距設定 */
.title-horizontal {
    letter-spacing: 2rem;
    text-indent: 2rem;
    /* 修正最後一個字造成的置中偏移 */
    font-weight: 300;
}

/* 直排排版容器設定 */
.vertical-wrapper {
    display: flex;
    flex-direction: row-reverse;
    /* 讓日文區塊在右，中文區塊在左 */
    justify-content: center;
    flex-wrap: wrap;
    /* 手機版自動折行 */
}

/* 直式文字設定 */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 2.5;
    letter-spacing: 0.2rem;
    font-weight: 300;
}
.aboutp{
    letter-spacing: 24px;
    text-align: center;
    padding-bottom: 30px;
    margin-top: 10px;
    }
.aboutp span{
    display: inline-block;
}

/* 姓名樣式 (小 小 Katherine) */
        .name-col {           
            letter-spacing: 1px;           
            line-height: 1.8;
        }

        /* 右側中文內文樣式 */
        .content-tw {
           
            line-height: 2;
            letter-spacing: 3px;
          
           0, 0, 0.6); 
        }

        /* 右側英文內文樣式 */
        .content-en {           
            line-height: 2;
            letter-spacing: 1.5px;
            font-weight: 300;
            0, 0, 0.6);
        }



@media (min-width: 1640px) {
    .pr20{
        margin-right: 100px;
    }
  
    div.pattoo {
        padding-top: 10rem !important;
    }

    .divhero {
        position: absolute;
        right: 0px;
        top: -60px;
        z-index: -1;

    }

    .pb-30 {
        padding-bottom: 28rem !important;
    }
    

}



@media (max-width: 768px) {
    .news-divider {
        margin: 0 20px;
    }

    .news-title-tw,
    .news-title-en {
        font-size: 0.9rem;
    }

    .news-title-tw {
        letter-spacing: 6px;
        margin-right: -6px;
    }

    .news-title-en {
        letter-spacing: 4px;
        margin-right: -4px;
    }

    .title-horizontal {
        letter-spacing: 0.8rem;
        text-indent: 0.8rem;
    }

    .vertical-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 3rem !important;
        /* 手機版時加大中日文區塊的間距 */
    }
}
@media (max-width: 991px) {
    /* 標題微調 */
    .title-horizontal {
      letter-spacing: 0.8rem;
      text-indent: 0.8rem;
      margin-bottom: 1.5rem !important;
    }
    
    /* 容器改為上下排列 */
    .vertical-wrapper {
      flex-direction: column; 
      align-items: center;
      gap: 2.5rem !important; /* 中日文區塊的上下間距 */
    }

    /* 文字強制轉為橫排 */
    .vertical-text {
      writing-mode: horizontal-tb; /* 轉為橫式 */
      text-align: center; /* 橫排時置中對齊 */
      line-height: 2;
      letter-spacing: 0.1rem;
    }
    
    /* 橫排時的段落底部間距 */
    .vertical-text p {
      margin-bottom: 0.5rem !important;
    }
  }




@media screen and (min-width:100px) and (max-width:767px) {
    span.hidd {
        display: none;
    }

}


.warmth-project-section {
    background-color: #325641;
    /* 沿用卡其/沙色基底 */
    overflow: hidden;
    /* 防止內部絕對定位的圖片與裝飾圖形超出邊界產生 X 軸 */
}

/* 突破帶有 Padding 的父容器，實現滿版背景 */
.warmth-full-width {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .warmth-full-width {
        margin-left: -6rem;
        margin-right: -6rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}