@charset "utf-8";
/**************************************************
Top Page Only
**************************************************/

/* [header-space] --------------- */

#header-space {
display:none;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
z-index:1;
}

#header-space-in {
animation:spacedown 1s ease-out;
-webkit-animation:spacedown 1s ease-out;
-moz-animation:spacedown 1s ease-out;
visibility:visible!important;
}

@keyframes spacedown {
 0% {
      opacity:0;
      transform:translateY(300px);
      -webkit-transform:translateY(300px);
      -moz-transform:translateY(300px);
 }
 100% {
        opacity:1;
        transform:translateY(0);
        -webkit-transform:translateY(0);
        -moz-transform:translateY(0);
 }
}

@-webkit-keyframes spacedown {
 0% {
      opacity:0;
      -webkit-transform:translateY(300px);
    }
 100% {
        opacity:1;
        -webkit-transform:translateY(0);
      }
}

@-moz-keyframes spacedown {
 0% {
      opacity:0;
      -moz-transform:translateY(300px);
    }
 100% {
        opacity:1;
        -moz-transform:translateY(0);
      }
}

/* -------------------------------------------------------------- */


/* [main image] --------------- */

/*************** slider ***************/

#main-img {
width:100%;
height:auto;
margin-bottom:20px;
float:left;
overflow:hidden;
position:relative;
}

#main-img ul,
#main-img ul li {
float:left;
display:inline;
overflow:hidden;
}

.main-img-box {
position:absolute;
top:0;
overflow:hidden;
}

.main-img-in {
overflow:hidden;
}

#main-img ul li img {
width:100%;
min-width:100%;
height:auto;
float:left;
}

#main-img .prevslide,
#main-img .nextslide {
width:50px;
height:50px;
background-color:rgba(255,255,255,0.3);
text-align:center;
cursor:pointer;
position:absolute;
z-index:10;
visibility:visible!important;
display:none;
}

#main-img .prevslide {
animation:prev-slide 0.3s ease-out;
-webkit-animation:prev-slide 0.3s ease-out;
-moz-animation:prev-slide 0.3s ease-out;
left:10px;
}

#main-img .nextslide {
animation:next-slide 0.3s ease-out;
-webkit-animation:next-slide 0.3s ease-out;
-moz-animation:next-slide 0.3s ease-out;
right:10px;
}

@keyframes prev-slide {
 0% {
      opacity:0;
      transform:translateX(-100px);
      -webkit-transform:translateX(-100px);
      -moz-transform:translateX(-100px);
 }
 100% {
        opacity:1;
        transform:translateX(0);
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
 }
}

@-webkit-keyframes prev-slide {
 0% {
      opacity:0;
      -webkit-transform:translateX(-100px);
    }
 100% {
        opacity:1;
        -webkit-transform:translateX(0);
      }
}

@-moz-keyframes prev-slide {
 0% {
      opacity:0;
      -webkit-transform:translateX(-100px);
    }
 100% {
        opacity:1;
        -moz-transform:translateX(0);
      }
}

@keyframes next-slide {
 0% {
      opacity:0;
      transform:translateX(100px);
      -webkit-transform:translateX(100px);
      -moz-transform:translateX(100px);
 }
 100% {
        opacity:1;
        transform:translateX(0);
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
 }
}

@-webkit-keyframes next-slide {
 0% {
      opacity:0;
      -webkit-transform:translateX(100px);
    }
 100% {
        opacity:1;
        -webkit-transform:translateX(0);
      }
}

@-moz-keyframes next-slide {
 0% {
      opacity:0;
      -webkit-transform:translateX(100px);
    }
 100% {
        opacity:1;
        -moz-transform:translateX(0);
      }
}

#main-img .prevslide:hover,
#main-img .nextslide:hover {
opacity:0.7;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

#main-img .prevslide:before {
line-height:50px;
font-size:36px;
font-family:"icomoon";
content:"\e906";
vertical-align:middle!important;
}

