/* Gather Component */
#gather {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
}

#gather-view {
    position: absolute;
    left: 0;
    top: 0;
}

/* Mobile Styles */
@media (max-width: 767px) {
    /* Main Section */
    #main {
        width: auto;
        padding-top: 29.33333vw;
    }

    .main-title {
        width: 72vw;
        margin-left: auto;
        margin-right: auto;
    }

    .main-caption {
        width: 48vw;
        margin-top: 8vw;
        font-size: 3.2vw;
    }

    .main-caption-line {
        top: .53333vw;
    }

    .main-gallery {
        height: 111vw;
    }

    .main-gallery-container {
        left: calc(50% - 24vw);
        top: 22.93333vw;
    }

    .main-gallery .item {
        width: 48vw;
    }

    /* Message Section */
    #message {
        width: 84vw;
        padding-top: 16vw;
        padding-bottom: 56vw;
    }

    .message-head {
        margin-bottom: 12.26667vw;
        font-size: 4.26667vw;
    }

    .message-title {
        margin-bottom: 10.66667vw;
        margin-left: -.53333vw;
        margin-right: -10vw;
        line-height: .97;
        font-size: 14.4vw;
    }

    .message-body {
        width: auto;
        margin-left: auto;
        line-height: 2.25;
    }

    .message-sign {
        margin-top: 17.33333vw;
        margin-left: -.53333vw;
    }

    .message-sign img {
        width: 50.66667vw;
    }

    .message-bg {
        top: -68vw;
        width: 322.13333vw;
        height: calc(100% + 45.86667vw);
    }

    /* Works Section */
    #works-contents {
        height: 164.8vw;
        padding-left: 7.46667vw;
    }

    .works-scroller {
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .works-title {
        top: -2vw;
        margin-left: -.26667vw;
        letter-spacing: 0;
        line-height: 1.1;
        font-size: 11.368vw;
    }

    .works-title-note {
        left: 41.6vw;
        top: 16.6vw;
        font-size: 3.92981vw;
    }

    .works-lead {
        top: 29vw;
        width: 58vw;
        line-height: 1.6;
        font-size: 4.26667vw;
    }

    .works-container-upper {
        left: 76vw;
    }

    .works-container-lower {
        left: 13.33333vw;
        top: 87.46667vw;
    }

    /* Individual Work Items */
    .work {
        width: 42.66667vw;
        height: auto;
        margin-right: 6.93333vw;
    }

    .work-school {
        left: 47.5vw;
        line-height: 1.6;
        font-size: 3.2vw;
    }

    .work-image {
        height: 64vw;
    }

    .work-image-bg {
        height: 64vw;
    }

    .work-summary {
        position: relative;
        top: auto;
        height: auto;
        padding: 0;
    }

    .work-summary .bg {
        display: none;
    }

    .work-title {
        margin-top: 1.4vw;
        font-weight: 700;
        font-size: 4.26667vw;
    }

    .work-subtitle {
        margin-top: 1.2vw;
        letter-spacing: 0;
        font-size: 2.66667vw;
    }

    .work-name,
    .work-arrow {
        display: none;
    }

    .work.titlesize-m .work-title,
    .work.titlesize-s .work-title {
        font-size: 3.73333vw;
    }

    .work.titlesize-s .work-subtitle {
        display: none;
    }

    /* Global Section */
    #global {
        padding-top: 5.33333vw;
        padding-bottom: 32vw;
    }

    #global .m-inner {
        height: 260.53333vw;
    }

    .global-title {
        top: 20.8vw;
        width: 64.53333vw;
    }

    .global-map {
        width: 100%;
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .global-map img {
        width: 100%;
    }

    .global-body {
        width: 73.33333vw;
        padding-top: 61.33333vw;
        font-size: 3.46667vw;
    }

    .global-tx {
        width: 41.6vw;
        bottom: 11.2vw;
    }

    /* School Info Section */
    #schoolinfo {
        padding-top: 10.66667vw;
    }

    #schoolinfo .image-left .schoolinfo-image {
        left: 12.8vw;
    }

    #schoolinfo .image-center .schoolinfo-image {
        left: 0vw;
    }


    #schoolinfo .image-right .schoolinfo-image {
        right: 10.66667vw;
    }

    .schoolinfo-unit + .schoolinfo-unit {
        margin-top: 26.66667vw;
    }

    .schoolinfo-image {
        position: relative;
        width: 98vw;
    }

    .schoolinfo-body {
//        width: 73.33333vw;
        margin-left: auto;
        margin-right: auto;
        padding-top: 9.33333vw;
    }

    .schoolinfo-title {
        margin-bottom: 8vw;
        letter-spacing: .04em;
        line-height: 1.1;
        font-size: 9.6vw;
    }

    .schoolinfo-link {
        margin-top: 8vw;
    }

    /* Contact Section */
    #contact {
        height: auto;
        padding-top: 26.66667vw;
    }

    /* Footer Info */
    .footinfo-inner {
        width: 84.53333vw;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;
    }

    .footinfo-title {
        margin-top: 19.2vw;
        font-size: 8vw;
    }

    .footinfo-links {
        margin-top: 10.13333vw;
        font-size: 3.46667vw;
    }

    .footinfo-links a {
        display: inline-block;
        padding-top: 1.6vw;
        padding-bottom: 1.6vw;
    }

    .footinfo-links li + li {
        margin-top: .53333vw;
    }

    .footinfo-bg {
        top: 20vw;
        width: 336.53333vw;
        height: 200.53333vw;
    }

    /* University Links */
    .footinfo-university {
        margin-top: 15.46667vw;
    }

    .footinfo-university a + a {
        margin-left: 6vw;
    }

    .footinfo-university-ics {
        width: 22.4vw;
    }

    .footinfo-university-mdx {
        width: 22.66667vw;
    }

    .footinfo-university-dyu {
        width: 27.46667vw;
    }

    /* Get in Touch Section */
    .footinfo-getintouch {
        position: relative;
        right: auto;
        top: auto;
        box-sizing: border-box;
        width: 84.53333vw;
        height: 86.93333vw;
        padding-top: 14.66667vw;
        margin-left: auto;
        margin-right: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .footinfo-getintouch .getintouch-title {
        width: 57.33333vw;
    }

    .footinfo-getintouch .getintouch-body {
        margin-top: 4.8vw;
        font-size: 2.93333vw;
    }

    .footinfo-getintouch .getintouch-link {
        padding-right: 6.66667vw;
        margin-top: 3.2vw;
        margin-left: 9.86667vw;
        font-size: 3.73333vw;
    }

    .footinfo-getintouch .getintouch-link:before {
        width: 18.4vw;
        height: 14.4vw;
    }

    .footinfo-getintouch .getintouch-link .icon {
        width: 5.6vw;
        height: 2.66667vw;
        margin-left: 2.13333vw;
    }
}






