section.wrapper{
    margin-top: 110px;
    overflow: hidden;
}

/* page01 */
.page01 {
    padding-left: 3.15%;
    padding-bottom: 0%;
}

.page01 .pageRow {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    -webkit-justify-content: space-between;
    -webkit-align-items: stretch;
}

.page01 .leftBox{
    display: flex;
    flex-direction: column;
}

.page01 .leftBox .textArea {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: 5%;
}

.page01 .leftBox .textArea > .col-12{
    flex: 0 0 auto;
}

.page01 .leftBox .title{
    margin-top: 0.6%;
}

.page01 .leftBox .title p {
    font-size: 4rem;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-family: linotype-didot, serif;
    font-weight: 400;
    font-style: normal;
    color: #5A5854;
}

.page01 .leftBox .subtitle p {
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    line-height: 4;
    font-weight: 500;
    color: #d93630;
}

.page01 .leftBox .bottomTxtTitle {
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    /* margin-top: 25.6%; */
    color: #5A5854;
}

.page01 .leftBox .bottomTxtTitle .dash{
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    /* margin-top: 25.6%; */
    color: #d93630;
}

.page01 .leftBox .bottomTxtTitle span{
    font-size: 1.75rem;
    letter-spacing: 0.2em;
    line-height: 2.57;
    font-family: linotype-didot-headline, serif;
    font-weight: 400;
    font-style: normal;
}

.page01 .leftBox .bottomTxtSubTitle {
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.11;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    margin: 5% 0%;
    color: #000;
}

.page01 .leftBox p.content {
    font-size: var(--fs);
    letter-spacing: 0.2em;
    line-height: var(--lh-mult);
    font-weight: 400;
    color: #5A5854;
    --fs: 1.25rem;
    --lh-mult: 2.46;
    --line-height: calc(var(--fs) * var(--lh-mult));
    --leading: calc(var(--line-height) - var(--fs));
    transform: translateY(calc(1 * (var(--leading) / 2)));
}

