* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body,
html {
    font-size: min(1.25vw, 16px);
    height: 100svh;
    background-color: #e2e5e5 !important;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400
}

body main,
html main {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 100svh;
    -webkit-overflow-scrolling: touch;
    background-image: url(../../challengestory/images/bg_line_w.svg), url(../images/bg_line_h.svg);
    background-size: 182px 182px, 161px 91px;
    background-repeat: repeat, repeat;
    background-position: left top, left top
}

body .scroll_inner,
html .scroll_inner {
    width: 8000px;
    height: 100%
}


.scroll_inner {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    transform: scale(var(--ratio));
    transform-origin: bottom left;
    padding: 0 0 0 46px;
    box-sizing: content-box
}

@keyframes letterFootBounce {
    0% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(-18px)
    }

    50% {
        transform: translateY(0)
    }

    70% {
        transform: translateY(-8px)
    }

    100% {
        transform: translateY(0)
    }
}

.block_position_wrapper {
    position: relative;
    width: 1190px;
    height: 100%
}

.block_position_wrapper.last_wrapper {
    width: 752px
}

.modal_block {
    position: relative;
    width: 158px;
    height: 255px;
    pointer-events: none
}

.modal_block:has(.active) {
    pointer-events: auto
}

.modal_block .letter_block {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0
}

.modal_block .letter_block .letter_front {
    width: 100%;
    height: 64px;
    background: url(../images/letter_front.svg) no-repeat center center;
    background-size: cover;
    background-position: center center;
    position: absolute;
    left: 0;
    bottom: 167px;
    z-index: 4;
    transform-origin: bottom center;
    transform: rotateX(180deg);
    transition: transform .5s ease-in-out
}

.modal_block .letter_block .letter_front.anim_end {
    z-index: 0 !important
}

.modal_block .letter_block .letter_body {
    background: #f3f3f1;
    width: 100%;
    height: 113px;
    position: absolute;
    bottom: 54px;
    left: 0
}

.modal_block .letter_block .letter_body:after {
    content: "";
    display: block;
    width: 100%;
    height: 56px;
    background: url(../images/letter_foot.svg) no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3
}

.modal_block .letter_block .letter_body:before {
    content: "";
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, .1);
    mix-blend-mode: multiply;
    position: absolute;
    left: -48px;
    bottom: 0;
    z-index: -1;
    clip-path: polygon(100% 0, 0 0, 100% 100%)
}

.modal_block .letter_block .letter_body .letter_body_inner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    -webkit-mask-image: url(../images/letter_mask.svg);
    mask-image: url(../images/letter_mask.svg);
    -webkit-mask-size: 158px 148px;
    mask-size: 158px 148px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left 0 top -13px;
    mask-position: left 0 top -13px;
    transition: all .1s ease-in-out
}

.modal_block .letter_block .letter_body .letter_body_inner .letter_content {
    width: 140px;
    height: 190px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .12);
    text-align: center;
    font-size: 15px;
    padding: 20px 0;
    transform: translateY(90px);
    transition: transform .2s ease-in-out;
    transition-delay: .5s
}

.modal_block .letter_block .letter_body .letter_body_inner .letter_content p {
    padding: 0 7px;
    position: relative
}

.modal_block .letter_block .letter_body .letter_body_inner .letter_content p span {
    display: block;
    border-bottom: 1px dashed #000;
    line-height: 1.5;
    width: 100%
}

.modal_block .letter_block .letter_body .letter_body_inner .letter_content p:after {
    content: "";
    width: 13px;
    height: 4px;
    background-image: url(../images/open_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: 10px;
    bottom: -10px
}

.modal_block .letter_block .letter_foot {
    width: 136px;
    height: 78px;
    background: #cbcbc2;
    border-radius: 50%;
    position: absolute;
    left: 11px;
    bottom: 0;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    transform: translateY(0);
    transform-origin: center bottom;
    animation: none;
    z-index: 3
}

.modal_block .letter_block .letter_foot:before {
    content: "";
    width: 120px;
    height: 68px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%)
}

.modal_block .letter_block .letter_foot:after {
    content: "";
    opacity: 0;
    transform: translateY(-20px);
    transition: all .2s ease-in-out;
    transition-delay: .2s
}

.modal_block .letter_block.active:hover {
    cursor: pointer
}

.modal_block .letter_block.active .letter_front {
    transform: rotateX(0);
    z-index: 4
}

