@charset "utf-8";
/* CSS Document */


/* 両方==========================================*/

/*topics----------*/
#topics .h2style2 .icon_topics:before {
    content: "";
    width: 32px;
    height: 28px;
    background: url(../img/icon_topic.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -50px;
    left: calc(50% - 18px);
    left: -moz-calc(50% - 18px);
    left: calc(50% - 18px);
}

#topics .topicslist{margin-bottom:40px;}

#topics .topicslist li{
	border-bottom:1px solid #b3b3b4;
	display: table;
	width:100%;
}
#topics .topicslist li:first-of-type{
	border-top:1px solid #b3b3b4;
}

#topics .topicslist li a{
	padding:20px 55px 20px 20px;
	color:#000;
	display: block;
	letter-spacing: 0.05rem;
	position:relative;
}

#topics .topicslist li a:hover{color:#b3b3b4;}

#topics .topicslist li a:before{
	right: 20px;
	top:50%;
    width: 18px;
    height: 1px;
    background: #0cb4ef;
    content:"";
	position:absolute;
	transition: all .3s ease;
}

#topics .topicslist li a:after{
	content:"";
	position:absolute;
	right: 20px;
	top: -webkit-calc(50% - 4px);/*Chrome19~25対応*/
	top: -moz-calc(50% - 4px);
	top: calc(50% - 4px);
    width: 10px;
    height: 1px;
	background: #0cb4ef;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .3s ease;
}

#topics .topicslist li a:hover:before ,#topics .topicslist li a:hover:after{
	right: 12px;
	background: #000;
}




#topics .topicslist li a .date{
	font-weight:bold;
	display:table-cell;
	vertical-align: middle;
	width:9rem;
}

#topics .topicslist li a .topi{
    display: table-cell;
}

/*eventsale----------*/

#eventsale .h2style2 .icon_event:before {
    content: "";
    width: 36px;
    height: 30px;
    background: url(../img/icon_event.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -50px;
    left: calc(50% - 17px);
    left: -moz-calc(50% - 17px);
    left: calc(50% - 17px);
}

/*カテゴリ別表示メニュー*/


#eventsale .category_menu{
    position:relative;
    margin-bottom:40px;
   
}
 
#eventsale .category_menu p{
    font-size:1rem;
    color:#0cb4ef;
    text-align:center;
    padding:20px 0;
}

 
#eventsale .category_menu p:before{
    content: "";
    width: 26px;
    height: 22px;
    background: url(../img/icon_category.png) no-repeat;
    background-size: cover;
    position: absolute;
}

#eventsale .category_menu nav ul li{
    display: inline-block;
    text-align:center;
    padding:20px 0;
    cursor: pointer;
}



#eventsale .category_menu nav ul .on{
    border-bottom:3px solid #000;
  }	
  	
#eventsale .category_menu nav ul .on ,#eventsale .category_menu nav ul li:hover{
    font-weight:bold;
  }	





  	
/*記事詳細ぺージ----------*/

/*eventsale*/

#event .kijititle-block .cate-label{
    padding: 0.2vw 1.2vw;
    display: inline-block;
    background: #81dcfc;
    vertical-align: top;
    color:#fff;
    float:right;
    font-weight:lighter;
}


#event .kijititle-block .sale{
background:#ed3e5c;
}
/*eventsale,topics共通*/

.kijititle-block{margin-bottom:36px;}

.kijititle-block h3{
    font-size:1.34rem;
    font-weight:lighter;
    letter-spacing:0.04rem;
    line-height:2rem;
    padding-bottom:20px;
   
}

.kijititle-block .date{font-weight:bold;}


.kijitext-block{border-bottom: 1px solid #000;}

.kijitext p{font-size:1rem;}

.kijitext .textlink{
    color:#ed3e5c;
    text-decoration:underline;
}

/*記事内画像スライド*/
.swiper-container{
      margin:0 auto 20px;
}

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      margin-bottom:20px;
      height: auto !important;
    }
    
