@charset "utf-8";

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
@media all and (max-width: 768px){
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/********/
html{
    font-size: 4vw;
    opacity: 0;
    /*
    word-break: break-all;
    word-wrap: break-word;
    */
}
html.appear{
    opacity: 1;
    -webkit-transition-property: opacity;transition-property: opacity;
    -webkit-transition-duration: 1s;transition-duration: 1s;
}

/********/
html,body{
    width: 100%;
    height: 100%;
}
#wrap{
    width: 100%;
    height: 100%;
    font-family: dnp-shuei-gothic-kin-std;
}
#content{
    width: 100%;
    height: 100%;
    overflow: auto;
    opacity: 1;
    -webkit-overflow-scrolling: touch;
}
main{
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0.2,0.2);transform: scale(0.2,0.2);
    -webkit-transform-origin: center center;transform-origin: center center;
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration: 0.4s;transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;
}
main.appear{
    -webkit-transform: scale(1,1);transform: scale(1,1);
}

/********/
#loading{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,1);
    background-image: url(../image/loadinganime.gif);background-repeat: no-repeat;background-position: 50% 50%;background-size: 15% auto;
    z-index: 1;
    opacity: 0;
    -webkit-transform: scale(5,5);transform: scale(5,5);
    -webkit-transform-origin: center center;transform-origin: center center;
    -webkit-transition-property: opacity,transform;transition-property: opacity,transform;
    -webkit-transition-duration: 0.5s;transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;
}
#loading.appear{
    opacity: 1;
    -webkit-transform: scale(1,1);transform: scale(1,1);
}

/********/
#firstcover{
    position: absolute;left: 0;right: 0;top: 0;bottom: 0;
}

/********/
#portraitonly{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0,0,0,1);*/
    background-image: url("../item/pt.jpg");
    -webkit-background-size: cover;
    background-size: cover;
}
#portraitonly p{
    font-size: 10px;
    /*font-weight: bold;*/
    color: #fff;
    /*color: rgba(255,255,255,0.4);*/
    /*display:none;*/
    position: absolute;
    text-align: right;
    bottom:7px;
    right:7px;
}
html.ori-port #portraitonly{
    display: none;
}
html.ori-land #portraitonly{
    display: block;
}
html.ori-land #content{
    opacity: 0;
}

/********/
header{
    position: relative;
    width: 100%;
    height: 8%;
    background-color: rgba(249,249,249,1);
}
header>div.inner{
    height: 100%;
}
header div.titlebox{
    display: flex;align-items: center;justify-content: center;
    width: 100%;
    height: 100%;
}
header div.titlebox>div.inbox{
    text-align: center;
}
header div.titlebox h1{
    padding: 0 0 2vw 0;
    font-size: 0.8rem;
    letter-spacing: 0.07rem;
}
header div.titlebox p.term{
    font-size: 0.75rem;
    font-weight: 400;
}
header div.iconbox{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
}
header div.iconbox a{
    position: absolute;right: 0;top: 0;
    width: 12%;
    height: 100%;
    background-repeat: no-repeat;background-position: 50% 50%;background-size: 50% auto;
}
header div.iconbox a.instagram{
    left: 0;
    background-image: url(../image/icon_instagram.svg);
}
header  div.iconbox a.gmap{
    background-image: url(../image/icon_map.svg);
}

/********/
footer{
    position: relative;
    width: 100%;
    height: 8%;
    background-color: rgba(249,249,249,1);
}
footer div.iconbox{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
}
footer div.iconbox label,
footer div.iconbox a{
    position: absolute;top: 0;
    width: 12%;
    height: 100%;
    background-repeat: no-repeat;background-position: 50% 50%;background-size: 50% auto;
}
footer div.iconbox label[my_extra="walk"]{
    left: 0;
    background-image: url(../image/icon_walk.svg);
}
footer div.iconbox label[my_extra="clock"]{
    
    left: 28%;
    /*left: 0;*/
    background-image: url(../image/icon_clock.svg);
}
footer div.iconbox label[my_extra="sandwich"]{
    left: 58%;
    /*left: 43%;*/
    background-image: url(../image/icon_sandwich.svg);
}
footer div.iconbox label[my_extra="info"]{
    left: 88%;
    background-image: url(../image/icon_info.svg);
}

