@charset "UTF-8";

.fadeIn {
    opacity: 0
}

.fadeIn.inview {
    transition: opacity .5s ease-in-out .1s;
    opacity: 1
}

.fadeInUp {
    opacity: 0;
    transform: translateY(30px)
}

.fadeInUp.inview {
    transition: transform 1.5s cubic-bezier(.215, .61, .355, 1), opacity .5s ease-in-out;
    opacity: 1;
    transform: translateY(0)
}

.jumpIn {
    opacity: 0;
    transform: translateY(60px)
}

.jumpIn.inview {
    transition: transform .6s cubic-bezier(.16, 1.84, .71, 1.01), opacity .2s ease-in-out;
    opacity: 1;
    transform: translateY(0)
}

.fadeInUp1 {
    opacity: 0;
    transform: translateY(60px) rotate(30deg);
    transform-origin: left
}

.fadeInUp1.inview {
    transition: transform 1.5s cubic-bezier(.215, .61, .355, 1), opacity .5s ease-in-out;
    opacity: 1;
    transform: translateY(0)
}

.fadeInUp2 {
    opacity: 0;
    transform: translateY(60px) translate(60px)
}

.fadeInUp2.inview {
    transition: transform 1.5s cubic-bezier(.215, .61, .355, 1), opacity .5s ease-in-out;
    opacity: 1;
    transform: translateY(0)
}

.fadeInUp3 {
    opacity: 0;
    transform: translateY(-60px) translate(-60px)
}

.fadeInUp3.inview {
    transition: transform 1.5s cubic-bezier(.215, .61, .355, 1), opacity .5s ease-in-out;
    opacity: 1;
    transform: translateY(0)
}

@keyframes maniStamp {
    0% {
        opacity: 0;
        transform: rotate(-10deg) translate(30px, -30px) scale(1.1)
    }

    40% {
        opacity: 1;
        transform: rotate(0) translate(30px, -30px) scale(1.2)
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes prdTextAnimation {
    0% {
        opacity: 0;
        transform: rotate(0) translate(30px, 30px) scale(1.1)
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes clipTpRight {
    0% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
        clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%)
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }
}

@keyframes clipTpLeft {
    0% {
        opacity: 1;
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }
}

@keyframes clipToBottom {
    0% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
        clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%)
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }
}

@keyframes clipTpRightScale {
    0% {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
        clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
        transform: scale(1.3)
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        transform: scale(1)
    }
}

@keyframes arrowBottom {
    0% {
        transform: translateY(-2px)
    }

    50% {
        transform: translateY(4px)
    }

    to {
        transform: translateY(-2px)
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    to {
        transform: scale(1)
    }
}

@keyframes scaleUpLg {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.25)
    }

    to {
        transform: scale(1)
    }
}

@keyframes shineAnimation {
    0% {
        opacity: 0;
        transform: translateZ(0) scale(1)
    }

    50% {
        opacity: 1;
        transform: translateZ(0) scale(1.2)
    }

    to {
        opacity: 0;
        transform: translateZ(0) scale(1)
    }
}

@keyframes shineAnimationSmall {
    0% {
        opacity: 0;
        transform: translateZ(0) scale(1)
    }

    50% {
        opacity: 1;
        transform: translateZ(0) scale(1)
    }

    to {
        opacity: 0;
        transform: translateZ(0) scale(1)
    }
}