.swiper-slide img{
     /*width:100%;*/
     max-width:100%;
     height:auto;
}

    
.swiper-button-prev ,.swiper-button-next{
    position: absolute;
    z-index: 2;
    width: 50px;
    height: 100%;
    top: 50%;
    cursor: pointer;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
 }
 
.swiper-button-prev{left:0;}
.swiper-button-next{right:0;}

.swiper-button-prev:before ,.swiper-button-next:before{
    content: '';
    position: absolute;
    display: block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-top: 2px solid #9e9e9f;
    border-right: 2px solid #9e9e9f;
    top: calc(50% - 50px);
    transition: all .3s linear;
    -webkit-transition: all .3s cubic-bezier(.18,.06,.23,1);
    transition: all .3s cubic-bezier(.18,.06,.23,1);
 }
 
  
.swiper-button-prev:before{
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 10px;
}

.swiper-button-next:before{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 10px;
}

.swiper-pagination{
    margin:0 auto;
    text-align:center;
}


/*snsシェアボタン*/
.snsblock {
    margin: 50px 0 40px;
    padding-bottom: 26px;
    position: relative;
}

.snsblock p {
    display: inline-block;
    vertical-align: middle;
    color: #3cc4ff;
    font-weight: bold;
    float: left;
    padding-top: 6px;
    font-size:1rem;
}

.snsblock p:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.5px 6.6px 7.5px 6.6px;
    border-color: transparent transparent transparent #3cc4ff;
    position: absolute;
    top: -webkit-calc(50% - 4px);
    top: -moz-calc(50% - 4px);
    top: calc(50% - 4px);
    left:110px;
}

.sns_btn {
  float: left;
  background:#000;
  border-radius: 100%;
  -moz-transition: all 280ms ease;
  -o-transition: all 280ms ease;
  -webkit-transition: all 280ms ease;
  transition: all 280ms ease;
  margin-left: 66px;
  position: relative;
}
.sns_btn a {
  display: table-cell;
  width: 36px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  -moz-transition: all 280ms ease;
  -o-transition: all 280ms ease;
  -webkit-transition: all 280ms ease;
  transition: all 280ms ease;
  margin-bottom: 20px;
}

.sns_btn:hover {
  box-shadow: inset 0 0 0 22px #82dcfe;
  background:#82dcfe;
}

.sns_btn + .sns_btn {
  margin: 0 0 0 20px;
}

.sns_btn i {
    display: inline-block;
    background-size: cover;
    width: 26px;
    height: 26px;
    position: absolute;
    left: -webkit-calc(50% - 13px);
    left: -moz-calc(50% - 13px);
    left: -webkit-calc(50% - 13px);
    top: 6px;
}

.sns_btn .facebook{
    background:url(../img/bicon_fb.png) no-repeat;

}

.sns_btn .twitter{
    background:url(../img/bicon_tw.png) no-repeat;
}
.sns_btn .line{
    background:url(../img/bicon_li.png) no-repeat;
}
  
/*ページ戻進*/

.text-under {
    text-align: center;
    margin: 24px auto 20px;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
}

.text-under li{
    width: -webkit-calc(100% / 3);
    width: -mos-calc(100% / 3);
    width: calc(100% / 3);
    display: inline-block;
}

.text-under a{
   position: relative;
   color:#000;

}

.text-under a:hover{
    color:#b4b4b5;
}

.text-under a.pervbtn{
    float:left;
    padding-left:20px;
    letter-spacing:0.14rem;
}

.text-under a.nextbtn {
    float:right;
    padding-right:20px;
    letter-spacing:0.14rem;
}
.text-under a.ishiran {font-size:1rem;}

.text-under a.pervbtn:before, .text-under a.nextbtn:after{
    content: "";
    width: 8px;
    height: 8px;
    border: 0px;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
    position: absolute;
    top: 30%;
}

.text-under a.pervbtn:hover:before, .text-under a.nextbtn:hover:after{
    border-bottom: solid 1px #b4b4b5;
    border-right: solid 1px #b4b4b5;
}

.text-under a.pervbtn:before{
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    left:4px;
}

.text-under a.nextbtn:after{
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right:4px;
}



