@charset "utf-8";

/*==================================================
sp
================================================== */

/*==================================================
[sp]article
================================================== */
#suntory_contents .article {
    margin: 0 4vw 6.6666666666667vw;
    padding: 5.3333333333333vw 0 10.6666666666667vw;
    background: #fff;
}

/*==================================================
[sp]tag_container
================================================== */
#suntory_contents .tag_container {
    display: flex;
    margin: 0 4vw 4vw;
}
#suntory_contents .tag_container p {
    margin: 0 2.6666666666667vw 0 0;
    background: #e9e4d9;
    font-size: 3.4666666666667vw;
    padding: 2.6666666666667vw 4vw;
    border-radius: 0.5333333333333vw;
}

/*==================================================
[sp]article_title
================================================== */
#suntory_contents .article_title {
    margin: 0 4vw 9.3333333333333vw;
}
#suntory_contents .article h1 {
    margin-bottom: 2.6666666666667vw;
    font-size: 5.3333333333333vw;
    line-height: 1.4;
}
#suntory_contents .article .date {
    font-size: 4.2666666666667vw;
    font-weight: 700;
}

/*==================================================
[sp]article_body
================================================== */
#suntory_contents .article_body .block {
	margin-bottom: 4vw;
}
#suntory_contents .article_body .block.no_margin {
	margin-bottom: 0;
}
#suntory_contents .article_body figure,
#suntory_contents .article_body .image_wide {
    margin: 0 0 4vw;
    width: 100%;
}
#suntory_contents .article_body .image_normal {
	margin: 0 4vw 4vw;
}
#suntory_contents .article_body figure + br,
#suntory_contents .article_body .image_wide +br,
#suntory_contents .article_body .image_normal +br {
	display: none;
}

#suntory_contents .article_body img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
#suntory_contents .article_body .image_wide img{
    width: 100%;
    height: auto;
}
#suntory_contents .article_body figure figcaption,
#suntory_contents .article_body .caption {
    margin: 1vw 4vw 4vw;
    font-size: 3.4666666666667vw;
    text-align: center;
}
/*#suntory_contents .article_body p + .caption,
#suntory_contents .article_body .image_wide + .caption,
#suntory_contents .article_body .image_normal + .caption {
	margin: -3vw 4vw 0;
}*/

#suntory_contents .article_body p {
    margin: 0 4vw 4vw;
    margin: 0 4vw;
    font-size: 4vw;
    line-height: 1.866666666666667;
}


#suntory_contents .article_body h2,
#suntory_contents .article_body .sub_title {
    margin-bottom: 6.6666666666667vw;
    background: #e9e4d9;
    font-size: 4.2666666666667vw;
    font-weight: 700;
    padding: 4vw 4vw;
}
#suntory_contents .btn_home,
#suntory_contents .button_block {
	margin-bottom: 4vw;
}
#suntory_contents .btn_home a,
#suntory_contents .button_block a {
    background: #292309;
    color: #fff;
    text-decoration: none;
    font-size: 4.8vw;
    font-weight: 700;
    line-height: 1.25;
    padding: 4vw 16vw 4vw 5.3333333333333vw;
    display: block;
    border-radius: 1.3333333333333vw;
    position: relative;
}
#suntory_contents .btn_home a::after,
#suntory_contents .button_block a::after {
    content: '';
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 1.3333333333333vw);
    right: 5.3333333333333vw;
    width:2.6666666666667vw;
    height:2.6666666666667vw;
    margin:auto;
    border-top:0.8vw solid #fff;
    border-right:0.8vw solid #fff;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

#suntory_contents  .article_body p.link_btn,
#suntory_contents  .article_body p.button_frame {
    margin: 0 4vw 4vw;
}

#suntory_contents .link_btn a,
#suntory_contents .button_frame a {
    border: 0.8vw #d5ccb9 solid;
    border-radius: 2.6666666666667vw;
    display: block;
    color: #796a4a;
    font-size: 4vw;
    line-height: 1.666666666666667;
    font-weight: bold;
    padding: 4vw 16vw 4vw 5.3333333333333vw;
    position: relative;
    text-decoration:none;
}
#suntory_contents .link_btn a::after,
#suntory_contents .button_frame a::after {
    content: '';
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 1.3333333333333vw);
    right: 5.3333333333333vw;
    width:2.6666666666667vw;
    height:2.6666666666667vw;
    margin:auto;
    border-top:0.8vw solid #d5ccb9;
    border-right:0.8vw solid #d5ccb9;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

