@charset "utf-8";
/*
#####################################
reset
#####################################
*/
*{margin:0;padding:0;}
html{overflow-y: scroll;}
body,html,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
/*table{border-collapse:collapse;border-spacing:0;}*/
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
hr,legend{display:none;border:none;}
abbr,acronym,fieldset{border:0;}
tr,th,td,caption{vertical-align:top;font-style:normal;font-weight:normal;text-align:left;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-style:normal;font-weight:normal;font-size: 100%;}
img{border:0;font-size:0;line-height:0;vertical-align:bottom;}
a {text-decoration: none;}
section,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,ul,li,ol,table,th,td,img,p,header,a {box-sizing: border-box;}
/*
#####################################
basics
PC1024↑SP1023↓
noflot736↓
miniimg414↓
#####################################
*/


/* body ALL_background*/
body{font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;background:  #fff;font-size:16px;line-height:1.2em;}
main{display:block; width: 100%; margin:0 auto;}
footer{display:block; width: 100%; margin:0 auto; }
.wrap {width: 100%;max-width: 1024px; margin: 0 auto 1em;display: block;}
.wrap:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.wrapfull {width: 100%;max-width: 1366px; margin: 0 auto 1em;}
.wrapfull:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.lidLogoUpe{width:39%; padding-top: 1em; max-width: 567px;display: inline-block;}
.meinimage{width: 60%; max-width: 800px;display: inline-block;}
.lidLogoUpe img,.meinimage img{ width: 100%;}
@media screen and (max-width:414px){
.wrap {padding: 5px;}
}
.fading {border: none;text-decoration: none;}
.fading:hover {opacity: 0.7;filter: alpha(opacity=70);}
/*header PC*/
@media screen and (min-width:1024px){
#pHeader {display: block; position: relative;  width: 100%; height: 60px; background-color:#000; margin-bottom: 1.5em;}
#pHeader nav{  position: absolute; width: 100%; height: 60px; margin: 10px auto; text-align: center;display: inline-block;}
#pHeader nav ul{}
#pHeader nav ul li{display: inline-block; margin: 0.5em; font-size: 1.2rem;}
#pHeader nav ul a:link{color: #fff;}
#pHeader nav ul a:visited{color: #fff;}
#pHeader nav ul a:hover{color: #90ff00;}
#pHeader nav ul a:active{color: #90ff00;}
#pHeader .logoBox { position: absolute;  top: 8px;left:0px;box-sizing: border-box; display: inline-block;}
#pHeader .logoBox img{ width: auto; height: 40px;margin-left: 5px;}
#pHeader .psLogo { position: absolute;  top: 18px; right:10px;box-sizing: border-box; display: inline-block;}
#pHeader .psLogo img{ width: auto; height: 30px;}
#pHeader .spLogo{display: none;}
}


/*header SP*/
@media screen and (max-width:1023px){
#pHeader { display: block; width: 100%; margin: 0 auto;  background-color: #000; padding: 0.5em; box-sizing: border-box;}
#pHeader nav ul{float: right; width: 70%; margin: 0 auto; text-align: center; }
#pHeader nav ul li{ margin:0.5em; font-size: 1.0rem;}
#pHeader nav ul:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.drawer-menu ul a:link{color: #fff;}
.drawer-menu ul a:visited{color: #fff;}
.drawer-menu ul a:hover{color: #90ff00;}
.drawer-menu ul a:active{color: #90ff00;}
#pHeader .logoBox{display: none;}
#pHeader .psLogo{display: none;}
#pHeader .spLogo ul{margin: 3px 0 3px 3px; width: 100%;}
#pHeader .spLogo li{display: inline-block; padding: 0 1px; text-align: left; vertical-align: middle;}
#pHeader .spLogo img{height: 30px;}
.spLogo li:nth-child(3) img{height: 20px !important; }
}
@media screen and (max-width:736px){
#pHeader .lidLogo_sp img{ height: 100%; max-height:30px; }
#pHeader nav ul{ width:100%; margin: 0 auto; text-align: center; }
#pHeader nav ul li{ font-size: 0.8rem;}
.lidLogoUpe{width:38%; }
.meinimage{width: 60%;}
}

.shop-list {width: 100%;max-width: 1024px;margin: 0 auto;padding: 1em;text-align: center;box-sizing: border-box;}
.shop {display: inline-block;text-align: left;margin: 0.8em 0.5em 0;}
.shop img{ width: 100%; max-width: 220px; border: 1px #000 solid;}
@media screen and (max-width:414px){
.shop {display: inline-block;text-align: left;margin: 5px;width: 45%;}
.shop img{display: inline-block;}
}

footer{width: 100%; margin: 0 auto; text-align: center; background-color:#000;}
footer ul li {display: inline-block; margin:0.5em 1.5em;}
footer p:last-child { margin: 0 0 7em 0; font-size: 0.8em; text-align: center;}
.sp_btn{margin: 2em auto;}

footer .ps4Con{ width: 100%; background-color:#000; border-top: #575757 solid 1px; border-bottom:#575757 solid 1px;padding: 0.5em; margin-bottom: 1em; box-sizing: border-box;}
footer .ps4Con img{ width: 100%; max-width: 150px;}
.copy{margin: 0 auto; box-sizing: border-box; padding:0.5em 1em 2em ; font-size: 80%; line-height: 1.2em; color: #fff;}

@media screen and (min-width:415px){
#toPageTop{position:fixed;bottom:10px;right:10px;font-size:77%;}
#toPageTop a{background:#000;text-decoration:none;color:#fff;width:100px;padding:5px;text-align:center;display:block;border-radius:5px;}
#toPageTop img{width: 100%;}
#toPageTop a:hover {text-decoration:none;background:#999;}
.pc_none{display: none;}
}

@media screen and (max-width:414px){
#toPageTop{position:fixed;bottom:10px;right:10px;font-size:77%;}
#toPageTop a{background:#000;text-decoration:none;color:#fff;width:30px;padding:5px;text-align:center;display:block;border-radius:5px;}
#toPageTop img{width: 100%;}
#toPageTop a:hover {text-decoration:none;background:#999;}

.sp_none{display: none;}
}

.link_area{width: 100%; max-width: 900px; margin:0 auto;padding:0.5em; box-sizing: border-box;}
.link_area a{display: inline-block;}
.btn_br {display: block;width: 49%;border:#fff solid 1px;padding: 0.5em; font-size: 1.2rem;border-radius: 10px;box-sizing: border-box; color: #fff;}
.btn_br:link,.btn_br:visited{color: #fff;}
.btn_br:hover,.btn_br:active {border:#c41a25 solid 1px;background: #fff;color: #c41a25;}

/*iPhone6 Plus Port*/
@media screen and (max-width:414px){
.link_area a{display: inline-block; margin-bottom: 0.5em; text-align: center; width: 49%;box-sizing: border-box;}
}

.psLogo2 {box-sizing: border-box; display: inline-block; width: 100%; margin: 2em auto 0; max-width: 120px; text-align: center;}
.psLogo2 img{ width: auto; height: 30px;}

.small{font-size: 0.8rem;}

/*414↓portonly　415↑other*/
@media screen and (min-width:415px){
.main_414{ display: none;}
}
@media screen and (max-width:414px){
.main_415{ display: none;}
}
.img_con { width: 100%; max-width: 600px; margin:0 auto;}
.c_back{width: 100%; background: url(/uncleprimeedition/img/c_back.png) no-repeat left top; background-size: cover;position: relative;}
.c_right{width: 100%;  margin: 0 auto;}
.c_right img{width: 100%; max-width: 1366px;}
.youtubeBox{width: 40%; max-width: 560px; position: absolute;z-index: 1; bottom: 0; left: 8%;}
.youtubeBox img {width: 100%; max-width: 560px;}

.m_back{width: 100%; background: url(/uncleprimeedition/img/m_back.png) no-repeat left top; background-size: cover;position: relative;}
.m_right{width: 100%;  margin: 0 auto;}
.m_right img{width: 100%; max-width: 1366px;}

.p_back{width: 100%; background: url(/uncleprimeedition/img/p_back.png) no-repeat left top; background-size: cover;position: relative;}
.p_right{width: 100%;  margin: 0 auto;}
.p_right img{width: 100%; max-width: 1366px;}

.youtubeBox2{width: 40%; max-width: 560px; position: absolute;z-index: 1; bottom: 0; right: 8%;}
.youtubeBox2 img {width: 100%; max-width: 560px;}


.imgBox{width: 100%; text-align: center;}
.imgBox img{width: 100%; max-width: 1366px;}
.imgBoxSmall{width: 100%; max-width: 900px; text-align: center; margin: 0 auto;}
.imgBoxSmall img{width: 100%; max-width: 900px;}
.imgBoxP{width: 100%; text-align: center;}
.imgBoxP img{width: 100%; max-width:748px; }

.spec{width: 100%; margin: 0 auto; border:#8C8C8C solid 1px; }
.spec dd{padding: 1em;}
.spec dd table{vertical-align: top;}
.spec dd div{vertical-align: middle;}
.spec dt{background: #000; font-size: 1.2rem; font-weight: bold; color: #fff; padding: 0.5em; line-height: 1.5em;}
.specTextTable{display: inline-block; width: 74%;border-collapse:collapse}
.specTextTable tr{border-top:#8C8C8C dashed 1px;vertical-align: middle; }
.specTextTable td{padding: 0.5em;}
.specTextTable td:nth-child(odd){width: 25%;}
.specTextTable td:nth-child(even){width: 70%;}
.specTextTable tr:last-child {border-bottom:#8C8C8C dashed 1px;}
.specImgBox{width:25%; max-width: 240px; display: inline-block; }
.specImgBox img{width: 100%;}
@media screen and (max-width:414px){
.main_415{ display: none;}
.specImgBox,.specTextTable{display: block;}
.specImgBox{width: 100%; max-width: 240px; text-align: center; margin: 0 auto;}
.specTextTable{width: 90%; margin: 0 auto 1em; font-size: 0.8rem;}
.specTextTable td:nth-child(odd){width: 35%;}
.specTextTable td:nth-child(even){width: 65%;}
.spec dt{font-size: 1rem;}
}


.buyBtn{margin-top: 1em;}
.buyBtn a {
    display: block;
    width: 100%;
    max-width: 600px;
    background-color: #000;
    ;
   padding: 0.5em 3em;
    color: #fff;
    font-size: 1.5rem;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.26);
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
    border-radius: 10px;
    box-sizing: border-box;
}

.buyBtn a:hover {
    background: #eeaa04;
    color: #fff;
}

.buyBtn a:active {
    background: #eeaa04;
    color: #fff;
}

@media screen and (max-width:414px) {
    .buyBtn a {
        width: 90%;
        padding: 0.5em;
    }
}















/*
#####################################
hamburger menu
#####################################
*/
@media screen and (min-width:1024px) {
.gnav_mob{display:none;}
}
@media screen and (max-width:1023px) {
#gnav{display:none;}
}
.drawer-menu{
padding: 10% 0 0 3%;
}
.drawer-menu li{
margin-bottom:5%;
padding-bottom: 5%;
border-bottom: 1px dotted #5e5e5e;
}
/* チェックボックスオンの時 */
.check:checked ~ .contents {
-webkit-transform: translateX(-150px);
-ms-transform: translateX(-150px);
transform: translateX(-150px);
}

/* ドロワー */
.drawer-menu {
position: fixed;
top: 0;
right: 0;
width: 150px;
height: 100%;
background: #222;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: translateX(150px);
-ms-transform: translateX(150px);
transform: translateX(150px);
opacity: 0;
background-color:rgba(0,0,0,0.8);
z-index: 600;
padding: 80px 0 0 10px;
}
/* チェックボックスオンの時 */
.check:checked ~ .drawer-menu {
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}


/* チェックボックスを非表示 */
.check {
display: none;
}

/* メニューボタン(label) */
.menu-btn,.menu-btn a {
position: fixed;
display: block;
top: 0px;
right: 10px;
width: 40px;
height: 40px;
background: #000;
border:5px solid #000;
border-bottom-left-radius:5px;
border-bottom-right-radius: 5px;
cursor: pointer;
z-index: 601;
text-align: center;
font-size: 0.8rem;
}

/* コンテンツの閉じる。普段は非表示(label)*/
.close-menu {
position: fixed;
top: 0;
right: 150px;
width: 100%;
height: 100vh;
visibility: hidden;
opacity: 0;
}

/* バー */
.bar {
position: absolute;
top: 0;
left: 0;
display: block;
width: 40px;
height: 1px;
background: #fff;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}

.bar.middle {
top: 10px;
opacity: 1;
}

.bar.bottom {
top: 20px;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
}

.menu-btn__text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #fff;
-webkit-transition: all .5s;
transition: all .5s;
display: block;
visibility: visible;
opacity: 1;
}

.check:checked ~ .menu-btn .menu-btn__text {
visibility: hidden;
opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
background-color: #fff;
width: 56px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
width: 56px;
top: 40px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
visibility: visible;
opacity: 1;
z-index: 601;
}