@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;
    }
    
    
    /* ========================================================================
    history_index[sp]
    ========================================================================= */
    #suntory_contents .contents_container.history_index {
     background: none;
    }
    
    /* ========================================================================
    title_container
    ========================================================================= */
    #sungoliath_contents .title_container {
    margin-bottom: 4vw;
    padding: 3.3333333333333vw 3.3333333333333vw;
    }
    #sungoliath_contents .title_container.detail {
    margin-bottom: 0;
    background: none;
    }
    #suntory_contents .title_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #303030;
    }
    #suntory_contents .title_container .title {
        margin-bottom: 0;
        align-items: center;
    }
    #suntory_contents .title_container .title h1 {
        margin-bottom: 3.3333333333333vw;
    }
    #suntory_contents .title_container .title .title_jp {
        margin: 0;
        letter-spacing: -.075em;
    }
    #suntory_contents .year_select_wrap {
        width: auto;
        position: relative;
        border-radius: 2px;
        box-sizing: border-box;
        background: #585858;
        padding: 0 calc(5.3333333333333vw + 7px) 0 1.5vw;
    }
     #suntory_contents .year_select_wrap::after{
        content:"";
        vertical-align:middle;
        position:absolute;
        top:calc(50% - 5px);
        right: 3vw;
        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 .year_select {
        outline:none;
        border: none;
        border-radius: 0;
        background: inherit;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        min-height: 8.6666666666667vw;
        color: #fff;
        border: none;
        font-size: 16px;
        font-size: 4.2666666666667vw;
        }
 
    
    /* ========================================================================
    year_nav[sp]
    ========================================================================= */
    #suntory_contents .year_nav {
        display:none;
    }
    
    
    
    /* ========================================================================
    year_group[sp]
    ========================================================================= */
    #suntory_contents .year_group {
        margin: 0 3.3333333333333vw 8vw;
    }
    #suntory_contents .year_group h2 {
        margin-bottom: 5.3333333333333vw;
        font-size: 6.4vw;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        line-height: 40px;
        border-left: 2vw #992255 solid;
        padding-left: 5.3333333333333vw;
        color: #fff;
    }
    
    #suntory_contents .year_container {
        margin-bottom: 1.3333333333333vw;
        background: rgba(255,255,255,.95);
        padding: 4vw;
    }
    #suntory_contents .year_container li {
        position: relative;
    }
    #suntory_contents .year_container figure {
        margin: 0 0 5.3333333333333vw 5.3333333333333vw;
        width: 34.6666666666667vw;
        height: 23.0666666666667vw;
        overflow: hidden;
        float: right;
/*
        position: absolute;
        top: 0;
        right: 0;
*/
    }
    #suntory_contents .year_container figure img {
        width: 34.6666666666667vw;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .year_container .text_block {
        
    }
    #suntory_contents .year_container .text_block h3 {
/*        width: 45.3333333333333vw;*/
        margin-bottom: 5.3333333333333vw;
        font-size: 6.4vw;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
    }
    #suntory_contents .year_container .text_block .text {
