@charset "utf-8";

/*==================================================
sp
================================================== */
@media screen and (max-width:767px){

    #sungoliath_contents .title_container {
        order: 1;
    }
    #sungoliath_contents .nav_container {
        order: 2;
    }
    #sungoliath_contents .contents_container {
        order: 3;
    }
    #sungoliath_contents .breadcrumbs {
        order: 4;
    }
    #sungoliath_contents .nav_container.bottom {
        order: 5;
    }
    
     /* ========================================================================
    contents_container[sp]
    ========================================================================= */
    #suntory_contents .contents_container {
        background: none;
        padding: 3.3333333333333vw;
    }
    
        
    /* ========================================================================
    nav_container[sp]
    ========================================================================= */
    #suntory_contents .nav_container {
        margin: 0 3.3333333333333vw 4.6666666666667vw;
        width: calc( 100vw - 6.6666666666666vw);
        min-height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #suntory_contents .nav_container.bottom {
        margin: 4.6666666666667vw 3.3333333333333vw 0;
    }
    
    #suntory_contents .nav_container h2 {
        color: #fff;
        font-size: 3.4626666666667vw;
    }
    #suntory_contents .nav_container h2 em {
        font-size: 6.4vw;
        font-weight: bold;
        font-weight: 700;
        font-family: 'Roboto', sans-serif;
    }
    #suntory_contents .btn_prev {
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .btn_prev a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 21.3333333333333vw;
        height: 9.3333333333333vw;
        background: rgba(0,0,0,.5);
/*        box-shadow: 0 0 6px rgba(255,255,255,.4);*/
        border-radius: 2px;
        color: #fff;
        font-size: 3.4666666666667vw;
        position: relative;
    }
    #suntory_contents .btn_prev a span {
        margin-left: 2.2666666666667vw;
    }
    #suntory_contents .btn_next {
        position: absolute;
        top: 0;
        right: 0;
    }
    #suntory_contents .btn_next a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 21.3333333333333vw;
        height: 9.3333333333333vw;
        background: rgba(0,0,0,.5);
        border-radius: 2px;
        color: #fff;
        font-size: 3.4666666666667vw;
        position: relative;
    }
     #suntory_contents .btn_next a span {
        margin-right: 2.2666666666667vw;
    }
    
    #suntory_contents .btn_prev a::after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - .6666666666667vw);
    left: 3.3333333333333vw;
    width:1.3333333333333vw;
    height:1.3333333333333vw;
    margin:auto;
    border-top:2px solid #ffbb00;
    border-right:2px solid #ffbb00;
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    }
    #suntory_contents .btn_next a::after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - .6666666666667vw);
    right: 3.3333333333333vw;
    width:1.3333333333333vw;
    height:1.3333333333333vw;
    margin:auto;
    border-top:2px solid #ffbb00;
    border-right:2px solid #ffbb00;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    }
    
    /* ========================================================================
    shcedule_list[sp]
    ========================================================================= */
    #suntory_contents .shcedule_list {
        width: 100%;
    }
    #suntory_contents .shcedule_list li {
        margin-bottom: 1.3333333333333vw;
        background: rgba(255,255,255,.85);
        min-height: 1.2vw;
        padding: 4vw;
    }
    #suntory_contents .shcedule_list li.saturday,
    #suntory_contents .shcedule_list li.sunday {
        background: #fff;
    }
    
    #suntory_contents .shcedule_list li:last-child {
        margin-bottom: 0;
    }
    
    #suntory_contents .shcedule_list li dl {
       display: grid;
       grid-template-columns: 17.3333333333333vw 6.8vw;
       grid-template-rows   : 1fr;
    }

    #suntory_contents .shcedule_list li dl dt {
        width: 17.3333333333333vw;
        display: flex;
        align-items: center;
        grid-column: 1 / 2;
        grid-row   : 1 / 4;
    }
    
    #suntory_contents .shcedule_list li .exist + .exist {
       border-top: 1px #aaaaaa solid;
        margin-top: 4vw;
        padding-top: 4vw;
    }
    
    #suntory_contents .shcedule_list li dl dt .day {
        font-size: 5.3333333333333vw;
        font-weight: bold;
        font-family: 'Roboto', sans-serif;
        min-width: 5.3333333333333vw;
        margin-right: 3.2vw;
    }
    #suntory_contents .shcedule_list li.saturday .dow {
        color: #0099ff;
    }
    #suntory_contents .shcedule_list li.sunday .dow {
        color: #ff0000;
    }
    
    #suntory_contents .shcedule_list li .dow {
        font-size: 3.7333333333333vw;
    }
    #suntory_contents .shcedule_list li .text {
        font-size: 3.7333333333333vw;
        grid-column: 2 / 4;
        grid-row   : 1 / 2;
    }
    #suntory_contents .shcedule_list li .birthday {
        font-size: 3.7333333333333vw;
        grid-column: 2 / 4;
        grid-row   : 3 / 4;
        
