@charset "utf-8";

.pc_appear,
#wrapper img.pc_appear {
  display: block;
}
.sp_appear,
#wrapper img.sp_appear {
  display: none;
}

/*----------------------------------------
	common
----------------------------------------*/
body{
  line-height: 1.4;
}
header {
  border-bottom: none;
}
#js_menu{
  display: none;
}
#spMenuWrap{
  display: none;
}
footer .container{
  border-top: none;
}
.footerPageLi{
  /* display: none; */
}

header .text {
  width: 16%;
  float: right;
  margin: 15px 66px 15px auto;
}

.page_top_nav{
  display: none;
}

.contents{
  max-width: 1280px;
  margin: 0 auto;
}

.shop_viname {
    font-weight: bold;
}


/*----------------------------------------
	main_wrapper
----------------------------------------*/
#main_wrapper{
  width: 100%;
}

#main_wrapper .app_link{
  width: 100%;
  background: #000;
  padding: 1% 0;
}
#main_wrapper .app_link:hover{
  opacity: .8;
}

#main_wrapper h2.main a:hover{
  display: block;
  opacity: .7;
  
}
/*----------------------------------------
	video_wrapper
----------------------------------------*/
#video_wrapper .section_title{
  margin: 4.6875% auto 0;
  background-image: linear-gradient( -45deg, #ffffff 40%, #818181 40%, #818181 50%, #ffffff 50%, #ffffff 90%, #818181 90%, #818181 );
  background-size: 22px 22px;
  background-repeat: repeat-x;
  background-position: center bottom 20px;
  width: 97%;
}

.cat_page #video_wrapper .section_title{
  background-image: linear-gradient( -45deg, #F8FAEA 40%, #818181 40%, #818181 50%, #F8FAEA 50%, #F8FAEA 90%, #818181 90%, #818181 );
}

.cat_page #video_wrapper{
  background: #F8FAEA;
  padding-bottom: 4.6875%;
}
.cat_page #video_wrapper h3{
  padding-top: 4.6875%;
  width: 90%;
}

#video_wrapper h3 img{
  background: #fff;
  padding: 0 3.33%;
}

.cat_page #video_wrapper h3 img{
  background: #F8FAEA;
}

#video_wrapper .lead_wrapper{
  box-sizing: border-box;
  width: 90%;
  min-height: 100px;
  padding: 20px 0 10px;
  max-width: 891px;
  background-image: url(../img/bg_video.svg);
  background-size: contain;
  background-repeat: no-repeat; 
  margin: auto;
}

#video_wrapper .lead_title {
    margin: 2.3% auto 0;
    width: 60%;
    text-align: center;
    line-height: 1.6;
    font-size: 16px;
}

.section_title {
  text-align: center;
  padding: 10px 20px;
}

.title-red {
  color: #e2363c;
  font-size: 2rem;
  background: #fff;
  font-weight: bold;
  vertical-align: middle;
  padding: 10px;
  display: inline;
}

#goods_wrapper .title-red {
  background: #fdf4f5;
}

/*----------------------------------------
	video_area
----------------------------------------*/
.video_area{
  width: 96%;
  max-width: 990px;
  margin: 4% auto 0;
}

.video_area .gallery-cell{
  display: block;
  margin-right: 1.616161616%;
  box-sizing: border-box;
}
.video_area .gallery-cell:nth-of-type(4n){
  margin-right: 0;
}
.video_area .gallery-cell .video_thum {
  position: relative;
  padding: 0 0 15px;
}
.video_area .gallery-cell .video_thum img:hover{
  opacity: 0.8;
  
}
.video_area .gallery-cell .video_thum:after{
  position: absolute;
  content: "";
  width: 30.50847458%;
  padding-top: 23.30508475%;
  background-image: url("../img/ico_play.svg");
  background-size: cover;
  opacity: 1;
  top: 31%;
  left: 34.74576271%;
}
.video {
  float: left;
  margin-right: 3rem;
}