/* Loading Container */
#loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    background-color: #EBE6DD;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Loading States */
.-loading #loading {
    display: block;
}

#loading.-show {
    opacity: 1;
    transition: opacity .2s cubic-bezier(.25, .46, .45, .94);
}

.-hide-loading #loading {
    opacity: 0;
    transition: all .3s cubic-bezier(.25, .46, .45, .94);
}

/* Loading Content Layout */
.loading-contents {
    position: relative;
    width: 1216px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.loading-unit {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
}

/* Loading Units */
.loading-unit-ics {
    right: 44px;
    top: 0;
}

.loading-unit-ics .loading-title {
    padding-right: 102px;
}

.loading-unit-ics .loading-logo {
    width: 481px;
}

.loading-unit-mdx {
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.loading-unit-mdx .loading-title {
    padding-left: 67px;
}

.loading-unit-mdx .loading-logo {
    width: 631px;
}

.loading-unit-dyu {
    right: 180px;
    bottom: 0;
}

.loading-unit-dyu .loading-title {
    padding-right: 96px;
}

.loading-unit-dyu .loading-logo {
    width: 499px;
}

/* Logo Loading States */
.loading-unit-ics .loading-logo-loaded,
.loading-unit-dyu .loading-logo-loaded {
    left: 0;
}

.loading-unit-ics .loading-logo-loaded img,
.loading-unit-dyu .loading-logo-loaded img {
    left: 0;
}

.loading-unit-mdx .loading-logo-loaded {
    right: 0;
}

.loading-unit-mdx .loading-logo-loaded img {
    right: 0;
}

/* Typography and Logo Styles */
.loading-title {
    letter-spacing: .03em;
    line-height: 1.6;
    font-size: 20px;
}

.loading-logo {
    position: relative;
}

.loading-logo-loaded {
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
}

.loading-logo-loaded img {
    position: absolute;
    top: 0;
}

.loading-logo svg {
    stroke-width: 1px;
}

/* Mobile Styles */
@media (max-width: 767px) {
    .loading-contents {
        width: 100%;
    }

    .loading-unit-ics {
        right: 4.26667vw;
        top: 50%;
        margin-top: -62.66667vw;
    }

    .loading-unit-ics .loading-title {
        padding-right: 7.46667vw;
        text-align: right;
    }

    .loading-unit-ics .loading-logo {
        width: 48vw;
    }

    .loading-unit-mdx {
        left: 3.2vw;
    }

    .loading-unit-mdx .loading-title {
        padding-left: 6.13333vw;
    }

    .loading-unit-mdx .loading-logo {
        width: 62.4vw;
    }

    .loading-unit-dyu {
        right: 18.4vw;
        top: 50%;
        bottom: auto;
        margin-top: 38.66667vw;
    }

    .loading-unit-dyu .loading-title {
        padding-right: 7.46667vw;
        text-align: right;
    }

    .loading-unit-dyu .loading-logo {
        width: 49.33333vw;
    }

    .loading-title {
        font-size: 3.73333vw;
    }
}






#menu-btn {
    display: block;
    position: absolute;
    right: 62px;
    top: 40px;
    width: 75px;
    height: 66px;
    cursor: pointer
}

#menu-btn .icon {
    display: inline-block;
    position: relative;
    width: 42px;
    height: 10px
}

#menu-btn .icon .center,
#menu-btn .icon::before,
#menu-btn .icon::after {
    position: absolute;
    display: inline-block;
    width: 42px;
    height: 1px;
    background-color: #232323;
    content: "";
    transition: all .4s cubic-bezier(.19, 1, .22, 1)
}

#menu-btn .icon::before {
    top: 0;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top
}

#menu-btn .icon::after {
    top: 9px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom
}

.-showmenu #menu-btn .icon::before {
    -webkit-transform: rotate(30deg) translate3d(-1px, -5.8453px, 0);
    -ms-transform: rotate(30deg) translate3d(-1px, -5.8453px, 0);
    transform: rotate(30deg) translate3d(-1px, -5.8453px, 0)
}

.-showmenu #menu-btn .icon .center {
    opacity: 0
}

.-showmenu #menu-btn .icon::after {
    -webkit-transform: rotate(-30deg) translate3d(-1px, 5.8453px, 0);
    -ms-transform: rotate(-30deg) translate3d(-1px, 5.8453px, 0);
    transform: rotate(-30deg) translate3d(-1px, 5.8453px, 0)
}