#main-img .nextslide:before {
line-height:50px;
font-size:36px;
font-family:"icomoon";
content:"\e907";
vertical-align:middle!important;
}

/*******************************************************************
No paging required.
(Set ".wideimg-but" to "display:none;")
********************************************************************/

/*
.wideimg-but {
display:none!important;
}
*/

.wideimg-but {
width:100%;
height:auto;
text-align:center;
position:absolute;
left:0;
bottom:10px;
z-index:10;
visibility:visible;
overflow:hidden;
}

.wideimg-but p {
width:13px;
height:13px;
margin:0 5px;
border:1px solid #fff;
cursor:pointer;
overflow:hidden;
display:inline-block;
z-index:10;
}

.wideimg-but p.slidebut {
filter:alpha(opacity=80)!important;
-moz-opacity:0.8!important;
opacity:0.8!important;
}

/*******************************************************************/


/*************** still ***************/
#main-still {
width:100%;
height:auto;
margin-bottom:20px;
float:left;
overflow:hidden;
position:relative;
}

#main-still-in {
width:100%;
float:left;
}

#main-still-in img {
width:100%;
height:auto;
}

/*************** video ***************/
#main-video {
width:100%;
height:auto;
margin-bottom:20px;
float:left;
overflow:hidden;
position:relative;
}

#main-video-in {
width:100%;
height:auto;
}

#main-video video,
#main-video img {
width:100%;
height:auto;
float:left;
}

/* -------------------------------------------------------------- */


/* [loading] --------------- */

#loading {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1000;
}

#loading p {
width:40px;
height:40px;
margin:-30px 0 0 -30px;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-right-color:transparent;
animation:load 1s infinite linear;
-webkit-animation:load 1s infinite linear;
-moz-animation:load 1s infinite linear;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
}

@keyframes load {
0%{
transform:rotate(0deg);
opacity:0.4;
}
50%{transform:rotate(180deg);
opacity:1;
}
100%{transform:rotate(360deg);
opacity:0.4;
}
}

@-webkit-keyframes load {
0%{
transform:rotate(0deg);
opacity:0.4;
}
50%{
transform:rotate(180deg);
opacity:1;
}
100%{
transform:rotate(360deg);
opacity:0.4;
}
}

@-moz-keyframes load {
0%{
transform:rotate(0deg);
opacity:0.4;
}
50%{
transform:rotate(180deg);
opacity:1;
}
100%{
transform:rotate(360deg);
opacity:0.4;
}
}

/* -------------------------------------------------------------- */


/* [top content] --------------- */

#top-main {
width:870px;
padding-bottom:20px;
text-align:left;
float:right;
}

#top-main #ps-content {
margin-top:20px;
}

/* -------------------------------------------------------------- */


/* [top new post1] --------------- */

#top-post1 {
width:100%;
margin-bottom:20px;
float:left;
}

#top-post1 .txpost-in {
width:100%;
text-align:left;
float:left;
}

#top-post1 .h2-cat {
width:100%;
padding-bottom:10px;
text-align:center;
float:left;
}

#top-post1 .h2-cat .title {
width:100%;
padding:10px 15px;
border:1px solid #e8e8e8;
font-size:30px;
float:left;
position:relative;
box-sizing:border-box;
}

#top-post1 .h2-cat .title h2 {
width:100%;
padding:0 20px;
float:left;
box-sizing:border-box;
position:relative;
}

#top-post1 .h2-cat .title h2:before,
#top-post1 .h2-cat .title h2:after {
font-size:14px;
font-family:"icomoon";
content:"\e905";
position:absolute;
top:50%;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-moz-transform:translate(0%,-50%);
}

#top-post1 .h2-cat .title h2:before {
left:0;
}

#top-post1 .h2-cat .title h2:after {
right:0;
}

#top-post1 .txpost-box {
width:100%;
margin-bottom:10px;
float:left;
position:relative;
}