/********/
#showwindow{
    width: 100%;
    height: 76%;
}
#showwindow>div.inner{
    width: 100%;
    height: 100%;
}
#showwindow div.itembox{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255,255,255,1);
}
#showwindow div.itembox ul{
    position: relative;
    width: 100%;
    height: 100%;
    white-space: nowrap;
}
#showwindow div.itembox ul>li{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    vertical-align: top;
}
#showwindow div.itembox ul>li p{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    background-repeat: no-repeat;background-position: 0 50%;background-size: 100% auto;
}
#showwindow div.itembox ul>li p video{
    position: relative;top: 50%;
    width: 100%;
}
#showwindow div.itembox ul>li i.playbtn{
    display: none;
    position: absolute;left: 50%;top: 50%;
    width: 20%;
    padding: 20% 0 0 0;
    background-image: url(../image/icon_movieplay.svg);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
    margin: -10% 0 0 -10%;
}
#showwindow div.itembox ul>li i.playbtn.appear{
    display: block;
}


/********/
#thumbnail{
    width: 100%;
    height: 8%;
}
#thumbnail>div.inner{
    width: 100%;
    height: 100%;
}
#thumbnail div.itembox{
    width: 100%;
    height: 100%;
}
#thumbnail div.itembox ul{
    width: 100%;
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;
    border-style: solid;border-width: 1px 0 1px 0;border-color: rgba(249,249,249,1);
}
#thumbnail div.itembox ul>li{
    display: inline-block;
    width: 10vw;
    height: 100%;
    overflow: hidden;
    vertical-align: top;
    background-color: rgba(249,249,249,1);
}
#thumbnail div.itembox ul>li.pad{
    width: 48%;
    height: 100%;
}
#thumbnail div.itembox ul>li.item{
    background-color: rgba(0,0,0,1);
    border-style: solid;border-width: 0 0 0 1px;border-color: rgba(249,249,249,1);
}
#thumbnail div.itembox ul>li.item p{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;background-position: 0 50%;background-size: 100% auto;
    opacity: 0.4;
}
#thumbnail div.itembox ul>li.item.curr p{
    opacity: 1;
}

/********/
#logbar{
    position: absolute;left: 0;bottom: 20%;
    width: 100%;
    height: 20%;
    padding: 0 0 2% 0;
    overflow: auto;
    color: rgba(255,255,255,1);
    text-align: left;
    white-space: nowrap;
    background-color: rgba(255,0,0,1);
}
#logbar>div.inner{
    border-style: solid;border-width: 0 0 1px 0;border-color: rgba(0,0,0,1);
}
#logbar>div.inner>p{
    font-size: 0.9rem;
    line-height: 1;
}


/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
} @media all and (min-width: 769px){
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/********/
html{
    font-size: 14px;
    opacity: 0;
}
html.appear{
    opacity: 1;
    -webkit-transition-property: opacity;transition-property: opacity;
    -webkit-transition-duration: 1s;transition-duration: 1s;
}

/********/
html,body{
    width: 100%;
    height: 100%;
}
#wrap{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,1);
    font-family: dnp-shuei-gothic-kin-std;
}
#content{
    position: absolute;left: 50%;top: 50%;
    width: 375px;
    height: 667px;
    overflow: hidden;
    border-radius: 4px;
    margin: -333px auto auto -187px;
}
main{
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0.2,0.2);transform: scale(0.2,0.2);
    -webkit-transform-origin: center center;transform-origin: center center;
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration: 0.6s;transition-duration: 0.6s;
    -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;
}
main.appear{
    -webkit-transform: scale(1,1);transform: scale(1,1);
}
}

/********/
#loading{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,1);
    background-image: url(../image/loadinganime.gif);background-repeat: no-repeat;background-position: 50% 50%;background-size: 15% auto;
    z-index: 1;
    opacity: 0;
    -webkit-transform: scale(5,5);transform: scale(5,5);
    -webkit-transform-origin: center center;transform-origin: center center;
    -webkit-transition-property: opacity,transform;transition-property: opacity,transform;
    -webkit-transition-duration: 0.8s;transition-duration: 0.8s;
    -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;
}
#loading.appear{
    opacity: 1;
    -webkit-transform: scale(1,1);transform: scale(1,1);
}

/********/
#portraitonly{
    display: none;
}

/********/
#firstcover{
    position: absolute;left: 0;right: 0;top: 0;bottom: 0;
}

