@charset "utf-8";

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */
/*------------------------------------------------------------
[SP] title_movie
------------------------------------------------------------ */
#suntory_contents .title_movie {
    margin: 8vw 0 12vw;
    font-size: 5.6vw;
    text-align: center;
    font-weight: normal;
}
/*------------------------------------------------------------
[SP] movie_nav
------------------------------------------------------------ */
#suntory_contents .movie_nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 8vw;
}
#suntory_contents .movie_nav.movie_nav_bottom {
    margin-bottom: 12vw;
}
#suntory_contents .movie_nav li {
        list-style: none;
        font-size: 3.466666666666667vw;
        line-height: 1;
        border-right: 1px #000 solid;
        padding: 0 4.8vw;
        width: auto;
        margin-bottom: 4vw;
}
#suntory_contents .movie_nav li:first-child {
        border-left: 1px #666 solid;
}
#suntory_contents .movie_nav li:nth-child(4) {
    border-left: 1px #666 solid;
}

#suntory_contents .movie_nav li a {
    color: #000;
    text-decoration: none;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
#suntory_contents .movie_nav li.cr a {
    color: #AB916C;
    font-weight: bold;
    pointer-events: none;
}

/*------------------------------------------------------------
[SP] movie_primary
------------------------------------------------------------ */
#suntory_contents .movie_primary {
    margin: 0 auto 8.8vw;
    width: 92vw;
    display: none;
}
#suntory_contents .movie_primary.page__1 {
    display: block;
}
#suntory_contents .movie_primary .movie {
    margin: 0 auto 4vw;
    width: 92vw;
    position: relative;
    height: 0;
    padding-top: 56.25%;
}
#suntory_contents .movie_primary .movie iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#suntory_contents .movie_primary .movie figure {
    width: 92vw;
    height: auto;
    position:absolute;
    top:0;
    left:0;
}
#suntory_contents .movie_primary .movie figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#suntory_contents .movie_primary .movie figure span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2) url(../img/bt_play.svg) no-repeat center center;
    background-size: 20vw 20vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
#suntory_contents .movie_primary .date {
    margin-bottom: 2.666666666666667vw;
    font-size: 2.933333333333333vw;
    color: #666;
}
#suntory_contents .movie_primary .title {
    margin-bottom: 2.666666666666667vw;
    font-size: 3.466666666666667vw;
    font-weight: normal;
    line-height: 1.8;
}
#suntory_contents .movie_primary .period {
    margin-bottom: 2.666666666666667vw;
    font-size: 3.466666666666667vw;
}
#suntory_contents .movie_primary .time {
    margin-bottom: 2.666666666666667vw;
    font-size: 3.466666666666667vw;
}
#suntory_contents .movie_primary .info {
    margin-bottom: 2.666666666666667vw;
    font-size: 2.933333333333333vw;
    line-height: 1.8;
}
#suntory_contents .movie_primary .category {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-top: 4vw;
}
#suntory_contents .movie_primary .category li {
    margin: 0 3.2vw 3.2vw 0;
    font-size: 3.2vw;
    color: #666;
    border: 1px #666 solid;
    padding: 1.6vw 4vw;
    border-radius: 1.066666666666667vw;
}

#suntory_contents .movie_primary .category li:last-child {
    margin: 0 0 3.2vw;
}


/*------------------------------------------------------------
[SP] movie_secondary
------------------------------------------------------------ */
#suntory_contents .movie_secondary {
    margin: 0 auto;
    width: 92vw;
    list-style: none;
}
#suntory_contents .movie_container {
    margin: 0 0 8.8vw;
    width: 100%;
}
#suntory_contents .movie_secondary .movie {
    margin: 0 auto 4.8vw;
    width: 100%;
    position: relative;
    height: 0;
    padding-top: 56.25%;
}
#suntory_contents .movie_secondary .movie iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#suntory_contents .movie_secondary figure {
    width: 92vw;
    height: auto;
    position:absolute;
    top:0;
    left:0;
}
#suntory_contents .movie_secondary figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#suntory_contents .movie_secondary figure span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2) url(../img/bt_play.svg) no-repeat center center;
    background-size: 20vw 20vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
#suntory_contents .movie_secondary .movie_container .data {
    width: 92vw;
}
#suntory_contents .movie_secondary .movie_container .date {
    width: 92vw;
    margin-bottom: 2.666666666666667vw;
    font-size: 2.933333333333333vw;
    color: #666;
}
#suntory_contents .movie_secondary .movie_container .title {
    margin-bottom: 2.666666666666667vw;
    font-size: 3.466666666666667vw;
    font-weight: normal;
    line-height: 1.8;
}
#suntory_contents .movie_secondary .movie_container .period {
    margin-bottom: 2.666666666666667vw;
    font-size: 3.466666666666667vw;
}
#suntory_contents .movie_secondary .movie_container .time {
    margin-bottom: 2.666666666666667vw;
    font-size: 3.466666666666667vw;
}
#suntory_contents .movie_secondary .movie_container .info {
    margin-bottom: 2.666666666666667vw;
    font-size: 2.933333333333333vw;
    line-height: 1.8;
}
#suntory_contents .movie_secondary .movie_container .category {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-top: 4vw;
}
#suntory_contents .movie_secondary .movie_container .category li {
    margin: 0 3.2vw 3.2vw 0;
    font-size: 3.2vw;
    color: #666;
    border: 1px #666 solid;
    padding: 1.6vw 4vw;
    border-radius: 1.066666666666667vw;
}
#suntory_contents .movie_secondary .category li.category01 {
    order: 1;
}
#suntory_contents .movie_secondary .category li.category02 {
    order: 2;
}
#suntory_contents .movie_secondary .category li.category03 {
    order: 3;
}
#suntory_contents .movie_secondary .category li.category04 {
    order: 4;
    margin: 0 0 3.2vw;
}