#top-post1 .txpost-box:last-child {
margin-bottom:0;
}

#top-post1 .txpost-box a {
width:100%;
padding:10px 20px;
float:left;
box-sizing:border-box;
}

#top-post1 .txpost-box::before,
#top-post1 .txpost-box::after {
width:0;
height:1px;
content:"";
position:absolute;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
}

#top-post1 .txpost-box a::before,
#top-post1 .txpost-box a::after {
width:1px;
height:0;
content:"";
position:absolute;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
transition-delay:0s;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
}

#top-post1 .txpost-box:hover::before,
#top-post1 .txpost-box:hover::after {
width:100%;
transition-delay:0s;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
}

#top-post1 .txpost-box:hover a::before,
#top-post1 .txpost-box:hover a::after {
height:100%;
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
}

#top-post1 .txpost-box::before {
right:0;
top:0;
}

#top-post1 .txpost-box::after {
left:0;
bottom:0;
}

#top-post1 .txpost-box a::before {
left:0;
top:0;
}

#top-post1 .txpost-box a::after {
right:0;
bottom:0;
}

#top-post1 .txpost-date {
width:100px;
float:left;
}

#top-post1 .txpost-title {
width:716px;
padding-left:14px;
float:left;
}

#top-post1 .txpost-content {
width:716px;
padding-top:5px;
padding-left:114px;
float:left;
opacity:0.7;
}

#top-post1 .txpost-content span {
float:right;
}

#top-post1 .txpost-content span:after {
margin-left:2px;
font-size:16px;
font-family:"icomoon";
content:"\e900";
vertical-align:-0.15em!important;
}

#top-post1 .txpost-cat {
width:100%;
margin-top:10px;
text-align:right;
float:left;
box-sizing:border-box;
}

#top-post1 .txpost-cat p a:before {
padding-right:5px;
font-family:"icomoon";
content:"\e90c";
vertical-align:-0.1em!important;
}

/* -------------------------------------------------------------- */


/* [top new item] --------------- */

#top-item .txpost-advanced {
width:100%;
padding-bottom:10px;
text-align:center;
float:left;
}

#top-item .txpost-advanced .title {
width:100%;
padding:10px 15px;
border:1px solid #e8e8e8;
font-size:30px;
float:left;
position:relative;
box-sizing:border-box;
}

#top-item .txpost-advanced .title h2 {
width:100%;
padding:0 20px;
float:left;
box-sizing:border-box;
position:relative;
}

#top-item .txpost-advanced .title h2:before,
#top-item .txpost-advanced .title h2:after {
font-size:14px;
font-family:"icomoon";
content:"\e905";
position:absolute;
top:50%;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-moz-transform:translate(0%,-50%);
}

#top-item .txpost-advanced .title h2:before {
left:0;
}

#top-item .txpost-advanced .title h2:after {
right:0;
}

#top-item {
width:100%;
margin-bottom:20px;
text-align:center;
float:left;
}

#top-item-in {
width:100%;
margin:0 auto;
display:inline-block;
position:relative;
}

#top-item .top-item-box1,
#top-item .top-item-box2,
#top-item .top-item-box3 {
margin-bottom:20px;
text-align:center;
float:left;
transition:top 1s ease, left 1s ease;
-webkit-transition:top 1s ease, left 1s ease;
-moz-transition:top 1s ease, left 1s ease;
}

#top-item .top-item-box1,
#top-item .top-item-box2 {
width:300px;
}

#top-item .top-item-box1 .box,
#top-item .top-item-box2 .box,
#top-item .top-item-box3 .box {
float:left;
}

#top-item .top-item-box a {
width:270px;
float:left;
position:relative;
}

#top-item .top-item-box a .box {
width:100%;
padding-top:32px;
float:left;
}

#top-item .top-item-box a::before,
#top-item .top-item-box a::after {
width:0;
height:1px;
content:"";
position:absolute;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
}

