/* === Global === */
html{
  scroll-behavior: smooth !important;
}

body{
  background-color: #FFF;
  --screen-base-size: 540;
  font-family: "Noto Serif JP", serif;
}

img{
  width: 100%;
}
/* === Global /E === */



/* === Layout === */
.l-container{
  width: 100%;
  max-width: 540px;
  /* margin: 0 auto; */
  margin: 0 auto ;
}
/* === Layout /E === */


/* === Component === */
.c-cta-sec{
  position: relative;
}

.c-cta-sec-btn{
  width: 98%;
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%);
}

.c-fixed-cta{
  display: none;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;

  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);

  /* 20260507 CTA アニメーション追加  */
  animation: cta-animation 0.5s ease 0s infinite alternate;
}

/* 20260507 CTA アニメーション追加 start */
@keyframes cta-animation{
  0%{
    transform: translateX(-50%) scale(0.9);
  }
  100%{
    transform: translateX(-50%) scale(1);
  }
}
/* 20260507 CTA アニメーション追加 end */
/* === Component /E === */


/* === Project === */
/* * * FAQ Section * * */
.p-faq{
  margin-top: min(50px, calc(50 / var(--screen-base-size) * 100vw));
  padding: 0 20px;
}

.p-faq__title{
  color: #807e74ff;
  font-size: 28px;
  text-align: center;
  margin-bottom: min(30px, calc(30 / var(--screen-base-size) * 100vw));
}

.p-faq-item:not(:last-child){
  margin-bottom: min(30px, calc(30 / var(--screen-base-size) * 100vw));
}

.p-faq-item-question{
  padding: 
    min(10px, calc(10 / var(--screen-base-size) * 100vw))
    min(10px, calc(10 / var(--screen-base-size) * 100vw));
  position: relative;
  padding-right: 30px;
}

.p-faq-item-question.is-active::after{
  transform: translateY(-50%) rotate(0);
}

.p-faq-item-question::after{
  content: '';
  display: block;
  width: 15px;
  height: 10px;
  background-color: #333;
  clip-path: polygon(50% 100%, 0 0, 100% 0);

  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

.p-faq-item-question__text{
  font-size: 16px;
}
.p-faq-item-question__text::before{
  content: 'Q';
  font-size: min(20px, calc(20 / var(--screen-base-size) * 100vw));
  color: #807e74ff;
  line-height: 1.25;
}

.p-faq-item-answer{
  display: none;
  width: 90%;
  margin: 30px auto 0;
  background-color: rgb(236, 236, 236);
  padding: 
    min(10px, calc(10 / var(--screen-base-size) * 100vw))
    min(20px, calc(20 / var(--screen-base-size) * 100vw));
}

.p-faq-item-answer__text{
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* === FAQ Section /E === */
/* * * Before/After Section * * */
.p-change{
  position: relative;
  width: 90%;
  margin: 30px auto;
}

.p-change__after{
  height: min(300px, calc(300 / var(--screen-base-size) * 100vw));
  object-fit: cover;
}

.p-change-before-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
}

.p-change__before{
  width: 100%;
  height: 100%;
  object-fit: cover;

  position: relative;
  animation: p-change__before-animation 3s ease-in-out infinite alternate;
}

.p-chage__bar{
  width: 5px;
  height: 100%;
  background-color: #FFF;

  position: absolute;
  left: 100%;
  top: 0;
  /* transform: translateX(100%); */
  animation: p-change__bar-animation 3s ease-in-out infinite alternate;
}

.p-change__circle{
  width: 30px;
  height: 30px;
  background-color: #FFF;
  border-radius: 100%;

  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-12.5px, -50%);
  animation: p-change__bar-animation 3s ease-in-out infinite alternate;
}


@keyframes p-change__before-animation{
  0%{
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
  }
  100%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

@keyframes p-change__bar-animation{
  0%{
    left: 0;
  }
  100%{
    left: 100%;
  }
}
/* * * Before/After Section /E * * */


/* * * Map Section * * */
.p-map{
  margin: 15px 0;
  padding: 0 20px;
}

.p-map-wrap{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}
/* * * Map Section /E * * */
/* === Project /E === */


/* === Utility === */
/* === Utility /E === */