@charset "utf-8";

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

    #sungoliath_contents .title_container {
        order: 1;
    }
    #sungoliath_contents .contents_container {
        order: 2;
    }
    #sungoliath_contents .breadcrumbs {
        order: 3;
    }
    #sungoliath_contents .btn_list {
        order: 4;
    }
    
    
    /* ========================================================================
    member_index[sp]
    ========================================================================= */
    #suntory_contents .contents_container.member_index {
        background: none;
        padding: 0;
    }
    
    /* ========================================================================
    position_nav[sp]
    ========================================================================= */
    #suntory_contents .position_nav {
        display: none;
    }
    
    /* ========================================================================
    title_positon[sp]
    ========================================================================= */
    #suntory_contents .title_positon {
        margin-bottom: 5.3333333333333vw;
        background: rgba(153,34,85,.75);
        height: 12vw;
        position: relative;
    }
    
    #suntory_contents .title_positon h2 {
        height: 12vw;
        display: flex;
        align-items: flex-end;
        padding: 0 0 3.4666666666667vw 6vw;
        color: #fff;
        font-size: 4vw;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #suntory_contents .title_positon h2 span {
        font-size: 6.9333333333333vw;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 900;
        margin: 0 2.6666666666667vw -.125em 0;
    }
    
    #suntory_contents #pr .title_positon::after {
        content: '';
        width: 22.2666666666667vw;
        height: 15.4666666666667vw;
        background: url(../img/sp_number_pr.png) no-repeat 0 0;
        background-size: 22.2666666666667vw auto;
        position: absolute;
        top: -2.4vw;
        right: 6vw;
        z-index: 1;
    }
    #suntory_contents #ho .title_positon::after {
        content: '';
        width: 12.5333333333333vw;
        height: 11.2vw;
        background: url(../img/sp_number_ho.png) no-repeat 0 0;
        background-size: 12.5333333333333vw auto;
        position: absolute;
        top: -2.2666666666667vw;
        right: 5.8666666666667vw;
        z-index: 1;
    }
    #suntory_contents #lo .title_positon::after {
        content: '';
        width: 28.2666666666667vw;
        height: 16.4vw;
        background: url(../img/sp_number_lo.png) no-repeat 0 0;
        background-size: 28.2666666666667vw auto;
        position: absolute;
        top: -2.5333333333333vw;
        right: 5.0666666666667vw;
        z-index: 1;
    }
    #suntory_contents #fl_no8 .title_positon::after {
        content: '';
        width: 38.2666666666667vw;
        height: 18.1333333333333vw;
        background: url(../img/sp_number_fl_no8.png) no-repeat 0 0;
        background-size: 38.2666666666667vw auto;
        position: absolute;
        top: -2.9333333333333vw;
        right: 2.6666666666667vw;
        z-index: 1;
    }
    #suntory_contents #sh .title_positon::after {
        content: '';
        width: 11.3333333333333vw;
        height: 13.4666666666667vw;
        background: url(../img/sp_number_sh.png) no-repeat 0 0;
        background-size: 11.3333333333333vw auto;
        position: absolute;
        top: -2.9333333333333vw;
        right: 5.8666666666667vw;
        z-index: 1;
    }
    #suntory_contents #so .title_positon::after {
        content: '';
        width: 17.7333333333333vw;
        height: 14.1333333333333vw;
        background: url(../img/sp_number_so.png) no-repeat 0 0;
        background-size:17.7333333333333vw auto;
        position: absolute;
        top: -1.3333333333333vw;
        right: 6vw;
        z-index: 1;
    }
    #suntory_contents #wtb .title_positon::after {
        content: '';
        width: 30vw;
        height: 15.6vw;
        background: url(../img/sp_number_wtb.png) no-repeat 0 0;
        background-size:30vw auto;
        position: absolute;
        top: -1.6vw;
        right: 6.2666666666667vw;
        z-index: 1;
    }
    #suntory_contents #ctb .title_positon::after {
        content: '';
        width: 32.2666666666667vw;
        height: 16.4vw;
        background: url(../img/sp_number_ctb.png) no-repeat 0 0;
        background-size:32.2666666666667vw auto;
        position: absolute;
        top: -2.1333333333333vw;
        right: 6vw;
        z-index: 1;
    }
    #suntory_contents #fb .title_positon::after {
        content: '';
        width: 15.3333333333333vw;
        height: 15.4666666666667vw;
        background: url(../img/sp_number_fb.png) no-repeat 0 0;
        background-size:15.3333333333333vw auto;
        position: absolute;
        top: -1.7333333333333vw;
        right: 6.1333333333333vw;
        z-index: 1;
    }
    
    /* ========================================================================
    member_list[sp]
    ========================================================================= */
    #suntory_contents .member_list {
        margin: 0 0 0 6vw;
    }
    #suntory_contents .member_list ul {
        display: flex;
        flex-wrap: wrap;
    }
    #suntory_contents .member_list ul li {
        width: 41.3333333333333vw;
        margin: 0 5.3333333333333vw 8vw 0;
        color: #fff;
    }
    #suntory_contents .member_list ul li figure {
        margin-bottom: 4vw;
        width: 41.3333333333333vw;
        height: 41.3333333333333vw;
        overflow: hidden;
    }
    #suntory_contents .member_list ul li figure img {
        width: 41.3333333333333vw;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .member_list ul li h3 {
        margin-bottom: 2vw;
        font-size: 3.4666666666667vw;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 500;
        color: #fff;
    }
    #suntory_contents .member_list ul li p.name_jp {
        margin-bottom: 4vw;
        font-size: 3.4666666666667vw;
        font-weight: bold;
        font-weight: 500;
    }
    #suntory_contents .member_list .member_data_table {
        width: 100%;
    }
    #suntory_contents .member_list .member_data_table th{
        font-size: 3.4666666666667vw;
        font-family: 'Roboto',sans-serif;
        color: #aba9a9;
        padding: 0 0 .6666666666667vw;
        display: block;
    }
    #suntory_contents .member_list .member_data_table td{
        font-size: 3.4666666666667vw;
        font-family: 'Roboto',sans-serif;
        padding: 0 0 3.3333333333333vw;
        display: block;
    }
    #suntory_contents .member_list .member_data_table tr:last-child td {
        padding: 0;
    }
    
    /* ========================================================================
    staff_list[sp]
    ========================================================================= */
    #suntory_contents .staff_list {
        margin: 0 6vw 0;
    }
    #suntory_contents .staff_list ul {
        display: flex;
        flex-direction: column;
    }
    #suntory_contents .staff_list ul li {
        width: auto;
        margin: 0 0 5.3333333333333vw;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: #fff;
    }
    #suntory_contents .staff_list ul li figure {
        width: 24vw;
        height: 24vw;
        overflow: hidden;
    }
    #suntory_contents .staff_list ul li figure img {
        width: 24vw;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .staff_list ul li .text {
        width: 58.6666666666667vw;
    }

    #suntory_contents .staff_list ul li h3 {
        margin-bottom: 2vw;
        font-size: 4.2666666666667vw;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 900;
        color: #fff;
    }
    #suntory_contents .staff_list ul li p.title {
        margin-bottom: 2vw;
        font-size: 2.6666666666667vw;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 500;
        color: #fff;
    }
    #suntory_contents .staff_list ul li p.name_jp {
        margin-bottom: 2.6666666666667vw;
        font-size: 3.4666666666667vw;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 500;
    }
    #suntory_contents .staff_list .member_data_table {
        width: 100%;
    }
    #suntory_contents .staff_list .member_data_table th{
        font-size: 3.4666666666667vw;
        font-family: 'Roboto',sans-serif;
        width: 19.2vw;
        padding: 0 0 1.3333333333333vw;
        color: #aba9a9;
    }
    #suntory_contents .staff_list .member_data_table td{
        font-size: 3.4666666666667vw;
        font-family: 'Roboto',sans-serif;
        padding: 0 0 1.3333333333333vw;
    }

    
    


 
    /* ========================================================================
    btn_list[sp]
    ========================================================================= */
    #suntory_contents .btn_list a {
        margin: 6.6666666666667vw auto 0;
        width: 34.6666666666667vw;
        height: 12vw;
        background: #3b3b3b;
        color: #fff;
        font-size: 4.8vw;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        position: relative;
    }
    #suntory_contents .btn_list a::before{
    content:"";
    vertical-align:middle;
    position:absolute;
    top:calc(50% - .7333333333333vw);
    left: 4.6666666666667vw;
    width:1.4666666666667vw;
    height:1.4666666666667vw;
    margin:auto;
    border-top:2px solid #ffbb00;
    border-right:2px solid #ffbb00;
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    }
    
}


