body {
    margin:0px;
    font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo,  "Helvetica Neue", YuGothic, Arial, sans-serif;
    color:#000;
    line-break: strict;
    -webkit-font-smoothing: subpixel-antialiased;
}

* {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

* :focus { 
    outline: none; 
}


@media (max-width: 768px) {
    .onlypc {
      display: none; }
    svg .onlypc {
      display: none; } 
}

@media screen and (min-width: 769px) {
.onlysp {
    display: none; }
svg .onlysp {
    display: none; } 
}

html {
    overflow: auto;
    height: 100%;
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
}

ul {
    padding:0px;
    list-style: none;
}

hr {
    display: block;
    height: 1px;
    background-color: #000;
    border: 0;
}

section {
    position: relative;
}

.top_wrap {
    position: relative;
    width:100%;
    height:100vh;
    /*height: calc(var(--vh, 1vh) * 100);*/
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.top_wrap > div {
    position: relative;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    perspective: 1000;
    transform:translate3d(0, 0, 0);
}

.top {
    position: relative;
    height:100%;
    width:100%;
    color:#FFF;
}

.top_bg {
    position: fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100vh;
    background-color:#CCCCCC;
}

.top_bg > div {
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    perspective: 1000;
    transform:translate3d(0, 0, 0);
}

.top_bg > div:nth-child(1) {
    background-image:url(/imgs/top_1.jpg);
}

.top_bg::after {
    content:'';
    display:block;
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background: linear-gradient(90deg,rgba(0,0,0,0.25), rgba(0,0,0,0));
}

.top_title {
    position: relative;
    width:100%;
    height:100vh;
    min-height:120vw;
    height: calc(var(---vh, 1vh) * 100);
}

.top h1 {
    position: absolute;
    margin:0px;
    left:0px;
    top:16vw;
    width:0px;
    /*animation:0.3s ease-out 0.5s forwards wipe-in;
    overflow:hidden;*/
}

.top_title_copy {
    position: absolute;
    margin:0px;
    left:5.33vw;
    bottom:12.27vw;
    /*animation:0.3s ease-out 0.5s forwards wipe-in;
    overflow:hidden;*/
}

.top_title_copy h2 {
    margin:0px 0px 3.47vw;
}

.top_title_copy p {
    background-color:#000;
    font-size:3.47vw;
    font-weight:bold;
    margin:0px;
    padding:3.47vw 6.93vw;
    display:inline-block;
}


.top h1 img {
    width:85.87vw;
    height:34.4vw;
}

.top h2 img {
    width:85.87vw;
    height:32.92vw;
}


@keyframes wipe-in {
    0% {
        width:0px;
    }
    100% {
        width:85.87vw;
    }
}

@keyframes wipe-in-pc {
    0% {
        width:0px;
    }
    100% {
        width:22.36vw;
    }
}



.top_content {
    position: relative;
}

.top_text {
    position: relative;
    width:89.33vw;
    margin:0px auto 9.33vw;
    font-size:4vw;
    line-height:2em;
}

.top_text p {
    margin-bottom:2em;
}

.top_movie {
    position: relative;
    margin:0px auto 35.47vw;
    width:89.33vw;
    height:50.4vw;
    background-image:url(/imgs/top_movie.jpg);
    background-position:center;
    background-size:cover;
    cursor:pointer;
}

.movie_play_mark {
    position: absolute;
    left:50%;
    top:50%;
    width:13.34vw;
    margin-left:-6.67vw;
    margin-top:-6.67vw;
}


/* === PC === */
@media screen and (min-width: 769px) {    

    .top_wrap {
        height: 100vh;
    }

    .top_bg {
        height:100%;
    }

    .top_bg > div:nth-child(1) {
        background-image:url(/imgs/top_1_pc.jpg);
    }
    
    .top_title {
        min-height: auto;
    }

    .top h1 {
        top:7.39vh;
        /*animation-name:wipe-in-pc;*/
    }
    
    /*
    .top h2 {
        left:4.58vw;
        bottom:5.54vh;
    }
    */

    .top_title_copy {
        left:4.58vw;
        bottom:5.54vh;
    }
    
    .top_title_copy h2 {
        margin:0px 0px 0.9vw;
    }
    
    .top_title_copy p {
        font-size:13px;
        padding:15px 30px;
    }
    

    .top h1 img {
        width:22.36vw;
        height:8.96vw;
        min-width:483px;
        min-height:193.5px;
    }

    .top h2 img {
        width:22.36vw;
        height:8.57vw;
        min-width:321.98px;
        min-height:124.05px;
    }
    
    .top_text {
        width:80vw;
        margin:0px auto 2.78vw 4.58vw;
        font-size:16px;
        line-height:1.875em;
    }
    
    .top_movie {
        margin:0px auto 32.39vh 4.58vw;
        width:29.55vw;
        height:16.62vw;
        min-width:425px;
        min-height:239px;
        background-image:url(/imgs/top_movie.jpg);
    }
    
    .movie_play_mark {
        width:3.472vw;
        margin-left:-1.736vw;
        margin-top:-1.736vw;
        transition: transform 0.2s ease-in-out;
    }

    .top_movie:hover .movie_play_mark {
        transform:scale(1.1);
    }

    .detail_top_movie_image:hover .movie_play_mark {
        transform:scale(1.1);        
    }

}

/* === PCx2 === */
@media screen and (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2) {
    .top_bg > div:nth-child(1) {
        background-image:url(/imgs/top_1_pc_x2.jpg);
    }
}




.arts_list_section {
    background-color:#FFF;
    width:100%;
    color:#000;
    min-height:100vh;
}

.arts_list_section > div {
    position: relative;
    margin:0px auto 0px;
    width:78.66vw;
    padding-top:15.47vw;
}

.arts_list_section h2 {
    font-size:8vw;
    font-weight:bold;
    margin:0px;
}

.arts_list_section nav {
    position: relative;
    width:100%;
    text-align:left;
    font-size:3.47vw;
}

.arts_list_section nav ul {
    padding:0px;
}

.arts_list_section nav ul:nth-child(2) {
    margin-left:0px;
    width:82%;
}

ul.hashtags {
    margin:0px;
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 3vw;
    margin-bottom: 3vw;
}

ul.hashtags li {
    width:auto;
    display: inline-flex;
    border-radius: 100vw;
    border:solid 1px #e6e6e6;
    padding:0.3em 0.7em 0.2em;
    height:5.33vw;
    margin-bottom:2.67vw;
    margin-right:4vw;
    background-color:#FFF;
    cursor:pointer;
}

ul.hashtags li.pressed {
    color:#7D7D7D;
    background-color:#ECECEC;
}

.arts_list {
    position: relative;
    width:100%;
    overflow:hidden;
    margin-bottom:0px;
    margin-left:auto;
    margin-right:auto;
    /*transition:all 0.4s ease-in-out;*/
}

.arts_list > div {
    position:relative;
}

.arts_list > div > div {
    position:absolute;
}

.arts_list > div > div:first-child {
    position:relative;
} 

.art_btn {
    position: relative;
    width:100%;
    overflow:hidden;
}

.art_btn > div {
    position:absolute;
    left:-100%;
    top:0px;
    width:100%;
    height:100%;
    pointer-events: none;
    background-color:#FFF;
}

.arts_list_anim-enter .art_btn > div {
    left:0px;
    animation:0.2s ease-out 0s forwards arts_list_wipe_in;
}

.arts_list_anim-exit .art_btn > div {
    animation:0.2s ease-in 0s forwards arts_list_wipe_out;
}

@keyframes arts_list_wipe_in {
    0% {
        left:0px;
    }
    100% {
        left:-100%;
    }
}

@keyframes arts_list_wipe_out {
    0% {
        left:100%;
    }
    100% {
        left:0px;
    }
}

.arts_list .art_thumbnail {
    position: relative;
    width:100%;
    height:78.66vw;
    margin-bottom:4vw;
    line-height:0px;
}

.arts_list .art_thumbnail img {
    width:100%;
}

.arts_list a {
    text-decoration: none;
    color:#000;
}

.art_title {
    text-align:center;
}

.art_title p {
    margin:0px;
}

.art_title > p:nth-child(1) {
    font-size:3.47vw;
    font-weight:bold;
    margin-bottom:0.4em;
}

.art_title > p:nth-child(2) {
    font-size:2.93vw;
}

.art_btn .hashtags  {
    font-size:3.47vw;
    justify-content:center;
    margin:4vw auto 8vw;
}

.art_btn .hashtags li {
    margin-left:2vw;
    margin-right:2vw;
}

/* === PC === */
@media screen and (min-width: 769px) {    
    .arts_list_section {
        min-height: auto;
    }

    .arts_list_section > div {
        width:90.84%;
        padding-top:60px;
    }
    
    .arts_list_section h2 {
        font-size:30px;
    }
    
    .arts_list_section nav {
        font-size:13px;
        text-align:right;
    }
        
    .arts_list_section nav ul:nth-child(2) {
        margin-left:0px;
        width:100%;
    }
    
    ul.hashtags {
        justify-content: flex-end;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    ul.hashtags li {
        height:auto;
        margin-bottom:10px;
        margin-left:10px;
        margin-right:0px;
    }

    .arts_list_section ul.hashtags li {
        transition:background-color 0.2s ease-in-out; 
    }

    .arts_list_section ul.hashtags li:hover {
        background-color: #ECECEC;
    }

    .arts_list_one {
        display:flex;
        justify-content: start;
        flex-wrap:wrap;
        align-items: flex-start;
    }

    .art_btn {
        width:296px;
        height:auto;
        display:inline-block;
        margin:0px 40px 40px;
    }
    
    .arts_list .art_thumbnail {
        position: relative;
        width:100%;
        height:auto;
        margin-bottom:13px;
        overflow:hidden;
    }

    .arts_list .art_thumbnail img {
        transition:opacity 0.2s ease-in-out,transform 1s ease-in-out;
    }

    
    .art_title > p:nth-child(1) {
        font-size:13px;
        margin-bottom:0.4em;
    }
    
    .art_title > p:nth-child(2) {
        font-size:11px;
    }
    
    .art_btn .hashtags  {
        font-size:12px;
        margin:20px auto 0px;
    }
    
    .art_btn .hashtags li {
        margin-left:5px;
        margin-right:5px;
    }

    .art_btn a:hover .art_thumbnail img {
        opacity:0.9;
        transform:scale(1.1);
    }
}


/*footer*/
.footer {
    background-color:#FFF;
    color:#000;
    padding-bottom:5.33vw;
    display:inline-block;
    width:100%;
}

.footer_text {
    font-size:3.7vw;
    margin:0px auto;
    width:89.33vw;
}

.footer hr {
    margin:0px auto 9vw;
    width:89.33vw;
}

.footer_logo {
    position: relative;
    width:49.6vw;
    margin-left:5.33vw;
}

.copyright {
    font-size:2.4vw;
    margin:6.13vw auto;
    width:89.33vw;
}

/* === PC === */
@media screen and (min-width: 769px) {    
    .footer {
        padding-bottom:50px;
    }
    
    .footer_text {
        font-size:14px;
        margin:0px auto;
        width:90.84vw;
        text-align:right;
    }
    
    .footer hr {
        margin:0px auto 37px;
        width:90.84vw;
    }
    
    .footer_logo {
        width:186px;
        margin-left:4.2vw;
    }
    
    .copyright {
        font-size:9px;
        margin:0px auto;
        width:90.84vw;
        text-align:right;
        position: relative;
        top: -1em;
    }
}

/* === DIRECTORS TALK === */
.directors_talk {
    position:relative;
    background-color:#FFF;
    display:inline-block;
    width:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.directors_talk > div {
    position:relative;
    margin:0px auto;
    padding:5.33vw 0px 1px;
    width:89.33vw;
    background-color:#ECECEC;
    border-radius: 5.33vw;
    color:#7D7D7D;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.directors_talk_title,
.directors_talk_main,
.directors_talk_profile {
    position:relative;
    padding:0px 2.67vw;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.directors_talk_main {
    transition: max-height 0.5s ease-in-out;
}

.directors_talk_title {
    font-size:4.27vw;
}

.directors_talk_title h2 {
    font-size:7.47vw;
    margin:0px;
    margin-bottom:5.33vw;
}

.directors_talk_title p {
    line-height:1.875em;
}

.directors_talk_data {
    font-size:3.2vw;
    line-height:2em;
}

.directors_talk_data > div {
    display:flex;
    align-items: flex-start
}

.directors_talk_data dt {
    width:4em;
    margin:0px;
}

.directors_talk_data dd {
    width:calc(100% - 4em);
    margin:0px;
}

.directors_talk hr {
    background-color:#707070;
    width:calc(100% - 5.33vw);
    margin:5.33vw auto;
}

.directors_talk_photo {
    position:relative;
    width:100%;
    font-weight:bold;
}

.directors_talk_photo > div {
    position:relative;
    width:100%;
}

.directors_talk_photo img {
    position:relative;
    width:100%;
    line-height:0px;
}


.directors_talk_photo .dt_movie_play_mark {
    position:absolute;
    left:5.33vw;
    bottom:5.33vw;
    width:13.33vw;
    height:13.33vw;
}

.directors_talk_photo p {
    font-size:3.2vw;
    margin:2vw 0px 5.33vw;
}

.directors_talk_main {
    overflow:hidden;
}

.directors_talk_main_text {
    font-size:3.73vw;
    line-height:1.86em;
}

.directors_talk_main_text p {
    margin:0px 0px 1.86em;
}

.directors_talk_main hr {
    width:100%;
    margin:10.67vw 0px;
}

.directors_talk hr.directors_talk_profile_line {
    margin:10.67vw 0px;
}

.directors_talk_profile h3 {
    font-size:3.73vw;
    margin:0px 0px 1vw;
}

.directors_talk_profile p {
    font-size:2.93vw;
    line-height:1.45em;
    margin:0px 0px 1.45em;
}

.directors_talk_profile > div > div {
    margin:0px 0px 8vw;
}

.directors_talk_more_btn {
    position:absolute;
    bottom:0px;
    right:0px;
    width:100%;
    font-size:3.47vw;
    text-align:right;
    transition: opacity 0.2s ease-in-out;
    opacity:0;
    pointer-events: none;
}

.directors_talk_more_btn::before {
    content: '';
    position:absolute;
    left:0px;
    top:-200%;
    display:block;
    width:100%;
    height:300%;
    background: linear-gradient(to top, rgba(236,236,236,1),rgba(236,236,236,1), rgba(236,236,236,0));
}

.directors_talk_more_btn>div {
    position:relative;
    margin-right:2.67vw;
    display:inline-flex;
}

.directors_talk_more_btn>div img {
    margin-right:0.5em;
}

.directors_talk_main_close .directors_talk_main  {
    max-height:200vw;
}

.directors_talk_main_close .directors_talk_more_btn{
    opacity:1;
    pointer-events: auto;
}

/* === PC === */
@media screen and (min-width: 769px) {    
    
    .directors_talk > div {
        padding:52px 0px;
        width:90.84vw;
        border-radius: 20px;
    }
    
    .directors_talk_main_close .directors_talk_main {
        cursor: pointer;
    }

    .directors_talk_title,
    .directors_talk_main,
    .directors_talk_profile {
        padding:0px 60px;
    }
    
    .directors_talk_title {
        font-size:15px;
        display:flex;
        width:auto;
    }
    
    .directors_talk_title h2 {
        font-size:28px;
        margin-bottom:0px;
    }

    .directors_talk_title > div {
        flex:1;
        text-align:right;
    }
    
    .directors_talk_title p {
        line-height:2em;
        margin:0px;
    }
    
    .directors_talk_data {
        font-size:12px;
        line-height:1.83em;
    }
    
    .directors_talk_data > div {
        display:block;
    }
    
    .directors_talk_data dt {
        display:inline-block;
        width:auto;
        margin:0px;
    }
    
    .directors_talk_data dd {
        display:inline-block;
        width:auto;
        margin:0px;
    }

    .directors_talk hr {
        width:calc(100% - 120px);
        margin:0px auto 50px;
    }

    .directors_talk_main2 {
        display:flex;
    }

    .directors_talk_photo {
        width:422px;
    }

    .directors_talk_photo img {
        width:371px;
    }

    .directors_talk_photo >div {
        cursor: pointer;
    }

    .directors_talk_photo .dt_movie_play_mark {
        left:20px;
        bottom:20px;
        width:50px;
        height:50px;
        transition: transform 0.2s ease-in-out;
    }

    .directors_talk_photo > div:hover .dt_movie_play_mark {
        transform:scale(1.1);
    }
    
    
    .directors_talk_photo p {
        font-size:12px;
        margin:10px 0px;
    }

    .directors_talk_main_text_wrap {
        flex:1;
    }
    
    .directors_talk_main_text {
        font-size:14px;
        line-height:1.86em;
    }
    
    .directors_talk_main_text p {
        margin:0px 0px 1.86em;
    }
    
    .directors_talk_main hr {
        width:100%;
        margin:30px 0px;
    }

    .directors_talk hr.directors_talk_profile_line {
        width: calc(100% - 120px);
        margin:30px auto;
    }
    
    .directors_talk_profile h3 {
        font-size:14px;
        margin:0px 0px 4px;
    }
    
    .directors_talk_profile p {
        font-size:11px;
        line-height:1.45em;
        margin:0px 0px 0px;
    }

    .directors_talk_profile > div {
        display:flex;
    }
    
    .directors_talk_profile > div > div {
        margin:0px 30px 0px 0px;
        width:371px;
    }
    
    .directors_talk_more_btn {
        position:absolute;
        bottom:0px;
        right:0px;
        width:100%;
        font-size:13px;
        text-align:right;
    }
    
    .directors_talk_more_btn::before {
        right:0px;
        left:auto;
        top:-200%;
        display:block;
        width:calc(100% - 431px);
        height:300%;
        background: linear-gradient(to top, rgba(236,236,236,1),rgba(236,236,236,1), rgba(236,236,236,0));
    }
    
    .directors_talk_more_btn>div {
        position:relative;
        margin-right:2.67vw;
        display:inline-flex;
        cursor: pointer;
    }
    
    .directors_talk_more_btn>div img {
        margin-right:0.5em;
    }
    
    .directors_talk_main_close .directors_talk_main  {
        max-height:305px;
    }
}

/* === THANKS === */
.thanks {
    background-color:#FFF;
    color:#7D7D7D;
    display:inline-block;
    width:100%;
    
}


.thanks > div {
    margin:13.33vw auto;
    width:89.34vw;
}

.thanks h2 {
    font-size:3.73vw;
    font-weight:normal;
    margin:0px 0px 2.67vw;
}

.thanks p,
.thanks ul {
    font-size:3.73vw;
    line-height: 1.86em;
}

.thanks li {
    display:inline-block;
}

.thanks li:not(:last-child)::after {
    content:'/';
    margin-left:0.5em;
    margin-right:0.5em;
}

/* === PC === */
@media screen and (min-width: 769px) {    
    .thanks > div {
        margin:50px auto;
        width:90.84vw;
    }
    
    .thanks h2 {
        font-size:14px;
        margin:0px 0px 7px;
    }
    
    .thanks p,
    .thanks ul {
        font-size:14px;
    }
}

/* === DETAIL === */
.detail_wrap_wrap {
    position:fixed;
    left:0px;
    top:0px;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    /*perspective: 1000;*/
    z-index:10;
}

.detail_wrap2_bg {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:#FFF;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.detail_wrap {
    position:relative;
    left:0px;
    top:0px;
    width:100%;
    height:100vh;
    /*height: calc(var(--vh, 1vh) * 100);*/
    overflow:scroll;
    overflow-x:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
} 

.detail_wrap > div {
    position:relative;
    width:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    /*perspective: 1000;
    transform:translate3d(0, 0, 0);*/
}

.detail_info_wrap {
    background-color:#FFF;
    padding-bottom:10vh;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    perspective: 1000;
    transform:translate3d(0, 0, 0);
}

.detail_top_movie_image {
    position: relative;
    width:100vw;
    height:100vw;
    cursor: pointer;
    overflow:hidden;
    background-color:#FFF;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    /*perspective: 1000;
    transform:translate3d(0,0,0);    */
}

.detail_top_movie_image > div {
    position:relative;
    width:100%;
    height:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    /*perspective: 1000;
    transform:translate3d(0,0,0);    */
}

.detail_top_movie_image_bg {
    position: absolute;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
}

.detail_close_btn_wrap {
    /*position: fixed;*/
    position: -webkit-sticky;
    position: sticky;
    left:0px;
    top:0px;
    width:13.34vw;
    height:0px;
    z-index:20;
    pointer-events: none;
}

.detail_close_btn {
    position: relative;
    width:100%;
    height:13.34vw;
    background-color:#FFF;
    pointer-events:auto;
}

.detail_close_btn div {
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
}

.detail_close_btn div>div {
    background-image: url(/imgs/detail_back_btn.svg);
    background-size:2.14vw 4.18vw;
    background-position:center;
    background-repeat: no-repeat;
}


.detail_info {
    position:relative;
    padding-top:13.33vw;
    width:88.27vw;
    margin:0px auto;
    color:#7D7D7D;
    background-color:#FFF;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    perspective: 1000;
    transform:translate3d(0,0,0);
}

.detail_info .hashtags {
    font-size:3.47vw;
    justify-content: flex-start;
}

.detail_info_inner >  div,
.detail_info_inner >  ul {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    perspective: 1000;
    transform:translate3d(0,0,0);
}

.detail_info .hashtags li {
    margin-right:4vw;
    margin-left:0px;
    margin-bottom:0px;
    cursor:auto;
}

.detail_info p,
.detail_info h2,
.detail_info h3 {
    margin:0px;
}

.detail_title {
    margin:10.67vw 0px;
}

.detail_title h2 {
    font-size:5.07vw;
    color:#000;
    white-space: pre-wrap;
}

.detail_title p {
    font-size:3.2vw;
}

.detail_author {
    margin:10.67vw 0px;
}

.detail_author p:first-child {
    font-size:3.73vw;
    color:#000;
    font-weight:bold;   
}

.detail_author p:last-child {
    font-size:2.93vw;
}

.detail_data_text {
    font-size:2.93vw;
    line-height:1.45em;
    margin:10.67vw 0px;
    white-space:pre-wrap;
}

.detail_text {
    position: relative;
    margin:10.67vw 0px;
}

.detail_text h3 {
    font-size:4.27vw;
    margin-bottom:0.5em;
}

.detail_text p {
    font-size:3.73vw;
    margin-bottom:1em;
    line-height:1.86em;
}


.detail_text_2 {
    position: relative;
    width:100%;
    overflow:hidden;
    transition: max-height 0.5s ease-in-out;
}

.detail_text_close .detail_text_2 {
    max-height:120vw;
}

.detail_text_more_btn_bg {
    position: absolute;
    width:100%;
    height:20vw;
    left:0px;
    bottom:0px;
    background: linear-gradient(to top, rgba(255,255,255,1),rgba(255,255,255,1), rgba(255,255,255,0));
    opacity:0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

.detail_text_more_btn {
    position: absolute;
    right:2.5vw;
    bottom:0px;
    font-size:3.47vw;
    opacity:0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    cursor: pointer;
}

.detail_text_more_btn img {
    vertical-align:bottom;
    margin-right:1vw;
}

.detail_text_close .detail_text_more_btn_bg {
    opacity:1;
}

.detail_text_close .detail_text_more_btn {
    opacity:1;
    pointer-events: auto;
}

.detail_profile {
    position: relative;
    margin:10.67vw 0px;
}

.detail_profile hr {
    margin-top:0px;
    margin-bottom:5.33vw;
}

.detail_profile .detail_profile_title {
    font-size:3.73vw;
    font-weight:bold;
    margin-bottom:0.5em;
    color:#000;
}

.detail_profile .detail_profile_name {
    font-size:3.73vw;
    font-weight:bold;
    margin-bottom:0.2em;
}

.detail_profile .detail_profile_text {
    font-size:2.93vw;
}

.detail_profile_movie_list {
    margin:5.33vw 0px 2.67vw;
}

.detail_profile_movie_list li {
    display:flex;
    margin-bottom:2.67vw;
    cursor:pointer;
}

.detail_profile_movie_list li > div:first-child {
    position: relative;
    width:26.67vw;
    height:26.67vw;
    border-radius:1.07vw;
    overflow:hidden;
    background-color:#6d6d6d;
}

.detail_profile_movie_list li > div:first-child > div {
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
}

.mini_play_mark {
    position: absolute;
    right:2.67vw;
    bottom:2.67vw;
    width:8vw;
    height:8vw;
}

.detail_profile_movie_list li > div:last-child {
    position: relative;
    width:61.6vw;
    height:26.67vw;
    display:flex;
    justify-content: flex-start;
    align-items: center;
}

.detail_profile_movie_list li > div:last-child div {
    margin-left:2.67vw;
    font-size:3.47vw;
    line-height:1.46em;
    white-space:pre-wrap;
}

.detail_profile_link_list {
    margin:2.67vw 0px;
}

.detail_profile_link_list li {
    margin:2.67vw 0px;
    width:100%;
    border-radius: 1.07vw;
    border:solid 1px #E6E6E6;
    background-color:#FFF;
}

.detail_profile_link_list a {
    text-decoration: none;
    color:#7D7D7D;
}

.detail_profile_link_list div {
    position: relative;
    font-size:3.47vw;
    line-height:1.31em;
    white-space:pre-wrap;
    margin:0px;
    padding-top:2vw;
    padding-bottom:2vw;
    padding-left:5.33vw;
    padding-right:5.33vw;
}

.detail_profile_link_list div img {
    position: absolute;
    width:5.6vw;
    height:5.6vw;
    right:5.33vw;
    top:50%;
    margin-top:-2.8vw;
}

.detail_map {
    position: relative;
    margin:10.67vw 0px;
}

.detail_map hr {
    margin-bottom:5.33vw;
}

.detail_map_title {
    font-size:3.73vw;
    font-weight:bold;
    color:#000;
}

.detail_map_image {
    border:solid 1px #e6e6e6;
    border-radius:2.13vw;
    overflow:hidden;
    margin:2.67vw 0px;
}

.detail_map_image img {
    width:100%;
}

.detail_next_link {
    position: relative;
    margin:10.67vw 0px;
}

.detail_next_link hr {
    margin-bottom:5.33vw;
}

.detail_next_link_title {
    font-size:3.73vw;
    font-weight:bold;
    color:#000;
    margin-bottom:5.33vw;
}

.detail_next_link a {
    text-decoration: none;
    color:unset;
}

.detail_next_link li {
    position: relative;
    width:100%;
    margin:2.67vw 0px;
}

.next_link_wrap {
    position: relative;
    width:100%;
    height:26.67vw;
    display:flex;
}

.next_link_thumb {
    position: relative;
    width:26.67vw;
    height:26.67vw;
    overflow:hidden;
}

.next_link_thumb >div {
    position: absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    background-position:center;
    background-size:cover;
    transition:opacity 0.2s ease-in-out,transform 1s ease-in-out;
}

.next_link_info {
    position: relative;
    width:61.6vw;
    height:26.67vw;
    display:flex;
    justify-content: flex-start;
    align-items: center;
}

.next_link_info >div {
    margin:2.67vw;
}

.next_link_title{
    position: relative;
    width:100%;
}

.next_link_title .next_link_title_1 {
    font-size:3.47vw;
    font-weight:bold;
    color:#000;
}

.next_link_title .next_link_title_2 {
    font-size:2.93vw;
}

.next_link_title .hashtags {
    font-size:3.2vw;
}

/* === PC === */
@media screen and (min-width: 769px) {    
    
    .detail_top_movie_image {
        position: -webkit-sticky;
        position: sticky;
        left:0px;
        top:0px;
        bottom:0px;
        width:calc(100vw - 476px);
        height:0px;
        overflow:visible;
    }

    .detail_top_movie_image > div {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100vh;
        height: calc(var(--vh, 1vh) * 100);
        background-color:#FFF;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        /*perspective: 1000;
        transform:translate3d(0,0,0);    */
    }

    .detail_wrap2_bg {
        display:none;
        -webkit-transform: none;
        transform: none;
    }

    
    .detail_wrap {
        position:fixed;
        -webkit-transform: none;
        transform: none;
    }

    .detail_wrap .movie_play_mark {
        width:3.47vw;
        height:3.47vw;
    }
    
    .detail_close_btn_wrap {
        position:sticky;
        left:0px;
        top:0px;
        width:100%;
        height:0px;
    }

    .detail_close_btn {
        position: absolute;
        right:0px;
        top:0px;
        width:65px;
        height:65px;
        cursor:pointer;
    }
        
    .detail_close_btn div>div {
        background-image: url(/imgs/detail_back_btn_pc.svg);
        background-size:25px 25px;
        transition:all 0.2s ease-in-out;
    }

    .detail_close_btn:hover div>div {
        opacity:0.8;
        transform:scale(1.1);
    }

    .detail_info_wrap {
        position: relative;
        width:100%;
        pointer-events: none;
        background-color:transparent;
	    padding-bottom:0px;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        perspective: none;
        transform:none;        
    }
    
    .detail_info {
        position: relative;
        padding-top:50px;
        width:476px;
        margin:0px 0px 0px auto;
        right:0px;
        background-color:#FFF;
        overflow:hidden;
        pointer-events: auto;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        perspective: none;
        transform:none;
    }

    .detail_info_inner {
        position: relative;
        width:376px;
        margin:0px auto;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        perspective: none;
        transform:none;
    }
    
    .detail_info .hashtags {
        font-size:13px;

    }

    .detail_info_inner >  div,
    .detail_info_inner >  ul {
        perspective: none;
        transform:none;
    }

    
    .detail_info .hashtags li {
        margin-right:10px;
        margin-left:0px;
        margin-bottom:0px;
    }
    
    .detail_title {
        margin:40px 0px;
    }
    
    .detail_title h2 {
        font-size:19px;
    }
    
    .detail_title p {
        font-size:12px;
    }
    
    .detail_author {
        margin:40px 0px;
    }
    
    .detail_author p:first-child {
        font-size:14px;
    }
    
    .detail_author p:last-child {
        font-size:11px;
    }
    
    .detail_data_text {
        font-size:11px;
        margin:40px 0px;
    }
    
    .detail_text {
        margin:40px 0px;
    }
    
    .detail_text h3 {
        font-size:16px;
        margin-bottom:0.5em;
    }
    
    .detail_text p {
        font-size:14px;
        margin-bottom:1em;
    }

    .detail_text_close .detail_text_2 {
        max-height:169px;
    }
    
    .detail_text_more_btn_bg {
        height:60px;
        background: linear-gradient(to top, rgba(255,255,255,1),rgba(255,255,255,1), rgba(255,255,255,0));
    }
    
    .detail_text_more_btn {
        right:13px;
        font-size:13px;
    }
    
    .detail_text_more_btn img {
        margin-right:4px;
    }
    
    

    
    .detail_profile {
        margin:40px 0px;
    }
    
    .detail_profile hr {
        margin-bottom:20px;
    }
    
    .detail_profile .detail_profile_title {
        font-size:14px;
        margin-bottom:0.5em;
    }
    
    .detail_profile .detail_profile_name {
        font-size:14px;
        margin-bottom:0.2em;
    }
    
    .detail_profile .detail_profile_text {
        font-size:11px;
    }
    
    .detail_profile_movie_list {
        margin:20px 0px 10px;
    }
    
    .detail_profile_movie_list li {
        margin-bottom:10px;
    }
    
    .detail_profile_movie_list li > div:first-child {
        width:100px;
        height:100px;
        border-radius:5px;
    }

    .detail_profile_movie_list li > div:first-child > div {
        transition:opacity 0.2s ease-in-out,transform 1s ease-in-out;
    }

    .detail_profile_movie_list li:hover > div:first-child > div {
        opacity:0.9;
        transform:scale(1.1);
    }
    
    .mini_play_mark {
        right:10px;
        bottom:10px;
        width:30px;
        height:30px;
        transition:opacity 0.5s ease-in-out;
    }

    .detail_profile_movie_list li:hover .mini_play_mark {
        opacity:0;
    }
    
    .detail_profile_movie_list li > div:last-child {
        width:276px;
        height:100px;
    }
    
    .detail_profile_movie_list li > div:last-child div {
        margin-left:10px;
        font-size:13px;
    }
    
    .detail_profile_link_list {
        margin:10px 0px;
    }
    
    .detail_profile_link_list li {
        margin:10px 0px;
        border-radius: 5px;
        transition:background-color 0.2s ease-in-out;
    }
    
    .detail_profile_link_list li:hover {
        background-color:#e6e6e6;
    }

        
    .detail_profile_link_list div {
        font-size:13px;
        padding-top:8px;
        padding-bottom:8px;
        padding-left:34px;
        padding-right:34px;
    }
    
    .detail_profile_link_list div img {
        width:20px;
        height:20px;
        right:23px;
        top:50%;
        margin-top:-10px;
        transition:transform 0.2s ease-in-out;
    }

    .detail_profile_link_list li:hover div img {
        transform:scale(1.1);
    }
    
    .detail_map {
        position: relative;
        margin:40px 0px;
    }
    
    .detail_map hr {
        margin-bottom:20px;
    }
    
    .detail_map_title {
        font-size:14px;
    }
    
    .detail_map_image {
        border-radius:8px;
        margin:10px 0px;
    }
    
    .detail_next_link {
        margin:40px 0px;
    }
    
    .detail_next_link hr {
        margin-bottom:20px;
    }
    
    .detail_next_link_title {
        font-size:14px;
        margin-bottom:20px;
    }
    
    .detail_next_link li {
        margin:10px 0px;
    }
    
    .next_link_wrap {
        height:100px;
    }
    
    .next_link_thumb {
        width:100px;
        height:100px;
    }

    .next_link_wrap:hover .next_link_thumb >div {
        opacity:0.9;
        transform:scale(1.1);
    }
    
    .next_link_info {
        width:276px;
        height:100px;
    }
    
    .next_link_info >div {
        margin:10px;
    }
    
    .next_link_title .next_link_title_1 {
        font-size:13px;
    }
    
    .next_link_title .next_link_title_2 {
        font-size:11px;
    }
    
    .next_link_title .hashtags {
        font-size:12px;
    }
}





/* === MOVIE === */
.movie_modal {
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
    display:none;
    pointer-events: none;
    z-index:50;
}

.movie_modal_show {
    pointer-events: auto;
}

.movie_modal_bg {
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.8);    
    opacity:0;
    transition:opacity 0.2s ease-in-out;
}

.movie_modal_show .movie_modal_bg {
    opacity:1;
}



.movie_modal_main {
    position: relative;
    width:100vw;
    height:56.25vw;
    opacity:0;
    transform:scale(1,0.9);
    transition:opacity 0.2s ease-in-out,transform 0.2s ease-in-out;
}

.movie_modal_show .movie_modal_main {
    transform:scale(1,1);
    opacity:1;
}

.movie_close_btn {
    position: absolute;
    left:50%;
    bottom:-22.67vw;
    width:17.34vw;
    height:17.34vw;
    margin-left:-8.67vw;
    cursor:pointer;
}


@media screen and (orientation: landscape) {    
    /*横の場合、少し小さく*/
    .movie_modal_main {
        width:70vw;
        height:39.375vw;
    }
    /*右にする*/
    .movie_close_btn {
        left:auto;
        width:10vw;
        height:10vw;
        right:-10vw;
        bottom:auto;
        top:50%;
        margin-top:-5vw;
        margin-left:0px;
    }
    .movie_close_btn img {
        width:100%;
    }

}



/* === PC === */
@media screen and (min-width: 769px) {    
    .movie_modal_main {
        transform:scale(0.95);
    }
    .movie_modal_show .movie_modal_main {
        transform:scale(1);
    }
}

/* === PC === */
@media screen and (min-width: 769px) {    
    
    .movie_modal_main {
        width:780px;
        height:439px;
    }
    
    .movie_close_btn {
        left: auto;
        right: -55px;
        bottom: auto;
        top: -55px;
        width: 65px;
        height: 65px;
        margin-left: 0px;
        position: absolute;
        margin-top: 0px;
    }

    .movie_close_btn img {
        transition:transform 0.2s ease-in-out;
    }

    .movie_close_btn:hover img {
        transform:scale(1.1);
    }
       
}



/* === トランジション === */
.scroll-enter {
    transform:translateX(100vw);
    /*perspective: 1000;*/
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.scroll-enter.scroll-enter-active {
  /*transform:translateX(0px);*/
  /*transition: transform 200ms 0ms ease-out;*/
  animation: 200ms ease-out forwards detail_cover_show_sp;
  perspective: 1000;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

@keyframes detail_cover_show_sp {
    0% {
        transform:translateX(100vw);
    }
    100% {
        transform:translateX(0vw);
    }
}

/*
.scroll-enter-done {
    transform:translateX(10vw);
    perspective: 1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
*/

.scroll-exit {
    transform:translateX(0vw);
    perspective: 1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}


.scroll-exit.scroll-exit-active {
/*    transform:translateX(100vw);
    transition: transform 200ms 100ms ease-in;*/
    animation: 200ms 100ms ease-out forwards detail_cover_hide_sp;
    perspective: 1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

@keyframes detail_cover_hide_sp {
    0% {
        transform:translateX(0vw);
    }
    100% {
        transform:translateX(100vw);
    }
}

/*
.scroll-exit-done {
    transform:translateX(90vw);
    perspective: 1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
*/

/* === PC === */
@media screen and (min-width: 769px) {    
    .scroll-enter {
        transform:none;
    }
    
    .scroll-enter.scroll-enter-active {
        transform:none;
        /*transition: all 250ms ease-out;*/
        animation:none;
    }
    
    .scroll-exit {
        transform:none;
    }
    
    .scroll-exit.scroll-exit-active {
        transform:none;
        /*transition: all 250ms ease-in;*/
        animation:none;
    }

    .detail_cover {
        position: absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        overflow:hidden;
        pointer-events: none;
    }

    .detail_cover >div {
        position: absolute;
        left:100%;
        top:0px;
        width:140%;
        height:100%;
        transform:translate(0,0,0);
        background-color:#FFF;
    }


    .scroll-enter .detail_cover > div {
        left:100%;
    }

    .scroll-enter.scroll-enter-active .detail_cover > div {
        /*left:-140%;
        transition: left 900ms 0ms ease-in-out;*/
        animation: 700ms ease-in-out forwards detail_cover_show;
    }

    .scroll-exit .detail_cover > div {
        left:100%;
    }

    .scroll-exit.scroll-exit-active .detail_cover > div {
        /*left:-140%;
        transition: left 900ms 0ms ease-in-out;*/
        animation: 700ms ease-in-out forwards detail_cover_show;
    }

    .scroll-enter .detail_contents {
        animation: 700ms linear forwards detail_contents_show;
    }

    .scroll-exit .detail_contents {
        animation: 700ms linear forwards detail_contents_hide;
    }

}

@keyframes detail_cover_show {
    0% {
        left:100%;
    }
    100% {
        left:-140%;
    }
}

@keyframes detail_contents_show {
    0% {
        opacity:0;
    }
    49% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

@keyframes detail_contents_hide {
    0% {
        opacity:1;
    }
    50% {
        opacity:1;
    }
    51% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

/* === スライドショーアニメーション === */
@keyframes top_slideshow_zoom {
    0% {
        opacity:0;
    }
    20% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}