@charset 'utf-8';
/*
 * name:project.css
 * author:sovanda nulo
*/

/* project
------------------------------------------------ */

#project { padding-top: 0; }
#project .section--title { margin-bottom: 2.7em; }
#project .section--desc { margin-top: 0; }
.project--links { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 90em; margin: 0 auto; }
.project--links li { max-width: 26em; width: 100%; display: block; }
.project--links li a { padding: 1.121em 3em; position: relative; display: block; border: 1px solid #EB6D8E; color: #EB6D8E; background: #fff; border-radius: 10em; }
.project--links li span { font-size: 1.6em; font-weight: bold; display: inline-block; }
.project--links li .i-icon { display: inline-block; width: 1.1em; height: 1em; position: absolute; right: 2em; top: 50%; transform: translateY(-50%); }
.project--links li .i-icon:before { transform: rotate(90deg); }
.project--links li .i-arrow:before { background-image: url(../../img/share/arrow-box-p.svg); }
.project--links li:nth-of-type(2) .i-arrow:before { background-image: url(../../img/share/arrow-box-b.svg); }
.project--links li:nth-of-type(3) .i-arrow:before { background-image: url(../../img/share/arrow-box-y.svg); }
.project--links li:nth-of-type(2) a { border-color: #40A598; color: #40A598; }
.project--links li:nth-of-type(3) a { border-color: #C8883D; color: #C8883D; }


    @media only screen and (min-width: 768px) {
        .project--links li a:hover { background: #EB6D8E; color: #fff; }
        .project--links li:nth-of-type(2) a:hover { background: #40A598; }
        .project--links li:nth-of-type(3) a:hover { background: #C8883D; }
        .project--links li a:hover .i-icon:before { background-image: url(../../img/share/arrow-box-w.svg); }
    }

    @media only screen and (max-width: 768px) {
        .project--links { width: calc( 100% + 3em ); margin-left: -1.5em; }
        .project--links li { width: 31.395%; }
        .project--links li a { padding: .8em .5em; text-align: center; }
        .project--links li span { font-size: 1.4em; }
        .project--links li .i-icon { margin-left: .5em; position: relative; right: auto; top: auto; transform: none; }
    }

.project__lists { position: relative; display: block; }
.project__list { padding-top: 15em; display: block; position: relative; }
.project__list--desc { position: relative; display: block; max-width: 62.5em; position: relative; z-index: 2; }
.project__list__note { display: block; position: absolute; left: calc( 100% + 7em ); bottom: 2.4em; width: 100%; padding: 4.2em 4em; border: 1px solid #EB6D8E; background: #fff; box-shadow: 0 .2em 2.6em rgba(64, 165, 152, .16); border-radius: 3em; box-sizing: border-box; }
.project__list__note:after { content: ''; display: block; position: absolute; top: calc( 100% - .1em ); right: 16em; width: 2.954em; height: 3.134em; background-image: url(../../img/project/box-arrow-p.png); background-repeat: no-repeat; background-size: 100% 100%; }
.project__list__note--desc { display: block; }
.project__list__note--desc dt { font-size: 1.6em; line-height: 1.7; font-weight: bold; margin-bottom: .625em; color: #EB6D8E; }
.project__list__note--desc dd { font-size: 1.4em; line-height: 1.7; }
.project__list__note__interview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.project__list__note__interview--icon { width: 24.38%; }
.project__list__note__interview--desc { width: 70%; }
.project__list__note__interview--name { font-size: 1.6em; line-height: 1.7; }
.project__list__note__interview--name strong { font-size: 1.75em; line-height: 1.5; margin-right: .357em; margin-top: .2142em; display: inline-block; }
.project__list__note__interview--btn { display: block; margin-top: 2.3em; }
.project__list__note__interview--btn a { display: flex; flex-wrap: wrap; align-items: center; }
.project__list__note__interview--btn span { font-size: 2em; line-height: 1.5; font-weight: bold; }
.project__list__note__interview--btn .i-icon { width: 2.5em; height: 2.5em; background: #40A598; margin-right: .5em; }
.project__list--hahi { position: absolute; right: 6em; top: -9.125em; height: 9.525em; z-index: 2; transform-origin: top center; }
.project__list--hahi img { height: 100%; width: auto; }
.project__list__slides { display: block; position: relative; margin-top: 10em; }
.project__list__slides:before { content: ''; display: block; position: absolute; top: -20.3em; left: -100vw; width: 300vw; height: 20.3em; background-repeat: repeat-x; background-size: auto 20.3rem; }
.project__list__slides--pic { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); display: block; overflow: hidden; }
.project__list__slides--pic .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; position: relative; }

    #art .project__list__slides:before { background-image: url(../../img/project/tlt-art.png); -webkit-animation: bg-l-01 14.46s linear 0s infinite normal; animation: bg-l-01 14.46s linear 0s infinite normal; }
    #art .section--title .t-small { background: #EB6D8E; }
    #sports .project__list__slides:before { background-image: url(../../img/project/tlt-sport.png); -webkit-animation: bg-l-02 12.52s linear 0s infinite normal; animation: bg-l-02 12.52s linear 0s infinite normal; }
    #sports .project__list__note { border-color: #40A598; }
    #sports .project__list__note:after { background-image: url(../../img/project/box-arrow-b.png); }
    #aguri .project__list__slides:before { background-image: url(../../img/project/tlt-aguri.png); -webkit-animation: bg-l-03 10.02s linear 0s infinite normal; animation: bg-l-03 10.02s linear 0s infinite normal; }
    #aguri .section--title .t-small { background: #C8883D; }

    .project__list--hahi span { animation: ringTheBell2 2.6s infinite ease-in-out; display: block; position: absolute; bottom: 0; right: 0; height: 100%; }
    .project__list--hahi img { width: 100%; height: 100%; }
    #art .project__list--hahi span { width: 12.358em; }
    #sports .project__list--hahi span { width: 11.427em; }
    #aguri .project__list--hahi span { width: 13.152em; }

    @-webkit-keyframes bg-l-01 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-144.6em);transform:translateX(-144.6em)}}
    @keyframes bg-l-01 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-144.6em);transform:translateX(-144.6em)}}
    @-webkit-keyframes bg-l-02 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-125.2em);transform:translateX(-125.2em)}}
    @keyframes bg-l-02 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-125.2em);transform:translateX(-125.2em)}}
    @-webkit-keyframes bg-l-03 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-100.2em);transform:translateX(-100.2em)}}
    @keyframes bg-l-03 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-100.2em);transform:translateX(-100.2em)}}


    @media only screen and (min-width: 768px) {
        .project__list__note__interview--btn a:hover { color: #40A598; }
    }

    @media only screen and (max-width: 768px) {
        .project__list { padding-top: 6em; }
        .project__list--desc { max-width: 100%; }
        .project__list__note { position: relative; left: auto; bottom: auto; width: 100%; padding: 3.2em 2.5em; margin-top: 3.5em; }
        .project__list__note:after { top: calc( 100% - .05em ); right: 7.6em; width: 1.671em; height: 1.773em; }
        .project__list__note__interview { position: relative; margin-bottom: 5em; }
        .project__list__note__interview--icon { width: 37.87%; }
        .project__list__note__interview--desc { width: 54.54%; }
        .project__list__note__interview--name { font-size: 1.2em; line-height: 1.5; }
        .project__list__note__interview--name strong { font-size: 1.66em; }
        .project__list__note__interview--name span { font-size: 1.16em; }
        .project__list__note__interview--btn { margin: 0; width: 100%; position: absolute; top: calc( 100% + 3em ); left: 50%; transform: translateX(-50%); }
        .project__list__note__interview--btn a { justify-content: center; }
        .project__list__note__interview--btn span { font-size: 1.6em; }
        .project__list__note__interview--btn .i-icon { width: 2em; height: 2em; }
        .project__list--hahi { right: 2em; top: -5em; height: 5.415em; }
        .project__list__slides { margin-top: 7em; }
        .project__list__slides:before { top: -7em; height: 7em; background-size: auto 7rem; }
        
        #art .project__list--hahi span { width: 7em; }
        #sports .project__list--hahi span { width: 6.496em; }
        #aguri .project__list--hahi span { width: 7.464em; }

        @-webkit-keyframes bg-l-01 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-49.85em);transform:translateX(-49.85em)}}
        @keyframes bg-l-01 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-49.85em);transform:translateX(-49.85em)}}
        @-webkit-keyframes bg-l-02 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-43.05em);transform:translateX(-43.05em)}}
        @keyframes bg-l-02 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-43.05em);transform:translateX(-43.05em)}}
        @-webkit-keyframes bg-l-03 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-35em);transform:translateX(-35em)}}
        @keyframes bg-l-03 {0%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(-35em);transform:translateX(-35em)}}
    }

    @keyframes ringTheBell3 {
        0% { transform: translateY(0); }
        25% { transform: translateY(-2em); height: 120%; }
        50% { transform: translateY(0); height: 80%; }
        75% { transform: translateY(0); height: 100%; }
        100% { transform: translateY(0); }
    }

    @keyframes ringTheBell2 {
        0% { transform: translateY(0); }
          10% {transform: translateY(0em);height: 103%;}
          25% {transform: translateY(0);height: 85%;}
          40% { transform: translateY(0); height: 107%; }
          55% { transform: translateY(0); height: 90%; }
          70% { transform: translateY(0); height: 100%; }
          100% { transform: translateY(0); }
    }