/*==================================================
pc
================================================== */
@media print, screen and (min-width:768px){

    
    /* ========================================================================
    member_index[pc]
    ========================================================================= */
    #suntory_contents .contents_container.member_index {
        background: rgba(255,255,255,.85);
        padding: 50px;
    }
    
    /* ========================================================================
    position_nav[pc]
    ========================================================================= */
    #suntory_contents .position_nav {
        margin-bottom: 40px;
    }
    #suntory_contents .position_nav ul {
        display: flex;
        flex-wrap: wrap;
    }
    #suntory_contents .position_nav ul li {
        width: 170px;
        margin: 0 5px 5px 0;
    }
    #suntory_contents .position_nav ul li:last-child {
        margin: 0 0 5px 0;
    }
    #suntory_contents .position_nav ul li a {
        background: #e1eaf5;
        color: #0077ff;
        height: 50px;
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 20px;
        font-size: 16px;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight:700;
    }
    #suntory_contents .position_nav ul li a::before {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: calc(50% - 3.5px);
    right: 20px;
    width: 7px;
    height: 7px;
    margin: auto;  
    border-top:2px solid #0077ff;
    border-right:2px solid #0077ff;
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
    }
    #suntory_contents .position_nav ul li a:hover {
        text-decoration: underline;
    }
    
    /* ========================================================================
    title_positon[pc]
    ========================================================================= */
    #suntory_contents .title_positon {
        margin-bottom: 20px;
        background: #9d2c5c;
        height: 60px;
        position: relative;
    }
    
    #suntory_contents .title_positon h2 {
        height: 60px;
        display: flex;
        align-items: flex-end;
        padding: 0 0 20px 100px;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        position: relative;
    }
    #suntory_contents #staff .title_positon h2,
    #suntory_contents #utb .title_positon h2 {
        padding: 0 0 20px 30px;
    }
    
    
    #suntory_contents .title_positon h2 span {
        font-size: 30px;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 900;
        margin: 0 20px -.125em 0;
    }
    
    #suntory_contents #pr .title_positon::after {
        content: '';
        width: 72px;
        height: 74px;
        background: url(../img/number_pr.png) no-repeat 0 0;
        position: absolute;
        top: -8px;
        left: 14px;
    }
    #suntory_contents #ho .title_positon::after {
        content: '';
        width: 43px;
        height: 42px;
        background: url(../img/number_ho.png) no-repeat 0 0;
        position: absolute;
        top:10px;
        left: 29px;
    }
    #suntory_contents #lo .title_positon::after {
        content: '';
        width: 81px;
        height: 77px;
        background: url(../img/number_lo.png) no-repeat 0 0;
        position: absolute;
        top:-9px;
        left: 8px;
    }
    #suntory_contents #fl_no8 .title_positon::after {
        content: '';
        width: 114px;
        height: 63px;
        background: url(../img/number_fl_no8.png) no-repeat 0 0;
        position: absolute;
        top:-5px;
        left: -9px;
    }
    #suntory_contents #sh .title_positon::after {
        content: '';
        width: 29px;
        height: 48px;
        background: url(../img/number_sh.png) no-repeat 0 0;
        position: absolute;
        top:7px;
        left: 35px;
    }
    #suntory_contents #so .title_positon::after {
        content: '';
        width: 60px;
        height: 48px;
        background: url(../img/number_so.png) no-repeat 0 0;
        position: absolute;
        top:9px;
        left: 21px;
    }
    #suntory_contents #wtb .title_positon::after {
        content: '';
        width: 91px;
        height: 77px;
        background: url(../img/number_wtb.png) no-repeat 0 0;
        position: absolute;
        top:-8px;
        left: 9px;
    }
    #suntory_contents #ctb .title_positon::after {
        content: '';
        width: 86px;
        height: 82px;
        background: url(../img/number_ctb.png) no-repeat 0 0;
        position: absolute;
        top:-7px;
        left: 11px;
    }
    #suntory_contents #fb .title_positon::after {
        content: '';
        width: 54px;
        height: 54px;
        background: url(../img/number_fb.png) no-repeat 0 0;
        position: absolute;
        top:-4px;
        left: 26px;
    }
    
    
    /* ========================================================================
    member_list[pc]
    ========================================================================= */
    #suntory_contents .member_list {
        margin-bottom: 40px;
    }
    #suntory_contents .member_list ul {
        display: flex;
        flex-wrap: wrap;
    }
    #suntory_contents .member_list ul li {
        width: 250px;
        margin: 0 20px 40px 0;
    }
    #suntory_contents .member_list ul li:nth-child(4n) {
        margin: 0 0 40px 0;
    }
    #suntory_contents .member_list ul li figure {
        margin-bottom: 20px;
        width: 250px;
        height: 250px;
        overflow: hidden;
    }
    #suntory_contents .member_list ul li figure img {
        width: 250px;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .member_list ul li h3 {
        margin-bottom: 10px;
        font-size: 18px;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 900;
    }
    #suntory_contents .member_list ul li p.name_jp {
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: bold; 
    }
    #suntory_contents .member_list .member_data_table {
        width: 100%;
    }
    #suntory_contents .member_list .member_data_table th{
        font-size: 13px;
        font-family: 'Roboto',sans-serif;
        width: 130px;
        padding: 0 0 5px;
    }
    #suntory_contents .member_list .member_data_table td{
        font-size: 13px;
        font-family: 'Roboto',sans-serif;
        padding: 0 0 5px;
    }
    
    /* ========================================================================
    staff_list[pc]
    ========================================================================= */
    #suntory_contents .staff_list {
        margin-bottom: 40px;
    }
    #suntory_contents .staff_list ul {
        display: flex;
        flex-wrap: wrap;
    }
    #suntory_contents .staff_list ul li {
        width: 340px;
        margin: 0 20px 20px 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #suntory_contents .staff_list ul li:nth-child(3n) {
        margin: 0 0 20px 0;
    }
    #suntory_contents .staff_list ul li figure {
        width: 120px;
        height: 120px;
        overflow: hidden;
    }
    #suntory_contents .staff_list ul li figure img {
        width: 120px;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .staff_list ul li .text {
        width: 200px;
    }

    #suntory_contents .staff_list ul li h3 {
        margin-bottom: 5px;
        font-size: 18px;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        font-weight: 900;
    }
    #suntory_contents .staff_list ul li p.title {
        margin-bottom: 5px;
        font-size: 15px;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        color: #222222;
    }
    #suntory_contents .staff_list ul li p.name_jp {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bold;
    }
    #suntory_contents .staff_list .member_data_table {
        width: 100%;
    }
    #suntory_contents .staff_list .member_data_table th{
        font-size: 12px;
        font-family: 'Roboto',sans-serif;
        width: 70px;
        padding: 0 0 5px;
    }
    #suntory_contents .staff_list .member_data_table td{
        font-size: 12px;
        font-family: 'Roboto',sans-serif;
        padding: 0 0 5px;
    }

    /* ========================================================================
    btn_list[pc]
    ========================================================================= */
    #suntory_contents .btn_list a {
        margin: 50px auto 0;
       width: 260px;
        height: 60px;
        background: #262626;
        color: #fff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        position: relative;
    }
    #suntory_contents .btn_list a:hover {
        background: #404040;
    }
    #suntory_contents .btn_list a::before{
    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);
    }
    
}