@charset "utf-8";

/**************************************************
Top Page Only
**************************************************/

/*【top-space】 --------------- */

#top-space {
width:300px;
padding:20px 20px 40px;
color:#fff;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
position:absolute;
right:0;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
z-index:1;
}

#top-space-arrow {
width:100%;
padding-top:40px;
float:left;
}

#top-space-arrow p.arrow {
width:50px;
height:50px;
position:absolute;
bottom:-10px;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
}

#top-space-arrow p.arrow a {
color:#fff;
}

#top-space-arrow p.arrow a:before {
font-size:50px;
font-family:"dashicons";
content:"\f347";
vertical-align:middle!important;
}

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


/* 【main image】 --------------- */

/*** slider ***/

#main-img {
width:100%;
float:left;
position:relative;
overflow:hidden;
margin-top:140px;
}

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

.main-img-box {
overflow:hidden;
position:fixed;
top:140px;
left:0;
}

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

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

#main-img .prevslide,
#main-img .nextslide {
width:50px;
height:50px;
cursor:pointer;
position:absolute;
z-index:10;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

#main-img .prevslide {
left:10px;
}

#main-img .prevslide:before {
line-height:50px;
font-size:30px;
font-family:"dashicons";
content:"\f340";
vertical-align:middle!important;
color:#fff;
}

#main-img .nextslide {
right:10px;
}

#main-img .nextslide:before {
line-height:50px;
font-size:30px;
font-family:"dashicons";
content:"\f344";
vertical-align:middle!important;
color:#fff;
}

/*********************************
ページングが必要ない場合
※.wideimg-butをdisplay:none;にする
**********************************/

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

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

.wideimg-but p {
width:13px;
height:13px;
margin:0 5px;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
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:500px;
float:left;
position:relative;
overflow:hidden;
}

#main-still-box {
width:100%;
overflow:hidden;
float:left;
position:fixed;
top:0;
left:0;
}

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

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


/* 【top new post1】 --------------- */

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

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

#top-post1 .txpost-advanced h2 {
width:100%;
text-align:left;
font-size:16px;
float:left;
box-sizing:border-box;
display:table;
}

#top-post1 .txpost-advanced h2 span {
padding:8px 0 8px 8px;
border:0;
float:left;
display:table-cell;
}

#top-post1 #txpost-h2,
#top-post1 #txpost {
width:100%;
float:left;
}

#top-post1 .txpost-box {
width:100%;
margin-bottom:1px;
padding:20px 0;
float:left;
}

#top-post1 #txpost-h2 .txpost-box-in,
#top-post1 #txpost .txpost-box-in {
width:840px;
margin:0 auto;
text-align:left;
}

#top-post1 .txpost-thumbnail {
width:160px;
height:79px;
float:left;
} 

#top-post1 .txpost-thumbnail p {
width:120px;
height:75px;
float:left;
overflow:hidden;
}

#top-post1 .txpost-thumbnail img {
width:120px;
height:auto;
}

#top-post1 #txpost-h2 .txpost-box-right,
#top-post1 #txpost .txpost-box-right {
width:680px;
float:left;
}

#top-post1 .txpost-date,
#top-post1 .txpost-title {
width:100%;
margin-bottom:5px;
float:left;
}

#top-post1 .top-posttags {
width:80%;
text-align:right;
font-size:12px;
float:right;
}

#top-post1 .top-posttags p {
margin-left:5px;
padding:0 5px;
display:inline-block;
}

#top-post1 .top-posttags p a:before {
margin-right:3px;
font-family:"dashicons";
content:"\f323";
vertical-align:middle!important;
}

#top-post1 .top-posttags a {
padding:0 0 0 2px;
float:left;
}

.txpost-cat {
width:100%;
margin-top:40px;
float:left;
}

.txpost-cat p a {
height:50px;
line-height:50px;
padding:0 80px;
font-size:18px;
display:inline-block;
}

.txpost-cat p a:hover {
color:#fff;
}

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


/* 【top new item】 --------------- */

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

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

#top-item h2 {
width:100%;
margin-bottom:30px;
text-align:left;
font-size:16px;
box-sizing:border-box;
display:table;
}

#top-item h2 span {
padding:8px 0 8px 8px;
border:0;
float:left;
display:table-cell;
}

#top-item .top-item-box {
width:280px;
height:365px;
float:left;
}

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

#top-item .top-item-center {
text-align:center;
}

#top-item .top-item-right {
text-align:right;
}

#top-item .top-item-left .top-item-box-in {
width:240px;
text-align:center;
float:left;
}

#top-item .top-item-center .top-item-box-in {
width:240px;
margin:0 auto;
display:inline-block;
}

#top-item .top-item-right .top-item-box-in {
width:240px;
text-align:center;
float:right;
}

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

.top-item-thumbnail span.item-thumbnail img {
width:230px;
height:230px;
border:5px solid #fff;
box-shadow:0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

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

.top-item-title {
width:100%;
height:80px;
float:left;
}

.top-item-title h2.item-title,
.top-item-title h3.item-title {
width:100%;
height:50px;
margin-top:5px;
text-align:left;
float:left;
}

.top-item-title h2.item-title a,
.top-item-title h3.item-title a {
width:100%;
float:left;
word-wrap:break-word;
}

.top-item-price {
width:100%;
float:left;
}

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

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

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

.top-item-cat {
width:100%;
float:left;
}

.top-item-cat p a {
height:50px;
line-height:50px;
padding:0 80px;
font-size:18px;
display:inline-block;
}

.top-item-cat p a:hover {
color:#fff;
}

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


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

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

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

#main-still {
height:auto;
}

#main-still-box {
position:static;
}

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

#top-post1 {
width:100%;
margin-bottom:30px;
}

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

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

#top-post1 .txpost-title {
font-weight:bold;
}

#top-post1 #txpost-h2 .txpost-box-in,
#top-post1 #txpost .txpost-box-in {
width:100%;
}

#top-post1 #txpost-h2 .txpost-box-right,
#top-post1 #txpost .txpost-box-right {
width:70%;
}

.txpost-cat {
margin-top:30px;
}

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

#top-item h2 {
margin-bottom:20px;
}

#top-item-in {
letter-spacing:-0.5em;
}

#top-item .top-item-box {
width:33.33333%;
height:auto;
margin-bottom:20px;
display:inline-block;
float:none;
vertical-align:top;
letter-spacing:normal;
}

#top-item .top-item-left .top-item-box-in,
#top-item .top-item-center .top-item-box-in,
#top-item .top-item-right .top-item-box-in {
width:90%;
}

.top-item-thumbnail {
width:100%;
height:auto;
}

.top-item-thumbnail span.item-thumbnail img {
width:90%;
height:auto;
box-sizing:border-box;
}

.top-item-thumbnail span.item-soldout img {
width:50%;
height:auto;
}

.top-item-title {
height:auto;
}

.top-item-title h2.item-title,
.top-item-title h3.item-title {
height:auto;
}

.top-item-price {
margin-top:10px;
}

.top-item-price p span.price,
.top-item-price p span.soldout {
font-weight:normal;
font-size:12px;
}

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

}

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

@media screen and (max-width:480px){
#main-img {
margin-top: auto;
}
.main-img-box {
top: 0;
}
#top-post1 .txpost-thumbnail,
#top-post1 .txpost-noimage {
width:30%;
height:auto;
} 

#top-post1 .txpost-thumbnail p,
#top-post1 .txpost-noimage p {
width:90%;
height:auto;
}

#top-post1 .txpost-thumbnail img,
#top-post1 .txpost-noimage img {
width:100%;
}

}