#suntory_contents #link {
    scroll-margin-top: 100px;
}

/*==================================================
banner_fix
================================================== */
#banner {
    padding-bottom: 24px;
}

/*==================================================
card_fix
================================================== */
#suntory_contents .Component-Card-card.Component-Card-card-left .cardVisual, #suntory_contents .Component-Card-card.Component-Card-card-right .cardVisual {
    min-height: calc(375px + 40px);
}

#suntory_contents .cardVisual.rounded figure img {
    border-radius: 24px;
	vertical-align: bottom;
}

#suntory_contents .Component-Card-card .cardBody p:not(.title) {
    padding: 0 24px 34px;

}

/*==================================================
btn_more
================================================== */

#suntory_contents .btn_more_wrapper {
    margin: 40px auto;
    text-align: center;
    display: flex;
    justify-content: center;
}

#suntory_contents .btn_more_wrapper.hide {
    display: none;
}

#suntory_contents .Component-Basic-button_filled.btn_more::after {
    transform: rotate(90deg);
}


/*==================================================
tag_list
================================================== */
#suntory_contents .tag_list {
    margin: 0 auto 32px;
    width: 932px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#suntory_contents .tag_list .btn_tag {
    margin: 0 10px 10px 0;
    border: 1px rgb(54, 121, 165) solid;
    font-size: var(--fontsize-body-small);
    padding: 5px 10px;
    background: #fff;
    border-radius: 18px;
}

#suntory_contents .tag_list .btn_tag.active,
#suntory_contents .tag_list .btn_tag:hover {
    background: rgb(54, 121, 165);
    color: #fff;
}

/*==================================================
label_list
================================================== */
#suntory_contents .cardBody_labeled {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

#suntory_contents .cardBody_labeled .label_list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

#suntory_contents .label_list {
    margin: 0 auto 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#suntory_contents #banner+.label_list {
    margin: 0 auto 19px;
}

#suntory_contents .label_list .label {
    margin: 0 5px 5px;
    font-size: var(--fontsize-body-small);
    padding: 0 10px;
    height: 32px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    color: var(--color-midnight-blue);
    /* background: #cbe0b1; */
}

#suntory_contents .nature_water_contents .label_list .label,
#suntory_contents .label_list.nature_water_label .label {
    background: #cbe0b1;
}

#suntory_contents .community_contents .label_list .label,
#suntory_contents .label_list.community_label .label {
    background: #f5d0d1;
}

#suntory_contents .craftmanship_innovation_contents .label_list .label,
#suntory_contents .label_list.craftmanship_innovation_label .label {
    background: #c8e8ef;

}


/*==================================================
Component-Card-card_layout3_custom
================================================== */
#suntory_contents .Component-Card-card_layout3_custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

#suntory_contents .Component-Card-card_layout3_custom .tag_contents.hide {
    display: none;
}


#suntory_contents .Component-Card-card_layout3_custom.hide {
    display: none;
}

#suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex {
    width: 100%;
}

#suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex .sliderScroller {
    margin: 0 auto;
    width: 100%;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 932px;
}

#suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex .sliderScroller .Component-Card-card_small {
    width: calc((100% - 50px)/3);
    max-width: 294px;
    height: fit-content;
}

/*==================================================
Component-Card-card_small_custom
================================================== */
#suntory_contents .Component-Card-card_small_custom {
    width: calc((100% - 50px)/3);
    max-width: 294px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    box-shadow: 0px 0px 12px var(--color-shadow);
    border-radius: 24px;
    color: var(--color-midnight-blue);
    position: relative;
    transition: all 0.3s ease;
}

#suntory_contents .Component-Card-card_small_custom.hide {
    display: none;
}


#suntory_contents .Component-Card-card_small_custom .cardVisual {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 294/240;
    border-radius: 24px;
    background-size: cover;
    background-position: center center;
}

#suntory_contents .Component-Card-card_small_custom .cardVisual::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0 0 24px 24px;
}

#suntory_contents .Component-Card-card_small_custom .cardVisual h3,
#suntory_contents .Component-Card-card_small_custom .cardVisual p.title {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: var(--color-white);
    font-size: var(--fontsize-display-secondary);
    line-height: var(--lineheight-display-secondary);
    font-weight: bold;
    width: calc(100% - 32px);
}

