@charset "utf-8";

/* CSS Document */
.post-contents-ginza-wrap{
    padding: 60px 0 70px;
}

.ginza-mainPhoto{
    margin-bottom: 30px;
}

.post-contents-ginza-inner > img,
.ginza-mainPhoto img{
    width: 100%;
    height: auto;
}

.post-contents-ginza p {
    line-height: 2;
    letter-spacing: 2px;
    padding-bottom: 30px;
}

.post-contents-ginza p:last-child{
    padding-bottom: 0;
}

.post-contents-ginza + .post-contents-ginza{
    margin-top: 80px;
}

.post-contents-ginza p:empty {
    display: none;
    padding: 0;
    line-height: 0;
}

.post-contents-ginza-inner + .post-contents-ginza-inner{
    margin-top: 50px;
}

.ginza-midashi-large{
    position: relative;
    text-align: center;
    position: relative;
    color: rgba(0,0,0,0);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
    font-size: 38px;
    letter-spacing: 0;
    line-height: 1.4;
    text-align: center;
    -webkit-text-stroke: 1px #231b19;
    text-shadow: 2px 1px #ffc3c3;
    padding: 35px 0 25px;
    margin-bottom: 40px;
}

.ginza-midashi-large:before,
.ginza-midashi-large:after{
    content: "";
    display: block;
    width: 100%;
    height: 8px;
    position: absolute;
    left: 0;
    background-size: 9px;
}

.ginza-midashi-large:before{
    background: url(../images/ginza/midashi-line-top.svg) repeat-x;
    top: 0;
}

.ginza-midashi-large:after{
    background: url(../images/ginza/midashi-line-bottom.svg) repeat-x;
    bottom: 0;
}

.ginza-midashi-large-icon{
    display: block;
    background: #fff;
    padding: 0 20px;
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -110px;    
}

.ginza-recipe-title{
    text-align: center;
    position: relative;    
    margin-bottom: 35px;
}

.ginza-recipe-title-icon {
    display: block;
    margin-bottom: 15px;
}

.ginza-recipe-title-cnt:before,
.ginza-recipe-title-cnt:after{
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    background-size: 7px !important;
}

