@charset "utf-8";
/* CSS Document */

.tl {
    padding: 302px 0 48px 0;
    background: url(../img/logo_ref.png) 64.9% 99.7% no-repeat;
    background-size: 230px auto;
    width: 384px;
    margin: 0 0 0 121px;
}
.nav-main {
    margin: 230px 0 0 192px;
}
.nav-main img {
    display: block;
}
.nav-main .product {
    position: absolute;
    top: 0;
    left: 0;
}
.li-lineup .product {
    margin: 11px 0 0 17px;
}
.li-history .product {
    margin: 1px 0 0 3px;
}
.nav-main li {
    display: inline-block;
    margin: 0 55px 0 0;
    padding: 0 0 65px;
}
.li-lineup {
    background: url(../img/img_lineup_ref.jpg) no-repeat 50% 100%;
}
.li-separation {
    position: absolute;
    top: 0;
    left: 0;
    margin: -50px 0 0 -68px;
}
.li-separation a {
    border-radius: 100px;
}
.li-history {
    background: url(../img/img_history_ref.jpg) no-repeat 50% 100%;
}
.li-recipe {
    background: url(../img/img_recipe_ref.png) no-repeat 50% 97.5%;
}
.caption-image {
    color: #fff;
    font-size: 12px;
    text-align: center;
    display: block;
    margin: 7px 0 0;
    letter-spacing: 0.04em;
}
#wave,
#wave2,
#wave3 {
    position: absolute;
    top: -135px;
    top: -75px;
    left: 0;
    transform: translateY(230px);
    will-change: transform;
    transition: all 1300ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
}
.for-desktop .nav-main a:hover #wave,
.for-desktop .nav-main a:hover #wave2,
.for-desktop .nav-main a:hover #wave3 {
    transform: translateY(0px);
}
.nav-main .wrap-wave {
    will-change: transform, opacity;
}
.for-desktop .nav-main a:hover .wrap-wave {
    animation: wave 1300ms forwards cubic-bezier(0.25, 0.46, 0.33, 0.98);
}
@keyframes wave {
    0% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    80% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.for-desktop .nav-main a:hover .frame {
    opacity: 0.8;
}
.nav-main img {
    position: relative;
    z-index: 1;
    transition: all 800ms linear;
}
.nav-main ul {
    margin: 0 0 0 -128px;
}
.nav-main li {
    position: relative;
}
.nav-main .li-recipe .frame {
    z-index: 2;
}
.nav-main .li-recipe .product {
    margin: 53px 0 0 43px;
}
.nav-main .li-recipe .product-02 {
    margin: 49px 0 0 147px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
.wrap-wave {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 250px;
    overflow: hidden;
    width: 240px;
    height: 240px;
    margin: 14px 0 0 5px;
}
.img-main {
    position: absolute;
    top: 0;
    right: 0;
    margin: 79px 77px 0 0;
}
.img-cinema {
    position: absolute;
    top: 0;
    left: 0;
    margin: -60px 0 0 116px;
}
.tl-past-promotion {
    margin: -20px 0 23px 268px;
    width: 414px;
    float: left;
}
.link-past-promotion {
    text-align: center;
    clear: both;
    padding: 0 0 56px;
}
.link-past-promotion li {
    display: inline-block;
    margin: 0 7px;
}
.link-past-promotion a {
    display: block;
    border: solid 4px #fff;
    background: #fed700;
    border-radius: 9px;
    box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, 0.3);
}
.link-past-promotion a img {
    transition: opacity 200ms ease-out;
}
.link-past-promotion a:hover img {
    opacity: .6;
}
.inner-content {
    position: relative;
}
.link-past-promotion img {
    display: block;
}
#content {
    overflow: hidden;
}
.btn-coffee60 {
    background: url(../img/img_coffee60_ref.png?2203) no-repeat 0 316px;
    width: 708px;
    margin: 0 0 5px -47px;
    padding: 0 0 84px 53px;
}
.btn-txt {
    margin: 21px 0 0 0;
}
.btn-coffee60 a {
    position: relative;
    display: block;
    width: 604px;
}
.btn-coffee60 a img:nth-child(1) {
    margin: 0 0 0 18px;
}
.btn-coffee60 .btn-ov {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.btn-coffee60 a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1;
    opacity: 0;
}
.btn-coffee60 a:hover .btn-ov {
    opacity: .2;
}
.bnr {
    margin: 231px auto 0;
    display: block;
    width: 690px;
}
.bnr img {
    max-width: 100%;
    height: auto;
    display: block;
}
/*============================ #past-promotion ============================*/
#past-promotion {
    background: url(../img/bg_promotion.png) no-repeat 50% 0;
    margin: 73px 0 0 0;
    position: relative;
}
@media (hover:hover) {
    .bnr a {
        position: relative;
        display: block;
    }
    .bnr a:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0;
        transition: opacity 200ms ease;
    }
    .bnr a:hover::after {
        opacity: .2;
    }
    .li-separation a {
        position: relative;
        display: block;
    }
    .li-separation a::before {
        content: "";
        position: absolute;
        top: 1%;
        left: 1%;
        width: 98%;
        height: 98%;
        background: #c48644;
        border-radius: 100px;
        z-index: 1;
        display: block;
        opacity: 0;
        transition: opacity 200ms ease;
    }
    .li-separation a:hover::before {
        opacity: 1;
    }
}