.-showmenu #menu-btn:hover {
    opacity: 1
}

#menu {
    box-sizing: border-box;
    position: fixed;
    right: 0;
    top: 0;
    pointer-events: none;
    transition: all .8s cubic-bezier(.19, 1, .22, 1)
}

.-showmenu #menu {
    pointer-events: all;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: all .8s cubic-bezier(.19, 1, .22, 1)
}

#menu-btn {
    letter-spacing: .03em;
    font-size: 18.62px;
    z-index: 1;
    -webkit-tap-highlight-color: transparent
}

#menu-btn .icon {
    transition: fill .8s cubic-bezier(.19, 1, .22, 1)
}

#menu-btn .label {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -1px;
    text-align: center;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translate(-50%, -50%) rotate(15deg);
    -ms-transform: translate(-50%, -50%) rotate(15deg);
    transform: translate(-50%, -50%) rotate(15deg)
}

#menu-btn .label.is-close {
    -moz-transition: opacity .6s cubic-bezier(.25, .46, .45, .94) .3s;
    -o-transition: opacity .6s cubic-bezier(.25, .46, .45, .94) .3s;
    -webkit-transition: opacity .6s cubic-bezier(.25, .46, .45, .94);
    -webkit-transition-delay: .3s;
    transition: opacity .6s cubic-bezier(.25, .46, .45, .94) .3s
}

#menu-btn .label.is-open {
    opacity: 0;
    transition: opacity .2s cubic-bezier(.25, .46, .45, .94), color .8s cubic-bezier(.19, 1, .22, 1)
}

#menu-btn .label.is-open .icon {
    width: 17px;
    height: 13px
}

.-showmenu #menu-btn .label.is-close {
    opacity: 0;
    transition: opacity .2s cubic-bezier(.25, .46, .45, .94)
}

.-showedmenu #menu-btn .label.is-open {
    opacity: 1;
    transition: opacity .6s cubic-bezier(.25, .46, .45, .94), color .8s cubic-bezier(.19, 1, .22, 1)
}

.-appear #menu-btn .label {
    transition: none
}

#menu-btn .menu-bg {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    background-color: #EBE6DD;
    border-radius: 100%;
    pointer-events: none;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    transition: all .8s cubic-bezier(.19, 1, .22, 1)
}

.-appear #menu-btn .menu-bg {
    transition: none
}

@media (min-width: 45em) {
    #menu-btn:hover .icon {
        fill: #CAC3BC;
        transition: fill .4s cubic-bezier(.19, 1, .22, 1)
    }
    #menu-btn:hover .label.is-open {
        color: #CAC3BC;
        transition: color .4s cubic-bezier(.19, 1, .22, 1)
    }
    #menu-btn:hover .menu-bg {
        width: 85px;
        height: 85px;
        transition: all .3s cubic-bezier(.19, 1, .22, 1)
    }
}

.-showmenu #menu-btn .menu-bg {
    width: 1060px;
    height: 934px;
    left: -64px;
    top: 52px;
    transition: all .8s cubic-bezier(.19, 1, .22, 1)
}

#menu {
    z-index: 2
}

#modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-transform-origin: 50vw 50vh;
    -ms-transform-origin: 50vw 50vh;
    transform-origin: 50vw 50vh;
    transition: all 1.2s cubic-bezier(.23, 1, .32, 1)
}

#modal .modal-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0
}

.-showmodal #modal {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.-showmodal #modal .modal-bg {
    opacity: .8
}

.-modal-close-motion #modal {
    opacity: 0;
    pointer-events: none;
    transition: all 1s cubic-bezier(.23, 1, .32, 1)
}

.modal-scroller {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch
}

.modal-contents {
    width: 100%;
    overflow: hidden
}

.modal-close {
    position: absolute;
    cursor: pointer;
    z-index: 10
}

.modal-close .icon {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all .4s cubic-bezier(.19, 1, .22, 1)
}

#modal {
    background-color: #FAFAFA
}

#modal .btn {
    transition: all .8s cubic-bezier(.25, .46, .45, .94)
}

#modal .btn.-hide {
    opacity: 0;
    pointer-events: none
}

.modal-close {
    display: block;
    right: 64px;
    top: 44px
}

.modal-close .label {
    position: absolute;
    right: 50px;
    top: 16px;
    padding: 10px 50px 10px 10px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.6;
    font-size: 12px
}

.modal-close .icon {
    position: absolute;
    right: 30px;
    top: 27px;
    width: 17px;
    height: 13px;
    fill: #fff;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg)
}

.modal-close .bg {
    position: absolute;
    right: -7px;
    top: -11px;
    width: 90px;
    height: 90px
}

.modal-close .bg:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75px;
    height: 66px;
    background-color: #232323;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

@media (min-width: 45em) {
    .modal-close:hover .bg:before {
        width: 85px;
        height: 85px;
        transition: all .3s cubic-bezier(.19, 1, .22, 1)
    }
}

.modal-contents {
    position: relative;
    transition: all 1.2s cubic-bezier(.25, .46, .45, .94)
}

.modal-contents:before {
    content: "";
    position: absolute;
    left: 0;
    top: -100px;
    width: 100%;
    height: 100px;
    background-color: #FAFAFA
}

.modal-contents img {
    width: 100%
}

.modal-contents.-backstage {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: none
}

.modal-contents.-hide {
    opacity: 0;
    transition: all .6s cubic-bezier(.23, 1, .32, 1)
}