/*RECRUITinfo----------*/

#recruit .h2style2 .icon_event:before {
    content: "";
    width: 36px;
    height: 34px;
    background: url(../img/icon_recruit.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -50px;
    left: calc(50% - 17px);
    left: -moz-calc(50% - 17px);
    left: calc(50% - 17px);
}

/*カテゴリ別表示メニュー*/


#recruit .category_menu{
    position:relative;
    margin-bottom:40px;
   
}
 
#recruit .category_menu p{
    font-size:1rem;
    color:#ED3E5C;
    text-align:center;
    padding:20px 0;
}

 
#recruit .category_menu p:before{
    content: "";
    width: 26px;
    height: 24px;
    background: url(../img/icon_category2.png) no-repeat;
    background-size: cover;
    position: absolute;
}

#recruit .category_menu nav ul li{
    display: inline-block;
    text-align:center;
    padding:20px 0;
    cursor: pointer;
}



#recruit .category_menu nav ul .on{
    border-bottom:3px solid #000;
  }	
  	
#recruit .category_menu nav ul .on ,#eventsale .category_menu nav ul li:hover{
    font-weight:bold;
  }	


#recruit .c_1{
	width:100%;
}

#recruit .box{
	border:1px solid #000;
	padding:60px;
	margin-bottom:50px;
}


#recruit .box .trim{
	width:218px;
	height:218px;
	border:1px solid #B4B4B5;
	overflow:hidden;
	position: relative;
	float:left;
	margin-right: 65px;
}

#recruit .box .trim img{
	width:100%;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

#recruit .box .texteare{
	display:inlilne-block;
	position: relative;
	float: right;
    width: 100%;
}


#recruit .box .texteare .category_tag{
	width:186px;
	padding:10px;
	text-align:center;
	box-sizing: border-box;
	position: absolute;
	top:0;
	right:0;
}

#recruit .box.life .category_tag{
	background:#CCE19F;
}

#recruit .box.fashion .category_tag{
	background:#F4DCE8;
}

#recruit .box.food .category_tag{
	background:#FFF385;
}

#recruit .box.other .category_tag{
	background:#A6E8F7;
}

#recruit .box .info_inner{
	margin-bottom:40px;
}
#recruit .box .info_inner::after {
    content: "";
    display: block;
	clear: both;
}



#recruit .box table{
	width:100%;
	border-spacing: 0;
	border-top:none;
	border-top:1px solid #B4B4B5;
}

#recruit .box .detail table{
	border:none;
}

#recruit .box table tr{
	border-bottom:1px solid #B4B4B5;
}

#recruit .box table th{
	width:218px;
	background:#EEEEEF;
	font-weight:normal;
	border-bottom: 1px solid #B4B4B5;
	padding:20px;
	box-sizing: border-box;
}

#recruit .box table td{
	border-bottom: 1px solid #B4B4B5;
	padding:20px 40px;
	box-sizing: border-box;
}

#recruit .box .text_detail{
	margin-top:40px;
}

#recruit .box .detail_btn{
	width:210px;
	background:#000;
	color:#fff;
	text-align:center;
	cursor:pointer;
	padding:10px;
	box-sizing: border-box;
	margin:50px auto -60px;
	position:relative;
}

#recruit .box .detail_btn:hover{
	opacity:0.7;
}

#recruit .box .detail_btn::after{
	content:"";
	position: absolute;
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: calc(50% - 7px);
    right: 23px;
	transition: all .3s ease;
}

#recruit .box .detail.active + .detail_btn::after{
	content:"";
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;

    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    top: calc(50% - 2px);
}

#recruit .box .detail_btn .open_detail{
	display:inline;
}

#recruit .box .detail_btn .close_detail{
	display:none;
}

#recruit .box .detail{
	display:none;
}

#recruit .box .detail.active + .detail_btn .open_detail{
	display:none;
}

#recruit .box .detail.active + .detail_btn .close_detail{
	display:inline;
}


/*PC==========================================*/


