/* page01 */
.page01 {
    padding: 2.1% 3.15%;
    padding-bottom: 7%;
}

.page01 .row {
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

.page01 .leftBox .textArea {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.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 .bottomTxt {
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    margin-top: 86.2%;
    color: #000;
}

.page01 .leftBox .bottomTxt span{
    display: block;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: #000;
}

.page01 .leftBox .bottomTxt .txt01,
.page01 .leftBox .bottomTxt .txt02,
.page01 .leftBox .bottomTxt .txt03,
.page01 .leftBox .bottomTxt .txt04{
    filter: blur(5px);
}

.page01 .leftBox .bottomTxt .txt01.aos-animate,
.page01 .leftBox .bottomTxt .txt02.aos-animate,
.page01 .leftBox .bottomTxt .txt03.aos-animate,
.page01 .leftBox .bottomTxt .txt04.aos-animate{
    filter: blur(0px);
}

.page01 .leftBox .innerImg {
    width: 100%;
    padding-top: 179.476%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.page01 .rightBox {
    padding-left: 3%;
}

.page01 .rightBox .contentArea {
    margin-top: 46.6%;
}

.page01 .rightBox .contentArea p, .page01 .rightBox .contentArea .firstline {
    color: #5A5854;
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 3.6px;
    line-height: 2;
    margin-bottom: 5.525%;
}

.page01 .rightBox .contentArea .firstline{
    display: block;
    margin-bottom: 0%;
}

.page01 .rightBox .contentArea .firstline::before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1vw;
    height: 1px;
    margin-right: 0.6%;
    background-color: #5A5854;
}

.page01 .rightBox .contentArea .readmore{
    display: block;
    margin-top: 5.525%;
}

.page01 .rightBox .contentArea .readmore a{
    display: inline-block;
    color: #000000;
    font-weight: 300;
    font-size: 1.125rem;
    letter-spacing: 3.6px;
}

.page01 .rightBox .contentArea .readmore:hover a, .page01 .rightBox .contentArea .readmore:hover a{
    background-color: #d93630;
    color: #fff;
}

/* page02 */
.page02 {
    padding: 0% 3.15%;
    padding-top: 8%;
    padding-bottom: 7%;
}

.page02 .titleArea {
    margin-bottom: 10.365%;
}

.page02 .titleArea .title,
.page02 .titleArea .subtitle {
    display: inline-block;
}

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

.page02 .titleArea .subtitle {
    margin-left: 3.866%;
}

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

.page02 .pageImgBox .innerImg {
    width: 100%;
    padding-top: 63.783%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.page02 .pageImgBox .row {
    align-items: center;
    -webkit-align-items: center;
}

.page02 .pageImgBox .pageTxt{
    padding-left: 12%;
}

.page02 .pageImgBox .pageTxt .content {
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 3.6px;
    line-height: 2;
}

.page02 .pageImgBox .pageTxt .title {
    margin-top: -4%;
}

.page02 .pageImgBox .pageTxt .title {
    display: block;
    color: #5A5854;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    margin-bottom: 10%;
}

.page02 .pageImgBox .pageTxt .content .subtitle {
    display: block;
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    font-weight: 300;
}

.page02 .pageImgBox .pageTxt .content .readmore{
    display: block;
    margin-top: 5%;
}

.page02 .pageImgBox .pageTxt .content .readmore a{
    display: inline-block;
    color: #000000;
    font-weight: 300;
    font-size: 1.125rem;
    letter-spacing: 3.6px;
}

.page02 .pageImgBox .pageTxt .content .readmore:hover a, .page02 .pageImgBox .pageTxt .content .readmore:hover a{
    background-color: #d93630;
    color: #fff;
}

/* page03 */
.page03 {
    padding: 0% 3.15%;
    padding-top: 8%;
    padding-bottom: 7%;
    overflow-x: hidden;
}

.page03 .titleArea {
    margin-bottom: 10.365%;
}

.page03 .titleArea .title,
.page03 .titleArea .subtitle {
    display: inline-block;
}

.page03 .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;
}

.page03 .titleArea .subtitle{
    margin-left: 3.866%;
}

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

.page03 .swiperArea .swiper-slide .caseCard {
    display: flex;
    flex-direction: column;
}

.page03 .swiperArea .swiper-slide:nth-child(even) .caseCard {
    flex-direction: column-reverse;
}

.page03 .swiperArea .swiper-slide .caseCard .innerImg {
    width: 100%;
    padding-top: 108%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    margin-bottom: 4.273%;
}

.page03 .swiperArea .swiper-slide:nth-child(even) .caseCard .innerImg {
    margin-top: 4.273%;
    margin-bottom: 0%;
}

.page03 .swiperArea .swiper-slide .caseCard .innerImg .mask {
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #5A5854;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.page03 .swiperArea .swiper-slide .caseCard .innerImg:hover .mask {
    opacity: .8;
    transition: opacity 1s ease-in-out;
}

.page03 .swiperArea .swiper-slide .caseCard .innerImg .mask .cardTxt p {
    text-align: center;
    font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    line-height: 2.46;
    color: #fff;
}

.page03 .swiperArea .swiper-slide .caseCard .caseTxt .casetitle {
    font-weight: 400;
    font-size: 1.75rem;
    letter-spacing: 4.8px;
}

.page03 .swiperArea .swiper-slide .caseCard .caseTxt .content {
    font-weight: 400;
    font-size: 1.125rem;
    letter-spacing: 4.8px;
    line-height: 1.46;
}

/* page04 */
.page04 {
    padding: 0% 3.15%;
    padding-top: 10%;
    padding-bottom: 11.654%;
}

.page04 .pageImgBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    -webkit-justify-content: flex-end;
    -webkit-align-items: center;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 4.702% 0%;
    padding-right: 3.509%;
    padding-bottom: 5.193%;
}

.page04 .pageImgBox .infoBox {
    background-color: #fff;
    padding: 2%;
    padding-top: 4%;
}

.page04 .pageImgBox .infoBox .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;
}

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