.modal-contents {
    min-height: 100%;
    padding-bottom: 180px
}

.modal-summary {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-top: 162px;
    padding-bottom: 222px
}

.modal-title {
    position: relative;
    width: 462px;
    margin-left: -4px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 80px;
    z-index: 10
}

.titlesize-m .modal-title {
    line-height: 1.07407;
    font-size: 54px
}

.titlesize-s .modal-title {
    line-height: 1.148;
    font-size: 38px
}

@media (min-width: 45em) {
    .modal-title-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        height: 300px
    }
}

.modal-subtitle {
    position: relative;
    margin-top: 10px;
    letter-spacing: -0.01em;
    line-height: 1.625;
    font-size: 16px;
    z-index: 10
}

.modal-name {
    position: relative;
    margin-top: 45px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 36px;
    z-index: 10
}

.modal-school {
    position: relative;
    margin-top: 17px;
    margin-left: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.6;
    font-size: 12px;
    z-index: 10
}

.modal-mainimage {
    position: absolute;
    right: 95px;
    top: 266px;
    max-width: 425px;
    width: 37.94643%;
    z-index: 5;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg)
}

.modal-mainimage img {
    width: 100%
}

.modal-description {
    width: 400px;
    min-height: 200px;
    margin-bottom: 100px;
    line-height: 1.96429;
    font-size: 14px
}

.modal-body {
    position: relative
}

.modal-body-inner {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.modal-body-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 500px);
    z-index: -1
}

.modal-deco {
    position: absolute;
    left: 50%;
    min-width: 1788px;
    width: 124%;
    height: 584px;
    border-radius: 100%;
    z-index: -1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.modal-deco-upper {
    top: -130px
}

.modal-deco-lower {
    bottom: 215px
}

.modal-module+.modal-module {
    margin-top: 180px
}

.modal-module-image {
    display: inline-block;
    text-align: left
}

.modal-module-image img {
    width: 100%
}

.modal-module-caption {
    display: inline-block;
    max-width: 400px;
    margin-top: 24px;
    text-align: left;
    line-height: 1.9;
    font-size: 11px
}

.modal-module-center .modal-module-image,
.modal-module-left .modal-module-image,
.modal-module-right .modal-module-image {
    width: 66.66667%
}

.modal-module-center2 .modal-module-image,
.modal-module-left2 .modal-module-image,
.modal-module-right2 .modal-module-image {
    width: 88.88889%
}

.modal-module-center3 .modal-module-image {
    width: 44.44444%
}

.modal-module-center,
.modal-module-center2,
.modal-module-center3 {
    text-align: center
}

.modal-module-left,
.modal-module-left2 {
    text-align: left
}

.modal-module-left .modal-module-caption,
.modal-module-left2 .modal-module-caption {
    margin-left: 6.25%
}

.modal-module-right,
.modal-module-right2 {
    text-align: right
}

.modal-module-column {
    width: 77.77778%;
    margin-left: auto;
    margin-right: auto;
    font-size: 0
}

.modal-module-column .modal-module-image {
    width: 48.21429%;
    vertical-align: top
}

.modal-module-column .modal-module-image1 {
    margin-right: 3.57143%
}

.modal-module-column .modal-module-image2 {
    margin-top: 122px
}

.modal-video {
    position: relative;
    width: 960px;
    margin-top: 180px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2
}

.modal-video .player-container {
    position: relative;
    overflow: hidden
}

.modal-video .player-container:before {
    content: "";
    display: block;
    padding-top: 56.25%
}

@media (min-width: 45em) {
    .modal-video .player-container:hover .playmark {
        width: 120px;
        height: 110px;
        transition: all .3s cubic-bezier(.19, 1, .22, 1)
    }
}

.modal-video .player {
    position: absolute;
    left: -2px;
    top: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background-color: #DAD6CD
}

.modal-video .thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all .6s cubic-bezier(.25, .46, .45, .94)
}

.modal-video .thumb img {
    width: 100%
}

.modal-video .thumb.-hide {
    opacity: 0;
    pointer-events: none;
    transition: all .6s cubic-bezier(.25, .46, .45, .94)
}

.modal-video .spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: spinner 1.5s infinite linear forwards;
    animation: spinner 1.5s infinite linear forwards
}

