@charset "UTF-8";

/* このページだけ body の padding-top を無効化 */
    body.page-top {
      padding-top: 0;
    }

    /* =========================
       HERO: Fullscreen
       ========================= */
    #hero {
      height: 100vh;          /* 画面いっぱい */
      min-height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f9f9f9;
      position: relative;
      opacity: 0;             /* フェードイン準備 */
      transition: opacity 1.6s ease;
    }
    #hero.show {
      opacity: 1;
    }
    #hero .hero-logo {
      width: 260px;
      height: auto;
      display: block;
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 1.4s ease, transform .8s ease;
    }
    #hero.show .hero-logo {
      opacity: 1;
      transform: translateY(0);
    }





/* =========================
     HERO Slideshow Styles
     ========================= */

  /* index.php側で body.page-top { padding-top:0 } は維持 */
  #hero.hero-slideshow{
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #000;
  }

  /* 背景スライド */
  .hero-slides{
    position: absolute;
    inset: 0;
  }

  .hero-slide{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    transform: scale(1.03);
    transition: opacity 1.8s ease, transform 8s ease; /* フェード＋軽いズーム */
    will-change: opacity, transform;
  }

  .hero-slide.is-active{
    opacity: 1;
    transform: scale(1);
  }

/* =========================
   HERO ロゴ位置
   デフォルト：SP〜md
   中央 × 上揃え
   ========================= */
.hero-center{
  position: relative;
  z-index: 2;

  height: 100%;
  display: flex;
  justify-content: center;   /* 左右センター */
  align-items: flex-start;   /* 上揃え */
  padding-top: 12vh;         /* 上から少し下 */
  padding-left: 0;
  padding-right: 0;
}

/* ロゴ共通 */
.hero-logo{
  width: min(320px, 70vw);
  height: auto;
  display: block;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s ease, transform .8s ease;
}

/* フェードイン */
#hero.show .hero-logo{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   lg以上（≥992px：PC）
   右下配置
   ========================= */
@media (min-width: 992px){
  .hero-center{
    justify-content: flex-end; /* 右揃え */
    align-items: flex-end;     /* 下揃え */
    padding-right: 1vw;        /* 右余白 */
    padding-bottom: 8vh;       /* 下余白 */
    padding-top: 0;            /* 上余白は解除 */
  }

  .hero-logo{
    width: 280px;              /* PCは少し引き締め */
  }
}






  /* うっすら暗幕（ロゴを読みやすく） */
  #hero::after{
    content:"";
    position:absolute;
    inset:0;
    /*background: rgba(0,0,0,.25);*/
    z-index:1;
  }


  /* =========================
   OUR COFFEE CTA（hover）
   ========================= */
.cta-store{
  letter-spacing: 0.08em;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.cta-store:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  filter: brightness(1.03);
}

.cta-store:active{
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.cta-store:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(229,128,60,.25), 0 10px 28px rgba(0,0,0,.12);
}

/* 副CTA（outline） */
.cta-store--outline{
  border-radius: 999px;
  letter-spacing: 0.08em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.cta-store--outline:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}