.page04 .pageImgBox .infoBox .infolist {
    margin-top: 34.763%;
}

.page04 .pageImgBox .infoBox .infolist p,
.page04 .pageImgBox .infoBox .infolist p a {
    color: #5A5854;
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    line-height: 2.46;
}

.page04 .pageImgBox .infoBox .infolist p .fbLink {
    text-decoration: underline;
}

@media screen and (max-width: 1537px) {
    .page01 .leftBox .bottomTxt {
        margin-top: 75.3%;
    }

    .page01 .leftBox .bottomTxt span{
        font-size: 1.5rem;
    }

    .page01 .rightBox .contentArea p, .page01 .rightBox .contentArea .firstline {
        font-size: 1.03rem;
        letter-spacing: 1.6px;
    }

    .page01 .rightBox .contentArea .readmore {
        font-size: 1.03rem;
        letter-spacing: 1.6px;
    }

    .page02 .pageImgBox .pageTxt {
        padding-left: 8%;
    }

    .page02 .pageImgBox .pageTxt .title {
        font-size: 1.6rem;
        white-space: nowrap;
    }

    .page04 {
        padding-bottom: 14.598%;
    }

    .page04 .pageImgBox .infoBox .infolist {
        margin-top: 14.763%;
    }

    .page01 .leftBox .title p, .page02 .titleArea .title p, .page03 .titleArea .title p, .page04 .pageImgBox .infoBox .titleArea .title p{
        font-size: 3.4375rem;
    }

    .page04 .pageImgBox .infoBox .infolist p, .page04 .pageImgBox .infoBox .infolist p a{
        font-size: 1.25rem;
    }
}