.video_area .gallery-cell .video_info {
  text-align: left;
  font-size: 14px;
  padding-bottom: 1em;
  float: right;
}
.video_name {
  font-size: 1.3rem;
  font-weight: bold;
}

#video_wrapper .sub_title {
  letter-spacing: 0;
}

/*----------------------------------------
	.btn_more
----------------------------------------*/

.btn_more {
  width: 50%;
  max-width: 416px;
  box-sizing: border-box;
  position: relative;
  margin: auto;
}

.btn_more a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  text-decoration: none;
  font-size: 1em;
  color: #8cc135;
  line-height: 1.5;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.8px;
  /* background: #ffffff; */
  border-radius: 5px;
  border: 1px solid #8cc135;
  padding: 6.5px 0 6.5px;
  height: 45px;
}

.btn_more a:after {
	position: absolute;
	content: '';
	width: 7px;
	height: 7px;
	border-top: solid 2px #8cc135;
	border-right: solid 2px #8cc135;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 10%;
  margin-top: -4px;
}
.btn_more a:hover{
  color: #ffffff;
  background: #8cc135;
	transition: .5s;
}
.btn_more a:hover:after {
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
	transition: .5s;
}
/* nav
----------------------------------------*/
nav{
  width: 96%;
  margin: 2.3% auto 0;
}

nav .pagenav{
  width: 100%;
  max-width: 990px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

nav .pagenav_item {
  width: 25%;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 10px;
  margin-left: 1%;
}

nav .pagenav_item:first-child{
  margin-left: 0;
}

nav .pagenav_item a{
  display: flex;
  /* justify-content: center; */
  align-items: center;
  text-align: left;
  text-decoration: none;
  font-size: 1.2em;
  color: #e2363c;
  line-height: 1.5;
  font-weight: bold;
  background: #fdf4f5;
  border-radius: 5px;
  border: 1px solid #e2363c;
  height: 70px;
  box-sizing: border-box;
}@media screen and (max-width: 1280px){
  nav .pagenav_item a {
    font-size: 1.125vw;
  }
}

.cat_page nav .pagenav_item a{
  color: #8cc135;
  background: #fdf4f5;
  border: 1px solid #8cc135;
}

.cat_page nav .pagenav_item.active_class {
  display: flex;
  align-items: center;
  text-align: left;
  text-decoration: none;
  font-size: 1em;
  line-height: 1.5;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  padding: 10px 0 10px 20px;
  height: 70px;
  box-sizing: border-box;
  
  color: #ffffff;
  background: #8cc135;
  border: 1px solid #8cc135;
}

nav .pagenav_item a:after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 3px #e2363c;
	border-right: solid 3px #e2363c;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 48%;
	right: 8%;
  margin-top: -4px;
}
.cat_page nav .pagenav_item.active_class:after{
  position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 3px #ffffff;
	border-right: solid 3px #ffffff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 48%;
	right: 8%;
  margin-top: -4px;
}
.cat_page nav .pagenav_item a:after {
  border-top: solid 3px #8cc135;
	border-right: solid 3px #8cc135;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
nav .pagenav_item a:hover{
  color: #8cc135;
  background: #fdf4f5;
	transition: .5s;
}
nav .pagenav_item a:hover:after {
  border-top: solid 3px #8cc135;
  border-right: solid 3px #8cc135;
	transition: .5s;
}


/*----------------------------------------
	goods_wrapper
----------------------------------------*/
#goods_wrapper{
  padding-bottom: 4.6875%;
  position: relative;
  background: #fdf4f5;
}

.cat_page #goods_wrapper{
  padding-bottom: 0;
}

#goods_wrapper .section_title{
  margin: 4.6875% auto 0;
  background-image: linear-gradient( -45deg, #fdf4f5 40%, #818181 40%, #818181 50%, #fdf4f5 50%, #fdf4f5 90%, #818181 90%, #818181 );
  background-size: 22px 22px;
  background-repeat: repeat-x;
  background-position: center bottom 20px;
  width: 97%;
}

