@charset "UTF-8";

/************* mainVisual *******************************/
#mainimg {
 position: fixed;
 height: 100vh;
 width: 100%;
 z-index: -2;
 top: 0;
 left: 0;
}
.mainImg_wrap {
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 z-index: 10;
 top: 0;
 left: 0;
 width: 100%;
 height: calc(100vh - 90px);
 margin: 90px 0 0 0;
}
.main_img{
 width: 90%;
 text-align: center;
}
.main_img_box{
 height: calc(100vh - 90px);
 margin: 90px 0 0 0;
}
.main_img_box:before{
 content: "";
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
}
.main_img01:before {
 background: url(../img/index/main_img01.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.main_img02:before {
 background: url(../img/index/main_img02.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.main_img03:before {
 background: url(../img/index/main_img03.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.main_img04:before {
 background: url(../img/index/main_img04.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.slide-animation{
    animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.animated_none{
 opacity: 0;
 visibility: hidden;
}



/*画面サイズが1060px以下に適用*/
@media screen and (max-width : 1060px){
.mainImg_wrap {
 margin: 80px 0 0 0;
 height: calc(100vh - 80px);
}	
}


/*画面サイズが767px以下に適用*/
@media screen and (max-width : 767px){
#mainimg {
  height: 80vh;
}
.mainImg_wrap {
 height: calc(80vh - 52px);
 margin: 52px 0 0 0;
}	
.main_img {
    height: auto;
}
.main_img img {
    height: auto;
}
.main_img01:before {
 background: url(../img/index/main_img01_sp.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.main_img02:before {
 background: url(../img/index/main_img02_sp.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.main_img03:before {
 background: url(../img/index/main_img03_sp.jpg) 50% 50% no-repeat;
 background-size: cover;
}
.main_img04:before {
 background: url(../img/index/main_img04_sp.jpg) 50% 50% no-repeat;
 background-size: cover;
}
}


/************トップページ共通**************************************/
.top_Bs01{
 padding: 0 0 80px 0;
 background: #e9e9e9;
}

/*画面サイズが767px以下に適用*/
@media screen and (max-width : 767px){
.top_Bs01{
 padding: 0 0 40px 0;
}	
}


/************オンラインショップ部分**************************************/
.t_bg01{
 position: relative;
 padding: 0 0 80px 0;
 background: #e9e9e9;
 margin: 100vh 0 0 0;
}
.t_bg01_cont01 a{
 background: url("../img/index/top_img01.jpg") 50% 50% no-repeat;
 background-size: cover;
 text-decoration: none;
 display: block;
 padding: 70px 0;
 z-index: 0;
}
.t_bg01_cont01 a:hover{
 opacity: 0.8;
}

.top_Bs02{
 background: #e9e9e9;
}
/*---------スライダー部分--------------------*/
.slider_area {
    overflow: hidden;
}

.slider_performance li a{
 display: block;
}

.slider_performance li.slick-current a{
	pointer-events:auto;
}

.slider_performance {
    width: 100%;	
    max-width: 670px;
    margin: 0 auto;
}

.slick-list {
    overflow: visible!important;
	margin:  0 10px 0;
}

.slick-slide {
 position: relative;
 transform: scale(87%);
 transition: 0.3s ease;
 box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
}
.slick-slide img{
 transition: 0.3s ease;
}
.slick-slide.slick-current:before {
  content: none;
}
.slick-slide.slick-current {
  transform: scale(100%);
}
.slick-slide.slick-current a {
  display: block;
}
.slick-dots > li:first-child:last-child {
    display: none;
}
.slick-dotted.slick-slider {
    margin-bottom: 85px !important;
}
.slick-dots {
    bottom: -53px;
}
.slick-dots li {
    width: 7px;
    height: 7px;
	margin: 0 10px; 
}

.slick-dots li button {
    width: 7px;
    height: 7px;
}

.slick-dots li button:before {
	content:'';
    width: 7px;
    height: 7px;
}
/*---------ここまでスライダー01部分--------------------*/

.top_Bs02 .tit_style02{
 color: #333;
 background: none;
 padding: 0 0 10px 0;
}

/************天下一品のこだわり部分*****************************************/

.t_bg03_inner a{
 text-decoration: none;
 display: block;
 padding: 150px 0;
 transition: .3s;
 position: relative;
}
.t_bg03_inner a:before{
 content: "";
 background: url("../img/index/top_img02.jpg") 50% 50% no-repeat;
 background-size: cover;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: -1;
}
.t_bg03_inner a:hover .tit_style02{
 background: url("../img/common/arrow01.png") 53% 100% no-repeat;
  opacity: 0.8;
}

/************店舗を探す部分*****************************************/
.t_bg04{
 padding: 80px 0 80px;
}
.t_bg04_inner a{
 text-decoration: none;
 display: block;
 padding: 80px 0;
 background: url("../img/index/top_img03.jpg") 50% 50% no-repeat;
 background-size: cover;
 transition: .3s;
}
.t_bg04_inner a:hover{
opacity: 0.8;
}
.t_bg04_inner a:hover .tit_style02{
 background: url("../img/common/arrow01.png") 53% 100% no-repeat;
  opacity: 0.8;
}

/************新着情報部分********************************************/
.top_Bs05 .tit_style02{
 color: #333;
 background: none;
 padding: 0 0 10px 0;
}
.top_Bs05_link {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}

/**********店舗からのお知らせ部分**************************************/
.t_bg04.t_bg06 {
 padding: 0 0 80px;
}
.t_bg06 .t_bg04_inner a{
 background: url("../img/index/top_img04.jpg") 50% 50% no-repeat;
 background-size: cover;
}

/*********FCオーナー、採用情報部分*************************************/
.t_bg07_inner{
 display: flex;
}
.t_bg07_inner a:hover{
 opacity: 0.8;
}
.t_bg07_cont01{
 width: 50%;
 margin: 0 5px 0 0;
}
.t_bg07_cont01 a{
 background: url("../img/index/top_img05.jpg") 50% 50% no-repeat;
 background-size: cover;
 padding: 90px 0;
 text-decoration: none;
 display: block;
}
.t_bg07_cont01 a:hover .tit_style02 {
 background: url("../img/common/arrow01.png") 53% 100% no-repeat;
 opacity: 0.8;
}
.t_bg07_cont01.style02{
 margin: 0 0 0 0;
}
.t_bg07_cont01.style02 a{
 background: url("../img/index/top_img06.jpg") 50% 50% no-repeat;
 background-size: cover;
}

/*********YouTube・MEDIA部分*************************************/
.t_bg08{
 padding: 0 0 60px 0;
}
.t_bg08_inner{
 display: flex;
}
.t_bg08_inner a:hover{
 opacity: 0.8;
}
.t_bg08_cont01{
 width: 50%;
 margin: 0 5px 0 0;
}
.t_bg08_cont01 a{
 background: url("../img/index/top_img07.jpg") 50% 50% no-repeat;
 background-size: cover;
 padding: 80px 0;
 text-decoration: none;
 display: block;
}
.t_bg08_cont01 a:hover .tit_style02 {
 background: url("../img/common/arrow01.png") 53% 100% no-repeat;
 opacity: 0.8;
}
.t_bg08_cont01.style02{
 margin: 0 0 0 0;
}
.t_bg08_cont01.style02 a{
 background: url("../img/index/top_img08.jpg") 50% 50% no-repeat;
 background-size: cover;
}

/**********SNS部分***********************************************/
.t_bg09{
 padding: 0 0 60px 0;
}
.t_bg09_inner{
 max-width: 220px;
 width: 100%;
 display: flex;
 justify-content: space-between;
 margin: 0 auto;
}
.t_bg09_cont01{
 max-width: 100px;
 width: 100%;
 text-align: center;
}
.t_bg09_cont01 a{
 display: block;
 color: #333;
 text-decoration: none;
}
.t_bg09_cont01 a:hover figcaption{
 opacity: 0.8;
}
.t_bg09_cont01 a:hover figure{
 animation: rotate 1s;
}
@keyframes rotate{
 0%{
  transform: rotateY(0);
 }
 100%{
  transform: rotateY(360deg);
 }
}
.t_bg09_cont01 figure{
 margin: 0 0 10px 0;
}
.t_bg09_cont01 figcaption{
 font-size: 16px;
 font-size: 1.6rem;
 font-weight: 600;
}
.t_bg09_cont01.style02{
 max-width: 80px;
}

/*************画面サイズが767px以下に適用　*************/
@media screen and (max-width : 767px){
.t_bg01{
 padding: 0 0 40px 0;
 margin: 80vh 0 0 0;
}
 .t_bg01_cont01 a{
 background: url("../img/index/top_img01_sp.jpg") 50% 50% no-repeat;
 background-size: cover;
  padding: 40px 0;
}
 .t_bg04{
 padding: 40px 0;
}
.t_bg04.t_bg06 {
 padding: 0 0 40px;
}
.t_bg07_inner{
 flex-wrap:wrap;
}
.t_bg07_cont01{
 width: 100%;
 margin: 0 0 5px 0;
}
.t_bg08{
 padding: 0 0 30px 0;
}
.t_bg08_inner{
 flex-wrap:wrap;
}
.t_bg08_cont01{
 width: 100%;
 margin: 0 0 5px 0;
}
.t_bg09{
 padding: 0 0 30px 0;
}
}