@media screen and (max-width:1400px) {
    
    .page01 .leftBox .bottomTxt span{
        font-size: 1.25rem;
    }

    .page01 .rightBox .contentArea p, .page01 .rightBox .contentArea .firstline {
        font-size: 0.875rem;
    }

    .page01 .leftBox .title p {
        font-size: 2rem;
    }

    .page01 .leftBox .subtitle p {
        font-size: 1.25rem;
    }

    .page01 .leftBox .bottomTxt {
        font-size: 1.125rem;
        margin-top: 95.3%;
    }

    .page02 .titleArea .title p{
        font-size: 2rem;
    }

    .page02 .titleArea .subtitle p{
        font-size: 1.25rem;
    }

    .page02 .pageImgBox .pageTxt .title {
        font-size: 1.25rem;
    }

    .page02 .pageImgBox .pageTxt .content .subtitle{
        font-size: 1.125rem;
    }

    .page02 .pageImgBox .pageTxt .content .readmore{
        font-size: 1rem;
    }

    .page03 .titleArea .title p{
        font-size: 2rem;
    }

    .page03 .titleArea .subtitle p{
        font-size: 1.25rem;
    }

    .page03 .swiperArea .swiper-slide .caseCard .caseTxt .casetitle, .page03 .swiperArea .swiper-slide .caseCard .caseTxt .content, .page03 .swiperArea .swiper-slide .caseCard .innerImg .mask .cardTxt p{
        font-size: 1.25rem;
    }

    .page04 .pageImgBox .infoBox .titleArea .title p{
        font-size: 2rem;
    }

    .page04 .pageImgBox .infoBox .titleArea .subtitle p{
        font-size: 1.25rem;
    }

    .page04 .pageImgBox .infoBox .infolist p, .page04 .pageImgBox .infoBox .infolist p a{
        font-size: 1.25rem;
    }
}


