@charset "utf-8";

/*------------------------------------------------------------
  reset
------------------------------------------------------------ */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, #suntory_contents div, #suntory_contents span, #suntory_contents object, #suntory_contents iframe,
#suntory_contents h1, #suntory_contents h2, #suntory_contents h3, #suntory_contents h4, #suntory_contents h5, #suntory_contents h6, #suntory_contents p, #suntory_contents blockquote, #suntory_contents pre,
#suntory_contents abbr, #suntory_contents address, #suntory_contents cite, #suntory_contents code,
#suntory_contents del, #suntory_contents dfn, #suntory_contents em, #suntory_contents img, #suntory_contents ins, #suntory_contents kbd, #suntory_contents q, #suntory_contents samp,
#suntory_contents small, #suntory_contents strong, #suntory_contents sub, #suntory_contents sup, #suntory_contents var,
#suntory_contents b, #suntory_contents i,
#suntory_contents dl, #suntory_contents dt, #suntory_contents dd, #suntory_contents ol, #suntory_contents ul, #suntory_contents li,
#suntory_contents fieldset, #suntory_contents form, #suntory_contents label, #suntory_contents legend,
#suntory_contents table, #suntory_contents caption, #suntory_contents tbody, #suntory_contents tfoot, #suntory_contents thead, #suntory_contents tr, #suntory_contents th, #suntory_contents td,
#suntory_contents article, #suntory_contents aside, #suntory_contents canvas, #suntory_contents details, #suntory_contents figcaption, #suntory_contents figure, 
#suntory_contents footer, #suntory_contents header, #suntory_contents hgroup, #suntory_contents menu, #suntory_contents nav, #suntory_contents section, #suntory_contents summary,
#suntory_contents time, #suntory_contents mark, #suntory_contents audio, #suntory_contents video {
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
    font-family: 'suntory syntax', Arial, Helvetica, sans-serif;
    
}

* {
    box-sizing: border-box;
}


#suntory_contents article,#suntory_contents aside,#suntory_contents details,#suntory_contents figcaption,#suntory_contents figure,
#suntory_contents footer,#suntory_contents header,#suntory_contents hgroup,#suntory_contents menu,#suntory_contents nav,#suntory_contents section { 
    display:block;
}

#suntory_contents img {
    width: 100%;
    height: auto;
}

#suntory_contents ul {
    list-style:none;
}

#suntory_contents blockquote, #suntory_contents q {
    quotes:none;
}

#suntory_contents blockquote:before, #suntory_contents blockquote:after,
#suntory_contents q:before, #suntory_contents q:after {
    content:'';
    content:none;
}

#suntory_contents a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline: none;
}

/* change colours to suit your needs */
#suntory_contents ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
#suntory_contents mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

#suntory_contents del {
    text-decoration: line-through;
}

#suntory_contents abbr[title], #suntory_contents dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

#suntory_contents table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
#suntory_contents hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

#suntory_contents input, #suntory_contents select {
    vertical-align:middle;
}

#suntory_contents #container {
    width:100%;
}
#suntory_contents .container {
    max-width: 1204px;
    margin: 0 auto;
    padding: 0 20px;
}


/*=============================================================
  font
============================================================ */
@import url(fonts.css);


/*=============================================================
  [PC] 
============================================================ */
.sp-show {
    display: none;
}
#suntory_contents h1 {
    margin: 51px 0 31px;
}
#suntory_contents h2.heading-parts-03 {
    margin-top: 100px;
}
#suntory_contents #anchors + .container h2.heading-parts-03 {
    margin-top: 50px;
}
#suntory_contents #innovation h2.heading-parts-03 {
    margin-top: 0;
}
#suntory_contents h3 {
    padding: 0;
}
#suntory_contents #innovation section {
    margin-top: 100px;
}

/*------------------------------------------------------------
  [PC] main_visual
------------------------------------------------------------ */
    #suntory_contents #main_visual {
        max-width: 1366px;
        margin: 0 auto;
        font-size: 0;
    }

/*------------------------------------------------------------
  [PC] anchors
------------------------------------------------------------ */
    #suntory_contents #anchors .anchor_list {
        margin-top: 46px;
        font-size: 0;
        text-align: center;
    }
    #suntory_contents #anchors .anchor_list .item {
        display: inline-block;
        padding: 0 54px;
    }
    #suntory_contents #anchors .anchor_list .item a {
        display: block;
        color: #000;
        font-size:1.125rem;/* 18px */
        font-weight: bold;
        line-height: 1.444;
        text-align: center;
    }
    #suntory_contents #anchors .anchor_list .item a::after {
        content: "";
        display: block;
        width: 16px;
        height: 9px;
        margin: 10px auto 0;
        background: url(../svg/ico_arrow_bottom.svg) no-repeat;
    }
    #suntory_contents #anchors .anchor_list .item a:hover::after {
        transform: translateY(3px);
        transition: .2s;
    }

