@charset "utf-8";

.fade_banner_wrapper {
	position: relative;
    width:100%;
    margin-bottom:130px; /* スライダーのマイナスマージン打消 */
}

.fade_banner_wrapper img {
    max-width:100%;
}

.fade_banner1, .fade_banner2, .fade_banner3, .fade_banner4, .fade_banner5 {
    position: absolute;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

/* バナー1: 0〜8秒 */
@keyframes fade1 {
    0%      { opacity: 0; }
    3.75%   { opacity: 1; }   /* 1.5秒フェードイン */
    15%     { opacity: 1; }   /* 表示継続（6秒） */
    18.75%  { opacity: 0; }   /* フェードアウト */
    100%    { opacity: 0; }
}

/* バナー2: 8〜16秒 */
@keyframes fade2 {
    0%      { opacity: 0; }
    20%     { opacity: 0; }
    23.75%  { opacity: 1; }
    35%     { opacity: 1; }
    38.75%  { opacity: 0; }
    100%    { opacity: 0; }
}

/* バナー3: 16〜24秒 */
@keyframes fade3 {
    0%      { opacity: 0; }
    40%     { opacity: 0; }
    43.75%  { opacity: 1; }
    55%     { opacity: 1; }
    58.75%  { opacity: 0; }
    100%    { opacity: 0; }
}

/* バナー4: 24〜32秒 */
@keyframes fade4 {
    0%      { opacity: 0; }
    60%     { opacity: 0; }
    63.75%  { opacity: 1; }
    75%     { opacity: 1; }
    78.75%  { opacity: 0; }
    100%    { opacity: 0; }
}

/* バナー5: 32〜40秒 */
@keyframes fade5 {
    0%      { opacity: 0; }
    80%     { opacity: 0; }
    83.75%  { opacity: 1; }
    95%     { opacity: 1; }
    98.75%  { opacity: 0; }
    100%    { opacity: 0; }
}

.fade_banner1 { animation-name: fade1; }
.fade_banner2 { animation-name: fade2; }
.fade_banner3 { animation-name: fade3; }
.fade_banner4 { animation-name: fade4; }
.fade_banner5 { animation-name: fade5; }

@media (max-width: 767px) {
  .fade_banner_wrapper {
    height:340px;        /* xs */
    margin-top:0px;      /* xs */
    margin-bottom:0px;   /* xs */
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fade_banner_wrapper {
    height:800px;       /* sm */
    margin-top:300px;   /* sm */
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fade_banner_wrapper {
    height:1000px;      /* md */
    margin-top:300px;   /* md */
  }
}
@media (min-width: 1200px) {
  .fade_banner_wrapper {
    height:800px;       /* lg */
    margin-top:151px;   /* lg */
  }
}