@charset "utf-8";
*, *::before, *::after {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', 'Inter', sans-serif, 'Segoe UI',Tahoma,Geneva,Verdana;
  background-color: #F8F9FA;
  color:#333333;
  line-height: 1.6;
}

p { 
  font-size: clamp(1rem, 2vw + 1rem, 1.25rem); 
  padding: 0 1.5%;
  color:#4A4E69;
  text-align: left;
  line-height: 1.5;
}
h1{
  font-size: clamp(1.6rem, 4vw + 0.5rem, 3.5rem);
  line-height: 1.2;
  color:#5FC9F3;
  font-weight: 600;
}
h2, h3{
  padding: 0 .5%;
}
h2 {
  font-size: clamp(1.75rem, 4.2dvw, 2.5rem); 
  line-height: 1.25;
  color:#1565C0;
}
h3 {                   
  font-size: clamp(1.5rem, 3.6dvw, 2rem); 
  color: #512DA8;
}

a {
  cursor: pointer;
  text-decoration:none;
  color:#5FC9F3;
  transition: all 0.3s ease;
}
a:hover {
  color:#0D47A1;
  text-decoration:underline;
}

.vm-title, .search-container {
  background-color: #F8F9FA;

}
.vm-title {
  top: 0;
  position: fixed;
  width: 100%; 
  height: auto;
  align-items: center; 
  text-align: center;
  z-index: 10000;
}

.search-container {
  display: flex;
  justify-content: center; 
  align-items: center;     
  margin-top: 16%;
  height: auto;           
  padding: 1rem;
  z-index: 9999;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #898989;
  padding: 0.25rem .45rem;
  border-radius: 22px;
  flex-wrap: wrap;
  max-width: 700px;
  background-color: #f9f9f9;
}
.search-box > .logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.search-form > input {
  flex: 1; 
  font-size: 1rem;
  padding: 0;
  height: 38px;
  width: 500px;
  border: none;
  background: transparent;
  outline: none;
  box-sizing: border-box;
}
.search-form > button {
  cursor:pointer;
  align-items: center;
  justify-content: center;
  width:38px;
  height:38px;
  border: none;
  background-image: url('/images/vm-magnifying.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color:transparent;
  outline: none;
}

.naturaltree {
  width: 100%;
  max-width: min(100%);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;  
  align-items: center;     
  height: 80vh; 
}
 svg {
  width: 100%;
  height: 100%;
}
.word {
  font-size: clamp(1.5rem, 3.6dvw, 2rem);
  font-weight: bold;
  cursor: pointer;
  transition: fill 0.3s;
}

.hr-ads {
  padding:.2%;
}

.hr-ads iframe, .hr-ads div, .hr-ads ins{
  width:100%;
  text-align:center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border:0 !important;
}

.hr-line{display:flex;gap:1%;align-items:center;padding:.6% 8%;}
.hr-line::before {content:"";flex:.3;height:1px;background:#898989;}
.hr-line::after{content:"";flex: 2.90;height: 1px;background:#898989;}

footer {
  position: relative;
  padding-top: .5%;
  padding-bottom: 1%;
  text-align: center;
  background-color:#F8F9FA;
}
footer > img{
  width: 250px;
}
footer > p {
  text-align: center;
  font-size: clamp(0.6rem, 2.5vw, .8rem);
  line-height: 1.4;
}

@media (max-width: 600px) {
.search-box > .logo, .search-form > input {
  height: 30px;
}
.search-container {
  padding: .3%;
  position: fixed;
  bottom: 0;
  height: 50px; 
  width: 100%;
  background-color:#F8F9FA;
  z-index: 9000;
}
.search-box {
  padding: 0.12rem .1rem;
  border-radius: 18px;
  width: 100%;
  gap: 0.1rem;
}
p, th, td { 
  font-size: clamp(0.875rem, 2vw, 1.125rem); 
}
h1 { 
  padding-top:0;
  z-index: 999;
}
section > .naturaltree {
  position: relative;
  padding-top: 28%;
  margin-left: 0;
  margin-right: 0;
  max-width: min(100%);
}

footer {
margin-bottom: 16%;
padding: 0;
}
footer > img{
  width: 180px;
  padding: 0;
}

}