@charset "UTF-8";

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333333;
  background-color: #faf8f5;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#wrap {
  width: 100%;
  overflow: hidden;
}


.pamphlet-banner {
  position: relative;
  width: 100%;
  height: 500px;     
  margin: 0;
  padding: 0;


  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(248, 246, 244, 0.82)),
    url('images/AdobeStock_1114498993.jpg') center / cover no-repeat;

  animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-pamphlet,
.btn-pamphlet:hover,
.btn-pamphlet:focus,
.btn-pamphlet:active {
  text-decoration: none !important; 
}

.btn-pamphlet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  display: inline-flex;
  align-items: center;    
  justify-content: center; 
  gap: 18px;
  
  width: 90%;
  max-width: 500px;
  padding: 22px 40px;
  
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  
  background-color: #c8511b; 
  border-radius: 60px;
  border: 2px solid #c8511b;
  
  box-shadow: 0 12px 28px rgba(200, 81, 27, 0.28);
  
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-pamphlet__text {
  text-decoration: none !important;
  line-height: 1; 
}

.btn-pamphlet__icon {
  font-style: normal;
  font-size: 2.2rem;
  line-height: 1; 
  display: inline-block;
  text-decoration: none !important;
  transition: transform 0.3s ease;
}

.btn-pamphlet:hover {
  background-color: #ffffff;
  color: #c8511b;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
}

.btn-pamphlet:hover .btn-pamphlet__icon {
  transform: translateX(8px);
}


@media screen and (max-width: 768px) {
  .pamphlet-banner {
    height: 350px;
  }

  .btn-pamphlet {
    max-width: 400px;
    padding: 16px 28px;
    font-size: 1.3rem;
  }

  .btn-pamphlet__icon {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 480px) {
  .pamphlet-banner {
    height: 280px; 
  }

  .btn-pamphlet {
    max-width: 320px;
    padding: 14px 20px;
    font-size: 1.15rem;
  }

  .btn-pamphlet__icon {
    font-size: 1.5rem;
  }
}