@charset "utf-8";

#suntory_contents #sitemap h1 {
    margin-bottom: 8vw;
    font-size: 6.4vw;
    font-weight: 700;
    line-height: 1
}

#suntory_contents #sitemap .nav_sitemap {
    margin-bottom: 4vw;
    display: flex;
    align-items: center
}

#suntory_contents #sitemap .nav_sitemap li {
    border-top: #007EA8 .533333333333333vw solid;
    border-right: #007EA8 .533333333333333vw solid;
    border-bottom: #007EA8 .533333333333333vw solid;
    width: 33.333333333333336%
}

#suntory_contents #sitemap .nav_sitemap li:last-child {
    border-radius: 0 2.133333333333333vw 2.133333333333333vw 0
}

#suntory_contents #sitemap .nav_sitemap li:first-child {
    border-left: #007EA8 .533333333333333vw solid;
    border-radius: 2.133333333333333vw 0 0 2.133333333333333vw
}

#suntory_contents #sitemap .nav_sitemap li a {
    text-decoration: none;
    color: #222;
    display: flex;
    align-items: center;
    height: 16vw;
    font-size: 3.733333333333333vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    position: relative
}

#suntory_contents #sitemap .nav_sitemap li a:after {
    content: '';
    width: 2.133333333333333vw;
    height: 2.133333333333333vw;
    border-top: .8vw solid #fea000;
    border-right: .8vw solid #fea000;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    top: calc(50% - 2.133333333333333vw);
    right: 2.666666666666667vw
}

#suntory_contents #sitemap .nav_sitemap li:nth-child(1) a {
    padding-left: 8vw
}

#suntory_contents #sitemap .nav_sitemap li:nth-child(2) a {
    padding-left: 10.666666666666668vw
}

#suntory_contents #sitemap .nav_sitemap li:nth-child(3) a {
    padding-left: 9.066666666666666vw
}

#suntory_contents #sitemap p.nav_campaign {
    padding-right: 2.4vw;
    margin-bottom: 4vw;
    text-align: right;
}

#suntory_contents #sitemap .nav_campaign a {
    position: relative;
    font-size: 3.733333333333333vw;
    font-weight: 700;
    line-height: 1.3;
    color: #222;
    text-decoration: none;
}

#suntory_contents #sitemap .nav_campaign a::after {
    content: "";
    display: inline-block;
    vertical-align: baseline;
    width: 1.866666666666667vw;
    height: 1.866666666666667vw;
    margin: 0 0 0 1.066666666666667vw;
    border-top: .8vw solid #fea000;
    border-right: .8vw solid #fea000;
    transform: rotate(45deg);
}

#suntory_contents #sitemap #alcohol,
#suntory_contents #sitemap #purpose,
#suntory_contents #sitemap #softdrink {
    position: relative
}

#suntory_contents #sitemap #anchor_alcohol,
#suntory_contents #sitemap #anchor_purpose,
#suntory_contents #sitemap #anchor_softdrink {
    position: absolute;
    top: -16vw;
    left: 0;
    width: 100%;
    height: 1px
}

#suntory_contents #sitemap h2 {
    background: #ddf3f8;
    font-size: 4.266666666666667vw;
    font-weight: 700;
    height: 13.866666666666667vw;
    display: flex;
    align-items: center;
    margin-bottom: 8.533333333333333vw;
    padding-left: 5.333333333333333vw
}

#suntory_contents #sitemap dt {
    margin: 0 0 5.866666666666667vw 5.866666666666667vw;
    font-size: 4vw;
    font-weight: 700;
    line-height: 1
}

#suntory_contents #sitemap dt a {
    color: #222;
    text-decoration: none;
    font-weight: 700;
}

#suntory_contents #sitemap dl dd {
    margin-bottom: 12.8vw
}

#suntory_contents #sitemap dl dd li a {
    color: #222;
    text-decoration: none;
    font-size: 3.733333333333333vw;
    line-height: 1;
    margin: 0 0 5.866666666666667vw 8vw;
    display: block
}

#suntory_contents #sitemap #purpose {
    margin-bottom: 8vw;
    padding-bottom: 2.133333333333333vw;
    border-bottom: 1px #bbe7f1 solid
}

#suntory_contents #sitemap #purpose li a {
    margin: 0 0 6.666666666666667vw 5.333333333333333vw;
    font-size: 4vw;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    color: #222;
    display: block
}

#suntory_contents #sitemap #extra {
    margin-bottom: 22.666666666666668vw
}

#suntory_contents #sitemap #extra li a {
    margin: 0 0 6.666666666666667vw 5.333333333333333vw;
    font-size: 4vw;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    color: #222;
    display: block;
}

#suntory_contents #sitemap #extra li a span {
    font-size: 3.2vw;
}

