@charset "utf-8";
/* ここからTOP */
/* カテゴリーリスト */
.categoryarea__list{
	display: flex;
	flex-wrap: wrap;
}
.categoryarea__list li{
	background:rgba(175, 156, 202, 0.10);
}
.categoryarea__list li img{
/* 	padding:18% 18% 15px; */
	padding:0% 0% 15px;
}
.categoryarea__list li img{
	transform: scale(1);
	transition: transform 1.6s cubic-bezier(.24,.12,0,1),
    -webkit-transform 1.6s cubic-bezier(.24,.12,0,1);
}
/* PCのみ */
@media screen and (min-width:768px) {
	.headlogoarea h1{width: 150px;}
	.categoryarea__list li{width:18.8%;margin-right: 1.5%;margin-bottom: 19px;}
	.categoryarea__list li:nth-child(5n){margin-right: 0;}
	.categoryarea__list li:hover img {-webkit-transform: scale(1.1);transform: scale(1.1);}
}
/* SPのみ */
@media screen and (max-width:767px) {
	.headlogoarea h1{
		width:110px;
		}
  .categoryarea__list li{
	  width:49%;
	  margin-right: 2%;
	  margin-bottom: 7px;
	}
	.categoryarea__list li:nth-child(2n){margin-right: 0;}
}

.zoomimg{
	overflow: hidden;
}
.zoomimg img{
	transition: transform 1.6s cubic-bezier(.24,.12,0,1),
    -webkit-transform 1.6s cubic-bezier(.24,.12,0,1);
}
.zoomimg:hover img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
/* スタッフスタート写真zoom */
.fs-c-coordinationListItem__link{
	overflow: hidden;
}
.fs-c-coordinationListItem__image.fs-c-coordinationImage{
	overflow: hidden;
}
.fs-c-coordinationListItem__link img{
	transition: transform 1.6s cubic-bezier(.24,.12,0,1),
    -webkit-transform 1.6s cubic-bezier(.24,.12,0,1);
}
.fs-c-coordinationListItem__link:hover img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.categoryarea__list li .name{
	text-align: center;
	padding-bottom: 18%;
	color:#090909;
	font-size: 0.86rem;
	letter-spacing: .07em;
}