.modal_block .letter_block.active .letter_body .letter_body_inner .letter_content {
    transform: translateY(40px)
}

.modal_block .letter_block.active .letter_foot {
    opacity: 1
}

.modal_block .letter_block.active .letter_foot:after {
    opacity: 1;
    transform: translateY(0)
}

.modal_block .letter_block.active:has(.anim_end) .letter_body .letter_body_inner .letter_content {
    transition-delay: 0s
}

.modal_block:hover .letter_block.active .letter_body .letter_body_inner .letter_content {
    transform: translateY(0)
}

.modal_block:hover .letter_block.active .letter_foot:after {
    animation: letterFootBounce .8s ease-out infinite
}

.modal_block .modal_content {
    display: none
}

.modal_block.role-none .letter_foot {
    display: none
}

.modal_block.role-sekoukanri .letter_foot:before {
    content: "";
    background: #89c288
}

.modal_block.role-sekoukanri .letter_foot:after {
    content: "";
    width: 74px;
    height: 77px;
    background: url(../images/role-sekoukanri.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 27px;
    bottom: 34px;
    z-index: 3
}

.modal_block.role-soumu .letter_foot:before {
    background: #b0badb
}

.modal_block.role-soumu .letter_foot:after {
    content: "";
    width: 74px;
    height: 73px;
    background: url(../images/role-soumu.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 32px;
    bottom: 34px;
    z-index: 3
}

.modal_block.role-eigyo .letter_foot:before {
    background: #ffffc5
}

.modal_block.role-eigyo .letter_foot:after {
    content: "";
    width: 50px;
    height: 93px;
    background: url(../images/role-eigyo.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 52px;
    bottom: 43px;
    z-index: 3
}

.modal_block.role-shokunin .letter_foot:before {
    background: #e9c3a6
}

.modal_block.role-shokunin .letter_foot:after {
    content: "";
    width: 89px;
    height: 70px;
    background: url(../images/role-shokunin.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 20px;
    bottom: 27px;
    z-index: 3
}

.modal_block.first-block {
    margin-bottom: 57px
}

.modal_block.second-block {
    margin-bottom: 230px
}

.letter_icon {
    pointer-events: none;
    position: relative
}

.letter_icon:before {
    content: "";
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, .1);
    mix-blend-mode: multiply;
    position: absolute;
    left: -48px;
    bottom: 0;
    z-index: -1;
    clip-path: polygon(100% 0, 0 0, 100% 100%)
}

.letter-icon-first {
    position: absolute;
    left: 57px;
    bottom: 358px
}

.block_position_wrapper .letter_icon:nth-child(10) {
    position: absolute;
    left: 318px;
    bottom: 684px
}

.block_position_wrapper .letter_icon:nth-child(11) {
    position: absolute;
    left: 435px;
    bottom: 320px
}

.block_position_wrapper .letter_icon:nth-child(12) {
    position: absolute;
    left: 872px;
    bottom: 612px
}

.block_position_wrapper .letter_icon:nth-child(13) {
    position: absolute;
    left: 826px;
    bottom: 70px
}

.block_position_wrapper .modal_block {
    position: absolute
}

.block_position_wrapper .modal_block:nth-child(1) {
    left: 42px;
    bottom: 52px
}

.block_position_wrapper .modal_block:nth-child(2) {
    left: 78px;
    bottom: 341px
}

.block_position_wrapper .modal_block:nth-child(3) {
    left: 250px;
    bottom: 155px
}

.block_position_wrapper .modal_block:nth-child(4) {
    left: 328px;
    bottom: 416px
}

.block_position_wrapper .modal_block:nth-child(5) {
    left: 487px;
    bottom: 598px
}

.block_position_wrapper .modal_block:nth-child(6) {
    left: 647px;
    bottom: 449px
}

.block_position_wrapper .modal_block:nth-child(7) {
    left: 766px;
    bottom: 209px
}

.block_position_wrapper .modal_block:nth-child(8) {
    left: 938px;
    bottom: 359px
}

.block_position_wrapper .modal_block:nth-child(9) {
    left: 1000px;
    bottom: 88px
}

.block_position_wrapper.last_wrapper .modal_block:nth-child(1) {
    left: 0;
    bottom: 378px
}

.block_position_wrapper.last_wrapper .modal_block:nth-child(2) {
    left: 68px;
    bottom: 85px
}

.block_position_wrapper.last_wrapper .modal_block:nth-child(3) {
    left: 254px;
    bottom: 302px
}

.block_position_wrapper.last_wrapper .modal_block:nth-child(4) {
    left: 395px;
    bottom: 522px
}

.block_position_wrapper.last_wrapper .modal_block:nth-child(5) {
    left: 582px;
    bottom: 361px
}

.block_position_wrapper.last_wrapper .letter_icon:nth-child(6) {
    position: absolute;
    left: 208px;
    bottom: 614px
}

.block_position_wrapper.last_wrapper .letter_icon:nth-child(7) {
    position: absolute;
    left: 409px;
    bottom: 235px
}

.block_position_wrapper.last_wrapper .letter_icon:nth-child(8) {
    position: absolute;
    left: 604px;
    bottom: 649px
}

.block_position_wrapper.last_wrapper .letter_icon:nth-child(9) {
    display: none
}

body.is-modal-open {
    overflow: hidden
}

.modal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    width: 100%;
    height: 100%;
    display: flex
}

.modal_overlay.is-active {
    pointer-events: auto;
    opacity: 1
}

.modal_overlay_inner {
    width: min(730px, 100%);
    max-height: 100%;
    background-color: #fff;
    background-image: url(../images/letter_stamp.svg);
    background-size: 156px 106px;
    background-repeat: no-repeat;
    background-position: left top;
    padding: 107px 78px 97px;
    overflow-y: auto;
    transform: scale(var(--ratio)) translateY(-200px);
    transition: transform .3s ease-in-out
}

.is-active .modal_overlay_inner {
    transform: scale(var(--ratio)) translateY(0)
}

.modal_close_button {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease-in-out;
    background: 0 0
}

.modal_close_button span {
    position: relative;
    display: block;
    width: 24px;
    height: 24px
}

.modal_close_button span:after,
.modal_close_button span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 2px;
    background: #000;
    transform-origin: center
}

.modal_close_button span:before {
    transform: translateY(-50%) rotate(45deg)
}

.modal_close_button span:after {
    transform: translateY(-50%) rotate(-45deg)
}

.modal_close_button:hover {
    opacity: .6
}

.modal_overlay_content .modal_content {
    padding: 0
}

.modal_overlay_content .modal_content .title {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 18px
}

.modal_overlay_content .modal_content .title span {
    display: block
}

.modal_overlay_content .modal_content .title br {
    display: none
}

.modal_overlay_content .modal_content .people {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    font-size: 14px;
    color: #000;
    margin-bottom: 24px;
    gap: 4px 8px;
    align-items: center
}

.modal_overlay_content .modal_content .people .role_name {
    grid-area: 1/1/2/2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 14px;
    height: 29px;
    background: rgba(0, 90, 160, .32);
    border-radius: 4px;
    flex: 0 0 auto
}

.modal_overlay_content .modal_content .people .name {
    grid-area: 1/2/2/3;
    font-size: 18px
}

.modal_overlay_content .modal_content .people .year {
    grid-area: 2/1/3/3
}

.modal_overlay_content .modal_content .message p {
    font-size: 16px;
    line-height: 1.8;
    /* white-space: pre-wrap */
}

footer.scroll_down {
    position: fixed;
    top: auto;
    bottom: 20px;
    right: 20px;
    width: 120px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

footer.scroll_down img {
    width: auto;
}

footer.scroll_down span {
    font-size: 14px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    margin-right: .25em
}

.is-sp-mode .letter_icon.letter-icon-first {
    display: none
}

.is-sp-mode .scroll_inner {
    padding: 0 30vw 0 0;
    margin-top: 12px
}

.is-sp-mode .modal_block.first-block {
    margin-bottom: 0
}

.is-sp-mode .modal_block.second-block {
    margin-bottom: 0
}

.is-sp-mode .modal_block .letter_block.active .letter_body .letter_body_inner .letter_content {
    transform: translateY(0);
    width: 142px;
    font-size: 16px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(1) {
    left: 44.2px;
    bottom: 39px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(2) {
    left: 140.4px;
    bottom: 286px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(3) {
    left: 189.8px;
    bottom: 559px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(4) {
    left: 326.3px;
    bottom: 100.1px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(5) {
    left: 364px;
    bottom: 377px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(6) {
    left: 505.7px;
    bottom: 583.7px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(7) {
    left: 659.1px;
    bottom: 378.3px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(8) {
    left: 782.6px;
    bottom: 146.9px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(9) {
    left: 919.1px;
    bottom: 364px
}

.is-sp-mode .block_position_wrapper .modal_block:nth-child(10) {
    left: 1003.6px;
    bottom: 91px
}

.is-sp-mode .block_position_wrapper .letter_icon:nth-child(11) {
    position: absolute;
    left: 23.4px;
    bottom: 509.6px
}

.is-sp-mode .block_position_wrapper .letter_icon:nth-child(12) {
    position: absolute;
    left: 520px;
    bottom: 274.3px
}

.is-sp-mode .block_position_wrapper .letter_icon:nth-child(13) {
    position: absolute;
    left: 744.9px;
    bottom: 46.8px
}

.is-sp-mode .block_position_wrapper .letter_icon:nth-child(14) {
    position: absolute;
    left: 839.8px;
    bottom: 635.7px
}

.is-sp-mode .block_position_wrapper.last_wrapper {
    width: 406px
}

.is-sp-mode .block_position_wrapper.last_wrapper .modal_block:nth-child(1) {
    left: 85.8px;
    bottom: 110.5px
}

.is-sp-mode .block_position_wrapper.last_wrapper .modal_block:nth-child(2) {
    left: 224.9px;
    bottom: 444.6px
}

.is-sp-mode .block_position_wrapper.last_wrapper .letter_icon {
    position: absolute
}

.is-sp-mode .block_position_wrapper.last_wrapper .letter_icon:nth-child(3) {
    left: 45.5px;
    bottom: 410.8px
}

.is-sp-mode .block_position_wrapper.last_wrapper .letter_icon:nth-child(4) {
    left: 91px;
    bottom: 669.5px
}

.is-sp-mode .block_position_wrapper.last_wrapper .letter_icon:nth-child(5) {
    left: 295.1px;
    bottom: 300.3px
}

.is-sp-mode .block_position_wrapper.last_wrapper .letter_icon:nth-child(6) {
    display: none
}

.is-sp-mode .modal_overlay {
    padding: 10.24vw 5.12vw
}

.is-sp-mode .modal_overlay.is-active .modal_overlay_inner {
    transform: translateY(0)
}

.is-sp-mode .modal_overlay_inner {
    padding: 21.83vw 6.21vw 19.77vw 6.21vw;
    background-image: url(../images/letter_stamp.svg);
    background-size: 31.79vw 21.79vw;
    transform: translateY(-200px);
    width: 100%
}

.is-sp-mode .modal_overlay_inner .modal_close_button {
    top: 4.27vw;
    right: 4.27vw;
    width: 5.26vw;
    height: 5.26vw
}

.is-sp-mode .modal_overlay_inner .modal_close_button span {
    width: 5.26vw;
    height: 5.26vw
}

.is-sp-mode .modal_overlay_inner .modal_close_button span:after,
.is-sp-mode .modal_overlay_inner .modal_close_button span:before {
    width: 5.92vw;
    height: .26vw
}

.is-sp-mode .modal_overlay_inner .modal_content .title {
    font-size: 4.4vw;
    margin-bottom: 1em
}

.is-sp-mode .modal_overlay_inner .modal_content .people .role_name {
    font-size: 3.3vw;
    padding: .5vw 2vw;
    height: 7.4vw
}

.is-sp-mode .modal_overlay_inner .modal_content .people .name {
    font-size: 3.84vw
}

.is-sp-mode .modal_overlay_inner .modal_content .people .year {
    font-size: 3.07vw
}

.is-sp-mode .modal_overlay_inner .modal_content .message p {
    font-size: 3.2vw
}

.is-sp-mode footer.scroll_down span {
    font-size: 12px
}

.is-sp-mode footer.scroll_down span:last-of-type {
    display: none
}


header h2 {
    position: absolute;
    top: 107px;
    left: 24px;
    pointer-events: none
}

.is-sp-mode header h2 {
    top: 70px;
    left: 0;
    width: 100vw;
    text-align: center;
    transform: scale(var(--ratio));
    transform-origin: center top
}

.is-sp-mode header h2 img {
    width: 212px
}


.challengestory .challengestory-title {
    display: block;
}

/*# sourceMappingURL=style.min.css.map */