/*------------------------------------------------------------
  [PC] text
------------------------------------------------------------ */
    #suntory_contents  .lead_text {
        font-size:1.125rem;/* 18px */
        line-height: 1.722;
    }
    #suntory_contents  .content_text {
        font-size:1rem;/* 16px */
        line-height: 1.8125;
    }


/*------------------------------------------------------------
  [PC] banner_block
------------------------------------------------------------ */
    #suntory_contents .banner_block {
        margin-top: 45px;
    }
    #suntory_contents .banner_block > a {
        display: block;
        text-align: center;
    }
    #suntory_contents .banner_block > a:hover {
        opacity: 0.7;
        transition: .2s;
    }
    #suntory_contents .banner_block .banner_text {
        display: inline-block;
        margin: 14px 0 0;
        padding-right: 26px;
        color: #000;
        font-size: 1.25rem;/* 20px */
        font-weight: bold;
        line-height: 1.7;
        position: relative;
    }
    #suntory_contents .banner_block .banner_text::after {
        content: "";
        width: 9px;
        height: 16px;
        background: url(../svg/ico_arrow_right.svg) no-repeat;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    #suntory_contents .banner_block > a:hover .banner_text::after {
        transform: translate(3px, -50%);
        transition: .2s;
    }
    #suntory_contents .banner_block + section {
        margin-top: 100px;
    }
    
/*------------------------------------------------------------
[PC]layout_grid
------------------------------------------------------------ */
    #suntory_contents .layout_grid {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        font-size: 0;
    }
    #suntory_contents .layout_grid.grid_reverse {
        flex-direction: row-reverse;
    }
    #suntory_contents .layout_grid[data-column-pc="2"] .grid_item {
        width: calc(50% - (40px / 2));
    }
    #suntory_contents .layout_grid p {
        font-size: 1rem;/* 16px */
    }
    #suntory_contents .layout_grid p:last-of-type {
        margin-bottom: 0;
    }
    #suntory_contents .layout_grid + p {
        margin-top: 40px;
    }
    
/*------------------------------------------------------------
    [PC] viewmore_block
------------------------------------------------------------ */
    #suntory_contents .viewmore_block {
        margin-bottom: 24px;
        padding-bottom: 76px;
    }
    #suntory_contents .viewmore_block .grid_item {
        overflow: hidden;
        position: relative;
    }
    #suntory_contents .viewmore_block .grid_item:first-of-type {
        height: 316px;
    }
    #suntory_contents .viewmore_block .button_block {
        width: 100%;
        background: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    #suntory_contents .viewmore_block .more_button {
        display: inline-block;
        min-width: 220px;
        margin-bottom: 0;
        border: 1px solid #707070;
        border-radius: 9999px;
        background: #fff;
        color: #000;
        font-size: 0.9375rem;/* 15px */
        font-weight: bold;
        line-height: 1.333;
        transition: .2s;
        position: relative;
    }
    #suntory_contents .viewmore_block .more_button:hover {
        border-color: #5BC2DC;
        background: #9DDAEA;
    }
    #suntory_contents .viewmore_block .more_button::before {
        content: "";
        width: 1000px;
        height: 103px;
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(calc(-100% - 1px));
    }
    #suntory_contents .viewmore_block .more_button::after {
        content: "";
        width: 14px;
        height: 8px;
        background: url(../svg/ico_arrow_bottom.svg) no-repeat center / contain;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
    }
    #suntory_contents .viewmore_block .button_inner {
        display: block;
        padding: 13px 30px;
    }
    #suntory_contents .viewmore_block.is_open {
        margin-bottom: 78px;
        position: relative;
    }
    #suntory_contents .viewmore_block.is_open .grid_item {
        position: static;
    }
    #suntory_contents .viewmore_block.is_open .grid_item:first-of-type {
        height: auto;
    }
    #suntory_contents .viewmore_block.is_open .button_block {
        text-align: center;
    }
    #suntory_contents .viewmore_block.is_open .more_button::before {
        content: none;
    }
    #suntory_contents .viewmore_block.is_open .more_button::after {
        transform: translateY(-50%) rotate(180deg);
    }
    #suntory_contents .viewmore_block .more_contents {
        margin-top: 30px;
        display: none;
        overflow: hidden;
    }
    #suntory_contents .more_contents .content_text:last-of-type {
        margin-bottom: 0;
    }
    
    
