@charset "UTF-8";

/*************　下層メインVisual　 *******************************/

.page_mainVisual {
	padding: 40px 0;
	background: #fff;
}

h2.page_main_tit {
  font-family:"Avenir Next", 'Poppins', Verdana, Geneva, sans-serif;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 1;
  margin: 0 0 17px;
}

p.page_main_tit_eng {
	color: #e60012;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
  line-height: 1;
}

.page_image{
  width: 100%;
  height: 355px;
}
.page_image02{
  width: 100%;
  height: 427px;
}

.concept_main{
  background: url(../img/page_main/concept_img.png) no-repeat center center;
  background-size: cover;
}

.shop_main{
  background: url(../img/page_main/shop_img.png) no-repeat center 0;
  background-size: cover;
}

.contact_main{
  background: url(../img/page_main/contact_img.png) no-repeat center 0;
  background-size: cover;
}


/*店舗情報*/

p.shop_txt01{
  font-size: 34px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 9% 0 0;
}






/*************　下層ページ共通　 *******************************/

.post {
	min-height: 200px;
}

.post p {
	margin: 0 0 20px 0;
}

.post p:last-child {
	margin: 0 0 0 0;
}

.padding_box {
	padding: 0 15px 0 15px;
}

.title_box02{
  width: 100%;
  margin: 0 0 40px;
}


h3.page_title01 {
  font-size: 28px;
  font-family:"Avenir Next", 'Poppins', Verdana, Geneva, sans-serif;
  font-weight: 700;
  margin: 0 0 5px; 
  text-align: center;
  line-height: 1.2;
}

h3.page_title02 {
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
  line-height: 1.2;
  border: dotted #999999;
  border-width: 1px 0 1px 0;
  margin: 0 0 40px;
}


h3.page_title03 {
  font-size: 24px;
  margin: 0 0 10px;
}



p.page_title01_sub{
  font-size: 16px;
  color: #e60012;
  text-align: center;
  line-height: 1.2;
  font-weight: bold;
}

h4.page_title01{
  font-family:'Muli', Verdana, Geneva, "sans-serif";
  font-weight: 700;
  text-align: center;
  font-size: 24px;
  margin: 0 0 40px;
  line-height: 1.2;
}

h4.page_title01 span{
  padding: 0 25px;
  background-image: url(../img/common/t_line.jpg), url(../img/common/t_line.jpg);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 60%, 100% 60%;
}



/* コンセプト */

p.concept_txt01{
  font-size: 28px;
  font-weight: bolder;
  margin: 0 0 70px;
  text-align: center;
}

.conceptbox01, .conceptbox02{
  width: 100%;
  position: relative;
  margin: 0 0 80px;
}
.conceptbox01_01{
  width: 70%;
  float: left;
}
.conceptbox01_02{
  width: 30%;
 float: right;
  position: relative;  
}
.conceptbox01_03{
  max-width: 70px;
  width: 100%;
  position: absolute;
  left: 0; right: 0;
  top:20px;
  margin: auto; 
  z-index: 1;
}
.conceptbox01_04{
  max-width:540px;
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 40px 0 0 40px;
  background-color: #fff;
}

.conceptbox02_02{
  width: 70%;
  float: right;
}
.conceptbox02_01{
  width: 30%;
 float: left;
  position: relative;  
}
.conceptbox02_03{
  max-width: 70px;
  width: 100%;
  position: absolute;
  left: 0; right: 0;
  top:20px;
  margin: auto; 
  z-index: 1;
}
.conceptbox02_04{
  max-width:540px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 40px 40px 0 0;
  background-color: #fff;
}

p.concept_txt02{
  writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;
  font-size: 35px;
  font-weight:700;
  line-height: 1;
}




p.concept_txt02 span{
  font-size: 18px;
  color: #e60012;
  font-family:"Avenir Next", 'Poppins', Verdana, Geneva, sans-serif;
}

.conceptbox01_04 p, .conceptbox02_04 p{font-weight: bold;}

p.concept_txt03{
  font-size: 26px;
  font-weight: bolder;
  margin: 0 0 55px;
  text-align: center;
}


/* 店舗情報 */


