[sref="001"] {
    text-align: center;
    line-height: 1;
}

[sref="001"] span {
    width: 50px;
    height: 50px;
    display: block;
}

[sref="001"] input {
    margin: 0;
    padding: 15px 25px;
    border-radius: 50px;
    line-height: 1;
}

[sref="001"] .grid > li {
    vertical-align: middle;
    padding: 3px;
}

@media only screen and (max-width: 800px) {
    [sref="001"] .grid > li {
        display: block;
        width: 300px;
        max-width: 100%;
        margin: 0 auto;
    }

    [sref="001"] .grid > li > span,
    [sref="001"] .grid > li > button {
        margin: 0 auto;
    }
}

/*===========================================*/

[sref="002"] {
    font-size: 25px;
    padding: 30px 0;
    background-color: #90def1;

}

[sref="002"] .container {
    min-height: 100vh;
    padding: 15px 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

[sref="002"] > .container:nth-child(even) > .row {
    flex-direction: row-reverse;
}

[sref="002"] .container > .row {
    width: 100%;
}

[sref="002"] h2 {
    color: #ec008c;
    text-align: left;
    margin: 0 0 6px;
}


[sref="002"] .recht > .wrapxp {
    padding: 50px 0 40px 30px;
}

[sref="002"] .bild {
    width: 100%;
    padding-top: 125%;
}

[sref="002"] .link {
    z-index: 2;
}

[sref="002"] .link img {
    display: block;
}

.scrollnext {
    display: none;
}

@media only screen and (min-width: 1100px) {
    [sref="002"] .link img {
        max-width: unset;
    }
}

@media only screen and (min-width: 992px) {
    [sref="002"] .container {
        max-width: 70%;
        width: 1140px;
    }

    .scrollnext {
        width: 84px;
        height: 210px;
        display: table;
        position: absolute;
        left: 50%;
        bottom: 45px;
        transform: translate(-50%, 0)
    }

    [sref="002"] .link img {
        position: absolute;
        left: 15%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    [sref="002"] > .container:nth-child(even) > .row img {
        right: 15%;
        left: auto;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(50%, -50%);
    }

    [sref="002"] .container > .row {
        border: 21px solid #ec008c;
    }
}

@media only screen and (max-width: 991px) {
    [sref="002"] .link img {
        position: relative;
        margin: 0 0 -85px auto;
        max-width: 100%;
        max-height: 400px;
    }

    [sref="002"] .recht > .wrapxp {
        padding: 50px 30px 35px;
        border: 15px solid #ec008c;
    }

    [sref="002"] .container {
        min-height: unset;
    }
}

/*===========================================*/
[sref="004"] {
    text-align: center;
}

[sref="004"] p {
    font-size: 30px;
}

/*===========================================*/

[sref="005"] {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

[sref="005"] h2 {
    margin: 0 0;
    color: #fff;
    text-shadow: -3px 3px 10px rgba(0, 0, 0, .45);
}

@media only screen and (max-width: 575px) {
    [sref="005"] {
        min-height: 250px;
    }
}

/*===========================================*/

[sref="016"] {
    text-align: center;
    font-size: 40px;
}

/*===========================================*/

[sref="017"] > .container {
    width: 1300px;
    max-width: 100%;
}

[sref="017"] .items {
    overflow: visible;
}

[sref="017"] .items > li {
    width: 25%;
    overflow: visible;
    padding: 9px;
}

[sref="017"] a {
    color: inherit;
}

[sref="017"] li > a > div {
    box-shadow: 3px 3px 15px rgba(0, 0, 0, .15);
}

[sref="017"] .bild {
    width: 100%;
    padding-top: 75%;
}

[sref="017"] .promo,
[sref="017"] .more {
    color: #ec008c
}

[sref="017"] .info {
    padding: 10px;
}

[sref="017"] .promo {
    font-size: 25px;
}

[sref="017"] .title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 3px solid #ccc;
    line-height: 1;
    padding: 0 0 5px;
}

/*===========================================*/

[sref="011"] > .container {
    width: 1150px;
    max-width: 100%;
}


[sref="011"] .items {
    overflow: visible;
}

[sref="011"] .items > li {
    width: 25%;
    overflow: visible;
    padding: 9px;
}

[sref="011"] a {
    color: inherit;
}

[sref="011"] li > a > div {
    box-shadow: 3px 3px 15px rgba(0, 0, 0, .15);
}

[sref="011"] .bild {
    width: 100%;
    padding-top: 75%;
}

[sref="011"] .promo,
[sref="011"] .more {
    color: #ec008c
}

[sref="017"] .info {
    padding: 10px;
}

[sref="011"] .promo {
    font-size: 25px;
}

[sref="011"] .title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 3px solid #ccc;
    line-height: 1;
    padding: 0 0 5px;
}


@media only screen and (max-width: 991px) {
    [sref="017"] .items > li {
        width: 33.333333%;
    }
}

@media only screen and (max-width: 575px) {
    [sref="017"] .items > li {
        width: 50%;
    }

    [sref="017"] .title {
        font-size: 15px;
    }
}

/*===========================================*/

[sref="018"] .bildbox {
    width: 200px;
    margin: 0 auto;
}

[sref="018"] .bild {
    width: 100%;
    padding-top: 100%;
}

[sref="018"] .btn-gen {
    margin: 0 auto;
}

[sref="018"] .main.wrapxp {
    padding: 30px;
    background-color: #fff;
}

[sref="018"] .container {
    width: 700px;
    max-width: 100%;
}

[sref="018"] .intro {
    text-align: center;
    font-size: 30px;
    font-family: "Avalon-Bold";
    line-height: 1.2;
}

/*===========================================*/

[sref="020"] {
    background-color: #fffdd0;
}

[sref="020"] > .container {
    width: 1300px;
    max-width: 100%;
}

[sref="020"] .items {
    overflow: visible;
}

[sref="020"] .items > li {
    width: 33.3333%;
    overflow: visible;
    padding: 9px;
    text-align: center;
}

[sref="020"] a {
    color: inherit;
}

[sref="020"] .bild {
    width: 100%;
    padding-top: 75%;
    border-radius: 15px;
}

[sref="020"] .btn-gen {
    margin: 0 auto;
}

[sref="020"] .txt01 {
    font-family: "Avalon-Bold";
    font-size: 27px;
    padding: 6px 0;
    color: #707070;
}

[sref="020"] .txt02 {
    padding: 10px;
    font-size: 22px;
    background-color: #74400c;
    color: #fff;
}

[sref="020"] .txt03 {
    font-style: italic;
    color: #707070;
    padding: 10px;
    font-size: 22px;
}

[sref="020"] input {
    padding: 10px 20px;
    text-align: center;
}

@media only screen and (max-width: 991px) {
    [sref="020"] .items > li {
        width: 33.333333%;
    }
}

@media only screen and (max-width: 575px) {

    [sref="020"] .txt01,
    [sref="020"] .txt02,
    [sref="020"] .txt03 {
        font-size: 18px;
        line-height: 1.2
    }

    [sref="020"] .items > li {
        width: 50%;
    }

    [sref="020"] .title {
        font-size: 15px;
    }
}

/*===========================================*/
[sref="021"] {
    padding-bottom: 0;
    background-color: #fffdd0;
}

[sref="021"] img {
    display: block;
    margin: 0 auto;
}

[sref="021"] .title {
    font-family: "Avalon-Bold";
    font-size: 45px;
}

/*===========================================*/

[sref="024"] {
    background-color: #fffdd0;
}

[sref="024"] .items > li {
    text-align: center;
}

[sref="024"] .items > li:nth-child(1) {
    width: 46%
}

[sref="024"] .items > li:nth-child(2) {
    width: 23%
}

[sref="024"] .items > li:nth-child(3) {
    width: 31%
}

[sref="024"] .bildbox {
    width: 100%;
}

[sref="024"] .bildbox img {
    max-height: 300px;
    display: block;
    margin: 0 auto;
}

[sref="024"] .txt01 {
    font-family: "Avalon-Bold";
    font-size: 27px;
    padding: 6px 0 0;
}

[sref="024"] .txt02 {
    padding: 0 0 20px;
}

@media only screen and (max-width: 991px) {

    [sref="024"] .items > li:nth-child(1),
    [sref="024"] .items > li:nth-child(2),
    [sref="024"] .items > li:nth-child(3) {
        width: 100%
    }

    [sref="024"] li > div {
        width: 400px;
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }
}

/*===========================================*/

[sref="027"] .btn-gen {
    margin: 0 auto;
}

[sref="027"] {
    background-color: #fffdd0;
}

[sref="027"] input {
    background-color: #fff;
    border: 3px solid #000;
    padding: 9px;
}

[sref="027"] img.icon-plus {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    -webkit-transform: translate(50%, 7px);
    transform: translate(50%, 7px);
}

/*===========================================*/

[sref="028"] {
    background-color: #fffdd0;
}

[sref="028"] .bild {
    width: 100%;
    padding-top: 100%;
}

[sref="028"] .display > li {
    width: 20%;
    padding: 6px;
    overflow: visible
}

[sref="028"] li > .wrap {
    box-shadow: 3px 3px 15px rgba(0, 0, 0, .3);
}

[sref="028"] .page-num {
    font-family: "Avalon-Bold";
    text-align: center;
    padding: 30px 0 0;
}

[sref="028"] .page-num li {
    padding: 3px;
}

[sref="028"] .page-num li > div,
[sref="028"] .page-num li > a {
    padding: 6px 20px;
    color: #fff;
    display: table;
}

[sref="028"] .page-num li > .indic {
    background-color: #000;
}

[sref="028"] .page-num li > a {
    background-color: #74400c;
}

@media only screen and (max-width: 1200px) {
    [sref="028"] .display > li {
        width: 25%;
    }
}

@media only screen and (max-width: 991px) {
    [sref="028"] .display > li {
        width: 33.3333%;
    }
}

@media only screen and (max-width: 575px) {
    [sref="028"] .display > li {
        width: 50%;
    }
}

/*===========================================*/

[sref="029"] {
    background-color: #fffdd0;
}

[sref="029"] .img-display {
    padding: 20px 20px 90px;
    background-color: #fff;
    text-align: center;
}

[sref="029"] .enlarge > li {
    margin: 0 3px;
}

[sref="029"] .enlarge {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -15px)
}