.modal-video .playmark {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 88px;
    letter-spacing: .03em;
    font-size: 24px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.modal-video .playmark:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    background-color: #F1EFEF;
    border-radius: 100%;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.modal-next {
    position: relative;
    margin-top: 201px;
    text-align: center
}

@media (min-width: 45em) {
    .modal-next a:hover .next-work-arrow {
        -webkit-transform: translate(12px, -50%) scale(1.06, .94);
        -ms-transform: translate(12px, -50%) scale(1.06, .94);
        transform: translate(12px, -50%) scale(1.06, .94);
        transition: all .3s cubic-bezier(.19, 1, .22, 1)
    }
}

.modal-next .title {
    position: absolute;
    left: 50%;
    top: 51px;
    margin-left: -35.72581%;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: .8;
    font-size: 101px;
    z-index: 10;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

@media (min-width: 45em) {
    .modal-next .title {
        color: #FFF;
        mix-blend-mode: exclusion
    }
}

.modal-next .next-work-image {
    display: inline-block;
    width: 40.32258%;
    max-width: 327px;
    margin-left: -77px;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg)
}

.modal-next .next-work-image img {
    width: 100%
}

.modal-next .next-work-arrow {
    position: absolute;
    left: 50%;
    top: 250px;
    width: 110px;
    height: 88px;
    margin-left: -96px;
    background-color: #F1EFEF;
    border-radius: 100%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.modal-next .next-work-arrow .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 15px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.modal-next .next-work-body {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 26px;
    margin-left: 17.09677%;
    text-align: left;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.modal-next .next-work-title {
    width: 340px;
    margin-left: -1px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 50px
}

.modal-next .next-work-title.titlesize-m {
    line-height: 1.075;
    font-size: 40px
}

.modal-next .next-work-title.titlesize-s {
    line-height: 1.148;
    font-size: 32px
}

.modal-next .next-work-name {
    margin-top: 12px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 24px
}

@media (min-width: 45em) {
    #modal-1 .modal-title {
        width: 400px
    }
    #modal-5 .modal-title {
        width: 480px
    }
    #modal-23 .modal-title {
        width: 350px
    }
    #modal-24 .modal-title {
        width: 310px
    }
    #modal-next-15 .next-work-title {
        width: 250px
    }
    #modal-next-16 .next-work-title {
        width: 220px
    }
    #modal-next-17 .next-work-title {
        width: 220px
    }
    #modal-next-18 .next-work-title {
        width: 300px
    }
    #modal-next-23 .next-work-title {
        width: 250px
    }
    #modal-next-24 .next-work-title {
        width: 250px
    }
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@media (max-width: 45em) {
    .modal-close {
        right: 8vw;
        top: 9.33333vw
    }
    .modal-close .label {
        right: 6.66667vw;
        top: .8vw;
        padding: 2.66667vw 13.33333vw 2.66667vw 2.66667vw;
        font-size: 3.2vw
    }
    .modal-close .icon {
        right: 5.33333vw;
        top: 4.26667vw;
        width: 4.53333vw;
        height: 3.46667vw
    }
    .modal-close .bg {
        right: -1.06667vw;
        top: -2.66667vw;
        width: 17.33333vw;
        height: 17.33333vw
    }
    .modal-close .bg:before {
        width: 16vw;
        height: 14.13333vw
    }
    .modal-contents {
        padding-bottom: 32vw
    }
    .modal-summary {
        height: auto;
        padding-top: 35.73333vw;
        padding-bottom: 15.46667vw
    }
    .modal-title {
        width: auto;
        margin-left: -1.06667vw;
        letter-spacing: -0.02em;
        font-size: 13.33333vw
    }
    .titlesize-m .modal-title {
        line-height: 1.1;
        font-size: 9.6vw
    }
    .titlesize-s .modal-title {
        letter-spacing: -0.01em;
        font-size: 8.53333vw
    }
    .modal-subtitle {
        margin-top: 6.6vw;
        font-size: 3.73333vw
    }
    .modal-name {
        margin-top: 13vw;
        letter-spacing: 0;
        font-size: 6.4vw
    }
    .modal-school {
        margin-top: 3.2vw;
        line-height: 1.5;
        font-size: 3.2vw
    }
    .modal-mainimage {
        position: relative;
        right: -1.33333vw;
        top: 0;
        max-width: initial;
        width: 51.2vw;
        margin: 11.46667vw auto 0
    }
    .modal-body-inner {
        max-width: initial
    }
    .modal-body-bg {
        height: calc(100% - 100vw)
    }
    .modal-description {
//        width: auto;
	width: 100% !important; /* 固定幅を解除 */
        min-height: initial;
        margin-bottom: 13.33333vw;
        line-height: 1.75;
        font-size: 3.73333vw
    }
    .modal-deco {
        min-width: initial;
        width: 200vw;
        height: 134.4vw
    }
    .modal-deco-upper {
        top: -60vw
    }
    .modal-deco-lower {
        bottom: 9vw
    }
    .modal-module+.modal-module {
        margin-top: 32vw
    }
    .modal-module-caption {
        max-width: initial;
        margin-top: 5.86667vw;
        line-height: 1.8;
        font-size: 2.66667vw
    }
    .modal-module-center .modal-module-image,
    .modal-module-left .modal-module-image,
    .modal-module-right .modal-module-image {
        width: 85.06667vw
    }
    .modal-module-center2 .modal-module-image,
    .modal-module-left2 .modal-module-image,
    .modal-module-right2 .modal-module-image {
        width: 100%
    }
    .modal-module-center2 .modal-module-caption,
    .modal-module-left2 .modal-module-caption,
    .modal-module-right2 .modal-module-caption {
        display: block;
        width: 85.06667vw;
        margin-left: auto;
        margin-right: auto;
        text-align: left
    }
    .modal-module-center3 .modal-module-image {
        width: 85.06667vw
    }
    .modal-module-left .modal-module-caption,
    .modal-module-left2 .modal-module-caption {
        margin-left: 7.46667vw
    }
    .modal-module-column {
        width: auto
    }
    .modal-module-column .modal-module-image {
        width: 47.46667vw
    }
    .modal-module-column .modal-module-image1 {
        margin-right: 5.06667vw
    }
    .modal-module-column .modal-module-image2 {
        margin-top: 13.33333vw
    }
    .modal-module-left .modal-module-caption,
    .modal-module-right .modal-module-caption {
        width: 77.33333vw
    }
    .modal-video {
        width: 85.06667vw;
        margin-top: 32vw
    }
    .modal-video .player {
        left: -0.5vw;
        top: -0.5vw;
        width: calc(100% + 1vw);
        height: calc(100% + 1vw)
    }
    .modal-video .spinner {
        width: 20.26667vw;
        height: 20.26667vw
    }
    .modal-video .playmark {
        width: 19.73333vw;
        height: 15.46667vw;
        font-size: 4.26667vw
    }
    .modal-next {
        margin-top: 30.13333vw
    }
    .modal-next .title {
        position: static;
        margin-left: 0;
        font-size: 12.26667vw;
        pointer-events: none
    }
    .modal-next .next-work-image {
        position: relative;
        width: 41.6vw;
        max-width: initial;
        margin: 11.46667vw auto 12.8vw
    }
    .modal-next .next-work-arrow {
        top: 44.5vw;
        width: 20vw;
        height: 15.46667vw;
        margin-left: 0;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
    .modal-next .next-work-arrow .icon {
        width: 5.86667vw;
        height: 2.66667vw
    }
    .modal-next .next-work-body {
        position: static;
        margin-top: 8vw;
        margin-left: 0;
        text-align: center
    }
    .modal-next .next-work-title {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        font-size: 8.53333vw
    }
    .modal-next .next-work-title.titlesize-m {
        font-size: 6.82667vw
    }
    .modal-next .next-work-title.titlesize-s {
        font-size: 5.46133vw
    }
    .modal-next .next-work-name {
        margin-top: 2.93333vw;
        letter-spacing: .02em;
        font-size: 4.26667vw
    }
    #modal-5 .modal-title {
        width: 102%
    }
}

