.sectionTitlePage .wrapTitlePage .characterPageTitle {
    bottom: -22px;
    width: 202px;
    right: -78px;
}
.mainImg {
    width: 100%;
    margin-bottom: -56px;
}
.mainImg img {
    aspect-ratio: 1068 / 483;
    object-fit: cover;
    height: auto;
    display: block;
}
.messageArea {
    position: relative;
    z-index: 1;
    padding-bottom: 95px;
}
.messageArea .inner {
    max-width: 834px;
}
.messageArea .messageWrap {
    background: #fff;
    border: 2px solid #ee0002;
    padding: 45px 20px 28px;
    text-align: center;
}
.messageArea .messageWrap .messageTitle {
    font-size: 39.6px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 42px;
}
.messageArea .messageWrap .messageTitle .titleEn {
    font-size: 27.51px;
    font-weight: bold;
    letter-spacing: 0.04em;
    display: block;
    margin-top: 8px;
}
.messageArea .messageWrap .messageTextWrap {
    margin-bottom: 37px;
}
.messageArea .messageWrap .messageText {
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: 0.52px;
    font-weight: 900;
    margin-bottom: 23.3px;
}
.messageArea .messageWrap .messageText:last-child {
    margin-bottom: 0;
}
.messageArea .messageWrap .messagePosition {
    font-size: 16px;
    line-height: 1.2;
    font-weight: bold;
    letter-spacing: 1.3px;
    margin-bottom: 0px;
}
.messageArea .messageWrap .messageName {
    font-size: 24px;
    line-height: 1.47;
    letter-spacing: 2.3px;
    font-weight: bold;
}
.infoArea {
    background: #fff;
    padding: 121px 0 86px;
}
.infoArea .inner {
    max-width: 827.3px;
}
.areaTitle {
    font-size: 42.8px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 3.4px;
    text-align: center;
}
.areaTitle .titleEn {
    display: block;
    font-size: 27.5px;
    line-height: 1.2;
    letter-spacing: 1.1px;
    margin-top: 6px;
    font-weight: bold;
}
.infoArea .areaTitle {
    margin-bottom: 24px;
}
.infoArea .areaTitle .titleEn {
    color: #ee0002;
}
.infoArea .infoTable {
    max-width: 730px;
    width: 100%;
    color: #000000;
    margin-bottom: 52px;
}
.infoArea .infoTable th {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2.2px;
    line-height: 1.2;
    border-top: 1px solid #000000;
    text-align: start;
    padding: 15px 8px 18px;
    width: 112px;
}
.infoArea .infoTable tr:last-child th {
    border-bottom: 1px solid #000;
}
.infoArea .infoTable td {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2.4px;
    line-height: 1.17;
    border-top: 1px solid #e4e4e5;
    text-align: start;
    padding: 15px 7px 18px 34px;
}
.infoArea .infoTable tr:last-child td {
    border-bottom: 1px solid #e4e4e5;
}
.infoArea .infoImg {
    width: 100%;
    max-width: 787.3px;
    margin: 0 auto;
}
.infoArea .infoImg img {
    aspect-ratio: 787 / 360;
    object-fit: cover;
    height: auto;
    display: block;
}
.historyArea {
    padding: 101px 0 89px;
}
.historyArea .inner {
    max-width: 833px;
}
.historyArea .areaTitle {
    margin-bottom: 28px;
}
.historyArea .areaTitle .titleEn {
    color: #ee0002;
}
.historyArea .historyWrap {
    background: #fff;
    border-radius: 15px;
    padding: 54px 44px 55px 44px;
}
.historyArea .historyWrap .historyList li {
    display: flex;
    margin-bottom: 29px;
}
.historyArea .historyWrap .historyList li:last-child {
    margin-bottom: 0;
}
.historyArea .historyWrap .historyList li .historyYear {
    flex-shrink: 0;
    flex: 0 0 173px;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: bold;
    padding-right: 10px;
}
.historyArea .historyWrap .historyList li .historyText {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: justify;
}