.ginza-recipe-title-cnt{
    position: relative;
    height: 68px;
    display: inline-flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.midashi-name-l,
.midashi-name-r{
    height: 69px;
    width: auto;    
}

.ginza-recipe-title-cnt:before{
    background: url(../images/ginza/midashi-name-t.svg) repeat-x;
    top: 0;
}

.ginza-recipe-title-cnt:after{
    background: url(../images/ginza/midashi-name-b.svg) repeat-x;
    bottom: -1px;
}

.ginza-recipe-inner + .ginza-recipe-inner {
    margin-top: 40px;
}

.ginza-recipe-imgMaterial {
    display: flex;
    justify-content: space-between;
}

.ginza-recipe-img,
.ginza-recipe-text{
    width: 47%;
}

.ginza-recipe-text dt{
    width: 65%;
}

.ginza-recipe-text dd{
    width: 35%;
}

.ginza-recipe-text dt:first-child,
.ginza-recipe-text dd:first-child{
    padding-top: 0;
}

.ginza-recipe-title-sub {
    background: #ebebeb;
    text-align: center;
    padding: 3px 0;
    font-size: 22px;
    -webkit-text-stroke: 1px #231b19;
    text-shadow: 1px 1px #ffc3c3;
    color: rgba(0,0,0,0);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
    margin-bottom: 20px;
}

.ginza-recipe-img img {
    width: 100%;
    height: auto;
}

.recipe-subImgs {
    display: flex;
    padding: 0 !important;
    margin: 30px -1% 0;
}

.recipe-subImgs img {
    width: 100%;
    height: auto;
}

.recipe-subImgs li {
    width: 23%;
    margin: 0 1%;
}

.ginza-recipe-steps {
    margin-bottom: 20px;
}

.topics-recipe-contents{
    background: none;
    padding: 0;    
}

.ginza-recipe-steps ol {
    padding: 0 !important;
}

.ginza-recipe-steps ol p {
    padding: 0 0 10px 0;
}

.ginza-recipe-steps ol li:before{
    background: #82bfd0;
}

.ginza-next {
    background: #f7f5ef;
    text-align: center;
    position: relative;
    padding: 0 40px 40px;
}

.ginza-next h2 {
    position: relative;
    top: -25px;
}

.ginza-next ul {
    background: #fff url(../images/ginza/next-bg.svg) repeat;
    background-size: 6px !important;
    padding: 30px;
    color: #5d523d;
    font-weight: 700;
    font-size: 18px;
}

.ginza-next ul li + li {
    margin-top: 10px;
}

.ginza-next ul span {
    background: linear-gradient(transparent 60%, #fff891 60%);
}

/* ========================================================
   for SP
===========================================================*/

@media screen and (max-width: 768px) {
    
    .post-contents-ginza-wrap {
        padding: 5vw 0 10vw;
    }    
    
    .post-contents-ginza + .post-contents-ginza {
        margin-top: 14vw;
    }
    
    .post-contents-ginza-inner + .post-contents-ginza-inner {
        margin-top: 5vw;
    }
    
    .ginza-midashi-large{
        font-size: 6.8vw;
        letter-spacing: 0;
        line-height: 1.4;
        text-align: center;
        -webkit-text-stroke: 0.2vw #231b19;
        text-shadow: 0.5vw 0.2vw #ffc3c3;
        padding: 7vw 0 6vw;
        margin-bottom: 5vw;
    }
    
    .ginza-midashi-large-icon {
        padding: 0 3vw;
        top: -7vw;
        left: 50%;
        margin-left: -28vw;
    }
    
    .ginza-midashi-large-icon img {
        width: 46vw;
    }    
    
    .ginza-midashi-large:before, .ginza-midashi-large:after {
        height: 2.2vw;
        background-size: 2.2vw !important;
    }
    
    .ginza-recipe-title {
        margin-bottom: 6vw;
    }    

    .ginza-recipe-title-icon {
        margin-bottom: 3vw;
    }
    
    .ginza-recipe-title-icon img {
        width: 20vw;
    }
    
    .ginza-recipe-title-cnt {
        height: auto;
        font-size: 5.8vw;
        line-height: 1.4;
        width: 80vw;
        justify-content: center;
        padding: 5vw 0;
    }

    .midashi-name-l,.midashi-name-r {
        height: 20vw;
        width: auto;
        display: none;
    }
    
    .ginza-recipe-title-cnt:before {
        top: 0.2vw;
    }
    
    .ginza-recipe-title-cnt:after {
        bottom: -0.3vw;
    }
    
    .ginza-recipe-title-cnt:before, .ginza-recipe-title-cnt:after {
        height: 2.2vw;
        background-size: 2.2vw !important;
    }
    
    .ginza-recipe-img {
        margin-bottom: 6vw;
    }
    
    .ginza-recipe-img, .ginza-recipe-text {
        width: 100%;
    }
    
    .ginza-recipe-title-sub {
        background: #ebebeb;
        text-align: center;
        padding: 0.5vw 0;
        font-size: 4.8vw;
        -webkit-text-stroke: 0.2vw #231b19;
        text-shadow: 0.5vw 0.2vw #ffc3c3;
        color: rgba(0,0,0,0);
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 900;
        margin-bottom: 3vw;
    }
    
    .ginza-recipe-imgMaterial {
        display: block;
    }
    
    .topics-recipe-top-material dt,
    .topics-recipe-top-material dd{
        padding: 2vw 0;
    }
    
    .ginza-recipe-inner + .ginza-recipe-inner {
        margin-top: 6vw;
    }
    
    .ginza-recipe-steps {
        margin-bottom: 0;
    }
    
    .ginza-recipe-steps ol li {
        padding: 0 0vw 2vw 7vw;
    }
    
    .ginza-recipe-steps ol p {
        padding: 0;
    }
    
    .ginza-recipe-steps ol li:before {
        width: 4.2vw;
        height: 4.2vw;
        border-radius: 2.1vw;
        top: 2vw;
        font-size: 3vw;
    }
    
    .recipe-subImgs {
        margin: 3vw -1% 0;
    }
    
    .ginza-next {
        padding: 0 6vw 8vw;
    }
    
    .ginza-next img {
        width: 65vw;
    }
    
    .ginza-next ul {
        padding: 5vw 5vw !important;
        font-size: 4.2vw;
    }
    
    .ginza-next ul li + li {
        margin-top: 4vw;
    }
}