@media (min-width: 45em) {
    .work-26 .work-summary {
        padding-right: 10px
    }
    #modal-27 .modal-title,
    #modal-28 .modal-title,
    #modal-29 .modal-title,
    #modal-32 .modal-title {
        width: 480px
    }
    #modal-next-26 .next-work-title,
    #modal-next-27 .next-work-title {
        width: 350px
    }
}

@media screen and (max-width: 45em) {
    .m-pc {
        display: none
    }
    .m-sp {
        display: inline-block
    }
    br.m-sp {
        display: inline
    }
    body {
        font-size: 3.73333vw
    }
    .link-arrow {
        padding-right: 8vw;
        padding-top: 7.46667vw;
        padding-bottom: 7.46667vw;
        font-size: 4.26667vw
    }
    .link-arrow:before {
        width: 24vw;
        height: 18.66667vw
    }
    .link-arrow .icon {
        top: .26667vw;
        width: 7.73333vw;
        height: 3.73333vw;
        margin-left: 4.53333vw
    }
    html {
        background-size: 40vw 40vw
    }
    .m-container2 {
        padding-left: 7.46667vw;
        padding-right: 7.46667vw
    }
    .header-lang {
        left: 8vw;
        top: 12vw
    }
    .header-lang:before {
        width: 1.06667vw;
        height: 1.06667vw
    }
    .header-lang select {
        padding-left: 2.66667vw
    }
    #menu {
        width: 100%
    }
    .gnav {
        width: 62.66667vw;
        right: 50%;
        top: 20vw;
        -webkit-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
        transform: translate(50%, 0)
    }
    .gnav a {
        padding: 1.06667vw 2.66667vw;
        line-height: 1.5;
        font-size: 6.4vw
    }
    #footer {
        margin-top: 36vw;
        padding-top: 0;
        padding-bottom: 10.13333vw
    }
    .footer-social {
        display: block;
        padding-left: 0;
        text-align: center
    }
    .footer-social-title {
        margin-bottom: 5.33333vw;
        font-size: 3.73333vw
    }
    .footer-social a {
        padding: 2.13333vw
    }
    .footer-social-facebook {
        margin-left: 0;
        margin-top: -.53333vw
    }
    .footer-social-facebook .icon {
        width: 3.46667vw;
        height: 6.66667vw
    }
    .footer-social-twitter {
        margin-left: 4vw
    }
    .footer-social-twitter .icon {
        width: 6.93333vw;
        height: 5.6vw
    }
    .footer-social-instagram {
        margin-left: 2.66667vw;
        margin-top: -.26667vw
    }
    .footer-social-instagram .icon {
        width: 6.18667vw;
        height: 6.13333vw
    }
    .footer-social-youtube {
        margin-left: 2.66667vw;
        margin-top: .26667vw
    }
    .footer-social-youtube .icon {
        width: 7.73333vw;
        height: 5.33333vw
    }
    .footer-lang {
        display: none
    }
    .footer-copyright {
        position: static;
        margin-top: 9vw;
        text-align: center;
        font-size: 3.2vw;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
    #menu-btn {
        right: 8vw;
        top: 8vw;
        width: 16vw;
        height: 13.86667vw
    }
    #menu-btn .icon {
        width: 16vw;
        height: 13.86667vw
    }
    #menu-btn {
        font-size: 3.73333vw
    }
    #menu-btn .label {
        margin-top: -.26667vw
    }
    #menu-btn .label.is-open .icon {
        width: 17px;
        height: 13px
    }
    .-showmenu #menu-btn .menu-bg {
        width: 152.26667vw;
        height: 134.13333vw;
        left: -30vw;
        top: 22vw
    }
}




/* Modal Container */
#modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background-color: #FAFAFA;
    -webkit-transform-origin: 50vw 50vh;
    -ms-transform-origin: 50vw 50vh;
    transform-origin: 50vw 50vh;
    transition: all 1.2s cubic-bezier(.23, 1, .32, 1);
    z-index: 101;
}

/* Modal Background */
#modal .modal-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
}

/* Modal States */
.-showmodal #modal {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.-showmodal #modal .modal-bg {
    opacity: .8;
}

.-modal-close-motion #modal {
    opacity: 0;
    pointer-events: none;
    transition: all 1s cubic-bezier(.23, 1, .32, 1);
}