/* カルーセルスライダー */
.carouselarea{
	overflow: hidden;
}
.carouslider li {
  margin-right: 24px;
}
.lineup-carousel.slick-initialized .slick-slide{
	margin-right: 24px;
}
.blog-carousel.slick-initialized .slick-slide{
	margin-right: 24px;
}
.carouslider li a{
	position: relative;
	display: block;
}
.carouslider li a::before{
	content:"";
	position: absolute;
	top:0;
	left:0;
	background:#b1a8d1;
	width:100%;
	height:100%;
}
.carouslider li .name a:before,.carouslider li .title a:before{
	content:none;
}
.carouslider img {
  display: block;
  width: 100%;
}
.carouslider .slick-list {
  overflow: visible;
}
.carouslider .slick-prev,
.carouslider .slick-next{
	z-index: 20;
	top: auto;
}
.carouslider .slick-prev{
	left:auto;
}
.carouslider .slick-prev:before,
.carouslider .slick-next:before{
	font-family: "Font Awesome 5 Pro";
	font-weight: 500;
	display: block;
	border-radius: 50%;
	border:1px solid #909090;
	text-align: center;
}
.carouslider .slick-prev:before{
	content: "\f053";
}
.carouslider .slick-next:before{
	content: "\f054";
}
.carouslider .slick-active button{
	width:0;
}
.carouselarea .progressbar{
	height:1px;
	background:#ccc;
	position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(18, 18, 18, 0.15);
  background-image: -webkit-gradient(linear, left top, right top, from(#787878), to(#787878));
  background-image: linear-gradient(to right, #787878, #787878);
  background-repeat: no-repeat;
  background-size: 0 100%;
  -webkit-transition: background-size .4s ease-in-out;
  transition: background-size .4s ease-in-out; 
  margin-top: 60px;
}
/* PCのみ */
@media screen and (min-width:768px) {
	.carouslider .slick-prev,
  .carouslider .slick-next{
  	width: 52px;
  	height:52px;
  	bottom:-112px;
  }
  .carouslider .slick-prev:before,
  .carouslider .slick-next:before{
  	font-size: 14px;
  	width: 50px;
  	height: 50px;
  	line-height: 50px;
  	color: #2e2e2e;
  }
  .carouslider .slick-prev{right: 87px;}
  .carouslider .slick-next{right: 14px;}
  .carouselarea .progressbar{width:88%;width: calc(100% - 155px);}
  .carouselarea{padding-bottom:40px;}
  .carouselarea .inner {
    padding-bottom: 30px;
	}
}
/* SPのみ */
@media screen and (max-width:767px) {
	.carouslider .slick-prev,
  .carouslider .slick-next{
  	width: 36px;
  	height:36px;
  	bottom:-91px;
  }
  .carouslider .slick-prev:before,
  .carouslider .slick-next:before{
  	font-size: 12px;
  	width: 33px;
  	height: 33px;
  	line-height: 33px;
  	color: #080808;
  }
  .carouslider .slick-prev{right: 49px;}
  .carouslider .slick-next{right: 7px;}
  .carouselarea .progressbar{width:88%;width: calc(100% - 100px);}
  .carouselarea{padding-bottom:25px;}
}
/* スライダー基本 */
.lineup-carousel li .name{
	font-weight: bold;
	font-size:0.88rem;
	margin-bottom: 8px;
	margin-top: 16px;
}
.lineup-carousel li .price{
	font-size:0.9rem;
	letter-spacing:0.11em;
}
.lineup-carousel li .price span{
	font-size:0.85em;
}
/* PCのみ */
@media screen and (min-width:768px) {
  .lineup-carousel li .name{font-size:0.88rem;}
  .lineup-carousel li .price{color:#3d3d3d;}
}

/* SPのみ */
@media screen and (max-width:767px) {
  .lineup-carousel li .name{font-size:0.78rem;}
  .lineup-carousel li .price{font-size:0.81rem;color:#171717;}
}


/* ブランドリストカルーセル */
.brandlistarea{
	overflow: hidden;
}
.brandlistarea .inner {
	overflow:visible;
}
.brandlistarea__flex{
	position: relative;
}
.brandlistarea__flex:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 100%;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 1;
}
.brandlistarea__flex__title {
	max-width: 420px;
	width: 100%;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
.brandlistarea__flex__carousel {
	width: 100%;
}
/* PCのみ */
@media screen and (min-width:768px) {
  .brandlistarea__flex{display: flex;}
  .brandlistarea__flex__carousel {max-width: calc(100% - 420px);}
}
/* SPのみ */
@media screen and (max-width:767px) {

}

/* ランキング */
.ranking .slick-slide{
	position: relative;
	counter-increment:a;
}
.ranking .slick-slide::after {
	content: counter(a);
	position: absolute;
	padding: 5px 8px 2px 10px;
	width:10px;
	height:24px;
	background:#efefef;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	top: 0px;
	left: 0px;
	font-size: 14px;
	z-index: 10;
}
.ranking .slick-slide:first-child::after{
	background:#ecc902;
	padding: 5px 6px 2px 11px;
	color:#fff;
}
.ranking .slick-slide:nth-child(2)::after{
	background:#b6b6b6;
	color:#fff;
}
.ranking .slick-slide:nth-child(3)::after{
	background:#C47222;
	color:#fff;
}

/* トレンドキーワード */
.tag-title {
  color: #454545;
  position: relative;
  font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}
.tag-title span{
	background: #fff;
	padding-right: 2em;
	z-index:2;
	position: relative;
}
.tag-title::after{
  position: absolute;
  content: "";
  background: #E5E5E5;
  width: 95%;
  height: 1px;
  display: inline-block;
  top: 13px;
  right: 0;
  z-index: 0;
}
.keyword-list {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  font-size: 12px;
  letter-spacing: .1em;
  flex-wrap: wrap;
  justify-content: center;
}
.keyword-list li {
  box-sizing: border-box;
}
.keyword-list li a{
	font-weight: bold;
	letter-spacing: 2.2px;
	font-size: 0.74rem;
}

/* PCのみ */
@media screen and (min-width:768px) {
	#trend {margin:0 auto 120px;}
	.keyword-list {padding: 34px 0;}
  .keyword-list li {padding: 5px;margin: 0 13px;}
}
/* SPのみ */
@media screen and (max-width:767px) {
	#trend {margin:0 auto 50px;}
	.keyword-list {padding: 20px 0;}
  .keyword-list li {padding:3px 7px;}
}

/* ブログ */
.blog-carousel .day{
	font-size: 11px;
	margin-bottom: 8px;
	margin-top: 16px;
}
.blog-carousel .title{
	font-size: 0.88rem;
	color: #3d3d3d;
	letter-spacing: 0.11em;
}
/* PCのみ */
@media screen and (min-width:768px) {
  .blog-carousel .title{font-size: 0.88rem;}
}
/* SPのみ */
@media screen and (max-width:767px) {
  .blog-carousel .title{font-size: 0.78rem;}
}

/* お知らせ */
.infoflex .maintitle{
	margin-bottom: 14px;
}
.infoflex__title{
	max-width: 420px;
	width: 100%;
}
.newslist li{
	border-bottom:1px solid #ccc;
	padding-bottom:23px;
	margin-bottom:23px;
}
.newslist li time{
	display: block;
	padding-bottom:10px;
	color:#585858;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	letter-spacing: .14em;
}
.newslist li a::after {
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
	content: "\f105";
	padding-left: 13px;
	font-size: 15px;
	color: #2f2f2f;
	vertical-align: top;
}

/* PCのみ */
@media screen and (min-width:768px) {
  .infoflex{display: flex;}
  .infoflex__contents{max-width: calc(100% - 420px);width: 100%;}
}
/* SPのみ */
@media screen and (max-width:767px) {
 #staffstart__staff .maintitle{font-size: 1.52rem;}
 .newslist li a{position: relative;display: block;padding-right: 39px;font-size: 0.93rem;}
 .newslist li a::after{position: absolute;right: 12px;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
}











/* TOPメインスライダー */
ul.mainslide{
  opacity: 0;
  transition: opacity .3s linear;
}
ul.mainslide.slick-initialized{
  opacity: 1;
}
ul.mainslide{
/* 	max-height: 85vh; */
	overflow: hidden;
	position: relative;
}
ul.mainslide li img{
  display: block;
  height: 100%;
/*   max-height: 72vh; */
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  font-family: "object-fit: cover; object-position: center;";
}
ul.mainslide li .slider-wrapper {
  width: 100%;
}
.mainslide .slick-dots {
	width:280px;
	left: 50%;
	transform:translateX(-50%);
	-webkit-transform: translateX(-50%);
	margin: auto;
	bottom: 25px;
	display: flex;
	justify-content: space-between;
}
.mainslide .slick-dots li {
	position: relative;
	width: 100%;
	display: inline-block;
	height: 5px;
	padding: 0;
	cursor: pointer;
}
ul.mainslide .slick-dots li button {
  width: 40px;
  height: 5px;
}
ul.mainslide .slick-dots li.slick-active,
ul.mainslide .slick-dots li:hover {
  position: relative;
}
ul.mainslide .slick-dots li button,
ul.mainslide .slick-dots li button:before {
  color: transparent;
  opacity: 0;
}
/* progress bar */
ul.mainslide li .slider-progress {
  width: 100%;
  height: 5px;
  background: rgba(248, 248, 248, 0.78);
}
ul.mainslide li .slider-progress .progress {
  width: 0%;
  height: 5px;
  background: #b1a8d1;
}
/* arrow */
.mainslide .slick-prev,
.mainslide .slick-next{
	z-index: 20;
	top: auto;
	bottom:15px;
	opacity:0.7;
}
.mainslide .slick-prev{
	right: 90px;
	left:auto;
}
.mainslide .slick-next{
	right: 44px;
}
.mainslide .slick-prev:before,
.mainslide .slick-next:before{
	font-family: "Font Awesome 5 Pro";
	font-weight: 500;
	font-size: 14px;
	color: #fff;
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	border-radius: 50%;
	border:1px solid #fff;
	text-align: center;
}
.mainslide .slick-prev:before{
	content: "\f053";
}
.mainslide .slick-next:before{
	content: "\f054";
}
.mainslide .slick-active button{
	width:0;
}
@media screen and (max-width:680px) { 
	.mainslide .slick-prev{right: 51px;width: 39px;height:39px;}
	.mainslide .slick-next{right: 7px;width: 39px;height:39px;}
	.mainslide .slick-prev, .mainslide .slick-next{bottom:-12px;}
}
/* スタッフスタートアニメーション色用 */
.fs-c-coordinationListItem__link{
	position: relative;
	display: block;
}
.fs-c-coordinationListItem__link::before{
	content:"";
	position: absolute;
	top:0;
	left:0;
	background:#b1a8d1;
	width:100%;
	height:100%;
}

/* アニメーション */
/* fade */
.slick-active{
    animation: fadezoom 5s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1.0);
  }
}

.carouslider{
	opacity: 0;
}
.fs-c-coordinationList__list,.carouslider{-webkit-transform: translateX(150px); -ms-transform: translateX(150px); transform: translateX(150px);}
.carouslider.active{
	animation:fadeInLeft 0.8s ease-in-out 0s forwards; 
	opacity: 0;
}
.fs-c-coordinationList__list.active{
	animation:fadeInLeft 0.8s ease-in-out 0s forwards; 
	opacity: 0;
}

/* 色アニメーション */
.carouslider.active li a::before{
animation:backfadeOut 1.0s ease-in-out 0s forwards;
}
.fs-c-coordinationListItem__link::before{
animation:backfadeOut 1.0s ease-in-out 0s forwards;
}

@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(150px); -ms-transform: translateX(150px); transform: translateX(150px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
@keyframes backfadeOut {
 0% { background:#b1a8d1;}
 100% { background:none;}
}
/* トップカテゴリリスト */
.new-categoryarea .name {
  text-align: center;
}
/* PCのみ */
@media screen and (min-width:768px) {
	.categoryarea__list li{width:18.8%;margin-right: 1.5%;margin-bottom: 19px;}
	.categoryarea__list li:nth-child(5n){margin-right: 0;}
	.categoryarea__list li:hover img {-webkit-transform: scale(1.1);transform: scale(1.1);}
}
/* SPのみ */
@media screen and (max-width:767px) {
	.headlogoarea h1{
		width:110px;
		}
  .categoryarea__list li{
	  width:49%;
	  margin-right: 2%;
	  margin-bottom: 7px;
	}
	.categoryarea__list li:nth-child(2n){margin-right: 0;}
}

/* カテゴリアイコン */
.categoryiconarea{
	display: none;
}
.tag-icon {
	display: flex;
}
.tag-icon li {
	font-size:10px;
	text-align: center;
	line-height: 1.25;
	letter-spacing: 0;
}
.tag-icon li:nth-child(n+11){
	display: none;
}
.tag-icon a img {
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 50%;
	margin-bottom: 6px;
}
.topmainimg{
	margin-bottom: 10px;
}
/* PCのみ */
@media screen and (min-width:768px) {
	.categoryiconarea{
		margin-bottom: 60px;
	}
	.tag-icon {
		margin: 0 0 20px;
		padding-top: 20px;
		justify-content: center;
	}
	.tag-icon li {
		margin-right: 10px;
		min-width: 70px;
		width:70px;
	}
	.tag-icon a img {
		width: 60px;
		height:60px;
	}
}
/* SPのみ */
@media screen and (max-width:767px) {
	.categoryiconarea{
		margin-bottom: 30px;
	}
	.tag-icon {
		margin: 0;
		padding-top: 5px;
		padding-left:10px;
		min-height: 105px;
		overflow: auto;
	    -ms-overflow-style: none;
	}
	.tag-icon li {
		margin-right: 10px;
		min-width: 60px;
		width:60px;
	}
	.tag-icon a img {
		width: 58px;
		height:58px;
	}
}