/*
        display: flex;
        align-items: center;
*/
        padding-left: 13.0666666666667vw;
        position: relative;
    }
    #suntory_contents .shcedule_list .birthday a {
/*
        display: flex;
        align-items: center;
*/
    }
    #suntory_contents .shcedule_list li .birthday a .person {
        color: #0077ff;
/*        width: 53.3333333333333vw;*/
        line-height: 1.428571428571429;
        margin-right: 1em;
        white-space: nowrap;
    }
    #suntory_contents .shcedule_list li .birthday a:hover .person {
        text-decoration: underline;
    }
    #suntory_contents .shcedule_list li .icon_birthday {
        background: #cc77dd;
        font-size: 2.6666666666667vw;
        color: #ffffff;
        width: 10.6666666666667vw;
        height: 4vw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
/*        margin-right: 2.4vw;*/
        position: absolute;
        left: 0;
    }

    #suntory_contents .shcedule_list li .match {
        display: flex;
        align-items: center;
    }
    #suntory_contents .shcedule_list li .icon_match {
        background: #ffaa44;
        font-size: 2.6666666666667vw;
        color: #ffffff;
        width: 10.6666666666667vw;
        height: 4vw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        margin-right: 2.4vw;
    }
    #suntory_contents .shcedule_list li .text_match {
         width: 53.3333333333333vw;
         line-height: 1.428571428571429;
    }
    
    #suntory_contents .shcedule_list li .icon_event {
        background: #f69;
        font-size: 2.6666666666667vw;
        letter-spacing: -.075em;
        color: #ffffff;
        width: 10.6666666666667vw;
        height: 4vw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        margin-right: 2.4vw;
    }

    

    
    
}


/*==================================================
pc
================================================== */
@media print, screen and (min-width:768px){
    
    
    
    
    /* ========================================================================
    contents_container[pc]
    ========================================================================= */
    #suntory_contents .contents_container {
        background: rgba(255,255,255,.7);
        padding: 50px;
    }

    
    /* ========================================================================
    nav_container[pc]
    ========================================================================= */
    #suntory_contents .nav_container {
        margin: 0 auto 30px;
        width: 1060px;
        min-height: 50px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: relative;
    }
    #suntory_contents .nav_container.bottom {
        margin: 50px auto 0;
    }
    
    #suntory_contents .nav_container h2 {
        color: #fff;
        font-size: 20px;
    }
    #suntory_contents .nav_container h2 em {
        font-size: 48px;
        font-weight: bold;
        font-weight: 700;
        font-family: 'Roboto', sans-serif;
    }
    #suntory_contents .btn_prev {
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .btn_prev a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 50px;
        background: rgba(0,0,0,.5);
        box-shadow: 0 0 6px rgba(255,255,255,.4);
        border-radius: 2px;
        color: #fff;
        font-size: 16px;
        position: relative;
    }
    #suntory_contents .btn_prev a span {
        margin-left: 10px;
    }
    #suntory_contents .btn_prev a:hover {
        background: rgba(0,0,0,.9);
        color: #ffbb00;
    }
    
    #suntory_contents .btn_next {
        position: absolute;
        top: 0;
        right: 0;
    }
    #suntory_contents .btn_next a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 50px;
        background: rgba(0,0,0,.5);
        box-shadow: 0 0 6px rgba(255,255,255,.4);
        border-radius: 2px;
        color: #fff;
        font-size: 16px;
        position: relative;
    }
     #suntory_contents .btn_next a span {
        margin-right: 10px;
    }
    #suntory_contents .btn_next a:hover {
        background: rgba(0,0,0,.9);
        color: #ffbb00;
    }
    
    #suntory_contents .btn_prev a::after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 3.5px);
    left: 20px;
    width:7px;
    height:7px;
    margin:auto;
    border-top:2px solid #ffbb00;
    border-right:2px solid #ffbb00;
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    }
    #suntory_contents .btn_next a::after{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 3.5px);
    right: 20px;
    width:7px;
    height:7px;
    margin:auto;
    border-top:2px solid #ffbb00;
    border-right:2px solid #ffbb00;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    }
    