#top-item .top-item-box a .box::before,
#top-item .top-item-box a .box::after {
width:1px;
height:0;
content:"";
position:absolute;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
transition-delay:0s;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
}

#top-item .top-item-box a:hover::before,
#top-item .top-item-box a:hover::after {
width:100%;
transition-delay:0s;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
}

#top-item .top-item-box a:hover .box::before,
#top-item .top-item-box a:hover .box::after {
height:100%;
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
}

#top-item .top-item-box a::before {
right:0;
top:0;
}

#top-item .top-item-box a::after {
left:0;
bottom:0;
}

#top-item .top-item-box a .box::before {
left:0;
top:0;
}

#top-item .top-item-box a .box::after {
right:0;
bottom:0;
}

.top-item-thumbnail {
width:100%;
height:204px;
float:left;
position:relative;
}

.top-item-thumbnail span.newicon {
width:38px;
height:22px;
line-height:23px;
font-size:11px;
color:#fff;
position:absolute;
left:20px;
top:-10px;
z-index:5;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}

.top-item-thumbnail span.item-thumbnail img {
border:2px solid #fff;
}

.top-item-thumbnail span.item-soldout img {
background:rgba(0,0,0,0.3);
position:absolute;
left:50%;
top:50%;
z-index:1;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
}

.top-item-title h3.item-title {
width:200px;
height:46px;
margin:10px auto 0;
text-align:left;
display:inline-block;
overflow:hidden;
}

.top-item-price {
width:100%;
border-top:1px solid #e8e8e8;
font-size:17px;
float:left;
box-sizing:border-box;
}

.top-item-price p {
width:100%;
padding:15px 0;
}

.top-item-price p em {
font-size:12px;
}

.top-item-price p span.price,
.top-item-price p span.soldout {
font-weight:bold;
color:red;
}

.top-item-cat {
width:100%;
margin-top:10px;
text-align:right;
float:left;
box-sizing:border-box;
}

.top-item-cat p a:before {
padding-right:5px;
font-family:"icomoon";
content:"\e90c";
vertical-align:-0.1em!important;
}

#top-item .top-item-box {
display:none;
float:left;
}

#top-item .top-item-box.active {
display:block;
}

#item-load {
width:100%;
margin:0 0 25px;
text-align:center;
float:left;
position:relative;
}

#item-load p {
width:100%;
font-weight:bold;
font-size:16px;
position:absolute;
top:0;
left:0;
cursor:pointer;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

#item-load p:before {
width:100%;
position:absolute;
top:50%;
left:0;
content:"";
}

#item-load p span {
display:inline-block;
padding:0 20px;
position:relative;
}

/* -------------------------------------------------------------- */


/**************************************************
***************************************************
width:[1200px] or less.
***************************************************
**************************************************/

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

#main-img .prevslide,
#main-img .nextslide,
.wideimg-but {
display:none!important;
}

#main-img,
#main-still,
#main-video {
height:auto;
}

.main-img-in,
.main-img-box {
position:absolute;
}

#main-video-in {
height:auto;
}

#top-main {
width:100%;
}

#top-main #ps-content {
margin-top:0;
}

#top-post1 .h2-cat {
margin-bottom:10px;
padding-bottom:0;
}

#top-post1 .txpost-box a {
width:100%;
padding:10px 5px;
border-bottom:1px solid #e8e8e8;
box-sizing:border-box;
}

#top-post1 .txpost-box::before,
#top-post1 .txpost-box::after,
#top-item .top-item-box a::before,
#top-item .top-item-box a::after {
width:auto;
height:auto;
position:static;
transition:none;
-webkit-transition:none;
-moz-transition:none;
transition-delay:0;
-webkit-transition-delay:0;
-moz-transition-delay:0;
}