#goods_wrapper h3 img{
  background: #ffffff;
  padding: 0 3.33%;
}

#goods_wrapper .lead_title{
  margin: 2.3% auto 0;
  width: 43.75%;
  text-align: center;
  line-height: 2;
  font-size: 1.15em;
}
#goods_wrapper .ico_img{
  position: absolute;
  top: 39%;
}
#goods_wrapper .ico_img:nth-of-type(1){
  width: 15%;
  left: 10%;
}
#goods_wrapper .ico_img:nth-of-type(2){
  width: 14%;
  right: 11%;
}

.sub_title{
  margin: 4.6% auto 0;
  text-align: center;
  line-height: 1.6;
  font-weight: bold;
  font-size: 2.45em;
}
.goods_cat01 .sub_title {
  margin: 8% auto 0;
}
.cat_area{
  margin-top: 10%;
}
.cat_area.goods_cat01{
  margin-top: 0;
}


ul.item_area{
  width: 96%;
  max-width: 990px;
  margin: 5% auto;
}
ul.item_area:after{
  content: "";
  clear: both;
  display: block;
}
ul.item_area li.item{
  float: left;
  width: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
}
ul.item_area li.item a{
  text-decoration: none;
}
ul.item_area li.item a img:hover{
  opacity: 0.7;
}
@media screen and (max-width: 800px){
  ul.item_area li.item{
    width: 31%;
    margin-right: 3.5%;
  }
}
ul.item_area li.item:nth-of-type(3n){
  margin-right: 0;
}
ul.item_area .photo{
  position: relative;
  border: 1px solid #dddddd;
  margin-bottom: 15px;
}
ul.item_area .photo:after{
  position: absolute;
  content: "";
  background-image: url(../img/ico_modal.svg);
  background-size: cover;
  width: 20.13422819%;
  padding-top: 20.13422819%;
  right: 0;
  bottom: 0;
  line-height: 0;
}
ul.item_area .shop_name,
ul.item_area .price
{
  font-size: 14px;
  line-height: 1.8;
}
ul.item_area .item_name{
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8;
}


/*----------------------------------------
  .top_btn
----------------------------------------*/
.top_btn a{
  line-height: 1;
  width: 55%;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 1.3em;
  font-weight: bold;
  color: #000;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 3% 0;
  position: relative;
  margin: 6% auto;
}@media screen and (max-width: 1000px){
  .top_btn a{
    font-size: 1.375vw;
  }
}
.top_btn a:after {
	position: absolute;
	content: '';
  width: 12px;
  height: 12px;
	border-top: solid 3px #000;
	border-right: solid 3px #000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 10%;
	margin-top: -5px;
}

.top_btn a:hover{
  color: #000;
  background: #fff;
  border: 2px solid #000;
	transition: .5s;
}
.top_btn a:hover:after {
  border-top: solid 2px #000;
  border-right: solid 2px #000;
	transition: .5s;
}


/*----------------------------------------
  .gallery
----------------------------------------*/

.video_area .gallery button,
.video_area .gallery ol
{
  display: none;
}
.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  counter-increment: gallery-cell;
}

@media screen and (min-width: 768px) {
  .video_area .gallery{
    position: static !important;
  }
  
  .video_area .gallery .flickity-viewport{
    overflow: visible !important;
  }
  .video_area .gallery .flickity-slider{
    transform: translateX(0) !important;
  }
  .video_area .gallery .gallery-cell{
    position: static !important;
    display: inline-block;
    width: 23.78787879%;
    margin-top: 20px;
    }
}

#video_wrapper .video_area .video_inner {
  width: 90%;
}

#video_wrapper .video_area .video_inner .video_info {
  width: 34%;
}

#language {
  display: none;
}