/*------------------------------------------------------------
[SP] page_nav
------------------------------------------------------------ */
#suntory_contents .page_nav {
    margin: 0 auto 12vw;
    padding: 5.6vw 0;
    width: 92vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    font-size: 3.733333333333333vw;
}
#suntory_contents .page_nav.max_page_1 {
    margin: 5.6vw auto 12vw;
    padding: 0;
    border-top: 1px #ccc solid;
    border-bottom: none;
}
#suntory_contents .page_nav.max_page_1 div {
    display: none;
}
#suntory_contents .page_nav a {
    color: #000;
    text-decoration: none;
}
#suntory_contents .page_nav .btn_prev {
    background: url(../img/arrow_left_small_gr.svg) no-repeat 0 center;
    background-size: 1.866666666666667vw auto;
    padding-left: 4.533333333333333vw;
    height: 4vw;
    display: flex;
    align-items: center;
}
#suntory_contents .page_nav .btn_next {
    background: url(../img/arrow_right_small_gr.svg) no-repeat right center;
    background-size: 1.866666666666667vw auto;
    padding-right: 4.533333333333333vw;
    height: 4vw;
    display: flex;
    align-items: center;
}
#suntory_contents .page_nav .page_num_container {
    display: flex;
}
#suntory_contents .page_nav .page_num_container .page_num {
    display: flex;
    align-items: center;
}
#suntory_contents .page_nav .page_num_container .page_num a {
    margin: 0 4vw;
    height: 4vw;
    display: flex;
    align-items: center;
}
#suntory_contents .page_nav .page_num_container .page_num .current_page {
    margin: 0 4vw;
    height: 4vw;
    display: flex;
    align-items: center;
    color: #A89170;
    font-weight: bold;
}
#suntory_contents .page_nav .page_num_container {
    display: flex;
    justify-content: center;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    padding: 0 4vw;
    margin: 0 8vw;
}


/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print, screen and (min-width:768px) {

/*------------------------------------------------------------
 [PC] title_movie
------------------------------------------------------------ */
#suntory_contents .title_movie {
    margin: 50px 0;
    font-size: 28px;
}
/*------------------------------------------------------------
[PC] movie_nav
------------------------------------------------------------ */
#suntory_contents .movie_nav {
    margin-bottom: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#suntory_contents .movie_nav li {
    font-size: 14px;
    padding: 0 30px;
    border-right: 1px #666 solid;
    margin-bottom: 0;
}
#suntory_contents .movie_nav li:first-child {
        border-left: 1px #666 solid;
}
#suntory_contents .movie_nav li:nth-child(4) {
    border-left: none;
}

#suntory_contents .movie_nav li a {
    color: #000;
    text-decoration: none;
    width: auto;
    padding: 3px 0;
    height: auto;
    display: block;
    border-bottom: 1px #fff solid;
}
#suntory_contents .movie_nav li a:hover {
    border-bottom: 1px #666 solid;
}


/*------------------------------------------------------------
[PC] movie_primary
------------------------------------------------------------ */
#suntory_contents .movie_primary {
    margin: 0 auto 80px;
    width: 960px;
    display: none;
}
#suntory_contents .movie_primary.page__1 {
    display: flex;
    justify-content: space-between;
}
#suntory_contents .movie_primary .movie {
    margin: 0;
    width: 640px;
    position: relative;
    height: 0;
    padding-top: 56.25%;
}
#suntory_contents .movie_primary .movie iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#suntory_contents .movie_primary .movie figure {
    width: 640px;
    height: auto;
    position:absolute;
    top:0;
    left:0;
    cursor: pointer;
}
#suntory_contents .movie_primary .movie figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#suntory_contents .movie_primary .movie figure span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2) url(../img/bt_play.svg) no-repeat center center;
    background-size: 70px 70px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