/* animation */
.rollingEffect::before {
    background: #e50011;
}
@media (min-width: 1069px) {
   .mainImg img {
        width: 100%;
        height: auto;
        aspect-ratio: 1068 / 483;
        object-fit: cover;
        display: block;
        max-height: 483px;
    }
}
@media (max-width: 768px) {
    .sectionTitlePage .wrapTitlePage .characterPageTitle {
        width: clamp(85px, 22.67vw, 170px);
        bottom: clamp(-20px, -2.67vw, -10px);
        right: clamp(-38px, -5.93vw, -19px);
    }
    .mainImg {
        margin-bottom: clamp(-53px, -7.07vw, -26.5px);
    }
    .mainImg img {
        aspect-ratio: 750/338;
    }
    .messageArea {
        padding-bottom: clamp(23.5px, 6.27vw, 47px);
    }
    .messageArea .inner {
        padding: 0 5.1%;
    }
    .messageArea .messageWrap {
        padding: clamp(48px, 12.8vw, 96px) clamp(19.5px, 5.2vw, 39px) clamp(19.5px, 5.2vw, 39px);
    }
    .messageArea .messageWrap .messageTitle {
        font-size: clamp(24px, 6.4vw, 48px);
        margin-bottom: clamp(23.5px, 6.27vw, 47px);
    }
    .messageArea .messageWrap .messageTitle .titleEn {
        font-size: clamp(16px, 4.27vw, 32px);
        line-height: 1.28;
        letter-spacing: 0.04em;
        margin-top: clamp(0.5px, 0.13vw, 1px);
    }
    .messageArea .messageWrap .messageTextWrap {
        margin-bottom: clamp(34px, 9.07vw, 68px);
    }
    .messageArea .messageWrap .messageText {
        font-size: clamp(14px, 3.73vw, 28px);
        text-align: start;
        line-height: 1.32;
        letter-spacing: clamp(0.55px, 0.15vw, 1.1px);
        margin-bottom: clamp(18.7px, 4.99vw, 37.4px);
        text-align: justify;
    }
    .messageArea .messageWrap .messagePosition {
        font-size: clamp(12px, 3.2vw, 24px);
        letter-spacing: clamp(0.96px, 0.26vw, 1.92px);
        margin-bottom: clamp(-3px, -0.4vw, -1.5px);
    }
    .messageArea .messageWrap .messageName {
        font-size: clamp(21px, 5.6vw, 42px);
        letter-spacing: clamp(1.65px, 0.44vw, 3.3px);
    }
    .infoArea {
        padding: clamp(75.5px, 20.13vw, 151px) 0 0;
    }
    .areaTitle {
        font-size: clamp(24px, 6.4vw, 48px);
    }
    .areaTitle .titleEn {
        font-size: clamp(16px, 4.27vw, 32px);
        margin-top: clamp(1.5px, 0.4vw, 3px);
    }
    .infoArea .areaTitle {
        margin-bottom: clamp(27.5px, 7.33vw, 55px);
    }
    .infoArea .infoTable {
        max-width: 670px;
        width: 100%;
        margin-bottom: clamp(28px, 7.47vw, 56px);
    }
    .infoArea .infoTable th {
        font-size: clamp(14px, 3.73vw, 28px);
        width: clamp(78px, 20.8vw, 156px);
        letter-spacing: clamp(2.1px, 0.56vw, 4.2px);
        vertical-align: baseline;
        text-align: start;
       padding: clamp(13px, 3.47vw, 26px) clamp(5px, 1.33vw, 10px) clamp(13px, 3.47vw, 26px) clamp(5px, 1.33vw, 10px);
    }
    .infoArea .infoTable td {
        font-size: clamp(14px, 3.73vw, 28px);
        padding: clamp(8.5px, 2.27vw, 17px) clamp(3.5px, 0.933vw, 7px) clamp(8.5px, 2.27vw, 17px) clamp(16.5px, 4.4vw, 33px);
        letter-spacing: clamp(0.6px, 0.16vw, 1.2px);
        line-height: 1.54;
        vertical-align: baseline;
    }
    .infoArea .infoImg img {
        aspect-ratio: 750/ 360;
    }
    .historyArea .inner {
        padding: 0 5.2%;
    }
    .historyArea {
        padding: clamp(52px, 13.87vw, 104px) 0 clamp(43px, 11.47vw, 86px);
    }
    .historyArea .historyWrap {
        border-radius: clamp(10.5px, 2.8vw, 21px);
        padding: clamp(34.5px, 9.2vw, 69px) clamp(20px, 5.33vw, 40px) clamp(47.5px, 12.67vw, 95px);
    }
    .historyArea .areaTitle .titleEn {
        margin-top: clamp(1px, 0.27vw, 2px);
    }
    .historyArea .historyWrap .historyList li {
        flex-direction: column;
        margin-bottom: clamp(21.45px, 5.72vw, 42.9px);
    }
    .historyArea .historyWrap .historyList li .historyYear {
        font-size: clamp(14px, 3.73vw, 28px);
        flex: unset;
        letter-spacing: clamp(2px, 0.53vw, 4px);
        margin-bottom: clamp(-2px, -0.27vw, -1px);
        line-height: 1.2;
        letter-spacing: clamp(2px, 0.53vw, 4px);
        padding-right: 0;
    }
    .historyArea .historyWrap .historyList li .historyText {
        font-size: clamp(14px, 3.73vw, 28px);
        line-height: 1.27;
        letter-spacing: clamp(0.5px, 0.14vw, 1px);
    }
    .historyArea .areaTitle {
        margin-bottom: clamp(24.5px, 6.53vw, 49px);
    }
}
@media (max-width: 390px) {
    .infoArea .infoTable th {
        letter-spacing: 1px;
    }
    .historyArea .historyWrap .historyList li .historyYear {
        line-height: 1.5;
    }
    .historyArea .historyWrap .historyList li .historyText {
        line-height: 1.35;
    }
}