/*==================================================
pc
================================================== */
@media print,
screen and (min-width:768px) {
    #suntory_contents #sitemap {
        width: 960px
    }

    #suntory_contents #sitemap h1 {
        margin-bottom: 40px;
        font-size: 32px
    }

    #suntory_contents #sitemap .nav_sitemap {
        margin-bottom: 30px;
        display: flex;
        align-items: center
    }

    #suntory_contents #sitemap .nav_sitemap li {
        border-top: #007EA8 2px solid;
        border-right: #007EA8 2px solid;
        border-bottom: #007EA8 2px solid;
        width: 33.333333333333336%
    }

    #suntory_contents #sitemap .nav_sitemap li:last-child {
        border-radius: 0 8px 8px 0
    }

    #suntory_contents #sitemap .nav_sitemap li:first-child {
        border-left: #007EA8 2px solid;
        border-radius: 8px 0 0 8px
    }

    #suntory_contents #sitemap .nav_sitemap li a {
        text-decoration: none;
        color: #222;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        padding: 0 20px 0 0;
        position: relative
    }

    #suntory_contents #sitemap .nav_sitemap li a:hover {
        background: #007EA8;
        color: #fff
    }

    #suntory_contents #sitemap .nav_sitemap li a:after {
        content: '';
        width: 10px;
        height: 10px;
        border-top: 3.5px solid #fea000;
        border-right: 3.5px solid #fea000;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        position: absolute;
        top: calc(50% - 10px);
        right: 17px
    }

    #suntory_contents #sitemap .nav_sitemap li a:hover:after {
        border-color: #fff
    }

    #suntory_contents #sitemap .nav_sitemap li:nth-child(1) a,
    #suntory_contents #sitemap .nav_sitemap li:nth-child(2) a,
    #suntory_contents #sitemap .nav_sitemap li:nth-child(3) a {
        padding-left: 0
    }

    #suntory_contents #sitemap p.nav_campaign {
        padding-right: 10px;
        margin-bottom: 30px;
        text-align: right;
    }

    #suntory_contents #sitemap .nav_campaign a {
        position: relative;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        color: #222;
        text-decoration: none;
    }
    #suntory_contents #sitemap .nav_campaign a:hover {
    	text-decoration: underline;
    }
    #suntory_contents #sitemap .nav_campaign a::after {
        content: "";
        display: inline-block;
        vertical-align: baseline;
        width: 10px;
        height: 10px;
        margin: 0 0 1px 5px;
        border-top: 3px solid #fea000;
        border-right: 3px solid #fea000;
        transform: rotate(45deg);
    }

    #suntory_contents #sitemap #alcohol,
    #suntory_contents #sitemap #purpose,
    #suntory_contents #sitemap #softdrink {
        position: relative
    }

    #suntory_contents #sitemap #softdrink {
        z-index: 3
    }

    #suntory_contents #sitemap #alcohol {
        z-index: 2
    }

    #suntory_contents #sitemap #purpose {
        z-index: 1
    }

    #suntory_contents #sitemap #anchor_alcohol,
    #suntory_contents #sitemap #anchor_purpose,
    #suntory_contents #sitemap #anchor_softdrink {
        position: absolute;
        top: -120px;
        left: 0;
        width: 100%;
        height: 10px
    }

    #suntory_contents #sitemap h2 {
        background: #ddf3f8;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        height: 50px;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        padding-left: 20px
    }

    #suntory_contents #sitemap dl {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 0 40px 20px;
    }

    #suntory_contents #sitemap dt {
        margin: 0 0 40px 0;
        width: 240px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
    }

    #suntory_contents #sitemap dt:last-of-type {
        margin: 0;
    }

    #suntory_contents #sitemap dt a:hover {
        text-decoration: underline
    }

    #suntory_contents #sitemap dl dd {
        margin-bottom: 40px;
        width: 680px;
    }

    #suntory_contents #sitemap dd:last-of-type {
        margin: 0;
    }

    #suntory_contents #sitemap dl dd ul {
        display: flex;
        flex-wrap: wrap;
        width: 640px
    }

    #suntory_contents #sitemap dl dd li {
        margin: 0 30px 20px 0;
        width: 290px
    }

    #suntory_contents #sitemap dl dd li:last-child,
    #suntory_contents #sitemap dl dd li:nth-last-child(2) {
        margin: 0 30px 0 0
    }

    #suntory_contents #sitemap dl dd li a {
        color: #222;
        text-decoration: none;
        font-size: 14px;
        line-height: 1;
        margin: 0;
        display: block
    }

    #suntory_contents #sitemap dl dd li a:hover {
        text-decoration: underline
    }

    #suntory_contents #sitemap #purpose {
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 1px #bbe7f1 solid
    }

    #suntory_contents #sitemap #purpose ul {
        width: 920px;
        margin: 0 0 0 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }

    #suntory_contents #sitemap #purpose li {
        width: 290px;
        margin-bottom: 30px
    }

    #suntory_contents #sitemap #purpose li:nth-last-child(1),
    #suntory_contents #sitemap #purpose li:nth-last-child(2),
    #suntory_contents #sitemap #purpose li:nth-last-child(3) {
        margin-bottom: 0
    }

    #suntory_contents #sitemap #purpose li a {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        color: #222;
        display: block
    }

    #suntory_contents #sitemap #purpose li a:hover {
        text-decoration: underline
    }

    #suntory_contents #sitemap #extra {
        margin-bottom: 100px
    }

    #suntory_contents #sitemap #extra ul {
        width: 920px;
        margin: 0 0 0 20px;
        display: flex;
        justify-content: space-between
    }

    #suntory_contents #sitemap #extra li {
        width: 290px
    }

    #suntory_contents #sitemap #extra li a {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        color: #222;
        display: block
    }

    #suntory_contents #sitemap #extra li a span {
        font-size: 14px;
    }

    #suntory_contents #sitemap #extra li a:hover {
        text-decoration: underline
    }
}