@charset "UTF-8";

/************* mainVisual *******************************/


/* =======================================
	Slider_box
========================================== */

#mainimg { 
	margin:0px; 
	padding:0; 
}

.slider_box{
  position: relative;
}

/*.slider_box img{width:100%;}*/

.slider_box ul.slider li{
  padding: 0;
}

.slider_box ul.slider .slider1 {
 	background: url(../img/index/main_img08.png) center bottom no-repeat;	
	background-size: cover;	
	}
.slider_box ul.slider .slider2 {
	background: url(../img/index/main_img06.png) center center no-repeat;	
	background-size: cover;	
	}
.slider_box ul.slider .slider3 {
	background: url(../img/index/main_img07.png) center center no-repeat;
	background-size: cover;	
	}

.slider_box ul.slider .s_txtbox{
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  padding: 43% 0 0;
}
.slider_box ul.slider p{
  font-size: 18px;
  font-weight: bold;
  text-align: center;  
  background: #fff;
  position: absolute;
  bottom:0;
  max-width: 1040px;
  width: 100%;

}
.slider_box ul.slider p span{
  width: 70px;
  height: 65px;
  background:#000 url( ../img/common/arrow02.png) no-repeat 50% 50%;
  position: absolute;
  top:0;
  right: 0;
}
.slider_box ul.slider p a{
  display: block;
  padding: 18px 0;
}
.slider_box ul.slider p a:hover{text-decoration: none;}



/* clear
--------------------------------------------------------- */
.wideslider ul:after { 
	content: "."; 
	height: 0; 
	clear: both; 
	display: block; 
	visibility: hidden; 
}
.wideslider ul { 
	display: inline-block; 
	overflow: hidden; 
}


/************* トップページ *******************************/


/*お知らせ*/

ul.news_list{margin: 0 0 40px;}
ul.news_list li{
  float: left;
  width: 23.6%;
  margin: 0 1.7% 0 0;
}
ul.news_list li:last-child{margin: 0;}

.topbox01{
  width: 100%;
  position: relative;
}
p.hot_icon{
  position: absolute;
  top:-7px;
  left: -5px;
  z-index: 5;
}

.topbox01_01 img{
  border-radius: 10px 10px 0 0;
}

.topbox01_02{
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  padding: 5%;
  box-shadow: rgba(0, 0, 0, 0.10) 0px 2px 6px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.10) 0px 2px 6px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.10) 0px 2px 6px 0px;
}


.n_item_bg{background: url(../img/common/icon_item.png) no-repeat 0 0;}
.n_shop_bg{background:url(../img/common/icon_shop.png) no-repeat 0 0;}


dl.news_txt01{padding: 0 0 0 30px;}
dl.news_txt01 dt{font-size: 12px;}
dl.news_txt01 dd{font-weight: bold;}

span.n_shop{
  font-size: 10px;
  color:#62c2ee;
  float: right;
  text-transform: uppercase;
}
span.n_item{
  font-size: 10px;
  color:#ee629a;
  float: right;
  text-transform: uppercase;
}

.topbox01 a:hover {text-decoration: none;}


.top_inner { 
	max-width: 1080px; 
	width: 100%;
	margin: 0 auto;
  padding: 0 0 0 20px;
}


#masonry{
	overflow: hidden;
  margin: 0 auto;
  position: relative;
}

#masonry li {
	margin: 0 20px 20px 0;
}

#masonry li img {
}

#container {
    width: 100%;
    /*overflow: hidden;*/
    margin: 0 auto;
}

.item {
  webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  margin:0 20px 20px 0;
}


.topbox04{
  background: #fff;
  width: 245px;
  height: 245px;
  border-radius: 5px;
  overflow: hidden;
}


