body{
    width: 100%;
    background: #fff2f8;
}

.divbox01_PP .PP_box {margin-top: 6px;}
.divbox01_PP {border-bottom: 2px #fff2f8 solid;}

.wrap_topview {margin-top: 70px;}
.divbox01_PP, .footer {opacity: 1;background: #a30050;}

.footer {background: #000;position: relative;bottom: 0;margin-top:0;}
.bn {position: fixed;right: 10px;bottom: 30px;z-index: 2001;width: 110px;}


#slider {
    clear: both;
    padding:0;
    margin:0 auto;
    z-index:0;
    display:block;
    height: 55vw;
}
#top #slider .show{
    padding: 0;
    top: 0;
    left:0;
    display: block;
}
.clearfix {
  overflow: auto;
  zoom: 1;
}
.title{
    width: 100%;
    position: absolute;
    top: 2vw;
}
.title .award {
    height: 26vw;
    width: auto;
    margin-left: calc(50% - 35vw);
    float: left;
    margin-top: 20px;
    position: absolute;
}

.title .logo {
    height: 18vw;
    width: auto;
    margin-left: calc(50% - 16vw);
    margin-top: 7vw;
    float: left;
    position: absolute;
}

.title2 {
    position: relative;
}

.tittext {
    width: 100%;
    display: block;
    bottom: -4vw;
    clear: both;
    float: left;
    position: absolute;
/*    background: rgba(187, 105, 55, 0.8);
*/    padding:10px 0 50px;
}
.tittext p{
    color: #333;
    font-size: 1em;
    max-width: 980px;
    margin:6px auto;
    text-align: center;
    padding: 0 40px;
    line-height: 1.8em;
}
.tittext h1{
    color: #fff6a9;
    font-size: 1.4em;
    text-align: center;
    margin-top:8px;
}
.mouseover {
    position: relative;
    width: 578px;
    float: left;
    margin: 3px;
    cursor: pointer;
}

.picgroup {
    background: #fff;
    margin: 0 auto;
    width: 1190px;
    padding: 10px;
    position: relative;
    margin-top: 2vw;
}

.picgroup .p03 {
    width: 1162px;
}
div.overtext {
    color:white;
    text-align: left;
    width: 100%;
    height: 330px;
    position: absolute;
    background-color: black;
    opacity: 0; 
    transition: opacity 1s;
    -webkit-transition: opacity 1s; /* Chrome & safari */
    -moz-transition: background-color 1s; /* firefox */
}
div.overtext p {
    display: block;
    width: 100%;
    text-align: left;
    position: absolute;
    bottom: 30px;
    line-height: 1.5em;
    padding:0 20px;
}
div.overtext:hover {
    opacity: 0.8;
}

.message {
    position: absolute;
    margin-left: calc(50% - 18vw);
    margin-top: 23vw;
    width: 35vw;
}

.divbox01_PP a.gomaji_home{ background-size: auto; background-position: bottom left; }

@media screen and (max-width: 1500px) {
    #foodtop-box {
        margin-left: 0px;
        right: 0;
        margin-right: 10px;
    }
    .title .award{ height: 30vw; margin-left: calc(50% - 40vw);}
    .picgroup{ padding:10px; background: #fff; margin:0 auto; width: 1000px;}
    .mouseover{ float: left; width: 484px; margin:3px;}
    div.overtext{ height: 277px;}
    .picgroup .p03{ width: 974px;}
    .titlink{ margin:24vw calc(50% - 68vw);}
    .titlink2{ margin: 20px calc(50% - 4vw); width: 100px;}
    .hotel {
        position: absolute;
        margin-left: calc(50% - 34vw);
        bottom: -2vw;
        width: 34vw;
        min-width: 460px;
    }
    .message {
        position: absolute;
        margin-left: calc(50% - 20vw);
        margin-top: 28vw;
        width: 38vw;
    }

}
@media screen and (max-width: 1250px) {

    .titlink{ margin:28vw calc(50% - 71vw);}
    .titlink2{ margin: 20px calc(50% - 4vw); width: 100px;}
    .footer{ margin-top:70px;}
    .hotel {
        position: absolute;
        margin-left: calc(50% - 42vw);
        bottom: -2vw;
        width: 34vw;
        min-width: 420px;
    }
}
/*=================================PAD======================================*/

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

    .as {
        top: 60px;
    }
    .wrap_topview {
        margin-top: 100px;
    }
    #foodtop-box2 a.a7 {
        width: 80%;
        height: 113px;
        background-size: 100% auto;
        margin-left: 63px;
    }
    .footer{ position: relative; bottom: 0;}
    .title .award{ height: 36vw; margin-left:calc(50% - 50vw);}
    .titlink{ margin:30vw calc(50% - 75vw);}
    .titlink2{ margin: 20px calc(50% - 4vw); width: 100px;}
    .hotel {
        position: absolute;
        margin-left: calc(50% - 38vw);
        bottom: -2vw;
        width: 32vw;
        min-width: 360px;
    }
    .tittext p{
        font-size: 0.7em;
        margin-bottom: -10px;
        line-height: 1.5em;
    }
    .message {
        position: absolute;
        margin-left: calc(50% - 20vw);
        margin-top: 26vw;
        width: 40vw;
    }
    .title .logo { 
        margin-top: 8vw;
        height: 16vw;
        margin-left: calc(50% - 9vw);
    }

}
@media screen and (max-width: 855px) {
    .br_s {display: block;}
    .br_s1 {display: none;}
    .picgroup { width: 100vw;}
    .mouseover { width: 377px;}
    .picgroup .p03{ width: 760px;}
    .picgroup { padding-bottom: 0vw;}
    div.overtext { height: 216px;}
}
@media screen and (max-width: 768px) {
    .app-espwarp h1 {
        font-size: 24px;
    }
    .top_box {
        margin-top: 0;
    }
    .tittext{ font-size: 4vw; line-height: 1.5em;}
    .br_s {display: block;}
    .br_s1 {display: block;}
    .picgroup{ padding:6px; background: #fff; margin:0 2vw 0vw; width: 96vw;}
    .mouseover{ float: left; width: 44.5vw; margin:3px;}
    .picgroup .p03{ width: 90.6vw;}
    div.overtext{ height: auto; display: none;}
    .titlink{ margin:36vw calc(50% - 91vw); font-size: 4vw; padding: 4px 8px;}
    .titlink2{ margin: 20px calc(50% - 15vw); width: 100px;}
    #slider { height: 130vw;}
    #top #slider{ height: 140vw; width: 100vw; overflow: hidden;}
    #top #slider .show img {
        width: auto;
        height: 100vw;
        margin-left: calc(50% - 384px);
    }
    .hotel { display: none;}
    .tittext br{ display: none;}
    .tittext p{ text-align: left; font-size: 3.2vw; padding:2vh 2vw;}
    .title .award{ height: 52vw; width: auto; margin-left:calc(50% - 50vw); margin-top: -4vw; float: left;}
    .title .logo{ height: 44vw; margin:4vw calc(50% - 34vw); margin-top:18vw;}
    .bn{ right:-6vw; bottom:10vw;}
    .bn img{ width: 20vw;}
    .message{ position: absolute; margin-left:calc(50% - 44vw); margin-top:58vw; width: 88vw;}
    .footer{margin-top: 0;}

}
@media screen and (max-width: 736px) {
    .e-toppic_pid .total-pid-box.botmg {
        background: none;
        margin-bottom: 10%;
    }
    .wrap_topview {
        margin-top: 40px;
    }
    .as {
        top: 0px;
    }
    .e-toppic_pid .total-pid-box {
        padding: 1% 1.5% 5% 1.5%;
    }
    .divbox01_PP {
        display: none;
    }
    #foodtop-box2 a.a7 {
        width: 65%;
        height: 91px;
        margin-left: 109px;
    }
    .tittext{ padding:3vw 1vw; bottom: 0; padding-bottom:7vw;}
    .bn{ right:-6vw; bottom:10vw;}
}

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

}
@media screen and (max-width: 500px) {
    #foodtop-box a.a0, #foodtop-box a.a0:hover {
        right: 1%;
        top: -1px;
        width: 44px;
        border-radius: 5px;
    }
    #foodtop-box2 a.a7 {
        width: 50%;
        height: 71px;
        margin-left: 151px;
    }
}
@media screen and (max-width: 425px) {
    #foodtop-box2 a.a7 {
        width: 45%;
        height: 63px;
        margin-left: 168px;
    }
}
@media screen and (max-width: 414px) {
    #foodtop-box2 a.a7 {
        width: 42%;
        height: 59px;
        margin-left: 176px;
    }
}


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

    #foodtop-box2 a.a7 {
        width: 35%;
        height: 52px;
        margin-left: 198px;
    }
}
@media screen and (max-width: 320px) {
    #foodtop-box2 a.a7 {
        width: 34%;
        height: 52px;
        margin-left: 201px;
    }
    .picgroup{ padding:5px; background: #fff; width: 96vw;}
    .mouseover{ float: left; width: 44.5vw; margin:3px;}
    .picgroup .p03{ width: 90.6vw;}
    div.overtext{ height: auto;}
    .bn{ right:-13vw; bottom:10vw;}
    #top #slider .show img { margin-left:calc(50% - 384px);}

}