/************************************
** スライドショー「swiper」設定
************************************/

/*トップページ*/
.swiper-container{
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  background-color: #e3e8ee;
  position:relative;
  z-index: 0;
  /*display: none;/*フェードイン用に非表示*/
}
.swiper-wrapper .swiper-slide img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/*スライドショーに重なる文字アニメーション*/
.s-fade-text {
position: absolute;
display: none;/*フェードイン用に非表示*/
/*位置*/
top: 40%;
right: 3%;
z-index: 20;
/*テキスト*/
line-height: 150%;
/*color: #ffffff;*/
color: rgba(255,255,255,0.8);
font-size: 9.0rem;
font-weight: 700;
text-align: left;
/*-webkit-text-stroke: 0.05em rgba(49, 24, 0,0.7);*/
letter-spacing:0.2em;
text-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
/*形状*/
/*background-color: rgba(255, 255, 255, 0.7);
border-radius: 15px;
width: 500px;
height: 350px;  
padding: 20px;  
border: solid 5px rgba(247, 235, 204, 1.0);*/
  /*-webkit-text-stroke: 1px #FFF;  text-stroke: 1px #FFF;*/
  -webkit-text-stroke: 1px #311800;  text-stroke: 1px #311800;    
/*マスク画像*/  
  /*color: transparent;
  text-decoration: none;
  background: url('https://aozoramarche.kellch.jp/html/user_data/assets/img/siteimg/ham_2-w1920xh1080-min-min.jpg') no-repeat center center/cover;
  background-clip: text;
  -webkit-background-clip: text;*/
}
.s-fade-text .touhoku,.s-fade-text .tabeyou{
font-size: 12.0rem;  
}
.s-fade-text2{
  font-family: 'Courier New', Courier, monospace;
  position: absolute;
  display: none;/*フェードイン用に非表示*/
  /*位置*/
  top: 60%;
  right: 0;
  z-index: 20;  
  line-height: 150%;
  color: #f7ebcc;
  font-size: 5.0rem;
  font-weight: 900;
  text-align: left;
}
/*おいしい一覧*/
.mainvisualBox{
  position: absolute;
  display: none;/*フェードイン用に非表示*/
  /*位置*/
  bottom: 10%;
  right: 6%;
  z-index: 20;  
  line-height: 150%;
  /*color: #1f4c1e;*/
  color: #f7ebcc;
  font-size: 3.0rem;
  font-weight: 500;
  /*background-color: rgba(247, 235, 204,0.9);*/
  background-color: rgba(140, 35, 0,0.9);  
  border-radius: 10px;
  padding: 10px 20px;
}
.mainvisualBox .left{
  font-weight: 500;
  padding-right: 12px;
}
.mainvisualBox:hover{
  background-color: rgba(31, 76, 30,0.7); 
  color: #f7ebcc;
  transition: 0.5s; 
}


/*ページネーション*/
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
 
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
:root {
  --swiper-navigation-color: #FDFBFB;
  --swiper-pagination-color: #69A481;
}
.swiper-pagination-bullet-active{
  background: #1f4c1e;
}
/*ナビゲーションカスタマイズ*/
.swiper-button-prev,.swiper-button-next{
  background-color: #FDFBFB;
  width: 2.0em;
  height:2.0em;
  border-radius: 50%;
}