#suntory_contents .Component-Card-card_small_custom .cardBody {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--color-white);
    border-radius: 0 0 24px 24px;
    padding: 32px 16px 24px;
}

#suntory_contents .Component-Card-card_small_custom:focus-visible {
    border-radius: 24px;
}

#suntory_contents .cardCase.rounded figure img {
    border-radius: 24px;
}

#suntory_contents .cardCase.rounded {
    justify-content: center;
}

#suntory_contents .cardCase.cardCaseDouble.rounded figure {
    width: 400px;
}

#suntory_contents .cardCase figure figcaption {
    margin-top: 8px;
    font-size: var(--fontsize-body-medium);
    line-height: var(--lineheight-body-medium);
}


#suntory_contents .video {
    max-width: 960px;
    margin-inline: auto;
}

#suntory_contents .video>iframe {
    width: 100%;
    height: auto;
    /* ブラウザに高さを任せる */
    aspect-ratio: 16 / 9;
    /* 既定は16:9 */
    border: 0;
    display: block;
}

/* 縦長ショートや4:3にしたい場合は data-ratio で切替 */
#suntory_contents .video[data-ratio="9/16"]>iframe {
    aspect-ratio: 9 / 16;
}

#suntory_contents .video[data-ratio="4/3"]>iframe {
    aspect-ratio: 4 / 3;
}

/*==================================================
postBody_fix
================================================== */
#postBody .text_block {
    margin-bottom: 40px;
}

#postBody .cardCase .cardVisual {
    aspect-ratio: auto;
}

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

    #suntory_contents #link {
        scroll-margin-top: 80px;
    }

    /*==================================================
    card_fix
    ================================================== */
    #suntory_contents .Component-Card-card.Component-Card-card-left .cardVisual, #suntory_contents .Component-Card-card.Component-Card-card-right .cardVisual {
        min-height: auto;
    }


    /*==================================================
    btn_more（sp）
    ================================================== */
    #suntory_contents .btn_more_wrapper {
        margin: 32px auto 0;
    }

    /*==================================================
    tag_list（sp）
    ================================================== */
    #suntory_contents .tag_list {
        margin: 0 auto 32px;
        width: calc(100% - 32px);
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #suntory_contents .tag_list .btn_tag {
        margin: 0 10px 10px 0;
    }

    /*==================================================
    Component-Card-card_layout3_custom(sp)
    ================================================== */
    #suntory_contents .Component-Card-card_small_custom {
        position: relative;
        box-shadow: none;
        background: none;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex {
        width: 100%;
    }

    #suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex .sliderScroller {
        width: 100%;
        display: flex;
        gap: 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    #suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex .sliderScroller a+a {
        margin-top: 32px;
    }



    #suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex .sliderScroller .Component-Card-card_small_custom {
        width: 100%;
        max-width: 100%;
        height: fit-content;
        background-color: var(--color-white);
        box-shadow: 0px 0px 12px var(--color-shadow);
        border-radius: 24px;
    }

    #suntory_contents .Component-Card-card_small_custom::before {
        display: none;
    }

    #suntory_contents .Component-Card-card_small_custom:focus-visible {
        border-radius: 2px;
    }

    #suntory_contents .Component-Card-card_small_custom .cardVisual::before {
        display: none;
    }

    #suntory_contents .Component-Card-card_small_custom .cardVisual h3,
    #suntory_contents .Component-Card-card_small_custom .cardVisual p.title {
        position: absolute;
        left: 16px;
        bottom: 16px;
        width: 100%;
        color: var(--color-white);
    }

    #suntory_contents .Component-Card-card_small_custom .cardBody {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 16px 24px;
        background: none;
        border-radius: 0;
        gap: 0;
    }

    #suntory_contents .cardCase.cardCaseDouble.rounded figure {
        width: auto;
    }


    /*==================================================
    postBody_fix
    ================================================== */
    #postBody .text_block {
        margin-bottom: 24px;
    }



}

/*==================================================
sp landscape fix
================================================== */
@media (orientation: landscape) and (max-height: 430px) {
    #suntory_contents .Component-Card-card_layout3_custom .cardCase.cardCaseFlex .sliderScroller {
        width: auto;
    }
}