#suntory_contents .article_body .movie {
margin: 0 auto;
  position: relative;
  width: calc(100% - 8vw);
  padding-top: 56.25%;
}
#suntory_contents .article_body .movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/*==================================================
[sp]article_nav
================================================== */
#suntory_contents .article_nav {
    margin: 0 4vw 6.6666666666667vw;
}
#suntory_contents .article_nav ul {
    display: flex;
    justify-content: space-between;
}
#suntory_contents .article_nav li {
    font-size: 4vw;
}
#suntory_contents .article_nav li a {
    color:#292309;
}

/*==================================================
[sp]latest
================================================== */
#suntory_contents .latest {
    margin: 0 4vw 13.3333333333333vw;
    padding: 9.3333333333333vw 5.3333333333333vw 12vw;
    background: #fff;
}
#suntory_contents .latest h2 {
    margin-bottom: 10.6666666666667vw;
    font-size: 5.3333333333333vw;
    font-weight: 700;
    color: #292309;
    text-align: center;
}
#suntory_contents .latest li {
    margin-bottom: 4vw;
    border-bottom: 1px #292309 solid;
    padding-bottom: 3.7333333333333vw;
}
#suntory_contents .latest li:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
#suntory_contents .latest a {
    display: flex;
    justify-content: space-between;
    color: #292309;
    text-decoration: none;
}
#suntory_contents .latest figure {
    width: 33.6vw;
}
#suntory_contents .latest figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#suntory_contents .latest .text_block {
    width: 43.066666666666667vw;
}
#suntory_contents .latest a .date {
    font-size: 4vw;
    
}
#suntory_contents .latest a .text {
    font-size: 4vw;
    line-height: 1.6;
    text-decoration: underline;
}


