@charset "utf-8";
.main-title-box {
background: linear-gradient(135deg, #e8f5e9 0%, #dcebe0 100%);
padding: 6.4rem 4.8rem;
text-align: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border-bottom: 0.8rem solid #4CAF50;
margin-bottom: 8rem;
position: relative;
overflow: hidden;
}

.main-title-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle at center, rgba(0, 100, 0, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
z-index: 0;
}

.main-title {
color: #2c3e50;
font-size: clamp(3.08rem, 5vw, 5.32rem); 
font-weight: 700;
line-height: 1.3;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap; 
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 1;
}

.title-logo {
width: clamp(35px, 8vw, 70px); 
height: auto; 
margin-left: 20px;
vertical-align: middle;
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.2));
animation: bounceIn 1s ease-out forwards;
}


.title-logo {
  width: 90px;
  height: auto;
  flex-shrink: 0;
}


.popup-gallery {
display: flex;
max-width: 44.8rem;
margin: 0 auto;
padding: 0 1.6rem;
}

.pdf-file {
  max-width: 100%;
  height: auto;
  min-width: 0;
  cursor: pointer;
}


.modal {
display: none;
position: fixed;
z-index: 1000;
padding-top: 4.8rem;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90%;
}

.close {
position: absolute;
top: 3.2rem;
right: 4rem;
color: white;
font-size: 3.2rem;
font-weight: bold;
cursor: pointer;
}


#CONTENTS .item-button {
position: relative;
padding: 1.728rem 3.2rem;
max-width: 36.8rem;
margin: 4.8rem auto;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
text-align: center;
border-radius: 4.48rem;
color: #fff !important;
font-size: 1.92rem;
font-weight: bold;
background: url(/smileup/reform/img/petreform/icon_arrow.svg) right 1.6rem center no-repeat #0076c5;
    background-size: 2.56rem auto;
}

#CONTENTS .item-button:hover {
background-color: #0076c5c9;
transition: 0.5s;
}



.pdf-img{
  padding-left: 4.16rem;
  max-width: 85%;
}



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


  .item-button{
    padding: 2.304rem 3.84rem;
    max-width: 32rem;
    width: 60%;
  }

  .pdf-img {
    padding-left: 4.8rem;
}
}


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

.pdf-img {
  max-width: 90%;
  padding-left: 4.16rem;
}

}

@media (max-width: 768px) {
.main-title-box {
padding: 3.2rem 1.6rem;
border-bottom: 0.8rem solid #4CAF50;
}
.main-title {
flex-direction: column;
font-size: clamp(2.52rem, 7vw, 3.92rem);
text-align: center;
}
.title-logo {
width: clamp(30px, 16vw, 55px);
margin-left: 0;
margin-top: 1.6rem;
}
}

@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3) translateY(-20px);
}
50% {
opacity: 1;
transform: scale(1.1) translateY(5px);
}
70% {
transform: scale(0.95) translateY(-2px);
}
100% {
transform: scale(1) translateY(0);
}
}