#top-post1 .txpost-box a::before,
#top-post1 .txpost-box a::after,
#top-item .top-item-box a .box::before,
#top-item .top-item-box a .box::after {
width:auto;
height:auto;
position:static;
transition:none;
-webkit-transition:none;
-moz-transition:none;
transition-delay:0;
-webkit-transition-delay:0;
-moz-transition-delay:0;
}

#top-post1 .txpost-box:hover::before,
#top-post1 .txpost-box:hover::after,
#top-item .top-item-box a:hover::before,
#top-item .top-item-box a:hover::after {
width:auto;
transition-delay:0;
-webkit-transition-delay:0;
-moz-transition-delay:0;
}

#top-post1 .txpost-box:hover a::before,
#top-post1 .txpost-box:hover a::after,
#top-item .top-item-box a:hover .box::before,
#top-item .top-item-box a:hover .box::after {
height:auto;
transition-delay:0;
-webkit-transition-delay:0;
-moz-transition-delay:0;
}

#top-post1 .txpost-date {
width:100%;
}

#top-post1 .txpost-title {
width:100%;
padding-top:5px;
padding-left:0;
}

#top-post1 .txpost-title:before {
width:auto;
background:none;
position:static;
}

#top-post1 .txpost-content {
display:none;
}

#top-item {
margin-bottom:30px;
}

#top-item .top-item-box {
width:50%;
float:left;
}

#top-item .top-item-box1,
#top-item .top-item-box2,
#top-item .top-item-box3 {
width:100%;
float:none;
display:inline-block;
}

#top-item .top-item-box1 .box,
#top-item .top-item-box2 .box,
#top-item .top-item-box3 .box {
float:none;
display:inline-block;
}

}

/**************************************************
***************************************************
width:[666px] or less.
***************************************************
**************************************************/

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

#top-item {
text-align:left;
}

#top-item .txpost-advanced {
margin-bottom:10px;
padding-bottom:0;
}

#top-post1 .h2-cat h2.post1-title,
#top-item .txpost-advanced h2 {
font-size:18px;
}

#top-post1 .h2-cat h2:before,
#top-post1 .h2-cat h2:after,
#top-item .txpost-advanced h2:before,
#top-item .txpost-advanced h2:after {
top:0;
}

#top-item .top-item-box {
width:100%;
}

#top-item .top-item-box1,
#top-item .top-item-box2,
#top-item .top-item-box3 {
width:100%;
margin-bottom:20px;
}

#top-item .top-item-box1,
#top-item .top-item-box2,
#top-item .top-item-box3,
#top-item .top-item-box1 .box,
#top-item .top-item-box2 .box,
#top-item .top-item-box3 .box {
float:left;
}

#top-item .top-item-box a {
width:100%;
padding:2px;
box-sizing:border-box;
}

#top-item .top-item-box a .box {
padding-top:0;
}

.top-item-thumbnail {
width:30%;
height:auto;
padding-top:0;
}

.top-item-thumbnail span.newicon {
line-height:22px;
position:absolute;
left:0px;
top:-5px;
}

.top-item-thumbnail .item-thumbnail img {
width:90%;
height:auto;
float:left;
}

.top-item-thumbnail span.item-soldout img {
width:90%;
height:auto;
left:0;
top:0;
transform:translate(0,0);
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
}

.top-item-title {
width:70%;
height:auto;
padding-left:10px;
float:left;
box-sizing:border-box;
}

.top-item-title h3.item-title {
width:100%;
padding:0;
height:42px;
margin-bottom:5px;
box-sizing:border-box;
float:left;
}

.top-item-price {
height:auto;
padding:0;
text-align:center;
}

.top-item-price p {
border:0;
}

#item-load {
margin:0 0 10px;
}

}

/**************************************************
***************************************************
width:[860px] or more and width:[1200px] or less.
***************************************************
**************************************************/

@media screen and (min-width:860px) and (max-width:1200px){

#top-item .top-item-box {
width:33.33333%;
}

}