/* Modal Layout */
.modal-scroller {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.modal-contents {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding-bottom: 180px;
    overflow: hidden;
    transition: all 1.2s cubic-bezier(.25, .46, .45, .94);
}

.modal-contents:before {
    content: "";
    position: absolute;
    left: 0;
    top: -100px;
    width: 100%;
    height: 100px;
    background-color: #FAFAFA;
}

/* Modal Content States */
.modal-contents.-backstage {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: none;
}

.modal-contents.-hide {
    opacity: 0;
    transition: all .6s cubic-bezier(.23, 1, .32, 1);
}

/* Buttons */
#modal .btn {
    transition: all .8s cubic-bezier(.25, .46, .45, .94);
}

#modal .btn.-hide {
    opacity: 0;
    pointer-events: none;
}








/* Close Button */
.modal-close {
    position: absolute;
    right: 64px;
    top: 44px;
    cursor: pointer;
    z-index: 10;
}

.modal-close .label {
    position: absolute;
    right: 50px;
    top: 16px;
    padding: 10px 50px 10px 10px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.6;
    font-size: 12px;
}

.modal-close .icon {
    position: absolute;
    right: 30px;
    top: 27px;
    width: 17px;
    height: 13px;
    fill: #fff;
    -webkit-transform: rotate(5deg) translate3d(0, 0, 0);
    -ms-transform: rotate(5deg) translate3d(0, 0, 0);
    transform: rotate(5deg) translate3d(0, 0, 0);
    transition: all .4s cubic-bezier(.19, 1, .22, 1);
}

/* Close Button Background */
.modal-close .bg {
    position: absolute;
    right: -7px;
    top: -11px;
    width: 90px;
    height: 90px;
}

.modal-close .bg:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75px;
    height: 66px;
    background-color: #232323;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1);
}

/* Desktop Hover States */
@media (min-width: 45em) {
    .modal-close:hover .bg:before {
        width: 85px;
        height: 85px;
        transition: all .3s cubic-bezier(.19, 1, .22, 1);
    }
}










/* Modal Summary */
.modal-summary {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-top: 162px;
    padding-bottom: 222px;
}

/* Title Styles */
.modal-title {
    position: relative;
    width: 462px;
    margin-left: -4px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 80px;
    z-index: 10;
}

.titlesize-m .modal-title {
    line-height: 1.07407;
    font-size: 54px;
}

.titlesize-s .modal-title {
    line-height: 1.148;
    font-size: 38px;
}

/* Title Container */
@media (min-width: 45em) {
    .modal-title-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        height: 300px;
    }
}

/* Content Elements */
.modal-subtitle {
    position: relative;
    margin-top: 10px;
    letter-spacing: -0.01em;
    line-height: 1.625;
    font-size: 16px;
    z-index: 10;
}

.modal-name {
    position: relative;
    margin-top: 45px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 36px;
    z-index: 10;
}

.modal-school {
    position: relative;
    margin-top: 17px;
    margin-left: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.6;
    font-size: 12px;
    z-index: 10;
}

/* Main Image */
.modal-mainimage {
    position: absolute;
    right: 95px;
    top: 266px;
    max-width: 425px;
    width: 37.94643%;
    z-index: 5;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
}

.modal-mainimage img {
    width: 100%;
}

/* Description */
.modal-description {
    width: 400px;
    min-height: 200px;
    margin-bottom: 100px;
    line-height: 1.96429;
    font-size: 14px;
}





/* Modal Body */
.modal-body {
    position: relative;
}

.modal-body-inner {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.modal-body-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 500px);
    z-index: -1;
}

/* Decorative Elements */
.modal-deco {
    position: absolute;
    left: 50%;
    min-width: 1788px;
    width: 124%;
    height: 584px;
    border-radius: 100%;
    z-index: -1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.modal-deco-upper {
    top: -130px;
}

.modal-deco-lower {
    bottom: 215px;
}

/* Module Spacing */
.modal-module + .modal-module {
    margin-top: 180px;
}

/* Module Images */
.modal-module-image {
    display: inline-block;
    text-align: left;
}

.modal-module-image img {
    width: 100%;
}

/* Module Caption */
.modal-module-caption {
    display: inline-block;
    max-width: 400px;
    margin-top: 24px;
    text-align: left;
    line-height: 1.9;
    font-size: 11px;
}

/* Module Layout Variations */
.modal-module-center .modal-module-image,
.modal-module-left .modal-module-image,
.modal-module-right .modal-module-image {
    width: 66.66667%;
}

.modal-module-center2 .modal-module-image,
.modal-module-left2 .modal-module-image,
.modal-module-right2 .modal-module-image {
    width: 88.88889%;
}

.modal-module-center3 .modal-module-image {
    width: 44.44444%;
}

.modal-module-center,
.modal-module-center2,
.modal-module-center3 {
    text-align: center;
}

/* Alignments */
.modal-module-left,
.modal-module-left2 {
    text-align: left;
}

.modal-module-left .modal-module-caption,
.modal-module-left2 .modal-module-caption {
    margin-left: 6.25%;
}

.modal-module-right,
.modal-module-right2 {
    text-align: right;
}






/* Video Section */
.modal-video {
    position: relative;
    width: 960px;
    margin-top: 180px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}

.modal-video .player-container {
    position: relative;
    overflow: hidden;
}

.modal-video .player-container:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.modal-video .player {
    position: absolute;
    left: -2px;
    top: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background-color: #DAD6CD;
}

/* Video Thumbnail */
.modal-video .thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all .6s cubic-bezier(.25, .46, .45, .94);
}