@media print, screen and (min-width:768px){

/*eventsale----------*/

#eventsale .c_block{
    justify-content: start;
    margin: 0 auto;
    padding-left:25px;  
    margin-bottom:25px;  
}

#eventsale .c_block .c_3:nth-of-type(3n){margin-right:25px;}

/*#eventsale .c_block .c_3:nth-of-type(4n){margin-right:0px;}*/



	
/*カテゴリー別表示メニュー*/


#eventsale .category_menu{
    text-align: right;
    position:relative;
    border-top:1px solid #000;
    border-bottom:1px solid #000;

   
}
 
#eventsale .category_menu p{
    position: absolute;
    width:25%;
    padding-left:22px;
}

 
#eventsale .category_menu p:before{
    left: -webkit-calc(50% - 66px);
    left: -moz-calc(50% - 66px);
    left: calc(50% - 66px);
    top: 20px;
}

#eventsale .category_menu nav ul li{
    width:25%; 
}



/*RECRUITinfo----------*/
/*カテゴリー別表示メニュー*/
#recruit .category_menu{
    text-align: right;
    position:relative;
    border-top:1px solid #000;
    border-bottom:1px solid #000;

   
}
 
#recruit .category_menu p{
    position: absolute;
    width:16%;
    padding-left:22px;
}

 
#recruit .category_menu p:before{
    left: -webkit-calc(50% - 66px);
    left: -moz-calc(50% - 66px);
    left: calc(50% - 66px);
    top: 20px;
}

#recruit .category_menu nav ul li{
    width:16%; 
}


#recruit .box h3.shop_name{
    position: absolute;
    top: 0;
    left: 280px;
}

#recruit .box .texteare .text{
    position: absolute;
    top: 80px;
    left: 280px;
}



}

/*PC終わり*/


/*PC可変==========================================*/
@media screen and (min-width:767px) and (max-width:1180px){



#eventsale .c_block{padding-left:1.5vw;}

#eventsale .c_block .c_3:nth-of-type(3n){margin-right:1.5vw;}

#eventsale .c_block .c_3:nth-of-type(4n){margin-right:1.5vw;}

#eventsale .c_block .c_3 {

    max-width: 242px;
    margin-right: 1.5vw;
    margin-bottom: 1.5vw;
    width:-webkit-calc(25% - 20px);
    width:-moz-calc(25% - 20px);
    width:calc(25% - 20px);
}
#recruit .box{padding:5.5vw}
#recruit .box .texteare .category_tag{width: 20%;}
#recruit .box .trim{width:19.8vw;height:19.8vw;margin-right:0;}
#recruit .box h3.shop_name,#recruit .box .texteare .text{left: 29.5%;}
#recruit .box table th{width:19.8vw;}
#recruit .box .detail_btn{margin: 50px auto -5.5vw;}
#recruit .category_menu p:before{
	width:2vw;
	height:2vw;
	left: calc(50% - 4em);
	background-size: 100%;
    top: 22px;
}
}



/*スマホ==========================================*/
@media screen and (max-width: 767px) {

/*topics----------*/
#topics .h2style2 .icon_topics:before{
width: 6vw;
    height: 6vw;
    background-size: contain;
    top: -8.5vw;
    left: -webkit-calc(50% - 3vw);
    left: -moz-calc(50% - 3vw);
    left: calc(50% - 3vw);
    }


#topics .topicslist li {
    display: block;
}

#topics .topicslist li a .topi {
    display: block;
    width: 100%;
    height: 1.5em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.h2style2 .icon_topics:before{
    width: 6vw;
    height: 5.5vw;
    background-size: contain;
	top: -8.5vw;
	left: calc(50% - 3vw);
    left: -moz-calc(50% - 3vw);
    left: calc(50% - 3vw);
}


/*eventsale----------*/

#eventsale .h2style2 .icon_event:before {
    width: 6vw;
    height: 5.5vw;
    background-size: contain;
	top: -8.5vw;
	left: calc(50% - 3vw);
    left: -moz-calc(50% - 3vw);
    left: calc(50% - 3vw);
}
	
/*カテゴリー別表示メニュー*/

