@charset "UTF-8";
/* 
// entry
*/



/*
// entry
*/

.entry{
  background: var(--color-yellow);
  padding: 4.5rem 0 5rem;
}

.entry__heading{
  font-size:3.5rem;
  font-weight: 500;
  margin: 0 auto 7.5rem;
  position: relative;
  text-align: center;
  z-index: 2;
}

.entry__heading:after{
  animation: entryArrow 2s ease infinite;
  background: url("../images/common/arrow--entry_contents.svg") no-repeat center top/100% auto;
  content:'';
  height: 13.8rem;
  left:50%;
  position: absolute;
  top:2em;
  transform: translateX(-50%);
  width: 3.2rem;
}

@keyframes entryArrow {
  0% {
    background-position: center top -13.8rem;
  }
  
  50% {
    background-position: center top 0;
  }
}


.entry__btn--wrap{
  height: 38rem;
  margin: 0 auto 4rem;
  position: relative;
  width: 38rem;
}

.entry__btn{
  align-items: center;
  animation: entryContentsBtn 2s ease-out infinite;
  background: url("../images/common/entry__btn--bg.webp") no-repeat center center/42rem auto;
  border-radius: 50%;
  color:#fff;
  display: flex;
  font-size:8.5rem;
  font-weight: 300;
  height: 100%;
  justify-content: center;
  left:50%;
  overflow: hidden;
  position: absolute;
  top:50%;
  transition: .2s;
  transform:translate(-50%,-50%);
  width: 100%;
}

@keyframes entryContentsBtn {
  0% {
    height: 100%;
    width: 100%;
  }
  
  38% {
    height: 100%;
    width: 100%;
  }
  
  48% {
    height: 107%;
    width: 107%;
  }
}

.entry__btn:hover{
  background-size:44rem auto;
  filter:brightness(1);
  text-shadow: 0 0 1rem rgba(255,255,255,0.5);
}

.entry__title{
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 0.5em;
  text-align: center;
}

.entry__description{
  font-size: 2rem;
  text-align: center;
}




/*******************************

sp style

*******************************/

@media screen and (max-width:767px){

  .entry{
    padding: 6rem 0 5.5rem;
  }

  .entry__heading{
    font-size:3.5rem;
    margin: 0 auto 7.5rem;
  }

  .entry__heading:after{
    height: 13.8rem;
    top:2em;
    width: 3.2rem;
  }
  
  .entry__btn--wrap{
    height: 33rem;
    margin: 0 auto 4rem;
    position: relative;
    width: 33rem;
  }

  .entry__btn{
    background: url("../images/common/entry__btn--bg.webp") no-repeat center center/calc(42 * 3.3/3.8 * 1rem) auto;
    font-size:7.4rem;
  }
  
  .entry__title{
    font-size: 3.2rem;
    margin: 0 0 0.5em;
  }

  .entry__description{
    font-size: 2.5rem;
  }
}