/*
Theme Name: 豐藤
Theme URI: https://toyofuji.com
Author: GeneDesign
*/


/*240419開發日誌*/

    figure{margin: 0;}
.lang-tw{display:block;}
.lang-en{display:none;}
.lang-jp{display:none;}

.lang-en, .lang-tw,.lang-jp{
    transition: opacity 3s ease;
    opacity: 1;
}

.termsText{padding: 10%;}

.hidden {
    opacity: 0;
    pointer-events: none; /* 防止隱藏的元素在動畫期間被點擊 */
}


.gIndexSlider::after{
        content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5018382352941176) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 0) 66%, rgba(0, 0, 0, 0.196516106442577) 100%);
}

/*240419開發日誌*/

@font-face {
    font-family: 'Lora';
    src: url('fonts/lora/Lora-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('fonts/lora/Lora-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('fonts/lora/Lora-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Lora';
    src: url('fonts/lora/Lora-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'noto-serif';
    src: url('fonts/notoSerif/NotoSerifTC-Regular.otf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'noto-serif';
    src: url('fonts/notoSerif/NotoSerifTC-Medium.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'noto-serif';
    src: url('fonts/notoSerif/NotoSerifTC-Light.otf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'noto-serif';
    src: url('fonts/notoSerif/NotoSerifTC-Bold.otf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

div{box-sizing: border-box; position: relative;}
body{background-color:#edebe6; color:#835d54;   margin: 0;
    padding: 0; font-family: 'Lora','noto-serif';overflow-x:hidden;
}
a{
    text-decoration: none;
    color:#835d54;
}
p,span,div{color:#835d54;font-family: "myriad-variable", sans-serif,'noto-serif';
    font-variation-settings: "wdth" 100, "wght" 400;} 
.lang-ch{display:block;}
.lang-jp{display:none;}
.lang-en{display:none;}
.mainContent{overflow: hidden;}

@media screen and (min-width: 900px) {
    #menu-toggle{display:none;}
.FTBannerMo{display:none;}
      #MobileHeader{display:none;}
      #gHeaderSection{display: flex;
    position: relative;
    justify-content: space-between;
    padding: 2% 5%;}
    .gLogo img{height: 3vw;}
    .FTBanner img{width:100%;}
      .FTslider{position: relative;
        z-index: 99;}
    .FTSliderLOGO{position: absolute;
    z-index: 9;
    top: 36%;
    left: 50%;
    transform: translateX(-50%);}  
    .FTSliderLOGO img{width: 7vw;}
    .Section01-1-1 img{width: 7vw;}
    .Section01-1-3{
        top: -5vw;
    }
    .FTtitle{
                font-size: 8vw;
        opacity: 0.2;position: relative;}
    .Section01{        display: flex;
        justify-content: space-between;
        padding: 0px 3%;
        margin: 3vw 0;
    }
    .Section01-1-4{        position: absolute;
        width: 6vw;
        mix-blend-mode: color-burn;} 
        .Section01-1-4 img{
        width: 100%;} 
    .index-logo{        top: 9vw;
        left: 23vw;}
    .Aboutindex-logo{top: 4vw;
        left: 11vw;}
    .serviceindex-logo{top: 7.5vw;
        left: 28vw;}    
    .Section01-2-1{ top: -16px;} 
    .FTLingR{width: 2vw;
    background: #835d54;
    height: 20vw;
   }
   .Section01-2{display: flex; gap:9px;}
   .Section01-2-2{writing-mode: vertical-lr;
    letter-spacing: 2px;
}
.Section01-2 .FTLingR{width: 2vw;
        background: #835d54;
        height: 25vw;
        top: -8vw;
        z-index: -1;
   }

/*index*/

.indexSection02{display: flex;
        justify-content: space-between;
        padding: 0 5%;
    }
.Section02-1{width:50%;}
.Section02-2{width:50%;}
.Section02-1 img{        width: 10vw;
        left: 10vw;
        position: relative;
        top: 10vw;
    }
.Section02-2-1-1,.Section02-2-1-2,.Section02-2-1-3{        position: absolute;
        z-index: 9;
        letter-spacing: 3px;
        top: 10vw;}
.indexbkimg01{width: 80vw;
        position: relative;
        right: 16%;}
        
.indexSection03{margin:-45vw 0 0 0;}
.indexSection03 >figure>img{width:100%;z-index: 9;
    position: relative;}
.S3contentM{
        position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 15% 0;
    gap: 5vw;
    z-index: 10;
}


.inS3title,.inS3titleDr, .inS3content{
    color: white;
        text-align: center;
        padding: 0;
        margin: 0;}
.inS3title{
        font-size: 3vw;
}
.inS3titleDr{
   margin: 1vw; 
}
.inS3content{
 font-size: 1.5vw;
    letter-spacing: 2px;
    line-height: 2;
    padding: 0 30%;   
}        
        
.indexSection04{
    background:white;
    width:100vw;
    margin-top: -10vw;
   padding-bottom: 20vw;
}
.inS3imgB{
      position: absolute;
        z-index: 8;
        width: 80%;
        top: -35vw;
        left: -45vw;
}

 .Section04-1{        display: flex;
        gap: 9px;
        z-index: 8;
        align-items: flex-end;
        left: 5vw;
        top: 5vw;
    }
   .Section04-1-2{
    letter-spacing: 2px;
}

.Section04-2{flex-direction: column;
        display: flex;
        gap: 10vw;}
.Section04-2-1,.Section04-2-2{
flex-direction: row;
        z-index: 9;
        padding: 0px 13%;
        display: flex;
        align-items: center;
        gap: 5vw;
}
.Section04-2-2{flex-direction: row-reverse;}
.Section04-2-1 div,.Section04-2-2 div{width:50%;}
.Section04-2-1Content p, .Section04-2-2Content p{letter-spacing: 2px;
        line-height: 2;
        font-size: 1.1vw;
    }
.inS4button{display: flex;
    align-items: center;
    margin-top: 4vw;
}
.inS4button a{width: 42%;
        position: relative;
        display: block;
        font-size: 0.9vw;
        letter-spacing: 2px;}
.inS4button img{width: 34%;
        height: 14%;}
div.FTlineC01{    height: 1vw;
    background: #835d54;
    left: 65%;
    width: 100%;}
div.FTlineC02{    height: 1vw;
    background: #835d54;
    right: 65%;
    width: 100%;}



.abindexSection02{
    margin-top: -16vw;
}
.abSection02-1 .abimg01{
    width: 100vw;
    padding: 0px 7%;
    box-sizing: border-box;
}

.abSection02-1 .abimg02{
   width: 100vw;
    position: absolute;
    top: 6vw;
    padding: 0 33%;
    box-sizing: border-box;
}

.abSection02-2{
    position: absolute;
    top: 29vw;
    font-size: 1.2vw;
    line-height: 2;
    letter-spacing: 2px;
    padding: 0 21%;
}
.abindexSection03{
    margin:10% 0;
}
.abindexSection03 figure img{
        width: 100vw;
    padding: 0 5%;
    box-sizing: border-box;
}

.abS3content{display: flex;
        justify-content: center;
        gap: 10px;
        position: relative;
        top: -13vw;
        flex-direction: column;
}
.leftblock p{text-align: justify;
        margin: 0;}
.rightblock p{
        margin: 0;}
.leftblock p::after{
    content: '';
    display: inline-block;
    width: 100%;
}
.absGroup .list::after{
    content: '';
    display: inline-block;
    width: 100%;
}
.rightblock{width: 35%;}
.abS3content p{letter-spacing: 2px;
        font-size: 1.2vw;}
.abLine{
    width: 54vw;
    border-top: #835d54 1px dashed;
    margin: 4vw auto;
    position: relative;
}        

.absGroup{display: flex;
        width: 100vw;
        justify-content: flex-start;
        padding: 0 23vw 0 26vw;
        gap: 1vw;
        margin: 1vw 0;
        letter-spacing: 2px;
}
.lang-ch .absGroup .list{width: 6vw;text-align: justify;}
.lang-jp .absGroup .list{width: 8vw;text-align: justify;}
.lang-en .absGroup .list{width: 9vw;}
.absGroup .adj{width: 1vw;}
.absGroup .con{width: 38vw;}
.serP1{letter-spacing: 2px;
        line-height: 2;
        font-size: 1.2vw;
        width: 60vw;
        margin: 0 auto;}
    
.serviceS2{background: white;
        margin-top: 5vw;
        margin-bottom: -5vw;
        padding-top: 5vw;
        padding-bottom: 15vw;
        letter-spacing: 2px;
        line-height: 2;
        font-size: 1.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6vw;
}    
.serviceS2c{
display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    
}
.Sernarrow{width: 1vw;}
.Sercontent{width: 27vw;
    text-align: center;}

.serviceS2-1 .Sericon img{width:5vw;}
.serviceS2-2 .Sericon img{width:8vw;}
.serviceS2-3 .Sericon img{width:16vw;}
    
.contactContent{        text-align: center;
        margin: -10vw 0 10vw 0;
        font-size: 1.2vw;
        letter-spacing: 2px;
        line-height: 1;
    }
.lang-adj{font-size: 0.9vw;}    
       
}
 .abimg03{display:none;}
@media screen and (max-width: 900px) {

    .abimg02{display:none;}
      #MobileHeader{display:none;}
      #gHeaderSection{display: flex;
              overflow: hidden;
    position: relative;
    justify-content: space-between;
    padding: 2% 5%;}
    .gLogo img{height: 7vw;
        position: relative;
        top: 2vw;}
    .FTBanner img{width:100%;}
      .FTslider{position: relative;
        z-index: 99;}
    .FTSliderLOGO{position: absolute;
    z-index: 9;
    top: 31%;
    left: 50%;
    transform: translateX(-50%);}  
    .FTSliderLOGO img{width: 21vw;}
    .Section01-1-1 img{width: 7vw;}
    .Section01-1-3{
        top: -5vw;
    }
    .FTtitle{
                font-size: 8vw;
        opacity: 0.2;position: relative;}
    .Section01{        display: flex;
        justify-content: space-between;
        padding: 0px 3%;
        margin: 3vw 0;
    }
    .Section01-1-4{        position: absolute;
        width: 6vw;
        mix-blend-mode: color-burn;} 
        .Section01-1-4 img{
        width: 100%;} 
    .index-logo{        top: 9vw;
        left: 23vw;}
    .Aboutindex-logo{top: 4vw;
        left: 11vw;}
    .serviceindex-logo{top: 7.5vw;
        left: 28vw;}    
    .Section01-2-1{ top: -16px;} 
    .FTLingR{width: 2vw;
    background: #835d54;
    height: 20vw;
   }
   .Section01-2{display: flex; gap:9px;}
   .Section01-2-2{writing-mode: vertical-lr;
    letter-spacing: 2px;
}
.Section01-2 .FTLingR{width: 2vw;
        background: #835d54;
        height: 25vw;
        top: -8vw;
        z-index: -1;
   }

/*index*/

.indexSection02{display: flex;
        justify-content: center;
        padding: 0 5%;
    }
.Section02-1{        position: absolute;
        z-index: 9;}
.Section02-2{        width: 100%;
        display: flex;
        justify-content: center;}
.Section02-1 img{width: 14vw;
        position: absolute;
        top: 49vw;
        transform: translateX(-50%);
    
    }
.Section02-2-1-1,.Section02-2-1-2,.Section02-2-1-3{position: absolute;
        z-index: 9;
        letter-spacing: 3px;
        top: 16vw;
        padding: 0 12%;}
.indexbkimg01{        width: 80vw;
        position: relative;
        margin: 0 auto;}
.indexSection03{
    overflow: hidden;
}        
.indexSection03{margin:16vw 0 0 0;}
.indexSection03 >figure>img{width: 200vw;
        z-index: 9;
        position: relative;
        max-width: 200vw;
    }
.S3contentM{
        position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 15% 0;
    gap: 5vw;
    z-index: 10;
}


.inS3title,.inS3titleDr, .inS3content{
    color: white;
        text-align: center;
        padding: 0;
        margin: 0;}
.inS3title{
    font-size: 7vw;
}
.inS3titleDr{
   margin: 1vw; 
}
.inS3content{
 font-size: 4vw;
        letter-spacing: 1px;
        line-height: 1.5;
        padding: 0px 12%;
        margin: 10vw 0 0 0;
}        
        
.indexSection04{
    background:white;
    width:100vw;
    margin-top: -10vw;
   padding-bottom: 20vw;
}
.inS3imgB{
      position: absolute;
        z-index: 8;
        width: 80%;
        top: -35vw;
        left: -45vw;
}

 .Section04-1{        display: flex;
        gap: 9px;
        z-index: 8;
        align-items: flex-end;
        left: 5vw;
        top: 5vw;
    }
   .Section04-1-2{
    letter-spacing: 0px;
        font-size: 3vw;
    
}

.Section04-2{flex-direction: column;
        display: flex;
        gap: 10vw;
        margin: 14vw 0 0 0px;
    }
.Section04-2-1,.Section04-2-2{
flex-direction: column-reverse;
        z-index: 9;
        padding: 0px 13%;
        display: flex;
        align-items: center;
        gap: 5vw;
    
}
.Section04-2-2{}
.Section04-2-1 div,.Section04-2-2 div{width:100%;}
.Section04-2-1Content p, .Section04-2-2Content p{letter-spacing: 0px;
        line-height: 2;
        font-size: 4vw;
    }
.inS4button{display: flex;
    align-items: center;
    margin-top: 9vw;
}
.inS4button a{width: 28%;
        position: relative;
        display: block;
        font-size: 2.5vw;
        letter-spacing: 2px;}
.inS4button img{width: 28%;
        height: 14%;}
div.FTlineC01{height: 1vw;
        background: #835d54;
        left: 65%;
        width: 100%;
        display: none;}
div.FTlineC02{        height: 1vw;
        background: #835d54;
        right: 65%;
        width: 100%;
        display: none;}



.abindexSection02{
    margin-top: -16vw;
}
.abSection02-1 .abimg01{        width: 210vw;
        padding: 0px 7%;
        box-sizing: border-box;
        left: -55vw;
        position: relative;
        top: 11vh;
}

.abSection02-1 .abimg03{
  width: 100vw;
        z-index: 99;
        position: absolute;
        padding: 0 14%;
        box-sizing: border-box;
        top: 37vw;
        display: block;
}

.abSection02-2{
    position: absolute;
        top: 110vw;
        font-size: 3.5vw;
        line-height: 1.5;
        letter-spacing: 1px;
        padding: 0px 8%;
}
.abSection02-2 .lang-ch{line-height: 2;
    letter-spacing: 2px;}

.abindexSection03{
    margin:40% 0 0;
}
.abindexSection03 figure img{width: 100vw;
        box-sizing: border-box;
        position: relative;
    
}

.abS3content{display: flex;
        justify-content: center;
        gap: 10px;
        position: relative;
        top: -13vw;
        flex-direction: column;
}
.leftblock p{text-align: justify;
        margin: 0;}
.rightblock p{
        margin: 0;}
.leftblock p::after{
    content: '';
    display: inline-block;
    width: 100%;
}
.absGroup .list::after{
    content: '';
    display: inline-block;
    width: 100%;
}
.rightblock{width: 35%;}
.abS3content p{letter-spacing: 2px;
        font-size: 1.2vw;}
.abLine{
    width: 54vw;
    border-top: #835d54 1px dashed;
    margin: 4vw auto;
    position: relative;
}        

.absGroup{        display: flex;
        width: 100vw;
        justify-content: flex-start;
        padding: 0 0px 0 10vw;
        gap: 1vw;
        margin: 1vw 0;
        letter-spacing: 1px;
        font-size: 3vw;
}
.lang-ch .absGroup .list{width: 17vw;text-align: justify;}
.lang-jp .absGroup .list{width: 19vw;text-align: justify;}
.lang-en .absGroup .list{width: 23vw;}
.absGroup .adj{width: 3vw;}
.absGroup .con{width: 60vw;}
.serP1{letter-spacing: 2px;
        line-height: 2;
        font-size: 3.5vw;
        width: 82vw;
        margin: 0 auto;}
    
.serviceS2{background: white;
        margin-top: 5vw;
        margin-bottom: -5vw;
        padding-top: 5vw;
        padding-bottom: 15vw;
        letter-spacing: 2px;
        line-height: 2;
        font-size: 1.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6vw;
}    
.serviceS2c{
display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2vw;
        font-size: 3vw;
    
}
.Sernarrow{width: 1vw;}
.Sercontent{width: 58vw;
    text-align: center;}

.serviceS2-1 .Sericon img{width:13vw;}
.serviceS2-2 .Sericon img{width: 23vw;
        left: 4vw;
        position: relative;
    }
.serviceS2-3 .Sericon img{        text-align: center;
        margin: -10vw 0 10vw 0;
        font-size: 3.5vw;
        letter-spacing: 2px;
        line-height: 1;}
    
.contactContent{text-align: center;
        margin: -1vw auto 15vw;
        font-size: 3.5vw;
        letter-spacing: 2px;
        line-height: 1;
        width: 77%;
    }
.lang-adj{font-size: 0.9vw;}    
.FTBannerPC{display:none;}
       
}  
    


@media (max-width: 900px) {

/* 預設隱藏選單，並設置動畫 */
.headerRightMenu {
    position: fixed;
    top: 0;
    left: -100%; /* 選單從螢幕外部開始 */
    width: 75%; /* 4/3 螢幕寬度 */
    height: 100%;
    background-color: #333;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 9999;
}

/* 選單項目樣式 */
.headerRightMenu li {
    border-bottom: 1px solid white;
    list-style: none;
    padding: 20px;
}

.headerRightMenu li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

/* 三條槓線按鈕樣式 */
.menu-toggle {
            padding: 0;
  font-size: 30px;
        background: none;
        border: none;
        color: #835d54;
        cursor: pointer;
        position: relative;
        top: 0px;
        left: 0;
        z-index: 10000;
}

/* 當螢幕小於 900px 時啟用選單切換 */

    .headerRightMenu {
        left: -100%; /* 預設選單在螢幕左側外部 */
    }
    
    /* 顯示三條槓線按鈕 */
    .menu-toggle {
        display: block;
    }

    /* 當選單展開時 */
    .headerRightMenu.active {
        left: 0; /* 選單滑入螢幕內 */
    }
    
    
.MnavLogo{
    padding: 0 32%;
        bottom: -47vw;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height: auto;
}

#footer01>ul li:first-child {
    font-weight: bold;
    font-size: 4vw;
    margin-bottom: 4vw;
}
#footer02>ul li:first-child {
    font-weight: bold;
    font-size: 4vw;
    margin-bottom: 4vw;
}
#footer03>ul li:first-child {
    font-weight: bold;
    font-size: 4vw;
    margin-bottom: 4vw;
}

}