@charset "UTF-8";

/* =================================================================
	変数
   ================================================================= */
/* =================================================================
	mixin
   ================================================================= */
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

ol,
ul {
    list-style: none;
}


/* =================================================================
	main
   ================================================================= */
#main {
    background: #fcf3da url('../images/bg_main.jpg') no-repeat;
    background-size: 100%;
    box-shadow: 0 0px 50px black;
    -webkit-box-shadow: 0 0px 50px black;
}

#main .bg_img {
    position: absolute;
    z-index: -1;
}

#main .btn-mv {
    position: absolute;
    top: 11px;
    right: 6px;
    background-color: #620021;
    border: 1px solid #d6b97d;
    width: 160px;
    height: 27.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

#main .btn-mv:hover {
    opacity: 0.8;
}

#main .btn-mv a {
    color: #fff;
    line-height: normal;
    font-size: 14px;
}

#main .bg_img_01 {
    left: 0px;
    top: -26px;
    width: 100%;
}

#main .bg_img_01 img {
    width: 100%;
}

#main .bg_img_02 {
    left: 0px;
    top: 832px;
    width: 100%;
}

#main .bg_img_02 img {
    width: 100%;
}

#main .bg_img_03 {
    right: 0px;
    width: 100%;
    top: 1649px;
}

#main .bg_img_product_sd {
    left: 157px;
    top: 4355px;
}

#main .bg_img_04_a {
    left: 0px;
    top: 2677px;
    width: 206px;
}

#main .bg_img_04_b {
    left: auto;
    right: 0;
    top: 2681px;
    width: 209px;
}

#main .bg_img_05 {
    left: 0px;
    top: 2187px;
}

#main .bg_img_05 {
    width: 100%;
}

#main .bg_img_05 img {
    width: 100%;
}

#main h1 {
    text-align: center;
    padding-top: 62px;
    padding-bottom: 438px;
}

#main h2 {
    margin-bottom: 17px;
}

#main h2.right {
    text-align: right;
    padding-right: 0;
}

#main .wrapper {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-right: 27px;
    padding-left: 27px;
}

#main p.sec_txt {
    color: #6b4343;
    font-size: 17.8px;
    font-weight: bold;
    line-height: 2em;
}

#main p.sec_txt .strong {
    font-weight: bold;
}

/* =================================================================
	#eight_hours
   ================================================================= */
#eight_hours {
    padding-bottom: 462px;
}

/* =================================================================
	#madagascar
   ================================================================= */
#madagascar {
    padding-bottom: 787px;
}

/* =================================================================
	#years
   ================================================================= */
#years {
    padding-bottom: 110px;
}

#years h2 img {
    width: 215px;
}

/* =================================================================
	#product
   ================================================================= */
#product {
    text-align: center;
    padding-bottom: 37px;
    background: url('/products/special/haagen-eight/assets/sp/images/vanilla/product_img_shadow.png') no-repeat 107px 0px;
    background-size: 373px;
}

#product h3 {
    margin-bottom: 15px;
}

#product .product_img {
    display: block;
    width: 219px;
    margin: 0 auto;
    height: 219px;
    margin-bottom: 25px;
    display: block;
}

#product .product_name {
    margin-bottom: 70px;
}

#product .product_name img {
    width: 120px;
}


/* Footer */
.footer {
    position: relative;
}

.bg-layer {
    width: 100%;
    margin-top: 132px;
    overflow: hidden;
}

.bg-layer #main {
    width: 100%;
    margin: 0 auto;
}

@media (min-width:769px) {
    body {
        z-index: 3
    }

    .bg-layer {
        background: url(../images/bg_side.jpg) center center / cover no-repeat;
        background-attachment: fixed;
        background-position: center center;
    }

    .bg-layer #main {
        max-width: 430px;
    }

    #main .wrapper {
        max-width: 430px;
    }

    #main h1 img {
        width: 226px;
    }

    #eight_hours h2 img {
        width: 185px;
    }

    #madagascar h2 img {
        width: 306px;
    }

}