/*==================================================
pc
================================================== */
@media print, screen and (min-width:768px){
    
    /*==================================================
    [pc]article
    ================================================== */
    #suntory_contents .article {
    margin: 0 auto;
    padding: 40px 0 50px;
    width: 1164px;
    background: #fff;
    }
    
    /*==================================================
    [pc]tag_container
    ================================================== */
    #suntory_contents .article .tag_container {
        margin: 0 auto 30px;
        display: flex;
        flex-wrap: wrap;
        width: 800px;
    }
    #suntory_contents .article .tag_container p {
        font-size: 14px;
        font-weight: 500;
        height: 36px;
        display: flex;
        align-items: center;
        background: #e9e4d9;
        margin: 0 10px 10px 0;
        padding: 0 15px;
        border-radius: 4px;
    }
    /*IE11対策*/
    _:-ms-lang(x)::-ms-backdrop, #suntory_contents .article .tag_container p {
        height: auto;
        padding: 12px 10px 5px;
    }
    
    /*==================================================
    [pc]article_title
    ================================================== */
    #suntory_contents .article_title {
        margin: 0 auto 50px;
        width: 800px;
    }
    #suntory_contents .article h1 {
        margin-bottom: 20px;
        font-size: 34px;
        line-height: 1.4;
    }
    #suntory_contents .article .date {
        font-size: 20px;
        font-weight: 700;
    }
    
    /*==================================================
    [pc]article_body
    ================================================== */
    #suntory_contents .article_body {
        width: 800px;
        margin: 0 auto;
    }
    #suntory_contents .article_body .block {
    	margin-bottom: 40px;
    }
    #suntory_contents .article_body .block.no_margin {
    	margin-bottom: 0;
    }
    #suntory_contents .article_body figure,
    #suntory_contents .article_body .image_wide,
    #suntory_contents .article_body .image_normal {
        margin: 0 auto 15px;
        width: 100%;
    }
    #suntory_contents .article_body img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .article_body .image_wide img {
	    width: 100%;
	    height: auto;
    }
    #suntory_contents .article_body figure figcaption,
    #suntory_contents .article_body .caption {
        margin: 10px 0 15px;
        font-size: 14px;
        text-align: center;
    }
    /*#suntory_contents .article_body p + .caption,
    #suntory_contents .article_body .image_wide + .caption,
    #suntory_contents .article_body .image_normal + .caption {
    	margin: -5px 0 0;
    	margin: 0;
    }*/
    #suntory_contents .article_body p {
        margin: 0 0 40px;
        margin: 0;
        font-size: 16px;
        line-height: 1.866666666666667;
    }
    #suntory_contents .article_body h2,
    #suntory_contents .article_body .sub_title {
        margin-bottom:40px;
        background: #e9e4d9;
        font-size: 20px;
        font-weight: 700;
        padding: 20px;
    }
    
    #suntory_contents .btn_home,
    #suntory_contents .button_block {
    	margin-bottom: 40px;
    }

    #suntory_contents .btn_home a,
    #suntory_contents .button_block a {
        background: #292309;
        color: #fff;
        text-decoration: none;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.25;
        padding: 20px 50px 20px 20px;
        display: inline-block;
        border-radius: 5px;
    }
    /*IE11対策*/
    _:-ms-lang(x)::-ms-backdrop, #suntory_contents .btn_home a,
    #suntory_contents .button_block a {
        padding: 36px 100px 28px 85px;
    }
    #suntory_contents .btn_home a::after,
    #suntory_contents .button_block a::after {
    content: '';
    vertical-align:middle;
    position:absolute;
    top:calc(50% - 5px);
    right: 20px;
    width:10px;
    height:10px;
    margin:auto;
    border-top:3px solid #fff;
    border-right:3px solid #fff;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    }
    #suntory_contents .btn_home a:hover,
    #suntory_contents .button_block a:hover {
        opacity: .75;
    }

    #suntory_contents  .article_body p.link_btn,
    #suntory_contents  .article_body p.button_frame {
        margin: 0 0 40px;
    }

    #suntory_contents .link_btn a,
    #suntory_contents p.button_frame a {
        border: 2px #d5ccb9 solid;
        border-radius: 5px;
        display: inline-block;
        color: #796a4a;
        font-size: 16px;
        line-height: 1.666666666666667;
        font-weight: bold;
        padding: 20px 50px 20px 20px;
        position: relative;
    }
    /*IE11対策*/
    _:-ms-lang(x)::-ms-backdrop, #suntory_contents .link_btn a,
    #suntory_contents p.button_frame a {
        padding: 25px 50px 18px 20px;
    }
    
    #suntory_contents .link_btn a::after,
    #suntory_contents .button_frame a::after {
        content: '';
        vertical-align:middle;
        position:absolute;
        top:calc(50% - 5px);
        right: 20px;
        width:10px;
        height:10px;
        margin:auto;
        border-top:3px solid #d5ccb9;
        border-right:3px solid #d5ccb9;
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    #suntory_contents .link_btn a:hover,
    #suntory_contents .button_frame a:hover {
        opacity: .75;
    }
    
    #suntory_contents .article_body .movie {
        margin: 0 auto;
      position: relative;
      width: 100%;
      padding-top: 56.25%;
    }

    
    /*==================================================
    [pc]article_nav
    ================================================== */
    #suntory_contents .article_nav {
        margin: 25px auto;
    }
    #suntory_contents .article_nav ul {
        margin: 0 auto;
        width: 300px;
        height: 24px;
        position: relative;
    }
    #suntory_contents .article_nav ul::after {
        content: '';
        width: 1px;
        height: 24px;
        background: #000;
        position: absolute;
        top: 0;
        left: 149px;
    }
    #suntory_contents .article_nav li.prev {
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 1.5;
        position: absolute;
        top: 0;
        left: 0;
    }
    #suntory_contents .article_nav li.next {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        position: absolute;
        top: 0;
        right: 0;
    }
    #suntory_contents .article_nav li a {
        color:#292309;
    }
    #suntory_contents .article_nav li a:hover {
        opacity: .75;
    }
    
    /*==================================================
    [pc]latest
    ================================================== */
    #suntory_contents .latest {
        margin: 0 auto 50px;
        padding: 50px 0 60px;
        width: 1164px;
        background: #fff;
    }
    #suntory_contents .latest h2 {
        margin-bottom: 40px;
        font-size: 20px;
        font-weight: 700;
        color: #292309;
        text-align: center;
    }
    #suntory_contents .latest ul {
        display: flex;
        justify-content: flex-start;
        width: 940px;
        margin: 0 auto;
    }
    #suntory_contents .latest li {
        margin: 0 50px 0 0;
        border-bottom: none;
        padding: 0;
    }
    #suntory_contents .latest li:last-child {
        margin: 0;
        border-bottom: none;
        padding: 0;
    }
    #suntory_contents .latest a {
        display: block;
        color: #292309;
        text-decoration: none;
    }
    #suntory_contents .latest a:hover {
        opacity: .75;
    }
    #suntory_contents .latest figure {
        margin-bottom: 20px;
        width: 280px;
    }
    #suntory_contents .latest figure img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    #suntory_contents .latest .text_block {
        width: 280px;
    }
    #suntory_contents .latest a .date {
        font-size: 16px;

    }
    #suntory_contents .latest a .text {
        font-size: 16px;
        line-height: 1.6;
        text-decoration: underline;
    }
    
    
    
}