*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
a img{
border:none;
}
img{
vertical-align:bottom;
}
li{
list-style-type: none;
}
.responsive{
width:100%;
}

#container{
background:url(images/bg_pc.jpg) 50% 0%;
overflow:hidden;
}

#curtain{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
pointer-events:none;
z-index:1000;
}
#loader{
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
pointer-events: none;
z-index:1001;
}

#mainArea{
position:relative;
}
#mainArea .logo{
position:absolute;
left:1%;
top:1%;
width:27%;
}
#mainArea > .btnArea{
position:absolute;
left:45%;
top:1%;
text-align:right;
width:45%;
}
#mainArea > .btnArea > div{
position:relative;
display:inline-block;
width:32%;
}
#mainArea > .btnArea > div > .new{
position:absolute;
top:5px;
left:-4px;
width:20%;
}
#mainArea .catch{
position:absolute;
right:-1%;
top:-2%;
width:12%;
/*width:10%;*/
}
#mainArea .masao{
position:absolute;
left: 28.8%;
top: 5.8%;
width: 17.8%;
}
#mainArea .nene{
position:absolute;
left: 44.4%;
top: 14%;
width: 22%;
}
#mainArea .bo{
position:absolute;
left: 55.6%;
top: 40%;
width: 18%;
}
#mainArea .kazama{
position:absolute;
left: 14%;
top: 28%;
width: 25%;
}
#mainArea .shinnosuke{
position:absolute;
left: 26.8%;
top: 32.8%;
width: 38%;
}
#mainArea .sakura{
position:absolute;
left: -1%;
top: 57%;
width: 42%;
}

#window{
position:absolute;
top:0%;
width:100%;
height:100%;
max-height: 64vw;
pointer-events: none;
overflow: hidden;
}
#window .roadshow{
position:absolute;
left:0%;
bottom:-1%;
width: 18%;
}
#window .maeuri{
position:absolute;
right:1%;
bottom:1%;
width:22%;
/*width:20%;*/
pointer-events: auto;
}
#window .maeuri div:nth-of-type(n+2){
margin-top:6px;
}

#bannerArea{
/*下の3行上下センター*/
position:relative;
margin-top:30px;
padding-bottom: 20px;
background:url(images/banner_bg_pc.jpg) repeat-y;
background-size: contain;
}
#bannerArea::before{
position:absolute;
top:0;
left:0;
content:'';
display: inline-block;
width:100%;
height:2px;
background:url(images/banner_line.jpg);
background-size: contain;
}
#bannerArea::after{
position:absolute;
bottom:0;
left:0;
content:'';
display: inline-block;
width:100%;
height:2px;
background:url(images/banner_line.jpg);
background-size: contain;
}
#bannerArea div{
margin:20px 0.5% 0 0.5%;
display:inline-block;
width:18%;
max-width:200px;
}

#snsArea{
margin-top:20px;
}
#snsArea ul{
display:table;
table-layout:fixed;
margin:0 auto 0 auto;
width:98%;
}
#snsArea li{
display:table-cell;
vertical-align:top;
}
#snsArea li:nth-of-type(1){
text-align:left;
}
#snsArea li:nth-of-type(2){
text-align:right;
}
#snsArea li div{
display:inline-block;
}
#snsArea li:nth-of-type(1) div{
margin:0 5px;
width:8%;
}
#snsArea li:nth-of-type(2) div{
margin:0 5px;
width:26%;
}

#note{
margin-top: -1%;
width:100%;
line-height:1.6;
color:#fff;
}
#note .namae{
font-weight:bold;
font-size:1.4rem;
}
#note .sub{
font-size:0.8rem;
}

#copyright{
position:relative;
margin-top:60px;
font-size:0.6rem;
color:#fff;
}
#copyright #icon{
position:absolute;
left:2%;
bottom: -400%;
width:10%;
}

#bannerArea2{
padding:15px 0;
}
#bannerArea2 > div{
display:inline-block;
margin:0 15px 0 0;
width:10%;
}

#gotop{
position:fixed;
right:2%;
bottom:-40%;
width:10%;
z-index:910;
}

/*colorbox*/
.cboxIframe{
background:transparent;
}
#cboxContent{
background:transparent;
}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{
width:0;
height:0;
}
#cboxClose {
top: 0;
right: 0;
width: 50px;
height: 50px;
background: url(images/cb_close.png) no-repeat 0 0;
background-size:100%;
}
#cboxClose:hover {
background-position: 0 0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
background:url();
}

.mobile{
display:none !important;
}
.mobile_table{
display:none !important;
}
.mobile_inline{
display:none;
}


@media (max-width: 959px) {
#loader{
width: 20%;
height:20%;
}

#mainArea .catch{
right:0%;
top:0%;
width:21%;
}
#mainArea .logo{
left:5%;
top:72%;
width:90%;
}
#mainArea .roadshow{
position:absolute;
left:14%;
top:89%;
width:76%;
}
#mainArea .masao{
left: 25%;
top: 15.8%;
width: 27%;
}
#mainArea .nene{
left: 49.2%;
top: 23.2%;
width: 34%;
}
#mainArea .bo{
left: 66.6%;
top: 41.2%;
width: 28%;
}
#mainArea .kazama{
left: 0.5%;
top: 31%;
width: 40%;
}
#mainArea .shinnosuke{
left: 20.4%;
top: 35.2%;
width: 61%;
}
#mainArea .sakura{
left: 0%;
top: 54%;
width: 44%;
}

#window{
position:relative;
top:auto;
max-height:none;
}
#window .maeuri{
position:relative;
margin:20px auto 0 auto;
right:auto;
bottom:auto;
width:90%;
pointer-events: auto;
}
#window .maeuri div:nth-of-type(n+2){
margin-top:10px;
}

.btnArea{
margin-top:20px;
}
.btnArea > div{
margin:5px 1% 0 1%;
position:relative;
display:inline-block;
width:45%;
}
.btnArea > div > .new{
position:absolute;
top:10%;
left:-2%;
width:20%;
}

#bannerArea{
display: block;
padding:10px 0 20px 0;
background:url(images/banner_bg.jpg) repeat-y;
background-size: contain;
}
#bannerArea div{
margin-top:10px;
width:45%;
}

#snsArea ul{
display:block;
width:100%;
}
#snsArea li{
display:block;
}
#snsArea li:nth-of-type(1){
text-align:center;
}
#snsArea li:nth-of-type(2){
margin-top:10px;
text-align:center;
}
#snsArea li:nth-of-type(1) div{
margin:0 1%;
width:13%;
}
#snsArea li:nth-of-type(2) div{
margin:10px 1% 0 1%;
width:40%;
}

#note{
position:relative;
margin-top:20px;
top:0%;
font-size:0.7rem;
}
#note .namae{
font-size:0.9rem;
}
#note .sub{
font-size:0.7rem;
}

#copyright{
margin-top:0;
}
#copyright #icon{
margin: 20px auto 20px auto;
position:relative;
left:auto;
bottom: auto;
width:35%;
}

#bannerArea2{
padding:15px 5%;
width:75%;
text-align:left;
}
#bannerArea2 > div{
margin:2% 2% 0 0;
width:45%;
}

#gotop{
width:20%;
}

/*colorbox*/
#cboxClose {
width: 40px;
height: 40px;
}

.pc{
display:none;
}
.mobile{
display:block !important;
}
.mobile_table{
display:table-cell !important;
}
.mobile_inline{
display:inline;
}
}