[sref="029"] .title {
    margin-bottom: 5px;
}

[sref="029"] .title span {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    border: 2px solid #fffdd0;
    line-height: 1;
    border-radius: 50%;

    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

[sref="029"] .title > div {
    background-color: #74400c;
    color: #fff;
    padding: 10px 20px 10px 30px;
    font-family: "Avalon-Bold";
    font-size: 24px;
}

[sref="029"] .emo {
    width: 60px;
    height: 60px;
    margin: 3px;
}

[sref="029"] .bgpic {
    width: 90px;
    height: 90px;
    margin: 3px;
}

[sref="029"] .input-machen > .row {
    padding-top: 15px;
}

[sref="029"] .taste {
    padding-top: 10px;
}

/*===========================================*/

[sref="030"] {
    padding: 0;
}

[sref="030"] > div {
    padding: 0;
}

[mn="030"] .item {
    min-height: 700px;
        align-items: flex-end;
}

@media only screen and (max-width: 575px) {
    [mn="030"] .item {
        min-height: 350px;
        
    }
}

/*===========================================*/

[sref="031"] {
    padding: 0;
}

[sref="031"] > div {
    padding: 0;
}
[sref="031"] .ban-ttl {
    margin: 0;
}
[sref="031"] .btn-gen {
    margin: 0 auto;
    background-color: #fff;
    color: #ec008c;
        border: 2px solid #fff;
}
[sref="031"] .btn-gen:hover {
    margin: 0 auto;
    background-color: #ec008c;
    color: #fff;
        border: 2px solid #ec008c;
}
[mn="031"] .item {
    min-height: 700px;
}

@media only screen and (max-width: 575px) {
    [mn="031"] .item {
        min-height: 350px;
        
    }
}