#suntory_contents .movie_primary .data {
    width: 290px;
    padding: 30px 0 0;
}
#suntory_contents .movie_primary .date {
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
}
#suntory_contents .movie_primary .title {
    margin-bottom: 10px;
    font-size: 18px;
}
#suntory_contents .movie_primary .period {
    margin-bottom: 10px;
    font-size: 13px;
}
#suntory_contents .movie_primary .time {
    margin-bottom: 10px;
    font-size: 13px;
}
#suntory_contents .movie_primary .info {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.8;
}
#suntory_contents .movie_primary .category {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-top: 15px;
    margin-bottom: 0;
}
#suntory_contents .movie_primary .category li {
    margin: 0 12px 12px 0;
    font-size: 13px;
    color: #666;
    border: 1px #666 solid;
    padding: 5px 15px;
    border-radius: 4px;
}
#suntory_contents .movie_primary .category li:last-child {
    margin: 0 0 12px 0;
}

/*------------------------------------------------------------
[PC] movie_secondary
------------------------------------------------------------ */
#suntory_contents .movie_secondary {
    margin: 0 auto 0;
    width: 960px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
#suntory_contents .movie_container {
    margin: 0 0 38px;
    width: 450px;
}
#suntory_contents .movie_container:nth-child(2n) {
    margin: 0 0 38px 60px;
}
#suntory_contents .movie_secondary .movie {
    margin: 0 0 15px;
    width: 450px;
    position: relative;
    height: 0;
    padding-top: 56.25%;
}
#suntory_contents .movie_secondary .movie iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#suntory_contents .movie_secondary figure {
    width: 450px;
    height: auto;
    position:absolute;
    top:0;
    left:0;
    cursor: pointer;
}
#suntory_contents .movie_secondary figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#suntory_contents .movie_secondary figure span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2) url(../img/bt_play.svg) no-repeat center center;
    background-size: 70px 70px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
#suntory_contents .movie_secondary .movie_container .data {
    width: 450px;
}
#suntory_contents .movie_secondary .movie_container .date {
    width: 450px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #666;
}
#suntory_contents .movie_secondary .movie_container .title {
    margin-bottom: 10px;
    font-size: 14px;
}
#suntory_contents .movie_secondary .movie_container .period {
    margin-bottom: 10px;
    font-size: 13px;
}
#suntory_contents .movie_secondary .movie_container .time {
    margin-bottom: 10px;
    font-size: 13px;
}
#suntory_contents .movie_secondary .movie_container .info {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.8;
}
#suntory_contents .movie_secondary .movie_container .category {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-top: 15px;
    margin-bottom: 0;
}
#suntory_contents .movie_secondary .movie_container .category li {
    margin: 0 12px 12px 0;
    font-size: 13px;
    color: #666;
    border: 1px #666 solid;
    padding: 5px 15px;
    border-radius: 4px;
}
#suntory_contents .movie_secondary .category li.category01 {
    order: 1;
}
#suntory_contents .movie_secondary .category li.category02 {
    order: 2;
}
#suntory_contents .movie_secondary .category li.category03 {
    order: 3;
}
#suntory_contents .movie_secondary .category li.category04 {
    order: 4;
    margin: 0 12px 12px 0;
}


/*------------------------------------------------------------
[pc] page_nav
------------------------------------------------------------ */
#suntory_contents .page_nav {
    margin: 0 auto 80px;
    padding: 30px 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    font-size: 14px;
}
#suntory_contents .page_nav.max_page_1 {
    margin: 30px auto 80px;
    padding: 0;
    border-top: 1px #ccc solid;
    border-bottom: none;
}
#suntory_contents .page_nav.max_page_1 div {
    display: none;
}

#suntory_contents .page_nav a {
    color: #000;
    text-decoration: none;
}
#suntory_contents .page_nav .btn_prev {
    background: url(../img/arrow_left_small_gr.svg) no-repeat 0 center;
    background-size: 7px auto;
    padding-left: 16px;
    height: 30px;
    display: flex;
    align-items: center;
}
#suntory_contents .page_nav .btn_next {
    background: url(../img/arrow_right_small_gr.svg) no-repeat right center;
    background-size: 7px auto;
    padding-right: 16px;
    height: 30px;
    display: flex;
    align-items: center;
}
#suntory_contents .page_nav .btn_prev a,
#suntory_contents .page_nav .btn_next a {
    padding: 3px 0;
    border-bottom:1px #fff solid;
}
#suntory_contents .page_nav .btn_prev a:hover,
#suntory_contents .page_nav .btn_next a:hover {
    border-bottom:1px #666 solid;
}

#suntory_contents .page_nav .page_num_container {
    display: flex;
}
#suntory_contents .page_nav .page_num_container .page_num {
    display: flex;
}
#suntory_contents .page_nav .page_num_container .page_num a {
    margin: 0 20px;
    height: auto;
    display: block;
    padding: 3px 0;
    border-bottom:1px #fff solid;
}
    #suntory_contents .page_nav .page_num_container .page_num a:hover {
    border-bottom: 1px #666 solid;
    }
#suntory_contents .page_nav .page_num_container .page_num .current_page {
    margin: 0 20px;
    padding: 3px 0;
    height: auto;
    display: block;
    color: #A89170;
    font-weight: bold;
}
#suntory_contents .page_nav .page_num_container {
    display: flex;
    justify-content: center;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    padding: 0 20px;
    margin: 0 40px;
}






}