@charset "utf-8";

#wrapper{
    position : relative;

}

.pizzasorridera{
    text-align : center;
    position : relative;
    z-index : 0;
}
.pizzasorridera img{
    width : 100%;
}
.psd-main{
    margin-inline: auto;
    width : 100%;
    overflow-x: hidden;
    position : relative;
}
.psd-main-image-wrap{
    position : relative;
    width : 100%;
    height : 138.1vw;
    overflow : hidden;
}
.psd-main-image,
.psd-main-info{
    position : absolute;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    width : 100%;
    z-index : 1;
}
.psd-main-info{
    z-index : 2;
}
.psd-main-image::before,
.psd-main-image::after{
    content : '';
    position : absolute;
    left : 0;
    top : 0;
    right : 0;
    bottom : 0;
    background-image : url(../img/steam.png);
    background-repeat : no-repeat;
    z-index : 3;
    background-size : cover;
    transform-origin:left bottom;
}
.psd-main-image::before{
    animation: steam_before 18s infinite linear;
    transition: all 1s;
}
.psd-main-image::after{
    top : -100px;
    right : -30px;
    animation: steam_after 22s infinite linear;
    transition: all 1.4s;
}
.psd-header{
    background : #d70c19;
    position : relative;
}
.psd-header__lead{
    background-image : url(../img/main-lead.jpg);
    background-repeat : no-repeat;
    background-size : cover;
    height : 166vw;
    padding-top : 10vw;
    padding-left : 14.45vw;
    padding-right : 14.45vw;
    box-sizing : border-box;
}

.psd-enjoy{
    background-image : url(../img/enjoy-bg.png);
    background-repeat : no-repeat;
    background-size : 100% auto;
    position : relative;
    z-index : 100;
    padding-bottom : 9.6vw;
    background-color : #F6EFD5;
}
.psd-enjoy::before{
    position : absolute;
    background : #d70c19;
    content : '';
    height : 6vw;
    width : 100%;
    z-index : -1;
}
.psd-enjoy-movie{
    margin-top : 6.8vw;
    margin-bottom : 5vw;
}
.psd-enjoy-items{
    display : flex;
    max-width : 78.3vw;
    justify-content: space-between;
    flex-wrap : wrap;
    margin-inline : auto;
}
.psd-enjoy-items > li{
    width : 36.3vw;
    margin-bottom : 5vw;
}

.psd-max-wrap,
.psd-shop-link,
.psd-net-order{
    max-width : 83.8vw;
    margin-inline : auto;
}
.psd-shop-link{
    margin-bottom : 7.4vw;
}

.psd-concern-pizza{
    position : relative;
    background : #fff;
    padding-top : 4.5vw;
    /*padding-bottom : calc((230px - 44px) * 0.55);*/
    padding-bottom : 18.6vw;
}
.psd-concern-pizza__title{
    position : absolute;
    left : 0;
    top : 4.5vw;
    height : 45.9vw;
    width : 49.8vw;
}

.psd-solve{
    background-color : #FFF799;
    position : relative;
    z-index : 1;
    padding-top : 6vw;
    padding-bottom : 9.2vw;
}
.psd-solve::before{
    content : '';
    position : absolute;
    background-image : url(../img/solve-bg-top.png);
    background-repeat : no-repeat;
    background-size : 100% auto;
    width : 100%;
    height : 27.4vw;
    top : -23vw;
    left : 0;
    z-index : -1;
}
.psd-solve__title{
    margin-inline: auto;
    width : 84.8vw;
    height : 35vw;
    margin-top : -10vw;
}

.psd-commitment{
    background-image : url(../img/commitment-bg.png);
    background-repeat : no-repeat;
    background-position : top center;
    background-size : 100%;
    background-color : #D7091A;
    padding-top : 14vw;
    padding-bottom : 8.6vw;
}
.psd-commitment-item{
    width : 85.6vw;
    margin-inline : auto;
    margin-bottom : 9vw;
}
.psd-commitment-item__title{
    margin-bottom : 5.5vw;
}
.psd-commitment-mutti{
    background-image : url(../img/commitment-mutti-bg-top.png),url(../img/commitment-mutti-bg-bottom.png);
    background-repeat : no-repeat,no-repeat;
    background-size : 100% auto;
    background-position : center top, center bottom;
    padding-left : 14vw;
    padding-right : 14vw;
    padding-top : 12.6vw;
    padding-bottom : 19.6vw;
    margin-top : 5.6vw;
}
.psd-commitment-title{
    width : 46.3vw;
    margin-inline : auto;
}
.psd-commitment-lead{
    width : 71.8vw;
    margin-inline : auto;
}
.psd-commitment-link{

}
.psd-commitment-link__button{

}

.psd-pizza-lineup{
    background-image : url(../img/pizza-lineup-bg-top.jpg),url(../img/pizza-lineup-bg.jpg);
    background-repeat : no-repeat,repeat-y;
    background-size : 100% auto;
    background-position : top center;
    padding-bottom : 15vw;
}
.psd-pizza-lineup-item:nth-child(2){
    margin-top : 5.4vw;
}
.psd-pizza-lineup-image{
    margin-bottom : 8.4vw;
    position : relative;

}
.psd-pizza-lineup-image__info{
    transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
    opacity : 0;
    z-index : 10;
    position : relative;
}
.psd-pizza-lineup-image__pizza{
    transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
    opacity : 0;
    position : absolute;
    top : 0;
    right : 0;
    bottom :0;
    left : 0;
    z-index : 0;
}
.psd-pizza-lineup-to-right{
    transform: translateX(calc(-50vw - 50%));
}
.psd-pizza-lineup-to-left{
    transform: translateX(calc(50vw + 50%));
}
.psd-pizza-lineup-image__pizza::before,
.psd-pizza-lineup-image__pizza::after{
    content : '';
    position : absolute;
    left : 0;
    top : 0;
    right : 0;
    bottom : 0;
    background-image : url(../img/steam.png);
    background-repeat : no-repeat;
    z-index : 1;
    background-size : cover;
    transform-origin:left bottom;
}
.psd-pizza-lineup-image__pizza::before{
    animation: steam_before 18s infinite linear;
    transition: all 1s;
}
.psd-pizza-lineup-image__pizza::after{
    animation: steam_after 22s infinite linear;
    transition: all 1.4s;

}