.page01 .rightBox .innerImg {
    width: 100%;
    height: 101.8vh;
    padding-top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.page02{
    --anim-duration: 900ms; /* 改這個即可調整整體動畫時間 */
    padding-top: 19.0039%;
}

.page02 .pageImgBox{
    width: 67vw;
    margin: 0 auto;
    margin-bottom: 2.5%;
    overflow: hidden;
}

.page02 .pageImgBox .boxList{
    width: 202vw;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    transition: transform var(--anim-duration) ease;
    will-change: transform;
    transform: translateX(0);
}

.page02 .pageImgBox .boxList .imgBox{
    width: calc(202vw / 3);
    padding-top: 17.7%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.page02 .pageTxtBox{
    width: 80vw;
    margin: 0 auto;
}

.page02 .pageTxtBox .txtList{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.page02 .pageTxtBox .txtBox{
    width: calc(100% / 3.6);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease;
    pointer-events: none;
}

/* 進場顯示（opacity/transform） */
.page02 .pageTxtBox .txtBox.visible{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* 最終活躍狀態（視覺顏色變換） */
.page02 .pageTxtBox .txtBox.active {
  /* 保留 visible 的效果，active 觸發文字顏色變化 */
}

/* 標題與內文字色、並同步動畫時間 */
.page02 .pageTxtBox .txtBox .title{
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 1.29;
    color: #000;
    padding-bottom: 7%;
    transition: color var(--anim-duration) ease;
}

.page02 .pageTxtBox .txtBox .title span{
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 1.29;
    color: #000;
    padding-bottom: 7%;
    transition: color var(--anim-duration) ease;
}

.page02 .pageTxtBox .txtBox .content{
    font-size: 1.125rem;
    letter-spacing: 0.2em;
    line-height: 2;
    color: #000;
    transition: color var(--anim-duration) ease;
}

/* active 時變色 */
.page02 .pageTxtBox .txtBox.active .title{
    color: #666666;
}

.page02 .pageTxtBox .txtBox.active .content{
    color: #999999;
}

.page02 .pageTxtBox .txtBox.active .title span{
    color: #d93630;
}

/* page03 */
.page03{
    width: 80vw;
    margin: 0 auto;
    padding-top: 19.0039%;
}

.page03 .pageTxt{
    width: 100%;
    text-align: center;
    margin-bottom: 5.145%;
}

.page03 .pageTxt .title{
    font-size: 1.75rem;      /* 28px */
    letter-spacing: 0.2em;   /* ≈ 5.6px */
    line-height: 2.57;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    color: #5A5854;
    padding-bottom: 2%;
}

.page03 .pageTxt .title .dash{
    font-size: 1.75rem;      /* 28px */
    letter-spacing: 0.2em;   /* ≈ 5.6px */
    line-height: 2.57;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    color: #d93630;
    padding-bottom: 2%;
}

.page03 .pageTxt .title span {
    font-size: 1.75rem;      /* 28px */
    letter-spacing: 0.2em;   /* ≈ 5.6px */
    line-height: 2.57;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    color: #5A5854;
}

.page03 .pageTxt p.content{
    text-align: center;
    font-weight: 500;
    font-size: 1.5rem;       /* 24px */
    letter-spacing: 0.2em;   /* ≈ 4.8px */
    line-height: 3;
    color: #5A5854;
}

.page03 .pageImg{
    width: 28.5vw;
    margin: 0 auto;
}

/* page04 */
.page04{
    width: 80vw;
    margin: 0 auto;
    padding-top: 19.0039%;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}

.page04 .pageTxt{
    width: 33vw;
    display: flex;
    flex-direction: column;
}

.page04 .titleArea .title p {
    font-size: 4rem;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-family: linotype-didot, serif;
    font-weight: 400;
    font-style: normal;
    color: #5A5854;
}

.page04 .titleArea .subtitle p {
    font-size: 1.375rem;
    letter-spacing: 4.8px;
    font-weight: 500;
    color: #d93630;
}

.page04 .txtArea {
    margin-top: 8%;
}

.page04 .txtArea .subtitle {
    font-size: 1.75rem;      /* 28px */
    letter-spacing: 0.2em;   /* ≈ 5.6px */
    line-height: 1.29;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: #5A5854;
}

.page04 .txtArea p.content {
    font-size: 1.125rem;     /* 18px */
    letter-spacing: 0.2em;   /* ≈ 3.6px */
    line-height: 2;
    font-weight: 300;
    color: #5A5854;
}

.page04 .pageImg{
    width: 33vw;
}

/* page05 */
.page05{
    width: 80vw;
    margin: 0 auto;
    padding-top: 19.0039%;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}

.page05 .pageTxt{
    width: 33vw;
    display: flex;
    flex-direction: column;
}

.page05 .titleArea .title p {
    font-size: 4rem;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-family: linotype-didot, serif;
    font-weight: 400;
    font-style: normal;
    color: #5A5854;
}

.page05 .titleArea .subtitle p {
    font-size: 1.375rem;
    letter-spacing: 4.8px;
    font-weight: 500;
    color: #d93630;
}

.page05 .txtArea {
    margin-top: 8%;
}

.page05 .txtArea .subtitle {
    font-size: 1.75rem;      /* 28px */
    letter-spacing: 0.2em;   /* ≈ 5.6px */
    line-height: 1.29;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: #5A5854;
}

.page05 .txtArea p.content {
    font-size: 1.125rem;     /* 18px */
    letter-spacing: 0.2em;   /* ≈ 3.6px */
    line-height: 2;
    font-weight: 300;
    color: #5A5854;
}

.page05 .pageImg{
    width: 33vw;
}

/* page06 */
.page06{
    width: 80vw;
    margin: 0 auto;
    padding: 19.0039% 0%;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}

.page06 .pageTxt{
    width: 33vw;
    display: flex;
    flex-direction: column;
}

.page06 .titleArea .title p {
    font-size: 4rem;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-family: linotype-didot, serif;
    font-weight: 400;
    font-style: normal;
    color: #5A5854;
}

.page06 .titleArea .subtitle p {
    font-size: 1.375rem;
    letter-spacing: 4.8px;
    font-weight: 500;
    color: #d93630;
}

.page06 .txtArea {
    margin-top: 8%;
}

.page06 .txtArea .subtitle {
    font-size: 1.75rem;      /* 28px */
    letter-spacing: 0.2em;   /* ≈ 5.6px */
    line-height: 1.29;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: #5A5854;
}

.page06 .txtArea p.content {
    font-size: 1.125rem;     /* 18px */
    letter-spacing: 0.2em;   /* ≈ 3.6px */
    line-height: 2;
    font-weight: 300;
    color: #5A5854;
}

.page06 .pageImg{
    width: 33vw;
}

@media screen and (max-height: 947px){
    .page01 .leftBox .bottomTxtTitle {
        /* margin-top: 29.6%; */
    }
}

@media screen and (max-width:1537px) and (max-height: 731px){
    .page01 .leftBox .title p{
        font-size: 3.4375rem;
    }

    .page04 .titleArea .title p, .page05 .titleArea .title p, .page06 .titleArea .title p{
        font-size: 3.125rem;
    }

    .page01 .leftBox .bottomTxtTitle, .page01 .leftBox .bottomTxtTitle .dash{
        font-size: 1.5rem;
        /* margin-top: 17%; */
    }

   .page01 .leftBox .bottomTxtSubTitle{
        font-size: 1.5rem;
    }
    
    .page01 .leftBox p.content{
        font-size: 1.25rem;
    }

    .page01 .rightBox .innerImg {
        padding-top: 110.6vh;
    }
    
    .page02 .pageTxtBox .txtBox .title, .page02 .pageTxtBox .txtBox .title span{
        font-size: 1.5rem;
    }

    .page02 .pageTxtBox .txtBox .content{
        font-size: 1rem;
    }
    
    .page03 .pageTxt .title, .page03 .pageTxt .title .dash{
        font-size: 1.5rem;
    }

    .page03 .pageTxt .title span {
        font-size: 1.5rem;
    }

    .page03 .pageTxt p.content{
        font-size: 1.25rem;
    }

    .page04 .txtArea .subtitle{
        font-size: 1.5rem;
    }

    .page04 .txtArea p.content{
        font-size: 1rem;
    }

    .page05 .txtArea .subtitle{
        font-size: 1.5rem;
    }
    
    .page05 .txtArea p.content{
        font-size: 1rem;
    }

    .page06 .txtArea .subtitle{
        font-size: 1.5rem;
    }
    
    .page06 .txtArea p.content{
        font-size: 1rem;
    }
}

@media screen and (max-width:1400px){
    .page04 .titleArea .title p, .page05 .titleArea .title p, .page06 .titleArea .title p{
        font-size: 2.8125rem;
    }

    .page01 .rightBox .innerImg {
        padding-top: 110.9vh;
    }

    .page01 .leftBox .bottomTxtTitle, .page01 .leftBox .bottomTxtTitle .dash{
        font-size: 1.25rem;
        margin-top: 20%;
    }

    .page01 .leftBox .bottomTxtSubTitle{
        font-size: 1.25rem;
    }
    
    .page01 .leftBox p.content{
        font-size: 1.125rem;
    }
        
    .page02 .pageTxtBox .txtBox .title, .page02 .pageTxtBox .txtBox .title span{
        font-size: 1.25rem;
    }

    .page02 .pageTxtBox .txtBox .content{
        font-size: 1.125rem;
    }
    
    .page03 .pageTxt .title, .page03 .pageTxt .title .dash{
        font-size: 1.25rem;
    }

    .page03 .pageTxt .title span {
        font-size: 1.25rem;
    }

    .page03 .pageTxt p.content{
        font-size: 1.125rem;
    }

    .page04 .txtArea .subtitle{
        font-size: 1.25rem;
    }

    .page04 .txtArea p.content{
        font-size: 1rem;
    }

    .page05 .txtArea .subtitle{
        font-size: 1.25rem;
    }
    
    .page05 .txtArea p.content{
        font-size: 1rem;
    }

    .page06 .txtArea .subtitle{
        font-size: 1.25rem;
    }
    
    .page06 .txtArea p.content{
        font-size: 1rem;
    }
}

@media screen and (max-width: 768px){
    section.wrapper{
        margin-top: 60px;
    }

    .page02, .page03{
        padding-top: 27%;
    }

    .page04, .page05, .page06{
        padding-top: 28.5%;
    } 

    .page06{
        padding-bottom: 30%;
    }

    /* page01 */
    .page01{
        padding: 0% 4.5%;
        padding-left: 0%;
        padding-right: 0%;
    }

    .page01 .leftBox .textArea{
        padding: 0% 4.5%;
    }
    
    .page01 .leftBox .title p {
        font-size: 1.875rem;
        letter-spacing: 1.5px;
        line-height: 1.2;
    }

    .page01 .leftBox .subtitle p{
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.29;
        padding-top: 5%;
    }

    .page01 .bottomTxtTitle {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
        font-family: "Noto Serif JP", serif;
        font-weight: 700;
        margin: 4% 0%;
        color: #5A5854;
    }

    .page01 .bottomTxtTitle .dash {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
        font-family: "Noto Serif JP", serif;
        font-weight: 700;
        margin: 4% 0%;
        color: #d93630;
    }

    .page01 .bottomTxtTitle span {
        font-size: 0.9375rem;
        letter-spacing: 1.5px;
        line-height: 1.733;
        font-family: linotype-didot-headline, serif;
        font-weight: 400;
        font-style: normal;
    }

    .page01 .bottomTxtSubTitle {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 2.143;
        font-family: "Noto Serif JP", serif;
        font-weight: 700;
        margin: 0%;
        margin-bottom: 2%;
        color: #000;
    }

    .mbbottomTxt{
        padding: 0% 4.5% !important;
    }

    .mbbottomTxt p.content{
        font-size: 0.875rem;
        letter-spacing: 1.68px;
        line-height: 1.857;
        font-weight: 400;
        color: #5A5854;
    }

    .page01 .rightBox .innerImg{
        padding-top: 0%;
        height: 80vh;
        margin-top: 8%;
    }

    /* page02 */
    .page02 .pageImgBox{
        width: 90vw;
    }

    .page02 .pageImgBox .boxList{
        width: 271vw;
    }
    
    .page02 .pageImgBox .boxList .imgBox{
        width: calc(271vw / 3);
    }

    .page02 .pageTxtBox .txtBox {
        padding: 0% 5%;
    }

    .page02 .pageTxtBox .txtBox .title, .page02 .pageTxtBox .txtBox .title span {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.429;
        padding-bottom: 2%;
        padding-top: 7%;
    }

    .page02 .pageTxtBox .txtBox .content {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
    }

    .page02 .pageTxtBox{
        width: 90vw;
        overflow: hidden;
    }
    
    .page02 .pageTxtBox .txtList{
        width: 270vw;
        display: flex;
        justify-content: space-between;
    }
    
    .page02 .pageTxtBox .txtBox{
        width: 90vw;
        opacity: 0;
        transform: translateX(40px);
        transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease;
        pointer-events: none;
    }

    /* page03 */
    .page03{
        width: 85vw;
    }

    .page03 .pageTxt {
        margin-bottom: 8%;
    }

    .page03 .pageTxt .title{
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
        padding-bottom: 3%;
    }

    .page03 .pageTxt .title .dash{
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
        padding-bottom: 3%;
    }

    .page03 .pageTxt .title span {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
    }

    .page03 .pageTxt p.content{
        font-size: 0.875rem;
        text-align: justify;
        letter-spacing: 2.8px;
        line-height: 1.857;
    }

    .page03 .pageImg {
        width: 38.5vw;
    }

    .page04, .page05, .page06{
        width: 85vw;
        flex-direction: column;
    }

    .page05 .pageTxt{
        align-items: center;
        -webkit-align-items: center;
    }

    .page04 .pageImg, .page05 .pageImg, .page06 .pageImg{
        width: 36vw;
    }

    .page04 .pageTxt, .page05 .pageTxt, .page06 .pageTxt{
        width: 100%;
    }

    .page04 .titleArea, .page05 .titleArea, .page06 .titleArea{
        text-align: center;
        padding-bottom: 2.5%;
    }

    .page04 .titleArea .title p, .page05 .titleArea .title p, .page06 .titleArea .title p {
        font-size: 1.25rem;
        letter-spacing: 1px;
        line-height: 1.1;
    }

    .page04 .titleArea .subtitle p, .page05 .titleArea .subtitle p, .page06 .titleArea .subtitle p{
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 2.571;
    }

    .page04 .txtArea, .page05 .txtArea, .page06 .txtArea{
        margin-top: 0%;
    }

    .page04 .txtArea .subtitle, .page05 .txtArea .subtitle, .page06 .txtArea .subtitle{
        font-size: 0.875rem;
        text-align: center;
        margin: 8% 0%;
        margin-bottom: 7%;
    }

    .page04 .txtArea p.content, .page05 .txtArea p.content, .page06 .txtArea p.content{
        font-size: 0.875rem;
        line-height: 1.857;
        letter-spacing: 2.8px;
    }
}