/*        width: 45.3333333333333vw;*/
        margin-bottom: 4vw;
        font-size: 3.4666666666667vw;
        line-height: 1.571428571428571;
    }
    
    #suntory_contents .year_container .text_block .extra {
    }
    
    #suntory_contents .year_container .text_block .captain {
        margin-bottom: 3.0666666666667vw;
        display: flex;
        align-items: center;
    }
    #suntory_contents .year_container .text_block .captain dt {
        font-size: 2.9333333333333vw;
        color: #fff;
        background: #992255;
        padding: 2.9333333333333vw 2.1333333333333vw;
        border-radius: .4vw;
        margin-right: 4vw;
    }
    #suntory_contents .year_container .text_block .captain dd a {
        font-size: 3.4666666666667vw;
        color: #0077ff;
    }
    #suntory_contents .year_container .text_block .captain dd a:hover {
        text-decoration: underline;
    }
    
    #suntory_contents .year_container .text_block .link a {
        font-size: 3.4666666666667vw;
        line-height: 1.571428571428571;
        color: #0077ff;
        background: url(../img/icon_report.svg) no-repeat 0 0;
        background-size: 4.4vw auto;
        padding-left: 8vw;
        display: inline-block;
    }
    #suntory_contents .year_container .text_block .link a:hover {
        text-decoration: underline;
    }
    
    
    
    /* ========================================================================
    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){

    
    /* ========================================================================
    history_index[pc]
    ========================================================================= */
    #suntory_contents .contents_container.history_index {
        background: rgba(255,255,255,.85);
        padding: 50px;
    }
    
    #suntory_contents .year_select_wrap {
        display: none;
    }
    
    
    /* ========================================================================
    year_nav[pc]
    ========================================================================= */
    #suntory_contents .year_nav {
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
    }
    #suntory_contents .year_nav li {
        width: 200px;
    }
    #suntory_contents .year_nav li a  {
        width: 200px;
        height: 50px;
        background:rgba(0,119,255,.08);
        display: flex;
        /*justify-content: center;*/
		padding-left: 35px;
        align-items: center;
        font-size: 20px;
        font-family: 'Roboto',sans-serif;
        font-weight: bold;
        color: #0077ff;
        position: relative;
    }
    #suntory_contents .year_nav li a.year_nav_center  {
		padding-left: 0;
        justify-content: center;
    }
    #suntory_contents .year_nav li a:hover {
        text-decoration: underline;
    }
    #suntory_contents .year_nav li a::after {
        content: '';
        width: 7px;
        height: 7px;
        position: absolute;
        top: calc(50% - 6px);
        right: 23px;
        margin: auto;
        border-top: 2px solid #0077ff;
        border-right: 2px solid #0077ff;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    
    /* ========================================================================
    year_group[pc]
    ========================================================================= */
    #suntory_contents .year_group {
        margin-bottom: 30px;
    }
    #suntory_contents .year_group h2 {
        margin-bottom: 20px;
        font-size: 26px;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        line-height: 40px;
        border-left: 10px #222 solid;
        padding-left: 20px;
    }
    
    #suntory_contents .year_container {
        margin-bottom: 10px;
        background: rgba(255,255,255,.7);
        padding: 30px;
    }
    #suntory_contents .year_container li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    #suntory_contents .year_container figure {
        width: 210px;
        height: 140px;
        overflow: hidden;
    }
    #suntory_contents .year_container figure img {
        width: 210px;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .year_container .text_block {
        width: 760px;
    }
    #suntory_contents .year_container .text_block h3 {
        margin-bottom: 20px;
        font-size: 26px;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
    }
    #suntory_contents .year_container .text_block .text {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.571428571428571;
    }
    #suntory_contents .year_container .text_block .text + .text {
        margin-top: -20px;
    }
    
    #suntory_contents .year_container .text_block .extra {
        display: flex;
        align-items: flex-start;
    }
    
    #suntory_contents .year_container .text_block .captain {
        display: flex;
        align-items: center;
        min-width: 190px;
        margin-right: 10px;
    }
    #suntory_contents .year_container .text_block .captain.two {
        min-width: 260px;
	}
	#suntory_contents .year_container .text_block .captain.multiple {
        min-width: 400px;
	}
    #suntory_contents .year_container .text_block .captain dt {
        font-size: 12px;
        color: #fff;
        background: #992255;
        padding: 7px 10px;
        border-radius: 3px;
        margin-right: 15px;
    }
    #suntory_contents .year_container .text_block .captain dd a {
        font-size: 14px;
        color: #0077ff;
    }
    #suntory_contents .year_container .text_block .captain dd a:hover {
        text-decoration: underline;
    }
    
    #suntory_contents .year_container .text_block .link a {
        font-size: 14px;
        line-height: 1.571428571428571;
        color: #0077ff;
        background: url(../img/icon_report.svg) no-repeat 0 0;
        background-size: auto 20px;
        padding-left: 30px;
        display: inline-block;
    }
    #suntory_contents .year_container .text_block .link a:hover {
        text-decoration: underline;
    }
    
    
    /* ========================================================================
    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);
    }
    
}