.swiper-button-next::after, 
.swiper-button-prev::after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2.5em;
    color: #69A481;
}
.swiper-button-next::after{
    content: "\f0a9";
}
.swiper-button-prev::after{
    content: "\f0a8";
}
.swiper-button-prev:hover::after,.swiper-button-next:hover::after{
  color: #A46969;
}

  /*1023px以下*/
  @media screen and (max-width: 1280px){
      .s-fade-text {
      /*位置*/
      top: 40%;
      right: 7%;
      z-index: 20;
      /*テキスト*/
      line-height: 150%;
      font-size: 6.0rem;
    }
    .s-fade-text .touhoku,.s-fade-text .tabeyou{
      font-size: 9.0rem;  
    }
  }

  /*1023px以下*/
  @media screen and (max-width: 1023px){
      .s-fade-text {
      /*位置*/
      top: 40%;
      right: 7%;
      z-index: 20;
      /*テキスト*/
      line-height: 150%;
      font-size: 4.8rem;
    }
    .s-fade-text .touhoku,.s-fade-text .tabeyou{
      font-size: 7.5rem;  
    }    
  }

  /*834px以下*/
  @media screen and (max-width: 834px){
      .s-fade-text {
      /*位置*/
      top: 40%;
      right: 7%;
      z-index: 20;
      /*テキスト*/
      line-height: 150%;
      font-size: 4.2rem;
    }
    .s-fade-text .touhoku,.s-fade-text .tabeyou{
      font-size: 6.0rem;  
    }       
  }
  /*768px以下*/
  @media screen and (max-width: 768px){
      .s-fade-text {
      /*位置*/
      top: 40%;
      left: 5%;
      z-index: 20;
      /*テキスト*/
      line-height: 150%;
      font-size: 5.0rem;
    }
    .s-fade-text .touhoku,.s-fade-text .tabeyou{
      font-size: 7.0rem;  
    }    
    /*おいしい一覧*/
    .mainvisualBox{
      /*位置*/
      bottom: 15%;
      right: 10%;
      font-size: 2.0rem;
      font-weight: 500;
      padding: 10px 20px;
    }
    .mainvisualBox .left{
      font-weight: 500;
      padding-right: 12px;
    }     
  }
  @media screen and (max-width: 665px){
      .s-fade-text {
      /*位置*/
      top: 40%;
      left: 5%;
      z-index: 20;
      /*テキスト*/
      line-height: 150%;
      font-size: 3.0rem;
    }
    .s-fade-text .touhoku,.s-fade-text .tabeyou{
      font-size: 5.0rem;  
    }   
    .s-fade-text2{
      /*位置*/
      top: 60%;
      right: 0;
      z-index: 20;  
      line-height: 150%;
      font-size: 3.5rem;
    }       
  }  
  /*480px以下*/
  @media screen and (max-width: 480px){
      .s-fade-text {
      /*位置*/
      top: 40%;
      left: 5%;
      z-index: 20;
      /*テキスト*/
      line-height: 150%;
      font-size: 2.5rem;
    }
    .s-fade-text .touhoku,.s-fade-text .tabeyou{
      font-size: 3.8rem;  
    } 
    .s-fade-text2{
      /*位置*/
      top: 60%;
      right: 0;
      z-index: 20;  
      line-height: 150%;
      font-size: 2.8rem;
    }     
    /*おいしい一覧*/
    .mainvisualBox{
      /*位置*/
      bottom: 15%;
      right: 3%;
      font-size: 2.0rem;
      font-weight: 500;
      padding: 10px 20px;
    }
    .mainvisualBox .left{
      font-weight: 500;
      padding-right: 12px;
    }        
  }
  @media screen and (max-width: 320px){
      .s-fade-text {
      /*位置*/
      top: 40%;
      left: 5%;
      z-index: 20;
      /*テキスト*/
      line-height: 150%;
      font-size: 2.5rem;
    }
    .s-fade-text .touhoku,.s-fade-text .tabeyou{
      font-size: 3.2rem;  
    } 
    .s-fade-text2{
      /*位置*/
      top: 60%;
      right: 0;
      z-index: 20;  
      line-height: 150%;
      font-size: 2.8rem;
    }     
    /*おいしい一覧*/
    .mainvisualBox{
      /*位置*/
      bottom: 15%;
      right: 3%;
      font-size: 2.0rem;
      font-weight: 500;
      padding: 10px 20px;
    }
    .mainvisualBox .left{
      font-weight: 500;
      padding-right: 12px;
    }        
  }