/********/
header{
    position: relative;
    width: 100%;
    height: 8%;
    background-color: rgba(249,249,249,1);
}
header>div.inner{
    height: 100%;
}
header div.titlebox{
    display: flex;align-items: center;justify-content: center;
    width: 100%;
    height: 100%;
}
header div.titlebox>div.inbox{
    text-align: center;
}
header div.titlebox h1{
    padding: 0 0 2% 0;
    font-size: .9rem;
    letter-spacing: 0.07em;
}
header div.titlebox p.term{
    font-size: .8rem;
    font-weight: 400;
}
header div.iconbox{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
}
header div.iconbox a{
    position: absolute;right: 0;top: 0;
    width: 12%;
    height: 100%;
    background-repeat: no-repeat;background-position: 50% 50%;background-size: 50% auto;
}
header div.iconbox a.instagram{
    left: 0;
    background-image: url(../image/icon_instagram.svg);
}
header  div.iconbox a.gmap{
    left: 88%;
    background-image: url(../image/icon_map.svg);
}

/********/
footer{
    position: relative;
    width: 100%;
    height: 8%;
    background-color: rgba(249,249,249,1);
}
footer div.iconbox{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
}
footer div.iconbox label,
footer div.iconbox a{
    position: absolute;top: 0;
    width: 12%;
    height: 100%;
    background-repeat: no-repeat;background-position: 50% 50%;background-size: 50% auto;
}
footer div.iconbox label[my_extra="walk"]{
    left: 0;
    background-image: url(../image/icon_walk.svg);
}
footer div.iconbox label[my_extra="clock"]{
    
    left: 28%;
    
    /*left: 0;*/
    background-image: url(../image/icon_clock.svg);
}
footer div.iconbox label[my_extra="sandwich"]{
    
    left: 58%;
    
    /*left: 43%;*/
    background-image: url(../image/icon_sandwich.svg);
}
footer div.iconbox label[my_extra="info"]{
    left: 88%;
    background-image: url(../image/icon_info.svg);
}

/********/
#showwindow{
    width: 100%;
    height: 74%;
}
#showwindow>div.inner{
    width: 100%;
    height: 100%;
}
#showwindow div.itembox{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255,255,255,1);
}
#showwindow div.itembox ul{
    position: relative;
    width: 100%;
    height: 100%;
    white-space: nowrap;
}
#showwindow div.itembox ul>li{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: top;
}
#showwindow div.itembox ul>li p{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-repeat: no-repeat;background-position: 0 50%;background-size: 100% auto;
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration: 0.5s;transition-duration: 0.5s;
    -webkit-transform: scale(1,1);transform: scale(1,1);
}
#showwindow div.itembox ul>li p video{
    position: relative;top: 50%;
    width: 100%;
}

#showwindow div.itembox ul>li i.playbtn{
    display: none;
    position: absolute;left: 50%;top: 50%;
    width: 80px;
    height: 80px;
    background-image: url(../image/icon_movieplay.svg);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
    margin: -40px 0 0 -40px;
}
#showwindow div.itembox ul>li i.playbtn.appear{
    display: block;
}


/********/
#thumbnail{
    width: 100%;
    height: 10%;
}
#thumbnail>div.inner{
    width: 100%;
    height: 100%;
}
#thumbnail div.itembox{
    width: 100%;
    height: 100%;
}
#thumbnail div.itembox ul{
    width: 100%;
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;
    border-style: solid;border-width: 1px 0 1px 0;border-color: rgba(249,249,249,1);
}
#thumbnail div.itembox ul>li{
    display: inline-block;
    width: 40px;
    height: 100%;
    overflow: hidden;
    vertical-align: top;
    background-color: rgba(249,249,249,1);
}
#thumbnail div.itembox ul>li.pad{
    width: 48%;
    height: 100%;
}
#thumbnail div.itembox ul>li.item{
    background-color: rgba(0,0,0,1);
    border-style: solid;border-width: 0 0 0 1px;border-color: rgba(249,249,249,1);
    -webkit-transform-origin: center center;transform-origin: center center;
    -webkit-transform: scale(1,1);transform: scale(1,1);
}
#thumbnail div.itembox ul>li.item p{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;background-position: 0 50%;background-size: 100% auto;
    opacity: 0.4;
}
#thumbnail div.itembox ul>li.item.curr p{
    opacity: 1;
}

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
} /* media */
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/