.topbox04 img{
  border-radius: 5px 5px 0 0;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.topbox04:hover img{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}







p.toptxt01{
  padding: 17px 20px 16px;
}


.topbox02{
  width: 245px;
  height: 450px;
  border-radius: 5px;
}

.topbox03{
  width: 510px;
  height: 215px;
    border-radius: 5px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c545b7+0,c54545+100 */
background: rgb(197,69,183); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(197,69,183,1) 0%, rgba(197,69,69,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(197,69,183,1) 0%,rgba(197,69,69,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(197,69,183,1) 0%,rgba(197,69,69,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c545b7', endColorstr='#c54545',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  box-sizing: border-box;
  padding: 25px 40px 15px;
  color: #fff;
}

p.toptxt02{
  text-align: center;
  margin:0 0 10px;
}
p.toptxt03{
  text-align: center;
  font-weight: bold;
  margin: 0 0 15px;
}
p.toptxt04{
 font-size: 13px;
}

.topbox05{
  position: relative;
}

.topbox05_01{
  width: 245px;
  height: 190px;
  overflow: hidden;
}

.topbox05_02{
  background: #fff;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  padding: 15px;
  position: relative;
}

.topbox05_02.topbox05_02_1,
.topbox05_02.topbox05_02_8{ 
	padding: 17px 15px;
}

.topbox05_02.topbox05_02_1 dd,
.topbox05_02.topbox05_02_8 dd{ 
	font-size: 18px;
}


.topbox05_03{
  width: 510px;
  height: 440px;
  overflow: hidden;
}

.topbox05_03 img,
.topbox05_01 img{
  border-radius: 5px 5px 0 0;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.topbox05_03:hover img,
.topbox05_01:hover img{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}


.topbox06, .topbox07{
  width: 245px;
  height: 215px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 10px;
}

.topbox06 img, .topbox07 img{
   -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.topbox06:hover img{
  -webkit-transform: rotate(5deg) scale(1);
  transform: rotate(5deg) scale(1);
}
.topbox07:hover img{
  -webkit-transform: rotate(-5deg) scale(1);
  transform: rotate(-5deg) scale(1);
}

.topbox08, .topbox09{
  width: 245px;
  height: 215px;
  box-sizing: border-box;
  border-radius: 5px;
  padding:43px 10px;
}

.t_color01{background-color:#161616;}
.t_color02{background-color:#141663;}
.t_color03{background-color:#511216;}

.topbox08 img, .topbox09 img{
   -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.topbox08:hover img{
  -webkit-transform: rotate(8deg) scale(1.1);
  transform: rotate(8deg) scale(1.1);
}
.topbox09:hover img{
  -webkit-transform: rotate(-8deg) scale(1.1);
  transform: rotate(-8deg) scale(1.1);
}



dl.top_list02 dt span{
  max-width: 140px;
  width: 100%;
  height: 22px;
  line-height: 22px;
  padding:0;
  text-align: center;
  border-radius: 11px;  
  position: absolute;
  top:-13px;
  color: #fff;
  font-size: 10px;
}

span.anime{background-color:#946761; }
span.gag{background-color: #b80040;}
span.military-t{background-color:#4eacb8;}
span.military-g{background-color: #7f1f69;}
span.favorite{background-color:#c8b568; }
span.character{background-color: #147472;}
span.sw-pa{background-color:#1d518b;}
span.ecobag{background-color: #b1623b;}


p.pickup_icon{
  position: absolute;
  top:-7px;
  left: -5px;
  z-index: 5;
}









/*画面サイズが1080px以下に適用*/
@media screen and (max-width : 1080px){

  
#container {
  overflow: hidden;
  max-width: 795px;
  width: 100%;
  margin: 0 auto;
}  
  
p.pickup_icon{
  position: absolute;
  top:0;
  left:0;
} 
  
#masonry{
	max-width: 795px;
  width: 100%;
  margin: 0 auto;
}  
  
  
  
}








/*画面サイズが1060px以下に適用*/
@media screen and (max-width : 1060px){

.slider_prev {background: none;}
.slider_next {background: none;}


/*************　トップページ *******************************/

.top_left01 {
    max-width: 1024px;
    width: 100%;
    float: none;
	margin: 0 auto 20px;
}

.top_right01 {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    float: none;
}
  
    
  

}



/*画面サイズが980px以下に適用*/
@media screen and (max-width : 980px){

#mainimg {
    margin: 72px 0px 0px 0px;
}
  
  
/*お知らせ*/

ul.news_list li{
  float: left;
  width: 50%;
  margin: 0;
}
ul.news_list li:last-child{margin: 0;}  
  
.topbox01{
  max-width: 245px;
  width: 100%;
  margin: 0 auto 20px;
} 
  
  
  
  

}



/*画面サイズが815px以下に適用*/
@media screen and (max-width : 815px){

#container {
  max-width: 530px;
  width: 100%;
}
  
#masonry {
  max-width: 530px;
  width: 100%;
}  
  
  
  
  
  
}



/*画面サイズが767px以下に適用*/
@media screen and (max-width : 767px){
 
 
.slider_box ul.slider .slider1 {
  background: url(../img/index/main_img08s.png) center center no-repeat;	
	background-size: 100%  auto;	
	}
.slider_box ul.slider .slider2 {
	background: url(../img/index/main_img06s.png) center center no-repeat;	
	background-size: 100%  auto;	
	}
.slider_box ul.slider .slider3 {
	background: url(../img/index/main_img07s.png) center center no-repeat;
	background-size: 100%  auto;	
	}  
.slider_box ul.slider .s_txtbox{
  padding: 60% 0 0;
} 

}


/*画面サイズが640px以下に適用*/
@media screen and (max-width : 640px){
	

	
dl.info_dl {
    padding: 0 0 15px 0;
    margin: 0 0 15px 0;
}

dl.info_dl dt{ 
	float: none;
	max-width: 640px; 
	width: 100%;
}

dl.info_dl dd{ 
	padding:7px 25px 0 0; 
}
  
  
  
.slider_box ul.slider p span{
  width: 50px;
  height: 50px;
  
}
.slider_box ul.slider p a{
  display: block;
  padding: 10px 0;
}  
  
  
  
.slider_box ul.slider .s_txtbox{
  padding: 47% 0 0;
}   

  
  
/*お知らせ*/

ul.news_list li{
  float: none;
  width:100%;
  margin: 0;
}
ul.news_list li:last-child{margin: 0;}  
  
.topbox01{
  max-width: 245px;
  width: 100%;
  margin: 0 auto 20px;
}   
  
  
  

}


/*画面サイズが550px以下に適用*/
@media screen and (max-width : 550px){

  
#container {
  max-width: 265px;
  width: 100%;
}
  
#masonry {
  max-width: 265px;
  width: 100%;
}    
  
.topbox05_03{
  width:245px;
  height: 190px;
  overflow: hidden;
}  


.topbox05_02.topbox05_02_1,
.topbox05_02.topbox05_02_8{ 
	padding: 15px;
}

.topbox05_02.topbox05_02_1 dd,
.topbox05_02.topbox05_02_8 dd{ 
	font-size: 14px;
}
  
  
.topbox03 {
  width:100%;
  height: auto;
} 
  
  
  
  
  
}


/*画面サイズが520px以下に適用*/
@media screen and (max-width : 520px){

.slider_box ul.slider .s_txtbox {
    padding: 65% 0 0;
}




}







/*画面サイズが400px以下に適用*/
@media screen and (max-width : 400px){
	
#mainimg {
    margin: 60px 0px 0px 0px;
}  
  
  


}