.modal-video .thumb img {
    width: 100%;
}

.modal-video .thumb.-hide {
    opacity: 0;
    pointer-events: none;
    transition: all .6s cubic-bezier(.25, .46, .45, .94);
}

/* Video Controls */
.modal-video .spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: spinner 1.5s infinite linear forwards;
    animation: spinner 1.5s infinite linear forwards;
}

.modal-video .playmark {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 88px;
    letter-spacing: .03em;
    font-size: 24px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1);
}

.modal-video .playmark:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    background-color: #F1EFEF;
    border-radius: 100%;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Spinner Animation */
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Desktop Hover States */
@media (min-width: 45em) {
    .modal-video .player-container:hover .playmark {
        width: 120px;
        height: 110px;
        transition: all .3s cubic-bezier(.19, 1, .22, 1);
    }
}

/* Mobile Styles */
@media screen and (max-width: 45em) {
    .modal-contents {
        padding-bottom: 32vw;
    }
    
    .modal-close {
        right: 8vw;
        top: 9.33333vw;
    }

    .modal-title {
        width: auto;
        margin-left: -1.06667vw;
        letter-spacing: -0.02em;
        font-size: 13.33333vw;
    }

    .modal-video {
        width: 85.06667vw;
        margin-top: 32vw;
    }

    .modal-video .playmark {
        width: 19.73333vw;
        height: 15.46667vw;
        font-size: 4.26667vw;
    }

    /* ... その他のモバイルスタイル ... */
}






/* Next Section */
.modal-next {
    position: relative;
    margin-top: 201px;
    text-align: center;
}

.modal-next .title {
    position: absolute;
    left: 50%;
    top: 51px;
    margin-left: -35.72581%;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: .8;
    font-size: 101px;
    z-index: 10;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/* Next Work Image */
.modal-next .next-work-image {
    display: inline-block;
    width: 40.32258%;
    max-width: 327px;
    margin-left: -77px;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
}

.modal-next .next-work-image img {
    width: 100%;
}

/* Next Work Arrow */
.modal-next .next-work-arrow {
    position: absolute;
    left: 50%;
    top: 250px;
    width: 110px;
    height: 88px;
    margin-left: -96px;
    background-color: #F1EFEF;
    border-radius: 100%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1);
}

.modal-next .next-work-arrow .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 15px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Next Work Content */
.modal-next .next-work-body {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 26px;
    margin-left: 17.09677%;
    text-align: left;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.modal-next .next-work-title {
    width: 340px;
    margin-left: -1px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 50px;
}

.modal-next .next-work-title.titlesize-m {
    line-height: 1.075;
    font-size: 40px;
}

.modal-next .next-work-title.titlesize-s {
    line-height: 1.148;
    font-size: 32px;
}

.modal-next .next-work-name {
    margin-top: 12px;
    letter-spacing: -0.01em;
    line-height: 1.065;
    font-size: 24px;
}

/* Desktop Hover States */
@media (min-width: 45em) {
    .modal-next .title {
        color: #FFF;
        mix-blend-mode: exclusion;
    }

    .modal-next a:hover .next-work-arrow {
        -webkit-transform: translate(12px, -50%) scale(1.06, .94);
        -ms-transform: translate(12px, -50%) scale(1.06, .94);
        transform: translate(12px, -50%) scale(1.06, .94);
        transition: all .3s cubic-bezier(.19, 1, .22, 1);
    }
}

/* Mobile Styles */
@media screen and (max-width: 45em) {
    .modal-next {
        margin-top: 30.13333vw;
    }

    .modal-next .title {
        position: static;
        margin-left: 0;
        font-size: 12.26667vw;
        pointer-events: none;
    }

    .modal-next .next-work-image {
        position: relative;
        width: 41.6vw;
        max-width: initial;
        margin: 11.46667vw auto 12.8vw;
    }

    .modal-next .next-work-arrow {
        top: 44.5vw;
        width: 20vw;
        height: 15.46667vw;
        margin-left: 0;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    .modal-next .next-work-arrow .icon {
        width: 5.86667vw;
        height: 2.66667vw;
    }

    .modal-next .next-work-body {
        position: static;
        margin-top: 8vw;
        margin-left: 0;
        text-align: center;
    }

    .modal-next .next-work-title {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        font-size: 8.53333vw;
    }

    .modal-next .next-work-title.titlesize-m {
        font-size: 6.82667vw;
    }

    .modal-next .next-work-title.titlesize-s {
        font-size: 5.46133vw;
    }

    .modal-next .next-work-name {
        margin-top: 2.93333vw;
        letter-spacing: .02em;
        font-size: 4.26667vw;
    }
}

/* Specific Modal Styles */
@media (min-width: 45em) {
    #modal-1 .modal-title { width: 400px; }
    #modal-5 .modal-title { width: 480px; }
    #modal-23 .modal-title { width: 350px; }
    #modal-24 .modal-title { width: 310px; }
    
    #modal-next-15 .next-work-title { width: 250px; }
    #modal-next-16 .next-work-title { width: 220px; }
    #modal-next-17 .next-work-title { width: 220px; }
    #modal-next-18 .next-work-title { width: 300px; }
    #modal-next-23 .next-work-title { width: 250px; }
    #modal-next-24 .next-work-title { width: 250px; }
    
    #modal-27 .modal-title,
    #modal-28 .modal-title,
    #modal-29 .modal-title,
    #modal-32 .modal-title { 
        width: 480px; 
    }
    
    #modal-next-26 .next-work-title,
    #modal-next-27 .next-work-title { 
        width: 350px; 
    }
}