.pc { 
    display: inline-block !important; 
}
.sp { 
    display: none !important; 
}
footer {
    margin-top: 0;
}
a div:hover {
    opacity: 0.6;
    transition: 0.4s;
}

/* ----- TOP ----- */
#top {
    background: #e3fffc;
    text-align: center;
    border-bottom: 10px solid #46cec1;
    padding: 0 2%;
    display: inline-block;
    width: 100%;
}
#top h1 {
    padding: 2vh 2vw 0;
    position: relative;
}
#top h1 img {
    max-width: 100%;
}
#top .flat {
    position: relative;
}
#top .flat img {
    position: relative;
}
#top .flat img:first-child {
    right: -18vw;
    max-width: 55%;
}
#top .flat img:nth-child(2) {
    right: 100px;
    max-width: 18%;
    position: absolute;
    bottom: 0;
}
#top .flat img:nth-child(3) {
    left: -900px;
    max-width: 30%;
}

/* ----- gentei ----- */
#gentei {
    background-image: url(../images/gentei-back.gif);
    background-repeat: repeat;
}
#gentei img {
    max-width: 100%;
}
#gentei ul {
    text-align: center;
    padding: 3vh 4vw 4vh;
}
#gentei li {
    display: inline-block;
}
#gentei li:nth-child(2) {
    vertical-align: middle;
}
#gentei li p {
    text-align: left;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
}
#gentei li p span {
    font-weight: bold;
    border-bottom: 8px solid #ffcc00;
}

/* ----- sweets ----- */
#sweets {
    text-align: center;
    background-image: url(../images/sweets-back.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    padding: 0 6% 0;
}
#sweets div {
    height: 0;
}
#sweets img {
    position: relative;
}
#sweets img:first-child {
    top: 100px;
    left: -16%;
    max-width: 18%;
}
#sweets img:nth-child(2) {
    right: -22%;
    bottom: 40px;
    max-width: 12%;
}
#sweets img:nth-child(3) {
    top: 50px;
    right: -20%;
    max-width: 20%;
}
#sweets h2 {
    font-size: 32px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 10vh 0 0;
}
#sweets h2:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -20px;
    display: inline-block;
    width: 100px;
    height: 4px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
    background-color: #000;
}
#sweets p {
    font-size: 20px;
    padding: 6vh 0 7vh;
    font-weight: 500;
    position: relative;
}

/* -----lineup ----- */
#lineup {
    background: #46cec1;
    text-align: center;
    padding: 8vh 3vw;
}
#lineup img {
    max-width: 100%;
}
#lineup li {
    display: inline-block;
    padding: 4vh 1.4vw;
}
#lineup h3 {
    padding: 2vh 3vw 2vh;
}
#lineup p {
    color: #fff;
    font-size: 22px;
}

/* -----contact ----- */
.contact {
    background: #feffd8;
    padding: 4vh 0 6vh;
    text-align: center;
}
.contact a {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
}
.contact div {
    max-width: 88%;
    width: 400px;
    height: 76px;
    background: #ff8402;
    margin: auto;
    border-radius: 38px;
    line-height: 3.4;
}
.contact span {
    font-size: 18px;
    padding: 0 10px 0 0;
}

/* ----- norikurabe ----- */
#norikurabe {
    text-align: center;
    background-image: url(../images/norikurabe-back.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    padding: 8vh 2vw;
}
#norikurabe h2 {
    padding: 4vh 2vw 2vh;
}
#norikurabe img {
    max-width: 100%;
}
#norikurabe li {
    display: inline-block;
    padding: 1.4vh;
    max-width: 46%;
}

/* ----- shijou ----- */
#shijou {
    background: #46cec1;
    padding: 8vh 4vw;
    text-align: center;
}
#shijou img {
    max-width: 100%;
}
#shijou h2 {
    padding: 3% 0 0 0;
}

/* ----- point ----- */
#point {
    text-align: center;
    padding: 6vh 2vw;
}
#point img {
    max-width: 100%;
}
#point h2 {
    color: #ff8402;
    font-size: 42px;
    font-weight: bold;
    padding: 0 3vw 1vh;
    line-height: 1.2;
}
#point h2 span {
    font-size: 36px;
}
#point ul {
    max-width: 860px;
    margin: auto;
}
#point li {
    display: inline-block;
    padding: 2.6vh;
}



@media( min-width:2000px){
    #top .flat img:first-child {
        left: 14vw;
    }
    #top .flat img:nth-child(2) {
        right: 16vw;
    }
}

@media( max-width:1400px) {
    #top .flat img:nth-child(3) {
        left: -60vw;
    }

}

@media( max-width:1024px) {
    #top .flat img:nth-child(2) {
        right: 10vw;
    }
    #top .flat img:nth-child(3) {
        left: -64vw;
    }

}

@media( max-width:720px){
    .pc { 
        display: none !important;
    }
    .sp { 
        display: inline-block !important;
    }
    #top .flat img:first-child {
        display: block;
        max-width: 80%;
        right: 0;
        margin: 0 auto;
    }
    #top .flat img:nth-child(2) {
        max-width: 28%;
        left: 48vw;
        position: relative;
    }
    #top .flat img:nth-child(3) {
        max-width: 52%;
        left: -30vw;
        vertical-align: bottom;
    }
    #gentei ul {
        padding: 10% 6% 16%;
    }
    #gentei li p {
        text-align: center;
        font-size: 22px;
        line-height: 1.6;
        padding: 2% 0 0 0;
    }
    #sweets {
        background-position: center;
        padding: 10% 2% 0;
    }
    #sweets h2 {
        font-size: 26px;
    }
    #sweets p {
        font-size: 20px;
        padding: 16% 4% 8%;
    }
    #sweets img:first-child {
        top: -50px;
        left: -6%;
        max-width: 28%;
    }
    #sweets img:nth-child(2) {
        right: -10%;
        bottom: 100px;
        max-width: 20%;
    }
    #sweets img:nth-child(3) {
        top: -70px;
        right: -8%;
        max-width: 30%;
    }
    #lineup {
        padding: 16% 3%;
    }
    #lineup ul {
        padding: 6%;
    }
    #lineup p {
        font-size: 16px;
        padding: 0 4%;
    }
    #lineup li {
        padding: 2vh 1.4vw;
        width: 100%;
    }
    #lineup img {
        width: 100%;
    }
    .contact {
        padding: 10% 0 16%;
    }
    .contact a {
        font-size: 18px;
    }
    .contact div {
        line-height: 4;
    }
    #norikurabe {
        background-size: 180% auto;
        padding: 10% 6% 22%;
    }
    #norikurabe h2 {
        padding: 4% 8% 3%;
    }
    #norikurabe li {
        max-width: 100%;
    }
    #shijou {
        padding: 16% 4% 14%;
    }
    #point {
        padding: 16% 4%;
    }
    #point h2 {
        font-size: 34px;
    }
    #point h2 span {
        font-size: 26px;
    }
    #point li {
        padding: 2.6vw 4vh;
        width: 100%;
    }
    #point img {
        width: 100%;
    }
}

@media( max-width:320px){
    #sweets p {
        padding: 16% 0 20%;
    }
    #sweets img:nth-child(2) {
        bottom: 80px;
    }
    #sweets img:nth-child(3) {
        top: -60px;
    }
}