#eventsale .category_menu{
    text-align: center;
   
}


#eventsale .category_menu nav{
    border-top:1px solid #000;
    border-bottom:1px solid #000;

}

#eventsale .category_menu nav ul{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
}

#eventsale .category_menu p {
    padding-left: 8vw;
}
 
#eventsale .category_menu p:before{
    width: 5vw;
    height: 5.5vw;
    background-size: contain;
    left: -webkit-calc(50% - 11vw);
    left: -moz-calc(50% - 11vw);
    left: calc(50% - 11vw);
    top: 5vw;
}

#eventsale .category_menu nav ul li{
    width: -webkit-calc(100% / 3);
    width: -mos-calc(100% / 3);
    width: calc(100% / 3);

}




/*topics_eventsale_記事詳細ぺージ----------*/

.kijititle-block{margin-top:30px;}


/*記事内画像スライド*/
.swiper-slide img{max-width:78%;}

.swiper-button-prev, .swiper-button-next{
    top: -webkit-calccalc(50% - -5vw);
    top: -mos-calc(50% - -5vw);
    top: calc(50% - -5vw);
}

/*snsシェアボタン*/
.snsblock p{padding-top:2.5vw;}

.snsblock p:after{
    left: -webkit-calc(50% - 22vw);
    left: -moz-calc(50% - 22vw);
    left: calc(50% - 22vw);
    top: 2.5vw;
}

.sns_btn i {
    width: 7.8vw;
    height: 7.8vw;
    background-size: contain;
    left: -webkit-calc(50% - 4vw);
    left: -moz-calc(50% - 4vw);
    left: 1.4vw;
    top: 1.2vw;
}

/*ページ戻進*/
.text-under {margin: 24px auto 10px;}



/*RECRUITinfo----------*/

#recruit .h2style2 .icon_event:before {
    width: 6vw;
    height: 5.8vw;
    background-size: contain;
	top: -8.5vw;
	left: calc(50% - 3vw);
    left: -moz-calc(50% - 3vw);
    left: calc(50% - 3vw);
}
	
/*カテゴリー別表示メニュー*/

#recruit .category_menu{
    text-align: center;
   
}


#recruit .category_menu nav{
    border-top:1px solid #000;
    border-bottom:1px solid #000;

}

#recruit .category_menu nav ul{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#recruit .category_menu p {
    padding-left: 8vw;
}
 
#recruit .category_menu p:before{
    width: 5vw;
    height: 5.5vw;
    background-size: contain;
    left: -webkit-calc(50% - 11vw);
    left: -moz-calc(50% - 11vw);
    left: calc(50% - 11vw);
    top: 20px;
}

#recruit .category_menu nav ul li{
    width: -webkit-calc(100% / 3);
    width: -mos-calc(100% / 3);
    width: calc(100% / 3);
	height: 12.5vw;
    box-sizing: border-box;
    padding: 4vw 0;
}
#recruit .category_menu nav ul li:nth-of-type(1),#recruit .category_menu nav ul li:nth-of-type(2),#recruit .category_menu nav ul li:nth-of-type(3){
	border-bottom:1px solid #000;
}


#recruit .category_menu nav ul li.on {
    border-bottom: 3px solid #000;
}

#recruit .box{
	padding:4.7vw;
	margin-bottom:4.7vw;
}

#recruit .box .trim{
	width:34vw;
	height:34vw;
	float:none;
	margin-right:0;
	margin:5vw auto 0;
}


#recruit .box .texteare .text{
	margin-top:5vw;
}

#recruit .box .texteare{
	margin-left:0;
	margin-top: 14vw;
	float: none;
    width: 100%;
}

#recruit .box .texteare .category_tag{
	top:-14vw;
	left:0;
	right:auto;
	width: 30vw;

}

#recruit .box table th,#recruit .box table td{
	width:100%;
	display:block;
	padding:3vw;
}

#recruit .box table td{
	padding:3vw 10vw;
}

#recruit .box .detail_btn{
	margin: 6vw auto -4.7vw;
}

}
/* スマホ終わり */