/*------------------------------------------------------------
    [PC] r_and_d
------------------------------------------------------------ */
    #suntory_contents #r_and_d .pickup > a {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        padding: 40px;
        background: #F7F7F7;
    }
    
    #suntory_contents #r_and_d .pickup .img_block {
        width: calc(50% - (40px / 2));
        overflow: hidden;
    }
    #suntory_contents #r_and_d .pickup .img_block img {
        transition: all .2s ease-in-out;
    }
    #suntory_contents #r_and_d .pickup a:hover .img_block img {
        transform: scale(1.08, 1.08);
    }
    #suntory_contents #r_and_d .pickup .text_block {
        width: calc(50% - (40px / 2));
    }
    #suntory_contents #r_and_d .pickup h3 {
        margin-bottom: 27px;
        font-size: 1.5rem;/* 24px */
        line-height: 1.25;
    }
    #suntory_contents #r_and_d .pickup .text {
        margin-bottom: 55px;
        color: #000;
        font-size: 1rem;/* 16px */
        font-weight: bold;
        line-height: 1.8125;
    }
    #suntory_contents #r_and_d .pickup .more {
        display: inline-block;
        min-width: 220px;
        margin-bottom: 0;
        padding: 14px 25px;
        border: 1px solid #707070;
        border-radius: 9999px;
        background: #fff;
        color: #000;
        font-size: 0.9375rem;/* 15px */
        font-weight: bold;
        line-height: 1.333;
        text-align: center;
        position: relative;
    }
    #suntory_contents #r_and_d .pickup .more::after {
        content: "";
        width: 8px;
        height: 14px;
        background: url(../svg/ico_arrow_right.svg) no-repeat;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
    }
    #suntory_contents #r_and_d .pickup a:hover {
        text-decoration: none;
    }
    #suntory_contents #r_and_d .pickup a:hover .more {
        text-decoration: underline;
    }

/*------------------------------------------------------------
    [PC] map
------------------------------------------------------------ */
    #suntory_contents #map {
        width: 100%;
        max-width: 1164px;
        margin: 0 auto 100px;
        padding-top: 726px;
        background: url(../png/bg_map.png) no-repeat center / contain;
        position: relative;
    }
    #suntory_contents #map .swrc {
        position: absolute;
        top: 12%;
        left: 25.9%;
    }
    #suntory_contents #map .pdc {
        position: absolute;
        top: 51.8%;
        left: 53.1%;
    }

    #suntory_contents #map li {
        display: inline-block;
    }
    #suntory_contents #map li a,
    #suntory_contents #map li.no_link {
        display: flex;
        min-width: 300px;
        border: 1px solid #707070;
        border-radius: 10px;
        padding: 20px;
        background: #fff;
        color: #000;
        font-size: 0;
    }
    #suntory_contents #map li a:hover {
        text-decoration: none;
    }
    #suntory_contents #map li a:hover img,
    #suntory_contents #map li a:hover h3,
    #suntory_contents #map li a:hover .location {
        opacity: .75;
    }
    
    #suntory_contents #map li a .text,
    #suntory_contents #map li.no_link .text {
        margin-left: 17px;
    }
    #suntory_contents #map li img {
        width: 80px;
    }
    #suntory_contents #map li h3 {
        margin-bottom: 7px;
        font-size: 0.9375rem;/* 15px */
        line-height: 1.333;
    }
    #suntory_contents #map li a h3 {
        padding-right: 25px;
        position: relative;
    }
    #suntory_contents #map li a h3::after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 14px;
        background: url(../svg/ico_arrow_right.svg) no-repeat;
        position: absolute;
        right: 0;
        bottom: 3px;
    }
    #suntory_contents #map li .location {
        margin-bottom: 0;
        font-size: 0.9375rem;/* 15px */
        line-height: 1.333;
    }


@media screen and (max-width:1164px){
/*=============================================================
  [TAB] width 1164px - 
============================================================ */
#suntory_contents #map {
    padding-top: 62.371%;
}
    
}