.shopbox01{
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 20px; 
  margin: -160px 0 0;
}

table.table01{
  width: 100%;margin: 0 0 30px;
}
table.table01 th{
  width: 20%;
  background: #161616;
  color: #fff;
  box-sizing: border-box;
  padding: 20px 25px;
  border-bottom: #fff solid 1px;
}
table.table01 td{
  background: #e2e2e2;
  color: #333
  box-sizing: border-box;
  padding: 20px 25px;
  border-bottom: #fff solid 1px;
}

table.table01 tr:last-child th,table.table01 tr:last-child td{
  border-bottom: none;
}

ul.shop_list01{margin: 0 0 30px;}
ul.shop_list01 li{
  width: 31%;
  margin: 0 3.5% 0 0;
  float: left;
}
ul.shop_list01 li:last-child{margin: 0;}

.mapbox{
  max-width: 1040px;
  width: 100%;
  margin: 0 auto 80px;
}

.shopbox02{width: 100%;display: table;margin: 0 0 40px;}
.shopbox02_01, .shopbox02_02{ display: table-cell; width: 50%;}

.shopbox02_01{
  box-sizing:border-box;
  padding: 0 1% 0 0;
}
.shopbox02_02{
  box-sizing: border-box;
  padding: 0 0 0 1%;
  vertical-align: top;
}

table.table02{
  width: 100%;margin: 0;
}
table.table02 th{
  width: 20%;
  background: #161616;
  color: #fff;
  box-sizing: border-box;
  padding:16px 22px;
  border-bottom: #fff solid 1px;
}
table.table02 td{
  background: #e2e2e2;
  color: #333
  box-sizing: border-box;
  padding:16px 22px;
  border-bottom: #fff solid 1px;
}
table.table02 tr:last-child th,table.table02 tr:last-child td{
  border-bottom: none;
}

.mapbox02{margin: 0 0 60px;}


/* アイテム(一覧) */

.category_menu ul{
  text-align: center;
  margin: 0 0 50px;
}
.category_menu ul li{
  display: inline-block;
  margin: 0 5px 10px;
}
.category_menu ul li a{
  padding: 5px 20px;
  display: block;
  background: #fff;
  border-radius: 20px;
}

.category_menu ul li.now{
  padding: 5px 20px;
  border-radius: 20px;
  color: #fff;
}

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







/* アイテム（詳細） */

.itembox02{
  width: 100%;
  display: table;
  margin: 0 0 50px;
}
.itembox02_01, .itembox02_02{
  display: table-cell;
}

.itembox02_01{
  background: #fff;
  text-align: center;
  vertical-align: middle;
  width: 55%;
  padding: 30px 15px;
  box-sizing: border-box;
}

.itembox02_02{
  box-sizing: border-box;
  padding: 0 0 0 60px;
  width: 45%;
}

.itembox02_02 p.item_txt01{
  width: 160px;
  text-align: center;
  color: #fff;
  font-size: 10px;
  padding: 2px 0;
  border-radius: 10px;  
}


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



p.item_txt02{
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 25px;
}
p.item_txt02 span{
  font-size: 26px;
  color: #e60012;
  padding: 0 5px;
}
p.item_txt02 small{
  font-weight: normal;
  font-size: 14px;
}
p.item_txt03{
  border: #cccccc solid;
  border-width: 1px 0 1px 0;
  padding: 16px 0;
  margin: 0 0 20px;
}
p.item_txt04{margin: 0 0 20px;}

p.item_txt03 span, p.item_txt04 span{font-weight: bold;}

ul.item_list01 li{
  margin: 0 0 10px;
  text-align: center;
}
ul.item_list01 li:first-child{
  background: #bf0000 url(../img/item/icon01.png) no-repeat 97% 85%;
}
ul.item_list01 li:nth-child(2){
  background: #ff9900 url(../img/item/icon01.png) no-repeat 97% 85%;
}
ul.item_list01 li:last-child{
  background: #fff url(../img/item/icon02.png) no-repeat 97% 85%;
}


ul.item_list01 li a{
  color: #fff;
  font-weight: bold;
  display: block;
  padding: 5px 20px;
}













/* お知らせ一覧 */