@media screen and (max-width: 768px){
    /* page01 */
    .page01{
        padding-left: 4.5%;
        padding-right: 0;
        padding-top: 3.5vh;   /* 原本 7.5% */
        padding-bottom: 0;
    }

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

    .page01 .leftBox .imgArea{
        display: flex;
        justify-content: flex-end;
        padding-right: 0%;
    }

    .page01 .leftBox .innerImg {
        width: 52.2%;
        padding-top: 85.6%;
    }

    .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: 4%;
        margin-bottom: 3.5%;
    }

    .page01 .rightBox{
        padding: 0% 14px;
        margin-top: 7%;
    }

    .page01 .rightBox .row .col-12{
        padding-left: 0;
        padding-right: 0;
    }

    .page01 .rightBox .bottomTxt span {
        font-size: 0.875rem;
        display: block;
        letter-spacing: 2.8px;
        line-height: 2.1;
        font-family: "Noto Serif JP", serif;
        font-weight: 700;
        color: #000;
    }

    .page01 .rightBox .contentArea {
        margin-top: 8%;
    }

    .page01 .rightBox .contentArea p, .page01 .rightBox .contentArea .firstline {
        font-size: 0.875rem;
        letter-spacing: 1.68px;
        line-height: 2.14;
        margin-bottom: 2.5%;
    }

    .page01 .rightBox .contentArea .firstline{
        margin-bottom: 0%;
    }

    .page01 .rightBox .contentArea .firstline::before {
        width: 12.5px;
    }

    .page01 .rightBox .contentArea .readmore {
        margin-right: 3.15%;
        margin-top: 12%;
        text-align: right;
    }

    .page01 .rightBox .contentArea .readmore a{
        font-size: 0.8125rem;
        letter-spacing: 2.6px;
    }

    .page01 .rightBox .contentArea .readmore a::before{
        content: '';
        position: absolute;
        bottom: 18%;
        left: -37%;
        width: 28.7px;
        height: 28.7px;
        background-image: url(../images/readmore_arrow.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    /* page02 */
    .page02{
        padding: 12.5vh 0%;
    }

    .page02 .titleArea{
        display: flex;
        align-items: flex-end;
        -webkit-align-items: flex-end;
        padding: 0% 4.5%;
    }

    .page02 .titleArea .title, .page02 .titleArea .subtitle{
        display: block;
    }

    .page02 .titleArea .title{
        width: min-content;
    }

    .page02 .titleArea .title p {
        font-size: 1.875rem;
        letter-spacing: 1.5px;
        line-height: 1.2;
    }

    .page02 .titleArea .subtitle {
        width: 36.8%;
        margin-left: 3%;
        transform: translateY(-35%);
    }

    .page02 .titleArea .subtitle p {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.29;
    }
    
    .page02 .pageImgBox .pageTxt {
        padding-left: 0%;
        padding-top: 10%;
    }
    
    .page02 .pageImgBox .row .col-lg-4{
        padding: 0% 4.5%;
    }

    .page02 .pageImgBox .pageTxt .title {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.71;
        margin-bottom: 6%;
        margin-top: 0%;
    }

    .page02 .pageImgBox .pageTxt .content{
        font-size: 0.8125rem;
        letter-spacing: 2.6px;
        line-height: 2;
    }

    .page02 .pageImgBox .pageTxt .content .subtitle {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 2.41;
    }

    .page02 .pageImgBox .pageTxt .content .readmore{
        text-align: right;
        margin-top: 10%;
    }

    .page02 .pageImgBox .pageTxt .content .readmore a{
        font-size: 0.8125rem;
        letter-spacing: 2.6px;
    }

    .page02 .pageImgBox .pageTxt .content .readmore a::before{
        content: '';
        position: absolute;
        bottom: 30%;
        left: -37%;
        width: 28.7px;
        height: 28.7px;
        background-image: url(../images/readmore_arrow.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    /* page03 */
    .page03{
        padding: 0% 4.5%;
    }

    .page03 .titleArea{
        display: flex;
        align-items: flex-end;
        -webkit-align-items: flex-end;
    }

    .page03 .titleArea .title{
        width: min-content;
    }

    .page03 .titleArea .title p {
        font-size: 1.875rem;
        letter-spacing: 1.5px;
        line-height: 1.2;
    }

    .page03 .titleArea .subtitle {
        width: 36.8%;
        margin-left: 3%;
        transform: translateY(-35%);
    }
    
    .page03 .titleArea .subtitle p {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.29;
    }

    .page03 .swiperArea{
        width: 75%;
    }

    .page03 .swiperArea .swiper-slide:nth-child(even) .caseCard {
        flex-direction: column;
    }

    .page03 .swiperArea .swiper-slide:nth-child(even) .caseCard .innerImg {
        margin-top: 30%;
        margin-bottom: 7%;
    }

    .page03 .swiperArea .swiper-slide .caseCard .innerImg {
        padding-top: 150%;
        margin-bottom: 7%;
    }

    .page03 .swiperArea .swiper-slide .caseCard .caseTxt .casetitle{
        font-size: 1.0625rem;
        letter-spacing: 3.4px;
        line-height: 1.882;
    }

    .page03 .swiperArea .swiper-slide .caseCard .innerImg .mask .cardTxt p, .page03 .swiperArea .swiper-slide .caseCard .caseTxt .content{
        font-size: 0.875rem;
        letter-spacing: 2.8px;
    }

    /* page04 */
    .page04{
        padding-left: 0%;
        padding-right: 0%;
        padding-top: 12.5vh;
    }

    .page04 .pageImgBox{
        display: block;
        padding: 4.702% 3.509%;
        padding-bottom: 20%;
    }

    .page04 .pageImgBox .infoBox{
        padding: 5%;
    }

    .page04 .pageImgBox .infoBox .titleArea .title p{
        font-size: 1.875rem;
        letter-spacing: 1.5px;
        line-height: 1.2;
    }

    .page04 .pageImgBox .infoBox .titleArea .subtitle p {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.29;
        padding-top: 2%;
    }

    .page04 .pageImgBox .infoBox .infolist p, .page04 .pageImgBox .infoBox .infolist p a {
        font-size: 0.75rem;
        letter-spacing: 2.4px;
        line-height: 2.083;
    }
}

@media screen and (max-width: 376px){
    .page01 .leftBox .title p, .page02 .titleArea .title p, .page03 .titleArea .title p, .page04 .pageImgBox .infoBox .titleArea .title p {
        font-size: 1.5625rem;
    }

    .page02 .titleArea .subtitle {
        width: 39.8%;
    }

    .page04 .pageImgBox {
        padding-bottom: 23%;
    }
}