@media only screen and (max-width: 767px){
    /*=============================================================
      [SP] 
    ============================================================ */
    body {
    min-width: 100%;
    }
    .sp-show {
        display: block;
    }
    .pc-show {
        display: none;
    }
    #suntory_contents h1 {
        margin: 43px 0 30px;
    }
    #suntory_contents .container h3 {
        margin-bottom: 13px;
    }
    
    /*------------------------------------------------------------
    [SP] anchors
    ------------------------------------------------------------ */
    #suntory_contents #anchors .anchor_list .item {
        display: inline-block;
        padding: 0 29px;
    }
    #suntory_contents #anchors .anchor_list .item:first-of-type {
        padding-left: 0;
    }
    #suntory_contents #anchors .anchor_list .item:last-of-type {
        padding-right: 0;
    }
    #suntory_contents #anchors .anchor_list .item a {
        display: block;
        color: #000;
        font-size:1rem;/* 16px */
        line-height: 1.375;
    }
    #suntory_contents #anchors .anchor_list .item a:hover::after {
        transform: none;
    }

    /*------------------------------------------------------------
    [SP] text
    ------------------------------------------------------------ */
    #suntory_contents  .lead_text {
        font-size:1rem;/* 16px */
        line-height: 1.8125;
    }

    /*------------------------------------------------------------
    [SP] banner_block
    ------------------------------------------------------------ */
    #suntory_contents .banner_block > a:hover {
        opacity: 1;
    }
    #suntory_contents .banner_block > a:hover .banner_text::after {
        transform: translate(0, -50%);
    }

    /*------------------------------------------------------------
    [SP]layout_grid
    ------------------------------------------------------------ */
    #suntory_contents .layout_grid {
        flex-wrap: wrap;
        gap: 30px;
    }
    #suntory_contents .layout_grid.grid_reverse {
        flex-direction: column-reverse;
    }
    #suntory_contents .layout_grid.grid_reverse_sp {
        flex-direction: column-reverse;
    }

    #suntory_contents .layout_grid[data-column-sp="1"] .grid_item {
        width: 100%;
    }
    
    /*------------------------------------------------------------
    [SP] viewmore_block
    ------------------------------------------------------------ */
    #suntory_contents .viewmore_block {
        margin-bottom: 100px;
        padding-bottom: 0;
        position: relative;
        overflow: hidden;
    }
    #suntory_contents .viewmore_block .grid_item {
        position: static;
    }
    #suntory_contents .viewmore_block .grid_item:first-of-type {
        height: 241px;
    }
    #suntory_contents .viewmore_block .button_block {
        text-align: center;
    }
    #suntory_contents .viewmore_block .more_button::before {
        left: -50%;
    }
    #suntory_contents .viewmore_block.is_open {
        margin-bottom: 100px;
        padding-bottom: 76px;
        position: relative;
    }
    #suntory_contents .viewmore_block.is_open .grid_item:first-of-type {
        height: auto;
    }
    #suntory_contents .viewmore_block .more_contents {
        margin-top: 1em;
    }

    
    /*------------------------------------------------------------
    [SP] r_and_d
    ------------------------------------------------------------ */
    #suntory_contents #r_and_d .pickup > a {
        flex-wrap: wrap;
        gap: 30px;
        padding: 20px 20px 30px;
    }

    #suntory_contents #r_and_d .pickup .img_block {
        width: 100%;
    }
    #suntory_contents #r_and_d .pickup a:hover .img_block img {
        transform: scale(1);
    }
    #suntory_contents #r_and_d .pickup .text_block {
        width: 100%;
    }
    #suntory_contents #r_and_d .pickup h3 {
        margin-bottom: 43px;
    }
    #suntory_contents #r_and_d .pickup .text {
        margin-bottom: 26px;
        font-weight: normal;
    }
    #suntory_contents #r_and_d .pickup a:hover .more {
        text-decoration: none;
    }

    /*------------------------------------------------------------
    [SP] map
    ------------------------------------------------------------ */
    #suntory_contents #map {
        width: 375px;
        margin: 160px auto;
        padding-top: 234px;
        background-image: url(../png/bg_map_sp.png);
    }
    #suntory_contents #map .swrc {
        top: -112px;
        left: 50%;
        transform: translateX(-50%);
    }
    #suntory_contents #map .pdc {
        top: auto;
        left: 50%;
        bottom: -106px;
        transform: translateX(-50%);
    }
    #suntory_contents #map li a:hover img,
    #suntory_contents #map li a:hover h3,
    #suntory_contents #map li a:hover .location {
        opacity: 1;
    }
        
}