/* styles.css */



/* Global Styles */
body {
  font-family: 'Manrope', 'Noto Sans', sans-serif;
  background-color: #fff;
}

@media (min-width: 1024px) {
  .container_for_xpadding {
    padding-left: 10%;
    padding-right: 10%;
  }
}

.layout-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.layout-content-container {
  display: flex;
  flex-direction: column;
  /* max-width: 960px; */
  flex-grow: 1;
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid-cols-[repeat(auto-fit,minmax(158px,1fr))] {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.text-[#141414] {
  color: #141414;
}

.text-[#757575] {
  color: #757575;
}

.text-sm {
  font-size: 0.875rem;
}

.text-base {
  font-size: 1rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.font-black {
  font-weight: 900;
}

.leading-tight {
  line-height: 1.2;
}

.leading-normal {
  line-height: 1.5;
}

.font-medium {
  font-weight: 500;
}

.text-center {
  text-align: center;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

img:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 0px 0px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.6s ease-in-out;
}

img:hover {
  transform: scale(1.006);
  transition: transform 0.3s ease-in-out;
}
img.full-width {
  width: 100%;
  height: auto;
}

/* ホバーを無効化 */
img[src="images/runa.png"]:hover {
  transform: none !important;
  box-shadow: none !important;
}
img[src="images/topcon.png"]:hover {
  transform: none !important;
  box-shadow: none !important;
}
img[src="images/m.png"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

img[src="images/other.png"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

img[src="images/wuc.png"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

.hover-none img:hover {
  transform: none !important;
  box-shadow: none !important;
}

.santa img:hover {
  transform: none !important;
  box-shadow: none !important;
}


/* Responsive Styles */
@media (min-width: 480px) {
  .@[480px]:gap-8 {
    gap: 2rem;
  }

  .@[480px]:h-12 {
    height: 3rem;
  }

  .@[480px]:px-5 {
    padding-left