/*
    #suntory_contents .btn_prev a:hover,
    #suntory_contents .btn_next a:hover {
        opacity: .8;
    }
*/
    
    /* ========================================================================
    shcedule_list[pc]
    ========================================================================= */
    #suntory_contents .shcedule_list {
        width: 100%;
    }
    #suntory_contents .shcedule_list li {
        margin-bottom: 5px;
        background: rgba(255,255,255,.7);
        background: url(../img/bg_w70.png) repeat 0 0;
        background-size: 20px auto;
        min-height: 50px;
        padding: 15px 30px;  
    }
    #suntory_contents .shcedule_list li.saturday,
    #suntory_contents .shcedule_list li.sunday {
        background: #fff;
    }
    
    #suntory_contents .shcedule_list li:last-child {
        margin-bottom: 0;
    }
    
    #suntory_contents .shcedule_list li dl {
        display: flex;
        align-items: center;
    }

    #suntory_contents .shcedule_list li dl dt {
        width: 90px;
        display: flex;
        align-items: center;
    }
    #suntory_contents .shcedule_list li dl dt .day {
        margin-right: 30px;
        min-width: 20px;
        font-size: 20px;
        font-weight: bold;
        font-family: 'Roboto', sans-serif;
    }
    #suntory_contents .shcedule_list li.saturday .dow {
        color: #0099ff;
    }
    #suntory_contents .shcedule_list li.sunday .dow {
        color: #ff0000;
    }
    
    #suntory_contents .shcedule_list li .dow {
        font-size: 14px;
    }
    #suntory_contents .shcedule_list li .text {
        width: 670px;
        width: 615px;
        font-size: 14px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    #suntory_contents .shcedule_list li .birthday {
        width: 255px;
        width: 320px;
        font-size: 14px;
        position: relative;
        padding-left: 70px;
    }
    #suntory_contents .shcedule_list li .birthday a .person {
        color: #0077ff;
        line-height: 22px;
        margin-right: 1em;
        white-space: nowrap;
    }
    #suntory_contents .shcedule_list li .birthday a:hover .person {
        text-decoration: underline;
    }
    
    #suntory_contents .shcedule_list li .match {
        display: flex;
        align-items: center;
    }
    #suntory_contents .shcedule_list li .text_match {
        line-height: 1.428571428571429;
    }
    
    #suntory_contents .shcedule_list li .icon_match {
        background: #ffaa44;
        font-size: 11px;
        color: #ffffff;
        width: 50px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        margin-right: 20px;
    }
    #suntory_contents .shcedule_list li .icon_birthday {
        background: #cc77dd;
        font-size: 11px;
        color: #ffffff;
        width: 50px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
/*        margin-right: 20px;*/
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .shcedule_list li .icon_event {
        background: #f69;
        font-size: 11px;
        letter-spacing: -.075em;
        color: #fff;
        width: 50px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        margin-right: 20px;
    }
}