ul.news_list02{margin: 0 0 40px;}
ul.news_list02 li{
  float: left;
  width: 23.6%;
  margin: 0 1.7% 20px 0;
}
ul.news_list02 li:nth-child(4n+4){margin: 0 0 20px;}

.itembox01{
  position: relative;
}

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

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

.itembox01_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;
}

.itembox01_01:hover img{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}







/* お知らせ（詳細） */

.n_detailsbox01{
  max-width: 880px;
  width: 100%;
  margin: 0 auto 60px;
  background: #fff;
  box-sizing: border-box;
  padding: 9.5%;
}


ul.details_list01{margin: 0 0 20px}
ul.details_list01 li:first-child{float: left;}
ul.details_list01 li:last-child{float: right;}
ul.details_list01 li span.n_shop{
  background: url(../img/common/icon_shop.png) no-repeat 0 50%;
  padding: 2px 0 2px 30px;
  font-size: 14px;
  color: #62c2ee;
}
ul.details_list01 li span.n_item{
  background: url(../img/common/icon_item.png) no-repeat 0 50%;
  padding: 2px 0 2px 30px;
  font-size: 14px;
  color: #ee629a;
}

.detail_content{min-height: 200px;}

















/* メインメニュー 1060px以下から */
@media only screen and (max-width: 1060px){

.padding_box {
	padding: 0 15px 0 15px;
  max-width: 800px;
  width: 100%;
}
  
ul.news_list02{max-width: 765px;width: 100%; margin: 0 auto 40px;}
ul.news_list02 li{
  float: left;
  width:245px;
  margin: 0 5px 20px;
}
ul.news_list02 li:nth-child(4n+4){margin: 0 5px 20px;}

.itembox01{
  position: relative;
  max-width: 245px;
  width: 100%;
}  
  
  
  
  


}

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

.page_mainVisual {
   margin: 72px 0 0 0;
}
  
/* 店舗情報 */
  
.shopbox02{display: block;}
.shopbox02_01, .shopbox02_02{
  display: block;
  max-width: 500px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
  .shopbox02_01{margin: 0 auto 20px;}
  
  
/* アイテム（詳細） */

.itembox02{
  display: block;
}
.itembox02_01, .itembox02_02{
  display:block;
  max-width: 610px;
  width:100%;
  margin: 0 auto;
}

.itembox02_01{margin: 0 auto 30px;}
.itembox02_02{ padding: 0; }
  
  
  

}



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

  ul.news_list02{max-width: 510px;width: 100%; margin: 0 auto 40px;}
  
}





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

/* コンセプト */
  
  
.conceptbox01, .conceptbox02{  
  position: static;
  margin: 0 0 40px;
}
.conceptbox01_01, .conceptbox02_02{
  max-width: 720px;
  width: 100%;
  float: none;
  margin: 0 auto;
} 
  
.conceptbox01_02, .conceptbox02_01{
width: 100%;
float: none;
position: static
}
  
.conceptbox01_03, .conceptbox02_03{
  max-width:inherit;
  width: 100%;
  position: static;
  margin: auto; 
  z-index: 1;
}
  
.conceptbox01_04, .conceptbox02_04{
  max-width:inherit;
  width: 100%;
  position: static;
  box-sizing: border-box;
  padding: 20px ;
  background-color: #fff;
}



  
  p.concept_txt02{
  writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
	-webkit-writing-mode:horizontal-tb;
  line-height: 1.2;
}








}



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

/* 店舗情報 */

table.table01 th,
table.table01 td{
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px 25px;
}
  
ul.shop_list01 li{
  max-width: 300px;
  width:100%;
  margin: 0 auto 30px;
  float: none;
}
ul.shop_list01 li:last-child{margin:0 auto;}  




}






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

  ul.news_list02{max-width: 255px;width: 100%; margin: 0 auto 40px;}
  ul.news_list02 li{float: none;}
  
/* 店舗情報 */
  

table.table02 th,
table.table02 td{
  width:100%;
  display: block;
  box-sizing: border-box;
  padding:10px 22px;
}  
  
  
  
  
  
  
  
}






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

.page_mainVisual {
    margin: 70px 0 0 0;
}

}