@keyframes maniStamp {
    0% {
        opacity: 0;
        transform: rotate(-10deg) translate(30px, -30px) scale(1)
    }

    40% {
        opacity: 1;
        transform: rotate(0) translate(30px, -30px) scale(1.05)
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes maniStampRev {
    0% {
        opacity: 0;
        transform: rotate(10deg) translate(-30px, -30px) scale(1.1)
    }

    40% {
        opacity: 1;
        transform: rotate(0) translate(-30px, -30px) scale(1.2)
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes storeBound {
    0% {
        transform: scale(1)
    }

    20% {
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    95% {
        transform: scale(1)
    }

    to {
        transform: scale(1)
    }
}

@media screen and (max-width: 800px) {

    .pbPage .content,
    .pbPage .pbAreaWrapper1 {
        margin-top: 0
    }
}

.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
    background-image: url(/library/anshin/7pj/community/img/paper_bg.webp);
    background-size: 100% auto;
    background-repeat: repeat;
    border-bottom: 1px solid #009944
}

@media screen and (min-width: 801px) {
    .header {
        padding-left: 4.1666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .header {
        padding-left: 60px
    }
}

@media screen and (max-width: 800px) {
    .header {
        padding-left: 16vw
    }
}

@media screen and (max-width: 800px) {
    .header {
        padding-left: 3.2vw
    }
}

@media screen and (min-width: 801px) {
    .header {
        padding-right: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .header {
        padding-right: 0
    }
}

@media screen and (max-width: 800px) {
    .header {
        padding-right: 0vw
    }
}

@media screen and (max-width: 800px) {
    .header {
        padding-right: 2.9333333333vw
    }
}

@media screen and (min-width: 801px) {
    .header {
        padding-bottom: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .header {
        padding-bottom: 0
    }
}

@media screen and (max-width: 800px) {
    .header {
        padding-bottom: 0vw
    }
}

@media screen and (max-width: 800px) {
    .header {
        padding-bottom: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header {
        border-bottom: 0px solid #009944
    }
}

.header-top {
    display: flex;
    justify-content: space-between
}

@media screen and (min-width: 801px) {
    .header-top {
        padding-top: 1.8055555556vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top {
        padding-top: 26px
    }
}

@media screen and (max-width: 800px) {
    .header-top {
        padding-top: 6.9333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-top {
        padding-top: 1.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-top {
        align-items: flex-start
    }
}

@media screen and (min-width: 801px) {
    .header-top__logo {
        width: 28.0555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__logo {
        width: 404px
    }
}

@media screen and (max-width: 800px) {
    .header-top__logo {
        width: 107.7333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__logo {
        width: 24vw
    }
}

.header-top__content {
    display: flex;
    align-items: center
}

@media screen and (min-width: 801px) {
    .header-top__content {
        gap: 2.0833333333vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__content {
        gap: 30px
    }
}

@media screen and (max-width: 800px) {
    .header-top__content {
        gap: 8vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__content {
        gap: 16.2666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__content {
        justify-content: flex-end
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-top__content {
        width: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-top__content {
        width: 0px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-top__content {
        width: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-top__content {
        width: 66.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .header-top__kyosai {
        width: 18.6805555556vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__kyosai {
        width: 269px
    }
}

@media screen and (max-width: 800px) {
    .header-top__kyosai {
        width: 71.7333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__kyosai {
        width: 34.6666666667vw
    }
}

.header-top__humb {
    cursor: pointer;
    position: relative;
    background-color: #094;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4
}

@media screen and (min-width: 801px) {
    .header-top__humb {
        width: 9.6527777778vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__humb {
        width: 139px
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb {
        width: 37.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb {
        width: 11.7333333333vw
    }
}

@media screen and (min-width: 801px) {
    .header-top__humb {
        height: 4.4444444444vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__humb {
        height: 64px
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb {
        height: 17.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb {
        height: 11.7333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-top__humb {
        border-radius: .6944444444vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-top__humb {
        border-radius: 10px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-top__humb {
        border-radius: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-top__humb {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-top__humb {
        margin-top: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-top__humb {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-top__humb {
        margin-top: 3.4666666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-top__humb {
        margin-bottom: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-top__humb {
        margin-bottom: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-top__humb {
        margin-bottom: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-top__humb {
        margin-bottom: -4vw
    }
}

.header-top__humb.open {
    background-color: transparent
}

.header-top__humb.open span {
    background-color: #094
}

.header-top__humb.open span:nth-child(1) {
    transform: rotate(45deg)
}

.header-top__humb.open span:nth-child(2) {
    transform: rotate(-45deg)
}

.header-top__humb-inner {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

@media screen and (min-width: 801px) {
    .header-top__humb-inner {
        height: 3.5416666667vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__humb-inner {
        height: 51px
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb-inner {
        height: 13.6vw
    }
}

@media screen and (min-width: 801px) {
    .header-top__humb-inner {
        margin-top: -.1388888889vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__humb-inner {
        margin-top: -2px
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb-inner {
        margin-top: -.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb-inner {
        width: 50%
    }
}

.header-top__humb span {
    top: 50%;
    left: 0;
    width: 100%;
    border-radius: 1000px;
    background-color: #fff;
    transition: transform .5s cubic-bezier(.23, 1, .32, 1);
    position: absolute
}

@media screen and (min-width: 801px) {
    .header-top__humb span {
        height: .2777777778vw
    }
}

@media screen and (min-width: 1440px) {
    .header-top__humb span {
        height: 4px
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb span {
        height: 1.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-top__humb span {
        height: .8vw
    }
}

.header-top__humb span:nth-child(1) {
    transform: translateY(-10px)
}

@media screen and (max-width: 800px) {
    .header-top__humb span:nth-child(1) {
        transform: translateY(-1.6vw)
    }
}

.header-top__humb span:nth-child(2) {
    transform: translateY(10px)
}

@media screen and (max-width: 800px) {
    .header-top__humb span:nth-child(2) {
        transform: translateY(1.6vw)
    }
}

.header-bot {
    display: flex;
    align-items: center;
    align-items: flex-end;
    position: relative
}

@media screen and (min-width: 801px) {
    .header-bot {
        gap: 5.5555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot {
        gap: 80px
    }
}

@media screen and (max-width: 800px) {
    .header-bot {
        gap: 21.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot {
        gap: 0vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot {
        pointer-events: none
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot {
        border-radius: .6944444444vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot {
        border-radius: 10px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot {
        border-radius: 2.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .header-bot {
        margin-top: -.3472222222vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot {
        margin-top: -5px
    }
}

@media screen and (max-width: 800px) {
    .header-bot {
        margin-top: -1.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot {
        margin-top: -10.6666666667vw
    }
}

.header-bot-main {
    color: #fff;
    position: relative
}

@media screen and (min-width: 801px) {
    .header-bot-main {
        width: 26.7361111111vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot-main {
        width: 385px
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main {
        width: 102.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main {
        width: 47.2vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main {
        pointer-events: all;
        z-index: 2
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot-main {
        margin-left: 6.5277777778vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot-main {
        margin-left: 94px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot-main {
        margin-left: 25.0666666667vw
    }
}

.header-bot-main span {
    position: absolute;
    top: 57%;
    transform: translateY(-50%)
}

@media screen and (min-width: 801px) {
    .header-bot-main span {
        font-size: 1.3888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot-main span {
        font-size: 20px
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main span {
        font-size: 5.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main span {
        font-size: 2.9333333333vw
    }
}

@media screen and (min-width: 801px) {
    .header-bot-main span {
        left: 2.0833333333vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot-main span {
        left: 30px
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main span {
        left: 8vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main span {
        left: 1.6vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot-main span {
        top: 60%
    }
}

.header-bot__list {
    display: flex;
    align-items: center
}

@media screen and (min-width: 801px) {
    .header-bot__list {
        gap: 2.5vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot__list {
        gap: 36px
    }
}

@media screen and (max-width: 800px) {
    .header-bot__list {
        gap: 9.6vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot__list {
        gap: .8vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot__list {
        height: 0;
        transition: all .3s;
        pointer-events: none
    }

    .header-bot__list.open {
        opacity: 1;
        pointer-events: all;
        overflow: hidden
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot__list.open {
        height: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot__list.open {
        height: 0px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list.open {
        height: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list.open {
        height: 30.4vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot__list {
        text-align: left;
        position: absolute;
        z-index: 1;
        overflow: hidden;
        flex-direction: column;
        align-items: flex-start;
        background-color: #094;
        left: 26.7%;
        border-bottom-right-radius: 2vw;
        border-bottom-left-radius: 2vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot__list {
        padding-left: 1.3888888889vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot__list {
        padding-left: 20px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        padding-left: 5.3333333333vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        padding-left: 1.8666666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot__list {
        padding-right: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot__list {
        padding-right: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        padding-right: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        padding-right: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot__list {
        top: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot__list {
        top: 0px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        top: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        top: 5.8666666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot__list {
        width: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot__list {
        width: 0px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        width: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__list {
        width: 33.8666666667vw
    }
}

@media screen and (min-width: 801px) {
    .header-bot__item {
        padding-bottom: .6944444444vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot__item {
        padding-bottom: 10px
    }
}

@media screen and (max-width: 800px) {
    .header-bot__item {
        padding-bottom: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot__item {
        padding-bottom: 1.8666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot__item {
        line-height: 1.3
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .header-bot__item:nth-child(1) {
        padding-top: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .header-bot__item:nth-child(1) {
        padding-top: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__item:nth-child(1) {
        padding-top: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .header-bot__item:nth-child(1) {
        padding-top: 3.2vw
    }
}

.header-bot__item a {
    color: #094
}

@media screen and (max-width: 800px) {
    .header-bot__item a {
        color: #fff
    }
}

.header-bot__item a:hover {
    text-decoration: none
}

@media screen and (min-width: 801px) {
    .header-bot__item {
        font-size: 1.5277777778vw
    }
}

@media screen and (min-width: 1440px) {
    .header-bot__item {
        font-size: 22px
    }
}

@media screen and (max-width: 800px) {
    .header-bot__item {
        font-size: 5.8666666667vw
    }
}

@media screen and (max-width: 800px) {
    .header-bot__item {
        font-size: 2.6666666667vw
    }
}

.anchor-btn {
    position: fixed;
    z-index: 9;
    background-color: gold;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px
}

@media screen and (min-width: 801px) {
    .anchor-btn {
        bottom: 6.9444444444vw
    }
}

@media screen and (min-width: 1440px) {
    .anchor-btn {
        bottom: 100px
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        bottom: 26.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        bottom: 16vw
    }
}

@media screen and (min-width: 801px) {
    .anchor-btn {
        right: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .anchor-btn {
        right: 0px
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        right: 0vw
    }
}

@media screen and (min-width: 801px) {
    .anchor-btn {
        padding-top: 1.3888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .anchor-btn {
        padding-top: 20px
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        padding-top: 5.3333333333vw
    }
}

@media screen and (min-width: 801px) {
    .anchor-btn {
        padding-bottom: 1.3888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .anchor-btn {
        padding-bottom: 20px
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        padding-bottom: 5.3333333333vw
    }
}

@media screen and (min-width: 801px) {
    .anchor-btn {
        padding-left: 1.3888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .anchor-btn {
        padding-left: 20px
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        padding-left: 5.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        padding-left: 3.4666666667vw
    }
}

@media screen and (min-width: 801px) {
    .anchor-btn {
        padding-right: 1.3888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .anchor-btn {
        padding-right: 20px
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        padding-right: 5.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn {
        padding-right: 3.4666666667vw
    }
}

@media screen and (min-width: 801px) {
    .anchor-btn img {
        width: 1.7361111111vw
    }
}

@media screen and (min-width: 1440px) {
    .anchor-btn img {
        width: 25px
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn img {
        width: 6.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .anchor-btn img {
        width: 5.0666666667vw
    }
}

.menu-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: all .3s
}

.menu-modal.open {
    pointer-events: all;
    opacity: 1
}

.menu-modal.open .menu-modal__content {
    transform: translate(0)
}

.menu-modal__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.menu-modal__content {
    transform: translate(100%);
    transition: transform .6s cubic-bezier(.23, 1, .32, 1);
    position: absolute;
    right: 0;
    background-color: #fffc;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
    z-index: 1
}

@media screen and (min-width: 801px) {
    .menu-modal__content {
        top: 1.7361111111vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal__content {
        top: 25px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal__content {
        top: 6.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal__content {
        top: 5.3333333333vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal__content {
        width: 32.4305555556vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal__content {
        width: 467px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal__content {
        width: 124.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal__content {
        width: 71.2vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal__content {
        padding-top: 4.1666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal__content {
        padding-top: 60px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal__content {
        padding-top: 16vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal__content {
        padding-top: 5.3333333333vw
    }
}

.menu-modal-item__head {
    display: flex;
    align-items: center;
    line-height: 1;
    cursor: pointer
}

@media screen and (min-width: 801px) {
    .menu-modal-item__head {
        font-size: 1.3194444444vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__head {
        font-size: 19px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        font-size: 5.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        font-size: 3.7333333333vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__head {
        padding-left: 1.3888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__head {
        padding-left: 20px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        padding-left: 5.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        padding-left: 4vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__head {
        gap: .5555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__head {
        gap: 8px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        gap: 2.1333333333vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__head {
        padding-top: 1.1805555556vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__head {
        padding-top: 17px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        padding-top: 4.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        padding-top: 2.1333333333vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__head {
        padding-bottom: 1.1805555556vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__head {
        padding-bottom: 17px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        padding-bottom: 4.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        padding-bottom: 2.1333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__head {
        align-items: flex-start;
        line-height: 1.3
    }
}

.menu-modal-item__head--green {
    color: #094
}

.menu-modal-item__head.open .menu-modal-item__icon {
    transform: rotate(0)
}

.menu-modal-item__icon {
    transform: rotate(-90deg);
    transition: transform .5s cubic-bezier(.23, 1, .32, 1)
}

@media screen and (min-width: 801px) {
    .menu-modal-item__icon {
        margin-top: -.0694444444vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__icon {
        margin-top: -1px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__icon {
        margin-top: -.2666666667vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__icon {
        margin-top: 0vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-top: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-top: 0
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-top: 0vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-bottom: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-bottom: 0
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-bottom: 0vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-bottom: .9722222222vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-bottom: 14px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-bottom: 3.7333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__head {
        padding-bottom: 1.0666666667vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__item:nth-child(1) a {
        padding-top: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__item:nth-child(1) a {
        padding-top: 0
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item:nth-child(1) .menu-modal-item__item:nth-child(1) a {
        padding-top: 0vw
    }
}

.menu-modal-item:not(:first-child) .menu-modal-item__head {
    color: #fff
}

.menu-modal-item:nth-child(2) .menu-modal-item__head {
    background-color: #094
}

.menu-modal-item:nth-child(2) path {
    stroke: #094
}

.menu-modal-item:nth-child(3) .menu-modal-item__head {
    background-color: #ff8b03
}

.menu-modal-item:nth-child(3) path {
    stroke: #ff8b03
}

.menu-modal-item:nth-child(4) .menu-modal-item__head {
    background-color: #a50082
}

.menu-modal-item:nth-child(4) path {
    stroke: #a50082
}

@media screen and (min-width: 801px) {
    .menu-modal-item:nth-child(4) .menu-modal-item__list-inner {
        padding-bottom: .6944444444vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item:nth-child(4) .menu-modal-item__list-inner {
        padding-bottom: 10px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item:nth-child(4) .menu-modal-item__list-inner {
        padding-bottom: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item:nth-child(4) .menu-modal-item__list-inner {
        padding-bottom: 3.2vw
    }
}

.menu-modal-item__list {
    overflow: hidden
}

@media screen and (min-width: 801px) {
    .menu-modal-item__list-inner {
        padding-left: 3.2638888889vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__list-inner {
        padding-left: 47px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__list-inner {
        padding-left: 12.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__list-inner {
        padding-left: 9.8666666667vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__list-inner {
        padding-top: .4166666667vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__list-inner {
        padding-top: 6px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__list-inner {
        padding-top: 1.6vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__list-inner {
        padding-top: 1.8666666667vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__list-inner {
        padding-bottom: .4166666667vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__list-inner {
        padding-bottom: 6px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__list-inner {
        padding-bottom: 1.6vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__list-inner {
        padding-bottom: 1.8666666667vw
    }
}

.menu-modal-item__item {
    line-height: 1.1
}

.menu-modal-item__item a {
    display: flex;
    align-items: center
}

@media screen and (min-width: 801px) {
    .menu-modal-item__item a {
        font-size: 1.1805555556vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__item a {
        font-size: 17px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        font-size: 4.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        font-size: 2.9333333333vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__item a {
        gap: .6944444444vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__item a {
        gap: 10px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        gap: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        gap: 1.0666666667vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__item a {
        padding-top: .5555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__item a {
        padding-top: 8px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        padding-top: 2.1333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        padding-top: 1.3333333333vw
    }
}

@media screen and (min-width: 801px) {
    .menu-modal-item__item a {
        padding-bottom: .5555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__item a {
        padding-bottom: 8px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        padding-bottom: 2.1333333333vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a {
        padding-bottom: 1.3333333333vw
    }
}

.menu-modal-item__item a:hover {
    color: inherit;
    text-decoration: none;
    opacity: .7
}

@media screen and (min-width: 801px) {
    .menu-modal-item__item a svg {
        width: .8333333333vw
    }
}

@media screen and (min-width: 1440px) {
    .menu-modal-item__item a svg {
        width: 12px
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a svg {
        width: 3.2vw
    }
}

@media screen and (max-width: 800px) {
    .menu-modal-item__item a svg {
        width: 2.1333333333vw
    }
}

.menu-modal-item__item a svg path {
    stroke: currentColor
}

body {
    -webkit-font-smoothing: antialiased
}

main {
    font-family: Hiragino Kaku Gothic ProN, Meiryo, MS PGothic, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75;
    padding-top: 0 !important;
    color: #094;
    overflow: hidden
}

@media screen and (min-width: 801px) {
    main {
        font-size: 1.1111111111vw
    }
}

@media screen and (min-width: 1440px) {
    main {
        font-size: 16px
    }
}

@media screen and (max-width: 800px) {
    main {
        font-size: 4.2666666667vw
    }
}

main img {
    display: block;
    max-width: 100%
}

@media screen and (max-width: 800px) {
    main .pc_only {
        display: none !important
    }
}

@media screen and (min-width: 801px) {
    main .sp_only {
        display: none !important
    }
}

.st-PageTop,
.st-Footer_Upper {
    display: none !important
}

body {
    min-width: auto !important
}

.pbPage {
    width: 100% !important
}

@media screen and (max-width: 767px) {
    .page-footer {
        min-width: auto !important
    }

    .page-footer .footer-lower .footer-sub-nav .footer-sub-nav_list>li {
        margin: 14px 5px 0 0;
        padding-right: 8px
    }

    .stViewMode .stLast {
        width: 90vw
    }

    .stViewMode .stLast>a {
        width: 90vw;
        height: 17vw;
        background-size: contain
    }

    .footer-logo img {
        width: 31vw;
        height: auto
    }

    .page-footer .footer-lower .footer-sub-nav .footer-sub-nav_list>li {
        font-size: 10px
    }

    .page-footer .footer-lower .footer-sub-nav {
        margin-top: 20px
    }

    .page-footer .footer-lower {
        padding: 20px 20px 100px
    }

    .copyright {
        margin-top: 24px !important
    }

    .page-footer .footer-lower .copyright {
        font-size: 10px
    }

    .page-footer .footer-lower {
        background: #ffffff url(/library/default/middle/img_renew/layout/footer_line.png) bottom 40px center/100vw 40px no-repeat
    }
}

body {
    background-image: url(/library/anshin/7pj/community/img/paper_bg.webp);
    background-size: 100% auto;
    background-repeat: repeat
}

#footerArea {
    padding: 0;
    overflow: visible !important
}

#page {
    overflow: hidden
}

.movie-modal {
    display: none;
    z-index: 500;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.movie-modal__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #00000080
}

.movie-modal__iframe-wrap {
    position: relative;
    max-width: 95vw;
    width: 960px
}

.movie-modal__iframe-wrap svg {
    position: absolute;
    cursor: pointer;
    transition: transform .2s;
    width: 24px;
    right: 0;
    top: -38px
}

@media (hover: hover) and (min-width: 801px) {
    .movie-modal__iframe-wrap svg:hover {
        transform: scale(1.1)
    }
}

.movie-modal__iframe {
    aspect-ratio: 16/9;
    height: 100%;
    width: 100%;
    background: #000;
    position: relative
}

.movie-modal__iframe video,
.movie-modal__iframe iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
*,
:before,
:after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0
}

main {
    display: block
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none
}

dt {
    font-weight: 700
}

dd {
    margin-left: 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit
}

pre {
    font-family: monospace, monospace;
    font-size: inherit
}

address {
    font-style: inherit
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit
}

abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: inherit
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

svg,
img,
embed,
object,
iframe {
    vertical-align: bottom
}

button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-align: inherit;
    text-transform: inherit
}

[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox
}

[type=radio] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio
}

button,
[type=button],
[type=reset],
[type=submit] {
    cursor: pointer
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
    cursor: default
}

:-moz-focusring {
    outline: auto
}

select:disabled {
    opacity: inherit
}

option {
    padding: 0
}

fieldset {
    margin: 0;
    padding: 0;
    min-width: 0
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

label[for] {
    cursor: pointer
}

details {
    display: block
}

summary {
    display: list-item
}

[contenteditable]:focus {
    outline: auto
}

table {
    border-color: inherit;
    border-collapse: collapse
}

caption {
    text-align: left
}

td,
th {
    vertical-align: top;
    padding: 0
}

th {
    text-align: left;
    font-weight: 700
}

.top-fv {
    position: relative;
    z-index: 1
}

@media screen and (min-width: 801px) {
    .top-fv {
        padding-top: 15.2777777778vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv {
        padding-top: 220px
    }
}

@media screen and (max-width: 800px) {
    .top-fv {
        padding-top: 58.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv {
        padding-top: 24vw
    }
}

.top-fv__kv {
    width: 93%;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: rotate(15deg);
    transform-origin: left top;
    height: 50vw
}

@media screen and (max-width: 800px) {
    .top-fv__kv {
        height: 103.7vw
    }
}

.top-fv__kv.inview {
    opacity: 1;
    transform: rotate(0);
    transform-origin: -20% -20%;
    transition: opacity 1s, transform 1s cubic-bezier(.23, 1, .32, 1)
}

.top-fv__kv img {
    width: 100%
}

.top-fv-state {
    background-color: #094;
    position: relative;
    z-index: 1;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px
}

@media screen and (min-width: 801px) {
    .top-fv-state {
        margin-top: -13.8888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-state {
        margin-top: -200px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state {
        margin-top: -53.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state {
        margin-top: -26.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-fv-state {
        padding-top: 20.8333333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-state {
        padding-top: 300px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state {
        padding-top: 80vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state {
        padding-top: 37.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state {
        color: #fff
    }
}

.top-fv-state__inner {
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 801px) {
    .top-fv-state__inner {
        width: 70.2777777778vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-state__inner {
        width: 1012px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state__inner {
        width: 269.8666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state__inner {
        width: 87.2vw
    }
}

.top-fv-state-blocks {
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 801px) {
    .top-fv-state-blocks {
        width: 53.125vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-state-blocks {
        width: 765px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state-blocks {
        width: 204vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-state-blocks {
        flex-direction: column
    }
}

.top-fv-state-block {
    opacity: 0;
    transform: translateY(50px)
}

.top-fv-state-block img {
    width: 100%
}

.top-fv-state-block.inview {
    opacity: 1;
    transform: rotate(0);
    transition: opacity 1s .5s, transform 2s cubic-bezier(.23, 1, .32, 1) .5s
}

@media screen and (min-width: 801px) {
    .top-fv-movie {
        margin-top: 6.9444444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-movie {
        margin-top: 100px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie {
        margin-top: 26.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie {
        margin-top: 10.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-fv-movie {
        padding-bottom: 11.5972222222vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-movie {
        padding-bottom: 167px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie {
        padding-bottom: 44.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie {
        padding-bottom: 24vw
    }
}

.top-fv-movie__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

@media screen and (min-width: 801px) {
    .top-fv-movie__list {
        gap: 8.3333333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-movie__list {
        gap: 120px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__list {
        gap: 32vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__list {
        gap: 12vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__list {
        display: flex;
        flex-direction: column
    }
}

.top-fv-movie__item .play {
    transition: transform .5s cubic-bezier(.215, .61, .355, 1), opacity .5s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (min-width: 801px) {
    .top-fv-movie__item .play {
        width: 3.6111111111vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-movie__item .play {
        width: 52px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__item .play {
        width: 13.8666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__item .play {
        width: 10.6666666667vw
    }
}

.top-fv-movie__item:hover .play {
    opacity: 1;
    transform: scale(1.2)
}

.top-fv-movie__thum {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16/9;
    background-color: #ccc;
    position: relative
}

.top-fv-movie__thum img {
    position: relative;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.top-fv-movie__thum img.play {
    position: relative;
    z-index: 2
}

.top-fv-movie__head {
    color: #fff;
    text-align: center;
    line-height: 1.3
}

@media screen and (min-width: 801px) {
    .top-fv-movie__head {
        font-size: 1.6666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-movie__head {
        font-size: 24px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__head {
        font-size: 6.4vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__head {
        font-size: 4.2666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-fv-movie__head {
        margin-top: .6944444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-fv-movie__head {
        margin-top: 10px
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__head {
        margin-top: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-fv-movie__head {
        font-weight: 400
    }
}

.main-content2 {
    background-image: url(/library/anshin/7pj/community/img/paper_bg.webp);
    background-size: 100% auto;
    background-repeat: repeat;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
    z-index: 2
}

@media screen and (min-width: 801px) {
    .main-content2 {
        margin-top: -3.4722222222vw
    }
}

@media screen and (min-width: 1440px) {
    .main-content2 {
        margin-top: -50px
    }
}

@media screen and (max-width: 800px) {
    .main-content2 {
        margin-top: -13.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .main-content2 {
        margin-top: -10.6666666667vw
    }
}

.top-voice {
    position: relative
}

@media screen and (min-width: 801px) {
    .top-voice {
        padding-top: 6.9444444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice {
        padding-top: 100px
    }
}

@media screen and (max-width: 800px) {
    .top-voice {
        padding-top: 26.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice {
        padding-top: 10.6666666667vw
    }
}

.top-voice__illust {
    position: absolute
}

.top-voice__illust-1 {
    left: -3%;
    top: 3%
}

@media screen and (min-width: 801px) {
    .top-voice__illust-1 {
        width: 24.3055555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice__illust-1 {
        width: 350px
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-1 {
        width: 93.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-1 {
        width: 37.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-1 {
        left: -6%;
        top: 0%
    }
}

.top-voice__illust-2 {
    top: 6%;
    right: -10%
}

@media screen and (min-width: 801px) {
    .top-voice__illust-2 {
        width: 55.5555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice__illust-2 {
        width: 800px
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-2 {
        width: 213.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-2 {
        width: 80vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-2 {
        right: -20%;
        top: 10%;
        transform: rotate(-20deg)
    }
}

.top-voice__illust-3 {
    top: 54%;
    left: 0
}

@media screen and (min-width: 801px) {
    .top-voice__illust-3 {
        width: 20.8333333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice__illust-3 {
        width: 300px
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-3 {
        width: 80vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-3 {
        width: 32vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__illust-3 {
        left: -3%;
        top: 60%
    }
}

.top-voice__inner {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2
}

@media screen and (min-width: 801px) {
    .top-voice__inner {
        width: 70.2083333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice__inner {
        width: 1011px
    }
}

@media screen and (max-width: 800px) {
    .top-voice__inner {
        width: 269.6vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__inner {
        width: 87.2vw
    }
}

.top-voice__head {
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 801px) {
    .top-voice__head {
        width: 26.25vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice__head {
        width: 378px
    }
}

@media screen and (max-width: 800px) {
    .top-voice__head {
        width: 100.8vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__head {
        width: 51.7333333333vw
    }
}

@media screen and (min-width: 801px) {
    .top-voice__head {
        padding-bottom: 5.5555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice__head {
        padding-bottom: 80px
    }
}

@media screen and (max-width: 800px) {
    .top-voice__head {
        padding-bottom: 21.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice__head {
        padding-bottom: 13.3333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice__head {
        margin-left: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice__head {
        margin-left: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice__head {
        margin-left: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice__head {
        margin-left: 31.2vw
    }
}

.top-voice-list {
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 801px) {
    .top-voice-list {
        gap: 11.1111111111vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-list {
        gap: 160px
    }
}

@media screen and (max-width: 800px) {
    .top-voice-list {
        gap: 42.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-list {
        gap: 21.3333333333vw
    }
}

.top-voice-pic {
    overflow: hidden
}

@media screen and (min-width: 801px) {
    .top-voice-pic {
        border-radius: 1.1805555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-pic {
        border-radius: 17px
    }
}

@media screen and (max-width: 800px) {
    .top-voice-pic {
        border-radius: 4.5333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-pic {
        border-radius: 2.6666666667vw
    }
}

.top-voice-item {
    display: flex
}

@media screen and (min-width: 801px) {
    .top-voice-item {
        gap: 2.0833333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-item {
        gap: 30px
    }
}

@media screen and (max-width: 800px) {
    .top-voice-item {
        gap: 8vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-item {
        gap: 0vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-item {
        flex-direction: column
    }
}

.top-voice-item .top-voice-head {
    opacity: 0;
    transform: translateY(50px)
}

.top-voice-item .top-voice-pic {
    opacity: 0;
    transform: scale(.6)
}

.top-voice-item .top-voice-age {
    opacity: 0;
    transform: translateY(20px)
}

.top-voice-item.inview .top-voice-head {
    opacity: 1;
    transform: none;
    transition: all .8s cubic-bezier(.215, .61, .355, 1) .3s
}

.top-voice-item.inview .top-voice-pic {
    opacity: 1;
    transform: none;
    transition: all .8s cubic-bezier(.215, .61, .355, 1)
}

.top-voice-item.inview .top-voice-age {
    opacity: 1;
    transform: none;
    transition: all .8s cubic-bezier(.215, .61, .355, 1) .5s
}

@media screen and (min-width: 801px) {

    .top-voice-item:nth-child(1),
    .top-voice-item:nth-child(3) {
        flex-direction: row-reverse
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {

    .top-voice-item:nth-child(1) .top-voice-pic,
    .top-voice-item:nth-child(3) .top-voice-pic {
        width: 33.8194444444vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {

    .top-voice-item:nth-child(1) .top-voice-pic,
    .top-voice-item:nth-child(3) .top-voice-pic {
        width: 487px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {

    .top-voice-item:nth-child(1) .top-voice-pic,
    .top-voice-item:nth-child(3) .top-voice-pic {
        width: 129.8666666667vw
    }
}

@media screen and (min-width: 801px) {

    .top-voice-item:nth-child(2) .top-voice-head,
    .top-voice-item:nth-child(4) .top-voice-head {
        order: 2
    }

    .top-voice-item:nth-child(2) .top-voice-pic,
    .top-voice-item:nth-child(4) .top-voice-pic {
        order: 3
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {

    .top-voice-item:nth-child(2) .top-voice-pic,
    .top-voice-item:nth-child(4) .top-voice-pic {
        width: 44.5833333333vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {

    .top-voice-item:nth-child(2) .top-voice-pic,
    .top-voice-item:nth-child(4) .top-voice-pic {
        width: 642px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {

    .top-voice-item:nth-child(2) .top-voice-pic,
    .top-voice-item:nth-child(4) .top-voice-pic {
        width: 171.2vw
    }
}

@media screen and (min-width: 801px) {

    .top-voice-item:nth-child(2) .top-voice-age,
    .top-voice-item:nth-child(4) .top-voice-age {
        order: 1
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(1) {
        padding-right: 16.6666666667vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(1) {
        padding-right: 240px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(1) {
        padding-right: 64vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(1) .top-voice-age {
        padding-bottom: 10vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(1) .top-voice-age {
        padding-bottom: 144px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(1) .top-voice-age {
        padding-bottom: 38.4vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(1) .top-voice-head {
        width: 12.5vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(1) .top-voice-head {
        width: 180px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(1) .top-voice-head {
        width: 48vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(2) {
        padding-left: 4.1666666667vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(2) {
        padding-left: 60px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(2) {
        padding-left: 16vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(2) .top-voice-age {
        padding-bottom: 7.2222222222vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(2) .top-voice-age {
        padding-bottom: 104px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(2) .top-voice-age {
        padding-bottom: 27.7333333333vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(2) .top-voice-head {
        width: 10.2777777778vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(2) .top-voice-head {
        width: 148px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(2) .top-voice-head {
        width: 39.4666666667vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(3) {
        padding-left: 4.1666666667vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(3) {
        padding-left: 60px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(3) {
        padding-left: 16vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(3) .top-voice-age {
        padding-bottom: 5.2083333333vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(3) .top-voice-age {
        padding-bottom: 75px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(3) .top-voice-age {
        padding-bottom: 20vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(3) .top-voice-head {
        width: 8.125vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(3) .top-voice-head {
        width: 117px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(3) .top-voice-head {
        width: 31.2vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(4) {
        padding-left: 4.1666666667vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(4) {
        padding-left: 60px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(4) {
        padding-left: 16vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(4) .top-voice-age {
        padding-bottom: 5.9027777778vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(4) .top-voice-age {
        padding-bottom: 85px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(4) .top-voice-age {
        padding-bottom: 22.6666666667vw
    }
}

@media screen and (min-width: 801px) and (min-width: 801px) {
    .top-voice-item:nth-child(4) .top-voice-head {
        width: 14.7916666667vw
    }
}

@media screen and (min-width: 801px) and (min-width: 1440px) {
    .top-voice-item:nth-child(4) .top-voice-head {
        width: 213px
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .top-voice-item:nth-child(4) .top-voice-head {
        width: 56.8vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-item .top-voice-head {
        order: 2
    }

    .top-voice-item .top-voice-pic {
        order: 1
    }

    .top-voice-item .top-voice-age {
        order: 2
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(1) {
        width: 16.0416666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(1) {
        width: 231px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(1) {
        width: 61.6vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(1) .top-voice-pic {
        margin-left: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(1) .top-voice-pic {
        margin-left: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(1) .top-voice-pic {
        margin-left: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(1) .top-voice-pic {
        margin-left: 4vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(1) .top-voice-pic {
        width: 13.9583333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(1) .top-voice-pic {
        width: 201px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(1) .top-voice-pic {
        width: 53.6vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(2) {
        width: 18.3333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(2) {
        width: 264px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(2) {
        width: 70.4vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(2) {
        margin-left: 2.9166666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(2) {
        margin-left: 42px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(2) {
        margin-left: 11.2vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(3) {
        width: 15.3472222222vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(3) {
        width: 221px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(3) {
        width: 58.9333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(3) {
        margin-left: 5.9722222222vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(3) {
        margin-left: 86px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(3) {
        margin-left: 22.9333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(4) {
        width: 18.3333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(4) {
        width: 264px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(4) {
        width: 70.4vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(4) .top-voice-pic {
        width: 18.3333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(4) .top-voice-pic {
        width: 264px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(4) .top-voice-pic {
        width: 70.4vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-voice-item:nth-child(4) .top-voice-head {
        width: 19.4444444444vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-voice-item:nth-child(4) .top-voice-head {
        width: 280px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-voice-item:nth-child(4) .top-voice-head {
        width: 74.6666666667vw
    }
}

.top-voice-age {
    align-self: flex-start;
    color: #094
}

@media screen and (min-width: 801px) {
    .top-voice-age {
        padding-left: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-age {
        padding-left: 0
    }
}

@media screen and (max-width: 800px) {
    .top-voice-age {
        padding-left: 0vw
    }
}

@media screen and (min-width: 801px) {
    .top-voice-age {
        padding-right: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-age {
        padding-right: 0
    }
}

@media screen and (max-width: 800px) {
    .top-voice-age {
        padding-right: 0vw
    }
}

@media screen and (min-width: 801px) {
    .top-voice-age {
        font-size: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-age {
        font-size: 0px
    }
}

@media screen and (max-width: 800px) {
    .top-voice-age {
        font-size: 0vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-age {
        font-size: 2.9333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-age {
        align-self: flex-start
    }
}

@media screen and (min-width: 801px) {
    .top-voice-head {
        padding-left: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-head {
        padding-left: 0
    }
}

@media screen and (max-width: 800px) {
    .top-voice-head {
        padding-left: 0vw
    }
}

@media screen and (min-width: 801px) {
    .top-voice-head {
        padding-right: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-head {
        padding-right: 0
    }
}

@media screen and (max-width: 800px) {
    .top-voice-head {
        padding-right: 0vw
    }
}

@media screen and (min-width: 801px) {
    .top-voice-head {
        font-size: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-head {
        font-size: 0px
    }
}

@media screen and (max-width: 800px) {
    .top-voice-head {
        font-size: 0vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-head {
        font-size: 2.9333333333vw
    }
}

@media screen and (min-width: 801px) {
    .top-voice-head {
        margin-top: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-voice-head {
        margin-top: 0
    }
}

@media screen and (max-width: 800px) {
    .top-voice-head {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) {
    .top-voice-head {
        margin-top: 2.6666666667vw
    }
}

.top-pj {
    position: relative
}

@media screen and (min-width: 801px) {
    .top-pj {
        padding-top: 6.9444444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj {
        padding-top: 100px
    }
}

@media screen and (max-width: 800px) {
    .top-pj {
        padding-top: 26.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj {
        padding-top: 5.3333333333vw
    }
}

.top-pj__illust {
    position: relative;
    margin-left: auto
}

@media screen and (min-width: 801px) {
    .top-pj__illust {
        width: 24.5138888889vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__illust {
        width: 353px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__illust {
        width: 94.1333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__illust {
        width: 43.4666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj__illust {
        margin-right: 20.1388888889vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__illust {
        margin-right: 290px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__illust {
        margin-right: 77.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__illust {
        margin-right: 16vw
    }
}

.top-pj__contentWrap {
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 801px) {
    .top-pj__contentWrap {
        width: 100vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__contentWrap {
        width: 1440px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__contentWrap {
        width: 384vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__contentWrap {
        width: 100vw
    }
}

.top-pj__wrap {
    position: relative
}

.top-pj__wrap:before {
    content: "";
    right: 99%;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    background-color: #82bc00
}

.top-pj__inner {
    background-color: #82bc00;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    position: relative;
    z-index: 2
}

@media screen and (min-width: 801px) {
    .top-pj__inner {
        width: 91.6666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__inner {
        width: 1320px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__inner {
        width: 352vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__inner {
        width: 93.6vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj__inner {
        padding-bottom: 25.2777777778vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__inner {
        padding-bottom: 364px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__inner {
        padding-bottom: 97.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__inner {
        padding-bottom: 53.3333333333vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj__inner {
        padding-top: 8.3333333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__inner {
        padding-top: 120px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__inner {
        padding-top: 32vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__inner {
        padding-top: 10.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__inner {
        border-top-right-radius: 7vw;
        border-bottom-right-radius: 7vw
    }
}

.top-pj__content {
    margin-left: auto
}

@media screen and (min-width: 801px) {
    .top-pj__content {
        margin-right: 5.9722222222vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__content {
        margin-right: 86px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__content {
        margin-right: 22.9333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__content {
        margin-right: 6.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj__content {
        width: 71.5972222222vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__content {
        width: 1031px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__content {
        width: 274.9333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__content {
        width: 76.5333333333vw
    }
}

.top-pj__head {
    margin-left: auto;
    margin-right: auto;
    border-radius: 10000px;
    background-color: #fff;
    text-align: center;
    font-weight: 700
}

@media screen and (min-width: 801px) {
    .top-pj__head {
        padding-top: .4861111111vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__head {
        padding-top: 7px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head {
        padding-top: 1.8666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head {
        padding-top: 2.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj__head {
        padding-bottom: .4861111111vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__head {
        padding-bottom: 7px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head {
        padding-bottom: 1.8666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head {
        padding-bottom: 2.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj__head {
        font-size: 2.3611111111vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__head {
        font-size: 34px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head {
        font-size: 9.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head {
        font-size: 4vw
    }
}

.top-pj__head img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 801px) {
    .top-pj__head img {
        width: 37.1527777778vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj__head img {
        width: 535px
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head img {
        width: 142.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj__head img {
        width: 53.3333333333vw
    }
}

.top-pj-top {
    display: grid;
    grid-template-columns: 1fr auto
}

@media screen and (min-width: 801px) {
    .top-pj-top {
        margin-top: 4.1666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-top {
        margin-top: 60px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top {
        margin-top: 16vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top {
        margin-top: 8vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-top {
        gap: 1.8055555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-top {
        gap: 26px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top {
        gap: 6.9333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top {
        display: flex;
        flex-direction: column
    }
}

.top-pj-top__pic {
    overflow: hidden
}

@media screen and (min-width: 801px) {
    .top-pj-top__pic {
        width: 27.5vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-top__pic {
        width: 396px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__pic {
        width: 105.6vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-top__pic {
        border-radius: 1.0416666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-top__pic {
        border-radius: 15px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__pic {
        border-radius: 4vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__pic {
        width: 100%;
        aspect-ratio: 4.8/3;
        position: relative
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-pj-top__pic {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-pj-top__pic {
        margin-top: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-pj-top__pic {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-pj-top__pic {
        margin-top: 1.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__pic img {
        -o-object-position: 50% 30%;
        object-position: 50% 30%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.top-pj-top__desc {
    line-height: 1.7;
    color: #fff;
    font-weight: 400;
    text-align: justify
}

@media screen and (min-width: 801px) {
    .top-pj-top__desc {
        font-size: 1.6666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-top__desc {
        font-size: 24px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__desc {
        font-size: 6.4vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__desc {
        font-size: 3.7333333333vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-top__desc {
        margin-top: -.6944444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-top__desc {
        margin-top: -10px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__desc {
        margin-top: -2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-top__desc {
        line-height: 1.8
    }
}

.top-pj-graph {
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 801px) {
    .top-pj-graph {
        width: 52.9166666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-graph {
        width: 762px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-graph {
        width: 203.2vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-graph {
        margin-top: 2.7777777778vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-graph {
        margin-top: 40px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-graph {
        margin-top: 10.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-graph {
        width: 100%
    }
}

.top-pj-risho {
    display: grid;
    grid-template-columns: 1fr auto
}

@media screen and (min-width: 801px) {
    .top-pj-risho {
        margin-top: 6.1111111111vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho {
        margin-top: 88px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho {
        margin-top: 23.4666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho {
        margin-top: 10.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-risho {
        gap: 1.7361111111vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho {
        gap: 25px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho {
        gap: 6.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho {
        display: flex;
        flex-direction: column
    }
}

@media screen and (min-width: 801px) {
    .top-pj-risho__info {
        margin-top: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho__info {
        margin-top: 0
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__info {
        margin-top: 0vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-risho__head {
        width: 38.9583333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho__head {
        width: 561px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__head {
        width: 149.6vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__head {
        width: 100%
    }
}

.top-pj-risho__pic {
    overflow: hidden;
    position: relative
}

@media screen and (min-width: 801px) {
    .top-pj-risho__pic {
        width: 27.5vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho__pic {
        width: 396px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__pic {
        width: 105.6vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-risho__pic {
        border-radius: 1.0416666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho__pic {
        border-radius: 15px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__pic {
        border-radius: 4vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__pic {
        aspect-ratio: 4.8/3;
        width: 100%
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-pj-risho__pic {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-pj-risho__pic {
        margin-top: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-pj-risho__pic {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__pic img {
        -o-object-position: 50% 55%;
        object-position: 50% 55%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.top-pj-risho__desc {
    line-height: 1.5;
    color: #fff;
    text-align: justify;
    font-weight: 400
}

@media screen and (min-width: 801px) {
    .top-pj-risho__desc {
        font-size: 1.6666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho__desc {
        font-size: 24px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__desc {
        font-size: 6.4vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__desc {
        font-size: 3.7333333333vw
    }
}

@media screen and (min-width: 801px) {
    .top-pj-risho__desc {
        margin-top: 1.8055555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-risho__desc {
        margin-top: 26px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__desc {
        margin-top: 6.9333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__desc {
        margin-top: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-risho__desc {
        line-height: 1.8
    }
}

.top-pj-bnr {
    position: relative
}

@media screen and (min-width: 801px) {
    .top-pj-bnr {
        margin-top: 3.4722222222vw
    }
}

@media screen and (min-width: 1440px) {
    .top-pj-bnr {
        margin-top: 50px
    }
}

@media screen and (max-width: 800px) {
    .top-pj-bnr {
        margin-top: 13.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-pj-bnr {
        margin-top: 5.3333333333vw
    }
}

.top-pj-bnr__link {
    position: absolute;
    top: 79%;
    width: 28%;
    height: 20%;
    z-index: 2
}

@media screen and (max-width: 800px) {
    .top-pj-bnr__link {
        width: 70%
    }
}

.top-pj-bnr__link-1 {
    left: 21%
}

@media screen and (max-width: 800px) {
    .top-pj-bnr__link-1 {
        left: 15%;
        top: 74%
    }
}

.top-pj-bnr__link-2 {
    right: 21%
}

@media screen and (max-width: 800px) {
    .top-pj-bnr__link-2 {
        right: auto;
        left: 15%;
        top: 86%
    }
}

.top-pj-bnr img {
    position: relative;
    z-index: 1
}

.vis-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: all .3s
}

.vis-modal.open {
    opacity: 1;
    pointer-events: all
}

.vis-modal.open .vis-modal__pic,
.vis-modal.open .vis-modal__close {
    pointer-events: all
}

.vis-modal__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #094e
}

.vis-modal__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    pointer-events: none
}

.vis-modal__content {
    position: relative;
    max-height: 80svh
}

@media screen and (min-width: 801px) {
    .vis-modal__content {
        max-width: 1280px;
        width: 65%
    }
}

.vis-modal__pic {
    transition: transform 1s cubic-bezier(.23, 1, .32, 1)
}

.vis-modal__pic img {
    width: 100%;
    max-height: 80svh;
    -o-object-fit: contain;
    object-fit: contain
}

.vis-modal__close {
    position: absolute;
    transform: translate(0);
    right: 0;
    bottom: 103%;
    cursor: pointer
}

@media screen and (min-width: 801px) {
    .vis-modal__close {
        width: 3.4722222222vw
    }
}

@media screen and (min-width: 1440px) {
    .vis-modal__close {
        width: 50px
    }
}

@media screen and (max-width: 800px) {
    .vis-modal__close {
        width: 13.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .vis-modal__close {
        width: 8vw
    }
}

@media screen and (min-width: 801px) {
    .vis-modal__close {
        height: 3.4722222222vw
    }
}

@media screen and (min-width: 1440px) {
    .vis-modal__close {
        height: 50px
    }
}

@media screen and (max-width: 800px) {
    .vis-modal__close {
        height: 13.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .vis-modal__close {
        height: 8vw
    }
}

@media screen and (max-width: 800px) {
    .vis-modal__close {
        right: 3%;
        bottom: 103%
    }
}

.vis-modal__close span {
    background-color: #fff;
    height: 2px;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 100%
}

.vis-modal__close span:nth-child(2) {
    transform: rotate(-45deg)
}

.top-reaearch {
    position: relative;
    z-index: 3;
    pointer-events: none
}

@media screen and (min-width: 801px) {
    .top-reaearch {
        padding-top: 6.9444444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch {
        padding-top: 100px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch {
        padding-top: 26.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch {
        padding-top: 18.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch {
        margin-top: -31.9444444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch {
        margin-top: -460px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch {
        margin-top: -122.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch {
        margin-top: -96vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch {
        padding-bottom: 13.8888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch {
        padding-bottom: 200px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch {
        padding-bottom: 53.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch {
        padding-bottom: 21.3333333333vw
    }
}

.top-reaearch__wrap {
    margin-left: auto;
    margin-right: auto;
    position: relative
}

@media screen and (min-width: 801px) {
    .top-reaearch__wrap {
        width: 100vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__wrap {
        width: 1440px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__wrap {
        width: 384vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__wrap {
        width: 100vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__wrap {
        padding-left: 8.3333333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__wrap {
        padding-left: 120px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__wrap {
        padding-left: 32vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__wrap {
        padding-left: 0vw
    }
}

.top-reaearch__wrap:before {
    content: "";
    left: 99%;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    background-color: gold
}

.top-reaearch__inner {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    position: relative;
    z-index: 2
}

@media screen and (min-width: 801px) {
    .top-reaearch__inner {
        width: 91.6666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__inner {
        width: 1320px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__inner {
        width: 352vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__inner {
        width: 100vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__inner {
        padding-bottom: 5.5555555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__inner {
        padding-bottom: 80px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__inner {
        padding-bottom: 21.3333333333vw
    }
}

.top-reaearch__inner:before {
    content: "";
    left: 0%;
    position: absolute;
    bottom: 0;
    height: 70%;
    width: 100%;
    background-color: gold;
    border-bottom-left-radius: 30px
}

@media screen and (max-width: 800px) {
    .top-reaearch__inner:before {
        border-bottom-left-radius: 0;
        height: 70%
    }
}

.top-reaearch-top {
    text-align: right;
    font-weight: 700
}

@media screen and (max-width: 800px) {
    .top-reaearch-top {
        text-align: center
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-reaearch-top {
        margin-left: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-reaearch-top {
        margin-left: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-reaearch-top {
        margin-left: 0vw
    }
}

.top-reaearch__head {
    line-height: 1.4
}

@media screen and (min-width: 801px) {
    .top-reaearch__head {
        font-size: 3.75vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__head {
        font-size: 54px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__head {
        font-size: 14.4vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__head {
        font-size: 7.4666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__head {
        position: relative;
        top: 0;
        width: auto;
        right: 0;
        font-weight: 700;
        text-align: center
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-reaearch__head {
        font-size: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-reaearch__head {
        font-size: 0px
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-reaearch__head {
        font-size: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-reaearch__head {
        font-size: 7.4666666667vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-reaearch__head {
        padding-right: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-reaearch__head {
        padding-right: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-reaearch__head {
        padding-right: 0vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__desc {
        font-size: 1.6666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__desc {
        font-size: 24px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__desc {
        font-size: 6.4vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__desc {
        font-size: 4.2666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__desc {
        margin-top: .6944444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__desc {
        margin-top: 10px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__desc {
        margin-top: 2.6666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__desc {
        line-height: 1.5
    }
}

.top-reaearch__bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    right: 0;
    top: 0;
    pointer-events: none
}

@media screen and (max-width: 800px) {
    .top-reaearch__bg {
        top: 86%;
        z-index: 3
    }
}

.top-reaearch__content {
    position: relative;
    z-index: 2
}

@media screen and (min-width: 801px) {
    .top-reaearch__content {
        margin-left: 5.0694444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__content {
        margin-left: 73px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        margin-left: 19.4666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        margin-left: 12.2666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__content {
        padding-right: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__content {
        padding-right: 0
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        padding-right: 0vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        padding-right: 9.6vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__content {
        width: 73.1944444444vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__content {
        width: 1054px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        width: 281.0666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        width: 88vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__content {
        padding-top: 13.8888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__content {
        padding-top: 200px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        padding-top: 53.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__content {
        padding-top: 42.6666666667vw
    }
}

.top-reaearch__graph {
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 801px) {
    .top-reaearch__graph {
        width: 48.4027777778vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__graph {
        width: 697px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__graph {
        width: 185.8666666667vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__graph {
        width: 66.6666666667vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__graph {
        margin-top: 0vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__graph {
        margin-top: 0
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__graph {
        margin-top: 0vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__graph {
        margin-top: 5.3333333333vw
    }
}

@media screen and (max-width: 800px) and (min-width: 801px) {
    .top-reaearch__graph {
        margin-left: 0vw
    }
}

@media screen and (max-width: 800px) and (min-width: 1440px) {
    .top-reaearch__graph {
        margin-left: 0
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-reaearch__graph {
        margin-left: 0vw
    }
}

@media screen and (max-width: 800px) and (max-width: 800px) {
    .top-reaearch__graph {
        margin-left: 5.3333333333vw
    }
}

.top-reaearch__list {
    display: flex;
    pointer-events: all;
    flex-wrap: wrap;
    justify-content: space-between
}

@media screen and (min-width: 801px) {
    .top-reaearch__list {
        -moz-column-gap: 2.0833333333vw;
        column-gap: 2.0833333333vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__list {
        -moz-column-gap: 30px;
        column-gap: 30px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__list {
        -moz-column-gap: 8vw;
        column-gap: 8vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__list {
        row-gap: 2.4305555556vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__list {
        row-gap: 35px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__list {
        row-gap: 9.3333333333vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__list {
        row-gap: 6.4vw
    }
}

@media screen and (min-width: 801px) {
    .top-reaearch__list {
        margin-top: 4.1666666667vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__list {
        margin-top: 60px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__list {
        margin-top: 16vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__list {
        margin-top: 8vw
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__list {
        grid-template-columns: repeat(1, 1fr)
    }
}

.top-reaearch__item {
    width: 46.5%
}

@media screen and (max-width: 800px) {
    .top-reaearch__item {
        width: 100%
    }
}

.top-reaearch__item:nth-child(5) {
    width: 100%
}

.top-reaearch__item:nth-child(9) {
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 801px) {
    .top-reaearch__item:nth-child(9) {
        padding-top: 2.7777777778vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__item:nth-child(9) {
        padding-top: 40px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__item:nth-child(9) {
        padding-top: 10.6666666667vw
    }
}

.top-reaearch__item:nth-child(9) a {
    text-decoration: underline !important;
    color: #094
}

@media screen and (min-width: 801px) {
    .top-reaearch__item:nth-child(9) a {
        font-size: 1.3888888889vw
    }
}

@media screen and (min-width: 1440px) {
    .top-reaearch__item:nth-child(9) a {
        font-size: 20px
    }
}

@media screen and (max-width: 800px) {
    .top-reaearch__item:nth-child(9) a {
        font-size: 5.3333333333vw
    }
}