@media (max-width:768px) {
    .bg-layer {
        margin-top: 127px;
    }

    body {
        margin: 0;
    }

    #main .btn-mv {
        top: 2.7vw;
        right: 1.4vw;
        width: 37.2vw;
        height: 6.4vw;
        border-radius: 2.6vw;
    }

    #main .btn-mv a {
        font-size: 3.26vw;
    }

    #main .wrapper {
        padding-right: 6.3vw;
        padding-left: 6.3vw;
    }

    #main h1 {
        padding-top: 14.6vw;
        padding-bottom: 101.4vw;
    }

    #main h1 img {
        width: 52.5vw;
    }

    #main h2 {
        margin-bottom: 4vw;
    }

    #main p.sec_txt {
        font-size: 4.14vw;
    }


    #main .bg_img_01 {
        top: -5.4vw;
    }

    #main .bg_img_02 {
        width: 100%;
        top: 193vw;
    }

    #main .bg_img_03 {
        width: 100%;
        top: 383.7vw;
    }

    #main .bg_img_05 {
        top: 508.7vw;
    }

    #main .bg_img_01 img {
        width: 100%;
    }

    #main .bg_img_02 img {
        width: 100%;
    }

    #main .bg_img_05 img {
        width: 100%;
    }

    #main .bg_img_04_a {
        width: 50vw;
        top: 622vw;
    }

    #main .bg_img_04_b {
        width: 50vw;
        top: 621vw;
        left: auto;
        right: 0;
    }

    #eight_hours {
        padding-bottom: 108.1vw;
    }

    #eight_hours h2 img {
        width: 42.5vw;
    }

    #madagascar {
        padding-bottom: 183vw;
    }

    #madagascar h2 img {
        width: 71.04vw;
    }

    #years {
        padding-bottom: 25.3vw;
    }

    #years h2 img {
        width: 48.45vw;
    }

    #product .product_img {
        width: 50.94vw;
        height: 50.94vw;
    }

    #product {
        background-size: 86.8vw;
        background-position: 25vw 0;
    }

}

/* Lineup  */
#lineup {
    position: relative;
}

#lineup .wrapper {
    margin: 0 auto;
    display: block;
    text-align: center;
}

#lineup .lineup_list li {
    float: left;
    width: 156px;
    text-align: center;
}

#lineup .lineup_list li .img {
    width: 126px;
    height: 126px;
    margin: 0 auto 20px;
}

#lineup .lineup_list li .img::before {
    content: "";
    display: block;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#lineup .lineup_list li>a:hover .img::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (width < 1248px) {
    #lineup .wrapper {
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper {
        width: 100%;
    }
}

#lineup .wrapper h2 {
    text-align: center;
    display: inline-block;
}

@media (min-width: 769px) {
    #lineup .wrapper h2 {
        margin-block: 30px;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper h2 {
        margin-block: 4%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper h2 {
        margin-block: 6%;
    }
}

@media (width < 1248px) {
    #lineup .wrapper ul.lineup_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0 5% 5%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0 1.5% 5%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0 1.5% 5%;
    }
}

@media (width < 1248px) {
    #lineup .wrapper ul.lineup_list li {
        margin-bottom: 5%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li {
        width: 30%;
        margin: 0 1.5% 8%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li {
        width: 30%;
        margin: 0 1.5% 8%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li a {
        position: relative;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li .img {
        width: 90%;
        margin: auto;
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li .img {
        width: 90%;
        margin: auto;
        background-size: 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        height: auto;
        position: static;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li a .img::before {
        z-index: 0;
    }
}

#lineup .wrapper ul.lineup_list li .img img {
    width: 100%;
}

#lineup .wrapper ul.lineup_list li .name {
    margin-top: 3%;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li .name {
        margin-top: 15%;
    }
}

#lineup .wrapper ul.lineup_list li .name img {
    display: inline-block;
    width: auto;
}

#lineup .wrapper ul.lineup_list li a:hover .img img {
    opacity: 1;
}

#lineup .wrapper ul.lineup_list li.lineup_vanilla .name img {
    width: 70%;
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_green .name img {
        width: 90%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_green .name img {
        width: 90%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_cookie .name img {
        width: 75%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_cookie .name img {
        width: 75%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_macadamia .name img {
        width: 85%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_macadamia .name img {
        width: 85%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_ganache-chocolat .name img {
        width: 90%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_ganache-chocolat .name img {
        width: 90%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_richmilk .name img {
        width: 80%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_richmilk .name img {
        width: 80%;
    }
}

@media (min-width: 769px) and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_rumraisin .name img {
        width: 88%;
    }
}

@media only screen and (max-width: 768px) {
    #lineup .wrapper ul.lineup_list li.lineup_rumraisin .name img {
        width: 88%;
    }
}