@keyframes steam_before {
    0% {
        bottom : -200px;
        transform: rotateY(0deg) scale(0.6, 1);
        opacity: 0
    }
    15% {
        opacity: 0.1;
        transform: rotateY(40deg) scale(1, 1.2);
    }
    33% {
        transform: rotateY(40deg) scale(1.4, 1.4);
        opacity: 0.5;
    }
    66% {
        transform: rotateY(10deg) scale(1.8, 1.6);
        opacity: 0.4;
    }
    100% {
        bottom : 0;
        transform: rotateY(60deg) scale(2, 1.8);
        opacity: 0;
        left : 0;
    }
}
@keyframes steam_after {
    0% {

        transform: rotateY(0deg) scale(.6, .6);
        opacity: 0;
    }
    15% {
        opacity: 0.7;
        transform: rotateY(3deg) scale(1,.8);
    }
    33% {
        transform: rotateY(20deg) scale(1.2, 1);
        opacity: 0.5;
    }
    66% {
        transform: rotateY(2deg) scale(1.5, 1.2);
        opacity: 0.8;
    }
    100% {

        transform: rotateY(50deg) scale(1.7, 1.4);
        opacity: 0;
    }
}

.lineup-show{
    transform: translateX(0);
    opacity : 1;
}

.psd-pizza-lineup-4part{
    width : 84.3vw;
    margin-inline : auto;
    background : rgba(255,255,255,.9);
    border-radius : 3.6vw;
    padding : 3.9vw 0 8.6vw 0;
    z-index : 10;
    position : relative;
}
.psd-pizza-lineup-4part__items{
    display : flex;
    flex-wrap : wrap;
    justify-content: center;
}
.psd-pizza-lineup-4part__items > li:nth-child(even){
    width : 38.7vw;
}
.psd-pizza-lineup-4part__items > li:nth-child(odd){
    width : 38.8vw;
}
.psd-pizza-lineup-01-recommend{
    position : relative;
    margin-top : -3.4vw;
    z-index : 1;
    margin-bottom : 4.4vw;
}
.psd-pizza-lineup-name{

}


.psd-size{
    background-image : url(../img/size-bg-top.jpg);
    background-color : #D60918;
    background-repeat : no-repeat;
    background-position : top center;
    background-size : 100% auto;
    padding-top : 17vw;
    padding-bottom : 4.4vw;
}


.psd-how-to-reheat{
    background-image : url(../img/how-to-reheat-bg-top.jpg);
    background-color : #E9CA32;
    background-repeat : no-repeat;
    background-position : top center;
    background-size : 100% auto;
}
.psd-how-to-reheat-note{
    margin-bottom : 5vw;
}

.psd-bottom-info{
    background-image : url(../img/enjoy-bg.png);
    background-repeat : no-repeat;
    background-size : 100% auto;
    padding-top : 9.6vw;
}
.psd-bottom-info-movie{
    margin-top : 8vw;
}



.psd-bottom-info-souzai{
    margin-top : 19.4vw;
    padding-bottom : 14vw;
}





/*------movie------*/
.psd-movie__wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.psd-movie__wrapper iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
.psd-movie-text{
    font-size : 2.8vw;
    line-height : 1em;
    text-align : left;
    color : #231815;
    font-weight : bold;
    margin-top : 8px;
}
.psd-movie-text__01{
    padding-right : 1em;
    display : inline-block;
}
.psd-movie-text__01:after{
    content : "|";
    margin-left : 1em;
}



.psd-hmb-button-wrap{
    position : absolute;
    right : 1vw;
    top : 22.2vw;
    z-index : 9999;
    width : 10vw;
    height : 10vw;
    display : block;
}
.js-nav-link{
    cursor: pointer;
}


.psd-hmb-menu{
    background-image : url(../img/pc-content-right-bg.jpg);
    background-color : #fff;
    background-position : center ;
    background-repeat : repeat;
    right : 0;
    left : 0;
    bottom : 0;
    top : 0;
    position : fixed;
    z-index : 99999;
    transition: ease .4s;
}
.psd-hmb-menu {
    transform: translateX(100%);
}

.psd-hmb-menu.active {
    transform: translateX(0);
}
.psd-hmb-menu__logo{

    height : 28.2vw;
}
.psd-pc-content-right-menu{
    background-image : url(../img/pc-content-right-menu-bg.png);
    background-position : top center;
    box-sizing : border-box;
    background-repeat : no-repeat;
    width : 90vw;
    background-size : 100% auto;
    padding-top : 40vw;
    padding-left : 15vw;
    padding-bottom : 10vw;
    position : relative;
    margin-inline : auto;

}

.psd-pc-content-right-menu > li{
    width : 60vw;
}





.aeon-net-super{
    position : sticky;
    bottom : 0;
    left : 0;
    right : 0;
    z-index : 1000;
    height : 28.2vw;
}

.backtotop{
    max-width : 20vw;
    bottom : 29.2vw;
    right : 1vw;
}
.backtotop img{
    max-width : 100%;
}
.backtotop a,.backtotop a:hover{
    background : transparent;
    opacity : 1;
}